assistant-ui

Product · Documentation · Examples · Discord · Contact Sales

The UX of ChatGPT in your React app 💬🚀

assistant-ui is an open-source TypeScript/React library to build production-grade AI chat experiences fast.

Installation

The fastest path is the CLI, which scaffolds a Next.js app or adds the styled components to an existing project:

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

Or install the packages directly:

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

Usage

"use client";

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/ai-sdk";
import { Thread } from "@/components/assistant-ui/elements/thread.aui";

export function Chat() {
  const runtime = useChatRuntime();
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

useChatRuntime connects to the Vercel AI SDK out of the box. Swap it for useLangGraphRuntime, useDataStreamRuntime, or any custom runtime to integrate with your own backend.

What you get

• Composable primitives: build any chat UX from Thread, Message, Composer, ThreadList, ActionBar, and friends. Style every pixel yourself, or start from a polished shadcn/ui theme that the CLI copies into your project.
• Production UX out of the box: streaming, auto-scroll, retries, attachments, markdown, code highlighting, voice dictation, keyboard shortcuts, and accessibility.
• Generative UI: render tool calls and JSON as React components, collect inline human approvals, and expose safe frontend actions to the model.
• Strong TypeScript: typed runtime APIs, tool schemas, message parts, and adapters end to end.

Backends