React AI components for Stream Chat

This official repository for Stream Chat's UI components is designed specifically for AI-first applications written in React. When paired with our real-time Chat API, it makes integrating with and rendering responses from LLM providers such as ChatGPT, Gemini, Anthropic or any custom backend easier by providing rich with out-of-the-box components able to render Markdown, Code blocks, tables, streaming messages, file attachments, speech-to-text, etc.

To start, this library includes the following components which assist with this task:

- AIMessageComposer - a fully featured message composer with file attachments, speech-to-text, and model selection
- AIMarkdown - a markdown renderer optimized for AI-generated content with syntax highlighting and custom tool component support
- StreamingMessage - a component that displays text with a typewriter animation effect, ideal for streaming AI responses
- SpeechToTextButton - a button component for voice input using the Web Speech API

Our team plans to keep iterating and adding more components over time. If there's a component you use every day in your apps and would like to see added, please open an issue and we will take it into consideration.

🛠️ Installation

The @stream-io/chat-react-ai SDK is available on NPM.

To install it, you may run the following command:

``bash
npm install @stream-io/chat-react-ai


or

`javascript
import '@stream-io/chat-react-ai/styles/index.css';
`

⚙️ Usage

All of the components listed below are designed to work seamlessly with our existing React Chat SDK. Our developer guide explains how to get started building AI integrations with Stream.

Components

$3

The AIMessageComposer gives users a complete message composer component with support for text input, file attachments, speech-to-text, and model selection.

`tsx
import { AIMessageComposer } from '@stream-io/chat-react-ai';

function ChatComposer({ attachments }: ChatComposerProps) {
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
// Handle submission
};

return (







{attachments.map((attachment) => (

))}


);
}
`

#### Sub-components

- AIMessageComposer.FileInput - File input button for attaching files. Supports multiple file selection.
- AIMessageComposer.TextInput - Text input field for typing messages. Automatically syncs with composer state.
- AIMessageComposer.SpeechToTextButton - Button to toggle speech-to-text input using the Web Speech API.
- AIMessageComposer.SubmitButton - Submit button for sending the message.
- AIMessageComposer.ModelSelect - Dropdown for selecting AI models. Customizable via options prop.
- AIMessageComposer.AttachmentPreview - Preview container for attached files.
- AIMessageComposer.AttachmentPreview.Item - Preview item component, renders a different look for file types that begin with image/.

#### Props

| Name | Type | Required | Description |
| -------------------------- | -------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| resetAttachmentsOnSelect | boolean | no | Resets file input after selection. Defaults to true. |
| nameMapping | { message?: string; attachments?: string } | no | Maps custom input names to internal state. By default, the composer expects inputs named message (for text) and attachments (for files). Use this prop to map different names to these internal keys. |
| onSubmit | (e: FormEvent) => void | no | Form submission handler. |
| onChange | (e: FormEvent) => void | no | Form change handler. |
| | ...HTMLFormElement props | no | Supports all standard HTML form element props. |

> [!NOTE]
> Some default input components come with default name attributes (TextInput defaults to "message", FileInput defaults to "attachments"). You can override these names via props, and use the nameMapping prop to tell the composer how to map your custom names to its internal state.

$3

The AIMarkdown is a markdown renderer optimized for AI-generated content with syntax highlighting and custom tool component support.

#### Props

| Name | Type | Required | Description |
| -------------------- | -------------------- | -------- | ------------------------------------------------------------ |
| children | string | yes | The markdown content to render. |
| toolComponents | ToolComponents | no | Custom components for rendering tool outputs (e.g., charts). |
| markdownComponents | MarkdownComponents | no | Custom markdown component overrides. |

#### Built-in Tool Components

- chartjs - Renders Chart.js visualizations from code blocks with language-chartjs or language-json if it matches supported Chart.js data schema.

#### Example

