Getting Started

Start with a new project

animated gif showing the steps to create a new project

Initialize assistant-ui in your project

Step 1: Run assistant-ui init to install assistant-ui in a new or existing React.js project:

npx assistant-ui@latest create # new project
npx assistant-ui@latest init # existing project

Add API key

Add a new .env file to your project with your OpenAI API key:

OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

# chat history -- sign up for free on https://cloud.assistant-ui.com
# NEXT_PUBLIC_ASSISTANT_BASE_URL="https://..."

Start the app

npm run dev

Install in an existing app

Add assistant-ui

npx shadcn@latest add "https://r.assistant-ui.com/thread"

Setup Backend Endpoint

Install provider SDK:

Terminal

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

Add an API endpoint:

/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-mini"),
    messages,
  });
  return result.toDataStreamResponse();
}

Define environment variables:

/.env.local

OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

If you aren't using Next.js, you can also deploy this endpoint to Cloudflare Workers, or any other serverless platform.

Use it in your app

/app/page.tsx

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
import { ThreadList } from "@/components/assistant-ui/thread-list";
import { Thread } from "@/components/assistant-ui/thread";
 
const MyApp = () => {
  const runtime = useChatRuntime({
    api: "/api/chat",
  });
 
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <div className="grid h-dvh grid-cols-[200px_1fr] gap-x-2 px-4 py-4">
        <ThreadList />
        <Thread />
      </div>
    </AssistantRuntimeProvider>
  );
};

Getting Started

On this page