Charcoal UI

React AI Chat and Agent Components

React components for AI apps: chat, streaming, tool calls, agent traces and voice.

About these AI chat and agent components

Everything an AI product's interface needs: chat messages and a scroller that follows streaming text, a prompt input, tool-call rows and approval cards for human-in-the-loop agents, file diffs with accept and reject, citations, agent activity timelines, task plans, reasoning headers, a voice orb and a complete chat app.

They are model-agnostic React components, so they work with the Vercel AI SDK, the Anthropic or OpenAI SDKs, LangChain or your own backend.

Where they earn their keep

  • AI assistants and copilots.
  • Coding and research agents.
  • RAG and AI search with sources.
  • Voice and call agents.

How they are built

Streaming and status changes go through live regions, every action is a labelled button, and long traces fold into summaries. Components take plain data and callbacks, so you connect them to whatever streams your model's output.

Each one is a single file you copy into your project with the shadcn CLI and own outright. They are written for React 19 and Tailwind CSS 4 with Motion, use only your theme's CSS variables, and work in Next.js, Vite, Remix and Astro.

All 20 AI chat and agent components

1 is free and MIT licensed, and 19 are part of Charcoal UI Pro, which covers all 393 Pro components, 112 sections and 100 templates for one price. Open any of them to try it live, tune it and copy the code.

  • Typing Indicator (Pro): A React typing indicator: a bubble with rippling dots that tells screen readers who is typing
  • Thinking Orb (Pro): A React AI thinking orb with nine motions for nine kinds of busy
  • AI Prompt Input (Pro): An animated React AI chat input: growing field, attachments, model picker and a stop button
  • Voice Input (Pro): A React voice input: the mic expands into a live waveform with a timer and cancel
  • Chat Message: A React chat message for AI apps: bubbles, avatars, formatting and hover actions
  • Message Scroller (Pro): A React chat viewport that follows streaming text and lets go when you scroll up
  • Tool Approval (Pro): A React human-in-the-loop card that asks before an AI agent runs a tool
  • Tool Result (Pro): A collapsible React tool-call row with a live timer, status and formatted output
  • File Diff (Pro): A React code diff with split or unified views and accept or reject for AI edits
  • Citations (Pro): React inline citations that preview their sources on hover for grounded AI answers
  • Agent Activity (Pro): A live React timeline of what an AI agent is doing, step by step
  • Agent Progress (Pro): A compact React working indicator for long AI agent runs, with rolling verbs
  • Task Plan (Pro): An AI agent's to-do plan in React, with tasks that tick off as they finish
  • Voice Orb (Pro): A liquid React voice orb that breathes with the voice level of an AI assistant
  • Approval Card (Pro): A React card where an AI agent asks you questions and you answer step by step
  • AI Sidebar (Pro): The workspace sidebar of an AI app in React: chats, projects and a collapse rail
  • Chat App (Pro): A complete AI chat app in one React file: threads, streaming, tools and a composer
  • Call Chip (Pro): A React tool-call chip with a fill that wipes across as a live timer runs
  • Thought Line (Pro): A React reasoning header that folds an AI's thinking into one shimmering line
  • Refine Frame (Pro): A React image frame that steps from noise to sharp like AI image generation

Install one

npx shadcn@latest add https://charcoalui.com/r/chat-message.json

Every page shows the exact command. The CLI adds the file to components/ui along with any dependency it needs, and AI coding agents can do the same through the Charcoal UI MCP server.

Other categories

Browse the rest of the library by what you are building.

Frequently asked questions

Do these work with the Vercel AI SDK?
Yes. Pass the messages from useChat to the chat components and render tool calls from the message parts; nothing is tied to one provider.
Can I build human-in-the-loop approval?
Yes. Tool Approval and Approval Card show what the agent wants to do and call your handler with the decision, so your backend runs the tool only when allowed.
Is there a complete chat UI?
Yes. Chat App is a full workspace in one file, with a thread list, streaming replies, a tool call, suggestions and a composer. Connect its respond function to your model.
Do these AI chat and agent components work with shadcn/ui?
Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.