`tsx
import { AIMarkdown } from '@stream-io/chat-react-ai';

function MessageContent({ content }) {
return {content};
}
`

$3

The StreamingMessage is a component that displays text with a typewriter animation effect, similar to ChatGPT. It's ideal for streaming AI responses. It's a simplified wrapper with typewriter animation effect around AIMarkdown component.

#### Props

| Name | Type | Required | Description |
| ------ | -------- | -------- | -------------------------------------------------- |
| text | string | yes | The text content to display with streaming effect. |

#### Example

`tsx
import { StreamingMessage } from '@stream-io/chat-react-ai';

function AIResponse({ text }) {
return ;
}
`

$3

The SpeechToTextButton is a button component for voice input using the Web Speech API. It provides a simple interface for converting speech to text with built-in microphone icon and listening state visualization.

#### Props

| Name | Type | Required | Description |
| --------- | ---------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
| options | UseSpeechToTextOptions | no | Options for speech recognition (see useSpeechToText hook documentation for available options like lang, continuous, etc.). |
| | ...HTMLButtonElement props | no | Supports all standard HTML button element props. |

#### Example

`tsx
import { SpeechToTextButton } from '@stream-io/chat-react-ai';

function VoiceInputButton() {
return (
options={{
lang: 'en-US',
continuous: false,
interimResults: true,
}}
/>
);
}
`

> [!NOTE]
> When used within an AIMessageComposer, the button automatically updates the composer's text input. When used standalone, you can control the behavior through the speechToTextOptions.onTranscript callback.

$3

A container component for displaying file attachment previews with support for images and documents.

#### AttachmentPreview.Item Props

| Name | Type | Required | Description |
| -------------------- | ---------------------------------------------------- | -------- | --------------------------------------------- |
| file | File | yes | The file object to preview. |
| state | 'uploading' \| 'finished' \| 'failed' \| 'pending' | no | Upload state indicator. |
| title | string | no | Custom title (defaults to filename). |
| imagePreviewSource | string | no | Custom image preview URL. |
| onDelete | (e: MouseEvent) => void | no | Delete button handler. |
| onRetry | (e: MouseEvent) => void | no | Retry button handler (shown on failed state). |

#### Example

`tsx
import { AIMessageComposer } from '@stream-io/chat-react-ai';

function CustomAttachmentPreview({
attachments,
}: CustomAttachmentPreviewProps) {
return (

{attachments.map((attachment) => (
key={attachment.id}
file={attachment.file}
onDelete={() => removeAttachment(attachment.id)}
/>
))}

);
}
`

Hooks

$3

Manage attachments within the composer context. Must be used within an AIMessageComposer component.

#### Returns

| Name | Type | Description |
| ------------------- | --------------------------------------------------------------- | --------------------------- |
| attachments | Array<{ id: string; file: File; meta?: Record }> | Current attachments. |
| removeAttachment | (idOrFile: string \| File) => void | Remove an attachment. |
| updateAttachments | (ids: Array, updater: Function) => void | Update attachment metadata. |

#### Example

`tsx
import { useAttachments } from '@stream-io/chat-react-ai';

function AttachmentManager() {
const { attachments, removeAttachment, updateAttachments } = useAttachments();

const manageAttachment = (attachmentId: string) => {
// Update attachment metadata
updateAttachments([attachmentId], (attachment) => ({
...attachment,
meta: { uploaded: true },
}));

// Remove an attachment by id or file
removeAttachment(attachmentId);
};

return

> ![NOTE]
> While this attachment API works it's highly recommended to use own attachment API or the one provided by the stream-chat-react/stream-chat.

$3

Access and update the text input value. Must be used within an AIMessageComposer component.

#### Returns

| Name | Type | Description |
| --------- | ------------------------ | ------------------- |
| text | string | Current text value. |
| setText | (text: string) => void | Update text value. |

#### Example

`tsx
import { useText } from '@stream-io/chat-react-ai';

