Chat

Markdown

A complete chat: messages, streaming replies, tool cards, suggestions, stop, retry and the composer. Connect it to your server or drive it with props.

Used in AI SDK chat.

Use it for
A complete chat you can connect to your server, the AI SDK or your own state.
Not for
Custom layouts that need the pieces arranged differently. Try PromptInput, Message or StreamingResponse.

Chat preview

Loading example…

Installation

npm install @stackunseen/ui
npx shadcn@latest add https://unseenui.com/r/chat.json
npx shadcn@latest add https://unseenui.com/r/chat-ai-sdk.json
import { Chat } from '@stackunseen/ui/chat';
Styles: @stackunseen/ui/styles.css and @stackunseen/ui/chat.css

Parts

Chat puts four regions together. Each one is a library component you can also use on its own when you need a different layout.

  1. Header

    The title above the conversation, in the panel style only. The title also names the chat for screen readers.

    Propstitle variant

  2. Transcript

    The messages: text, reasoning, files, sources and tool calls. Tools that need a person show an approval card underneath. It follows new messages and offers "Jump to latest" when you scroll up. With no messages it shows the empty state.

    Built fromMessage, StreamingResponse, ToolCall, ApprovalCard, MessageActions

    PropsmessageVariant responseVariant renderTextPart renderTool renderMessageActions feedback onFeedback onEdit branches onBranchChange emptyTitle emptyDescription emptyContent

  3. Suggestions

    Prompts people can send with one click. Before the first message it shows your starters; after that, whatever the server offers. Hidden while a reply is running.

    Built fromSuggestions

    Propssuggestions starters

  4. Composer

    Where people type. It sends on Enter, turns into a stop button while a reply runs and can hold your own buttons, attachments, slash commands and mentions.

    Built fromPromptInput

    Propsplaceholder composerHint toolbar attachments commands onCommand mentions onMention maxPromptLength

Connect it

Your server

Pass a host and Chat follows it: messages, status, suggestions and approvals come from the host, and sends, stops and decisions go back to it. useLocalHost gives you a stand-in; useAiSdkChat adapts the AI SDK.

host

Your own state

Or pass the conversation as props and handle each callback yourself. Use one way or the other, not both.

messagesstatusdraftonDraftChangeonSendonCancelonRetryapprovalsonDecision

Usage and props

Import this component from @stackunseen/ui/chat. Load @stackunseen/ui/styles.css first, then @stackunseen/ui/chat.css.

Your server owns the conversation and handles send, stop and retry; the chat only keeps the unsent draft. useLocalHost gives you a stand-in server for prototypes that never calls a model.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

server: ChatHost · or messages · tools? · status · suggestions? · draft · onDraftChange · onSend · onCancel? · onRetry? · title? · starters? · toolbar? · attachments?
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
server: ChatHost · or messages · tools? · status · suggestions? · draft · onDraftChange · onSend · onCancel? · onRetry? · title? · starters? · toolbar? · attachments?
Keeps honest
Your server owns the conversation and handles send, stop and retry; the chat only keeps the unsent draft. useLocalHost gives you a stand-in server for prototypes that never calls a model.
MCP
read_component "Chat" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

Enter sends and Shift+Enter adds a line; the transcript is a focusable log; suggestions and Retry are buttons.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio