Using Vercel AI SDK?
├─ Yes → useChatRuntime (recommended)
└─ No
   ├─ LangGraph agents? → useLangGraphRuntime
   ├─ AG-UI protocol? → useAgUiRuntime
   ├─ A2A protocol? → useA2ARuntime
   ├─ External state (Redux/Zustand)? → useExternalStoreRuntime
   └─ Custom API → useLocalRuntime

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

// app/page.tsx
"use client";
import { AssistantRuntimeProvider, Thread } from "@assistant-ui/react";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";

export default function Chat() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
  });

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

// app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({ model: openai("gpt-4o"), messages });
  return result.toUIMessageStreamResponse();
}

// Option 1: Pre-built CSS
import "@assistant-ui/styles/default.css";

// Option 2: Tailwind (add to tailwind.config.js)
content: ["./node_modules/@assistant-ui/react/dist/**/*.js"]

OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...
NEXT_PUBLIC_ASSISTANT_BASE_URL=https://api.assistant-ui.com  # For cloud

npm install @ai-sdk/react