Assistant UI

Overview

Assistant UI provides the building blocks for AI chat interfaces in React. Instead of building chat components from scratch, use pre-built, accessible, and customizable components that handle streaming, tool calls, markdown rendering, and more.

How It Works

1. Install — npm install @assistant-ui/react
2. Choose components — Pick from chat, input, message components
3. Connect backend — Hook up to any LLM API
4. Customize — Theme and extend to match your design

Use Cases

• AI chat products — Production chat interfaces
• Internal tools — AI-powered admin panels
• Customer support — Chat widgets for support bots
• Documentation — AI-powered doc search UIs

Getting Started

import { Thread } from "@assistant-ui/react";

function ChatApp() {
  return <Thread />;
}

Example

import { Thread, Composer, Messages } from "@assistant-ui/react";

function CustomChat() {
  return (
    <Thread>
      <Messages />
      <Composer placeholder="Ask anything..." />
    </Thread>
  );
}

Alternatives

• CopilotKit — Full AI copilot framework
• Vercel AI SDK — Streaming AI components
• Chatbot UI — Open-source ChatGPT clone