Build your own chat shell

Components below <Chat> do not require ChatProvider. Use them with your own AI SDK useChat call when your application owns transport, routing, or state management.

'use client'

import { useChat } from '@ai-sdk/react'
import { Composer, MessageList } from '@frogbotai/ui/chat'

export function CustomShell() {
  const chat = useChat()

  return (
    <main style={{ height: '100dvh' }}>
      <MessageList messages={chat.messages} />
      <Composer
        pending={chat.status === 'submitted' || chat.status === 'streaming'}
        onStop={() => chat.stop()}
        onSubmit={({ text }) => chat.sendMessage({ text })}
        submitContent="Send"
        stopContent="Stop"
      />
    </main>
  )
}

Message, MessagePart, TextPart, ReasoningPart, ToolPart, FilePart, SourcePart, DataPart, ChatHistory, ChatShell, and ChatStatus are also exported from @frogbotai/ui/chat for deeper composition.

Composer props

Composer is a Lexical plain-text editor. className goes on the surrounding form. Its / commands, @ mention sources, features and prompt history come from ChatProvider; without one it has no commands or mentions, the default features, and history in localStorage. See Composer commands, mentions and features.

Prop	Type	Default	Description
`onSubmit`	`(prompt: ComposerPrompt, attachments: ComposerAttachment[]) => void \| Promise<void>`	Required	Called with the prompt and its attachments when the user sends. `prompt` is `{ text, mentions }`; see Composer prompt. Only ready and text attachments are included; refused, failed, and too-large files never are. Enter sends; Shift+Enter adds a line; Enter while an input method is composing never sends. Nothing is sent while `pending` (unless `onQueue` takes it), `disabled`, or uploading. Attachments clear when the returned promise resolves.
`submitContent`	`ReactNode`	Required	Accessible label for the send button.
`stopContent`	`ReactNode`	Required	Accessible label for the stop button.
`onBeforeSubmit`	`(prompt: ComposerSubmission) => boolean \| Promise<boolean>`	—	Called before each send with `{ text, mentions, attachments }`, also while `pending` without `onQueue`. Return `true` to handle it yourself: the text clears and attachments stay. See Typed commands.
`onError`	`(error: Error, source: 'command' \| 'message') => void`	—	Called when a send, `onBeforeSubmit` or a command rejects. `source` is `'message'` for a send and `'command'` for the others.
`defaultValue`	`string`	`''`	Initial text.
`placeholder`	`string`	—	Shown while the input is empty.
`aria-label`	`string`	`'Message'`	Accessible name of the input.
`autoFocus`	`boolean`	`false`	Focuses the input on mount.
`disabled`	`boolean`	`false`	Makes the input read-only and hides the send, stop and microphone buttons.
`hidden`	`boolean`	`false`	Hides the composer and keeps its text and attachments.
`onStop`	`() => void`	—	Called by the stop button, which replaces the send button while `pending`, and by Escape or Ctrl+G while `pending` with no menu open. The stop button never sends.
`pending`	`boolean`	`false`	A reply is in progress: shows the stop button and blocks sending.
`onQueue`	`(entry: ComposerQueued) => void`	—	Takes each send while `queueing`: Enter and the Queue message button pass `{ kind: 'message', prompt, attachments, keys }` and clear the composer, and a command with `queue: true` passes `{ kind: 'command', command, input, text }`. The attachment cards named by `keys` stay hidden in the composer until `ref.discard` or `ref.edit`.
`queueing`	`boolean`	`pending`	Whether sends go to `onQueue`.
`onFilledChange`	`(filled: boolean) => void`	—	Called when the composer gains or loses something to send.
`ref`	`Ref<ComposerHandle>`	—	`edit(entry)` writes a queued entry back into an empty composer and returns `false`, doing nothing, if it has content; `discard(entry)` drops its attachment cards.
`startSlot`	`ReactNode`	—	Controls at the start of the toolbar.
`endSlot`	`ReactNode`	—	Controls at the end of the toolbar, before the microphone and send button.
`adapter`	`ChatPlatformAdapter`	—	With `uploadAttachment`, enables file attachments and stores long pastes as text assets. See Adapter options.
`modelInputs`	`('text' \| 'image' \| 'audio' \| 'video' \| 'pdf')[]`	All file kinds accepted	Input types of the selected model, usually the agent’s `inputs` entry for it. Images, PDFs, audio, and video the model doesn’t read are refused when picked; text files are always accepted. See which files the composer accepts.
`modelName`	`string`	`'This model'`	Display name of the selected model, used in refusals such as “Text Only can’t read images.”

Without an adapter that has uploadAttachment, the composer has no attachment control, ignores dropped and pasted files, and keeps pastes over 650 characters in the browser as PasteAttachments. With one, pasted files become attachments, and any text copied with them is dropped. <Chat> passes the provider’s adapter and sets modelInputs and modelName from the selected model.

Composer prompt

ComposerPrompt is { text, mentions }. A mention chip stays in text as @label, and mentions lists each chip once, in order, as a ComposerMention:

Field	Type	Required	Description
`source`	`string`	Yes	`id` of the mention source it came from.
`id`	`string`	Yes	The item’s `id`.
`label`	`string`	Yes	The item’s `label`; the chip reads `@label`.
`start`	`number`	Yes	Offset of `@label` in `text`.
`end`	`number`	Yes	Offset just after `@label`, so `text.slice(start, end)` is `@label`.
`data`	`Record<string, unknown>`	No	The item’s `data`.

composerParts(prompt, attachments) builds the parts <Chat> sends: a file-reference or data-paste part per attachment, a text part, then a data-mention part per chip with its ComposerMention as data. FrogBot’s server leaves data-mention parts out of the model’s messages, so the model reads @label in the text, and MessagePart renders nothing for them.

Composer attachments

ComposerAttachment is a FileReference or a PasteAttachment. Both types are exported from @frogbotai/ui/chat. A FileReference is an uploaded file or a pasted text stored as a text asset. Send it as a file-reference part.

Field	Type	Required	Description
`id`	`string \| number`	Yes	ID of the stored asset.
`filename`	`string`	Yes	Name of the file the user picked, such as `app.js` for a code file stored as `app.js.txt`, or `Pasted text`.
`mediaType`	`string`	Yes	Media type of the stored file, such as `image/png` or `text/plain`.
`origin`	`'paste'`	No	Set for pasted text.

A PasteAttachment is pasted text kept in the browser because the composer has no upload storage. Send it as a data-paste part with { text, filename }.

Field	Type	Required	Description
`type`	`'paste'`	Yes	Marks the attachment as inline pasted text.
`text`	`string`	Yes	The pasted text.
`filename`	`string`	Yes	Generated name, `pasted-<time>.txt`.

Message list props

MessageList also accepts any div attribute; className and the rest go on the scrolling element.

Prop	Type	Default	Description
`messages`	`UIMessage[]`	Required	Messages to render, in order. The list scrolls to the newest message while the reader is at the bottom.
`renderMessage`	`(message: UIMessage) => ReactNode`	Each part rendered with `MessagePart`	Replaces how each message renders.

If custom message parts can appear, pass a fallback to MessagePart. Unknown standard parts otherwise render a safe unsupported-part fallback.

Treat component props and package exports as the public composition API. Internal utility class names are not public API and must not be targeted.

Start here

Basics

Managing Data

Features

Ecosystem

Deployment

Build your own chat shell

Composer props

Composer prompt

Composer attachments

Message list props

​Composer props

​Composer prompt

​Composer attachments

​Message list props

Composer props

Composer prompt

Composer attachments

Message list props