📄 ai-sdk/cookbook/next/use-shared-chat-context

When building chat applications, you may want to access the same chat instance across multiple components. This allows you to display messages in one component, handle input in another, and control the chat state from anywhere in your application.

Create a Chat Context

First, create a context that will hold your chat instance and provide methods to interact with it.

app/chat-context.tsx

'use client';
import React, { createContext, useContext, ReactNode, useState } from 'react';import { Chat } from '@ai-sdk/react';import { DefaultChatTransport, UIMessage } from 'ai';
interface ChatContextValue {  // replace with your custom message type  chat: Chat<UIMessage>;  clearChat: () => void;}
const ChatContext = createContext<ChatContextValue | undefined>(undefined);
function createChat() {  return new Chat<UIMessage>({    transport: new DefaultChatTransport({      api: '/api/chat',    }),  });}
export function ChatProvider({ children }: { children: ReactNode }) {  const [chat, setChat] = useState(() => createChat());
  const clearChat = () => {    setChat(createChat());  };
  return (    <ChatContext.Provider      value={{        chat,        clearChat,      }}    >      {children}    </ChatContext.Provider>  );}
export function useSharedChatContext() {  const context = useContext(ChatContext);  if (!context) {    throw new Error('useSharedChatContext must be used within a ChatProvider');  }  return context;}

Wrap Your App with the Provider

Add the ChatProvider to your layout to make the chat context available to all child components.

app/layout.tsx

import { ChatProvider } from './chat-context';
export default function Layout({ children }: { children: React.ReactNode }) {  return <ChatProvider>{children}</ChatProvider>;}

Display Messages and Clear Chat

Create a component that displays messages and provides a button to clear the chat.

app/page.tsx

'use client';
import { useChat } from '@ai-sdk/react';import { useSharedChatContext } from './chat-context';import ChatInput from './chat-input';
export default function Chat() {  const { chat, clearChat } = useSharedChatContext();  const { messages } = useChat({    chat,  });
  return (    <div>      <button onClick={clearChat} disabled={messages.length === 0}>        Clear Chat      </button>
      {messages?.map(message => (        <div key={message.id}>          <strong>{`${message.role}: `}</strong>          {message.parts.map((part, index) => {            if (part.type === 'text') {              return <div key={index}>{part.text}</div>;            }          })}        </div>      ))}
      <ChatInput />    </div>  );}

Handle Input in a Separate Component

Create an input component that uses the shared chat context to send messages.

app/chat-input.tsx

import { useChat } from '@ai-sdk/react';import { useState } from 'react';import { useSharedChatContext } from './chat-context';
export default function ChatInput() {  const { chat } = useSharedChatContext();  const [text, setText] = useState('');  const { status, stop, sendMessage } = useChat({ chat });
  return (    <form      onSubmit={e => {        e.preventDefault();        if (text.trim() === '') return;        sendMessage({ text });        setText('');      }}    >      <input        placeholder="Say something..."        disabled={status !== 'ready'}        value={text}        onChange={e => setText(e.target.value)}      />      {stop && (status === 'streaming' || status === 'submitted') && (        <button type="submit" onClick={stop}>          Stop        </button>      )}    </form>  );}

Server

Create an API route to handle the chat messages using the AI SDK.

app/api/chat/route.ts

import { openai } from '@ai-sdk/openai';import { convertToModelMessages, streamText, UIMessage } from 'ai';
export const maxDuration = 30;
export async function POST(req: Request) {  const { messages }: { messages: UIMessage[] } = await req.json();
  const result = streamText({    model: openai('gpt-4o-mini'),    messages: convertToModelMessages(messages),  });
  return result.toUIMessageStreamResponse();}

View Example on GitHub

On this page

Share useChat State Across Components

Create a Chat Context

Wrap Your App with the Provider

Display Messages and Clear Chat

Handle Input in a Separate Component

Server

Deploy and Scale AI Apps with Vercel.

Vercel delivers the infrastructure and developer experience you need to ship reliable AI-powered applications at scale.

Trusted by industry leaders:

OpenAI
Photoroom

Talk to an expert