useChat Hook Integration (Legacy)

Overview

Integration with the Vercel AI SDK UI's useChat hook.
It allows integration with OpenAI, Anthropic, Mistral, Perplexity, AWS Bedrock, Azure, Google Gemini, Hugging Face, Fireworks, Cohere, LangChain, Replicate, Ollama, and more.

Getting Started

Create a Next.JS project

npx create-next-app@latest my-app
cd my-app

Install Vercel AI SDK and `@assistant-ui/react`

npm install @assistant-ui/react @assistant-ui/react-ai-sdk ai @ai-sdk/openai

Setup a backend route under `/api/chat`

@/app/api/chat/route.ts

import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai("gpt-4o"),
    messages: convertToCoreMessages(messages),
  });

  return result.toDataStreamResponse();
}

Define a `MyRuntimeProvider` component

@/app/MyRuntimeProvider.tsx

"use client";

import { useChat } from "@ai-sdk/react";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useVercelUseChatRuntime } from "@assistant-ui/react-ai-sdk";

export function MyRuntimeProvider({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const chat = useChat({
    api: "/api/chat",
  });

  const runtime = useVercelUseChatRuntime(chat);

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {children}
    </AssistantRuntimeProvider>
  );
}

Wrap your app in `MyRuntimeProvider`

@/app/layout.tsx

import { MyRuntimeProvider } from '@/app/MyRuntimeProvider';

...

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <MyRuntimeProvider>
      <html lang="en">
        <body className={inter.className}>
          {children}
        </body>
      </html>
    </MyRuntimeProvider>
  )
}

Accessing AI SDK Messages

You can use the getExternalStoreMessages utility to convert ThreadMessages back to Messages from AI SDK.

const MyAssistantMessage = () => {
  const aiSDKMessages = useMessage((m) => getExternalStoreMessages(m));
  // ...
};

const WeatherToolUI = makeAssistantToolUI({
  render: () => {
    const aiSDKMessage = useContentPart((p) => getExternalStoreMessages(p)[0]);
    // ...
  },
});

useChat Hook Integration (Legacy)

On this page