function CustomTextDisplay() {
const { text, setText } = useText();

return (


Create a typewriter streaming effect for text content. Useful when you require a custom implementation of a StreamingMessage component.

#### Props

| Name | Type | Required | Description |
| --------------------------- | -------- | -------- | ----------------------------------------------------------- |
| text | string | yes | The full text to stream. |
| streamingLetterIntervalMs | number | no | Interval between character updates. Defaults to 30. |
| renderingLetterCount | number | no | Number of characters to render per update. Defaults to 2. |

#### Returns

| Name | Type | Description |
| --------------------- | -------- | ------------------------------------ |
| streamedMessageText | string | Currently displayed portion of text. |

#### Example

`tsx
import { useMessageTextStreaming } from '@stream-io/chat-react-ai';

function StreamedText({ fullText }) {
const { streamedMessageText } = useMessageTextStreaming({
text: fullText,
streamingLetterIntervalMs: 30,
renderingLetterCount: 2,
});

return

| Name | Type | Required | Description |
| ----------------- | ------------------------- | -------- | ----------------------------------------------------------------------------------- |
| lang | string | no | Language for speech recognition (e.g., 'en-US', 'es-ES'). Defaults to 'en-US'. |
| interimResults | boolean | no | Whether to return interim (partial) results. Defaults to true. |
| maxAlternatives | number | no | Maximum number of alternative transcriptions. Defaults to 1. |
| continuous | boolean | no | Whether recognition should continue after user stops speaking. Defaults to false. |
| onTranscript | (text: string) => void | no | Callback when transcription text changes. |
| onError | (error: string) => void | no | Callback when an error occurs. |

#### Returns

| Name | Type | Description |
| ---------------- | ------------ | ------------------------------------------------------- |
| isListening | boolean | Whether speech recognition is currently active. |
| isSupported | boolean | Whether the Web Speech API is supported in the browser. |
| startListening | () => void | Start speech recognition. |
| stopListening | () => void | Stop speech recognition. |

#### Example

`tsx
import { useSpeechToText } from '@stream-io/chat-react-ai';

function VoiceInput() {
const [transcript, setTranscript] = useState('');

const { isListening, isSupported, startListening, stopListening } =
useSpeechToText({
lang: 'en-US',
interimResults: true,
onTranscript: (text) => setTranscript(text),
onError: (error) => console.error('Speech recognition error:', error),
});

if (!isSupported) {
return

`tsx
import { AIMessageComposer } from '@stream-io/chat-react-ai';
import '@stream-io/chat-react-ai/styles/index.css';

function ChatInterface() {
const [attachments, setAttachments] = useState([]);

const handleChange = (e) => {
const input = e.currentTarget.elements.namedItem(
'attachments',
) as HTMLInputElement | null;

const files = input?.files ?? null;

if (files) {
// Send to your API
uploadFiles(files).then((uploadedAttachments) =>
setAttachments((currentAttachments) => [
...currentAttachments,
...uploadedAttachments,
]),
);
}
};

const handleSubmit = async (e) => {
e.preventDefault();

const formData = new FormData(e.target);

const message = formData.get('message');

// Send to your API
await sendMessage({ message });

// Reset form
e.target.reset();
};

return (


{attachments.map((attachment) => (

))}







);
}
`

$3

`tsx
import { AIMarkdown } from '@stream-io/chat-react-ai';

const customComponents = {
h1: ({ children }) =>

{children}

function CustomMarkdown({ content }) {
return (
markdownComponents={customComponents}
toolComponents={customToolComponents}
>
{content}

);
}
`

$3

`tsx
import { StreamingMessage } from '@stream-io/chat-react-ai';

function AIResponseStream({ response }) {
return (


`
Copyright (c) 2014-2024 Stream.io Inc. All rights reserved.

Licensed under the Stream License;
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

https://github.com/GetStream/ai-js/blob/main/LICENSE

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
``