Chat

Starter block that opens centered — greeting, composer, suggestions — and settles into the message list once the first message is sent.

Open in

How can I help?

Installation

npx shadcn@latest add miskibin/chat-components/chat

Also installs chat-input, prompt-suggestions, message-list, model-picker, mode-picker, chat-sidebar, chat-navbar, theme-toggle.

Usage

import { Chat } from "@/components/chat"

export default function Page() {
  return (
    <div className="h-svh">
      <Chat />
    </div>
  )
}

Examples

Own the opening

An empty chat centers the greeting, the composer, and the starter prompts. Both halves are props, so the block opens in your product's voice — and the same ChatInput element stays mounted when the first message drops it to the bottom, so nothing jumps.

<Chat
  greeting="Where should we start?"
  suggestions={[
    { id: "audit", label: "Audit this file for dead code", icon: <Trash2 /> },
    { id: "tests", label: "Write tests for the reducer", icon: <FlaskConical /> },
  ]}
/>

Own the state

The block keeps messages in local state so it renders standalone. Copy components/chat.tsx into your app and replace send with your API call — everything it composes (MessageList, ChatInput, PromptSuggestions) is installed as a sibling you can rewire.

const send = React.useCallback(async (text: string) => {
  setMessages((prev) => [
    ...prev,
    { id: crypto.randomUUID(), content: text, sender: "user" },
  ])
  setIsGenerating(true)

  const response = await fetch("/api/chat", {
    method: "POST",
    body: JSON.stringify({ text }),
  })
  // append assistant chunks as they stream in …
}, [])

Compose the full app shell

Chat is only the conversation column. Wrap it with the sidebar and navbar to get a complete layout.

<div className="flex h-svh min-h-0">
  <ChatSidebarDnd onDrop={handleDrop}>
    <ChatSidebar collapsed={collapsed} onCollapsedChange={setCollapsed} edgeZones>
      <ChatSidebarItemList items={chats} activeId={activeId} sortable />
    </ChatSidebar>
  </ChatSidebarDnd>

  <div className="flex min-w-0 flex-1 flex-col">
    <ChatNavbar title={title} right={<ThemeToggle floating={false} />} />
    <Chat className="flex-1" />
  </div>
</div>

API reference

Chat

greetingReact.ReactNode = "How can I help?": Headline above the centered composer while the conversation is empty. It disappears with the first message.
suggestionsPromptSuggestion[]: Starter prompts listed under the centered composer; picking one sends it. Defaults to three generic starters, and [] hides the list.
classNamestring: Merged last onto the flex column. The block fills its parent, so give that parent a height.

Data slots

Every part below is addressable from a parent, so you can restyle internals without forking the component.

chatchat-greetingchat-composer