logoassistant-ui
Vercel AI SDK

useChat Runtime

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/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>
  )
}

Previous

useAssistant Runtime

Next

Getting Started

On this page

Edit on Github