@stream-io/chat-react-ai

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:

npm install @stream-io/chat-react-ai
# or
pnpm add @stream-io/chat-react-ai
# or
yarn add @stream-io/chat-react-ai

Styles

Import the base styles in your application:

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

AIMessageComposer

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

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 (
    <AIMessageComposer onSubmit={handleSubmit}>
      <AIMessageComposer.FileInput name="attachments" />
      <AIMessageComposer.TextInput name="message" />
      <AIMessageComposer.SpeechToTextButton />
      <AIMessageComposer.ModelSelect name="model" />
      <AIMessageComposer.SubmitButton />
      <AIMessageComposer.AttachmentPreview>
        {attachments.map((attachment) => (
          <AIMessageComposer.AttachmentPreview.Item {...attachment} />
        ))}
      </AIMessageComposer.AttachmentPreview>
    </AIMessageComposer>
  );
}

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<HTMLFormElement>) => void	no	Form submission handler.
onChange	(e: FormEvent<HTMLFormElement>) => 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.

AIMarkdown

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

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

function MessageContent({ content }) {
  return <AIMarkdown>{content}</AIMarkdown>;
}

StreamingMessage

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

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

function AIResponse({ text }) {
  return <StreamingMessage text={text} />;
}

SpeechToTextButton

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

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

function VoiceInputButton() {
  return (
    <SpeechToTextButton
      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.

AttachmentPreview

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

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

function CustomAttachmentPreview({
  attachments,
}: CustomAttachmentPreviewProps) {
  return (
    <AIMessageComposer.AttachmentPreview>
      {attachments.map((attachment) => (
        <AIMessageComposer.AttachmentPreview.Item
          key={attachment.id}
          file={attachment.file}
          onDelete={() => removeAttachment(attachment.id)}
        />
      ))}
    </AIMessageComposer.AttachmentPreview>
  );
}

Hooks

useAttachments (experimental)

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<string, any> }>	Current attachments.
removeAttachment	(idOrFile: string | File) => void	Remove an attachment.
updateAttachments	(ids: Array<string | Attachment>, updater: Function) => void	Update attachment metadata.

Example

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 <div>{attachments.length} files attached</div>;
}

![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.

useText

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

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

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

  return (
    <div>
      <p>Current text: {text}</p>
      <button onClick={() => setText('New text')}>Update</button>
    </div>
  );
}

useMessageTextStreaming

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

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

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

  return <div>{streamedMessageText}</div>;
}

useSpeechToText

Enable voice input using the Web Speech API. Provides speech recognition capabilities with real-time transcription.

Props

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

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 <div>Speech recognition is not supported in your browser</div>;
  }

  return (
    <div>
      <button onClick={isListening ? stopListening : startListening}>
        {isListening ? 'Stop' : 'Start'} Recording
      </button>
      <p>Transcript: {transcript}</p>
    </div>
  );
}

Examples

Basic Chat Interface

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 (
    <AIMessageComposer onChange={handleChange} onSubmit={handleSubmit}>
      <AIMessageComposer.AttachmentPreview>
        {attachments.map((attachment) => (
          <AIMessageComposer.AttachmentPreview.Item {...attachment} />
        ))}
      </AIMessageComposer.AttachmentPreview>
      <AIMessageComposer.FileInput name="attachments" />
      <AIMessageComposer.TextInput name="message" />
      <AIMessageComposer.SpeechToTextButton />
      <AIMessageComposer.ModelSelect name="model" />
      <AIMessageComposer.SubmitButton />
    </AIMessageComposer>
  );
}

Custom Markdown Rendering

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

const customComponents = {
  h1: ({ children }) => <h1 className="custom-heading">{children}</h1>,
  code: ({ children }) => (
    <AIMarkdown.default.code className="custom-class">
      {children}
    </AIMarkdown.default.code>
  ),
};

const customToolComponents = {
  weather: ({ data, fallback }) => {
    try {
      const parsedData = JSON.parse(data);
      return <div className="weather-tool">{parsedData.result}</div>;
    } catch {
      return fallback;
    }
  },
};

function CustomMarkdown({ content }) {
  return (
    <AIMarkdown
      markdownComponents={customComponents}
      toolComponents={customToolComponents}
    >
      {content}
    </AIMarkdown>
  );
}

Streaming AI Response

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

function AIResponseStream({ response }) {
  return (
    <div className="ai-response">
      <StreamingMessage text={response} />
    </div>
  );
}

🛥 What is Stream?

Stream allows developers to rapidly deploy scalable feeds, chat messaging and video with an industry leading 99.999% uptime SLA guarantee.

Stream provides UI components and state handling that make it easy to build real-time chat and video calling for your app. Stream runs and maintains a global network of edge servers around the world, ensuring optimal latency and reliability regardless of where your users are located.

📕 Tutorials

To learn more about integrating AI and chatbots into your application, we recommend checking out the full list of tutorials across all of our supported frontend SDKs and providers. Stream's Chat SDK is natively supported across:

• React
• React Native
• Angular
• Jetpack Compose
• SwiftUI
• Flutter
• Javascript/Bring your own

👩‍💻 Free for Makers 👨‍💻

Stream is free for most side and hobby projects. To qualify, your project/company needs to have < 5 team members and < $10k in monthly revenue. Makers get $100 in monthly credit for video for free. For more details, check out the Maker Account.

💼 We are hiring!

We've closed a $38 million Series B funding round in 2021 and we keep actively growing. Our APIs are used by more than a billion end-users, and you'll have a chance to make a huge impact on the product within a team of the strongest engineers all over the world. Check out our current openings and apply via Stream's website.

License

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.