Message Input
A primitive component for handling message input with textarea, toolbar, submit button, and error display. Provides form submission and state management for chat interfaces.
Examples
Default Message Input with Image Attachments
Solid Variant
Bordered Variant
Full-featured: MCP Config + Image Attachments
Minimal Input (No Toolbar)
Installation
Component API
MessageInput
| Prop | Type | Default | Description |
|---|---|---|---|
| contextKey | string | - | The context key identifying which thread to send messages to |
| variant | "default" | "solid" | "bordered" | "default" | Optional styling variant for the input container |
| children | React.ReactNode | - | The child elements to render within the form container |
Sub-components
- MessageInputTextarea - The main text input area where users type their messages. Automatically resizes based on content and handles keyboard shortcuts for submission. Supports image pasting from clipboard.
- MessageInputFileButton - Button to open file picker for selecting images to attach to messages. Supports multiple image selection and validates file types and sizes.
- MessageInputMcpConfigButton - Button to open the MCP configuration modal which allows you to configure client-side MCP servers. You can add or remove this button from the toolbar.
- MessageInputSubmitButton - Button to submit the message form. Shows loading state during submission and is disabled when input is empty.
- MessageInputError - Displays error messages when message submission fails. Automatically shows/hides based on submission state.