Chatbot and agent UI, every state designed

170 components, 7 blocks and 437 icons for chat and agent interfaces. Any model, your runtime, installed with the shadcn CLI.

Browse components Read the docs

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/chatbot.json

Free for personal and commercial products. Base UI or Radix, React 19, Tailwind CSS v4.

shimmer-text

send-button

voice-orb

Works with

Claude
OpenAI
DeepSeek
Gemini
Claude Code
Cursor
AI SDK
LangGraph
Next.js
shadcn/ui

Works with what you already run.

Bring your model, your agent framework and your app. chatcn renders whatever they stream, through the AI SDK message format every adapter maps onto.

How adapters work

Models

Any model the AI SDK can call. chatcn reads message parts, not providers.

Claude@ai-sdk/anthropic
DeepSeek@ai-sdk/deepseek
OpenAI@ai-sdk/openai
Gemini@ai-sdk/google
Mistral@ai-sdk/mistral
OllamaCommunity provider

xAI, Groq, Bedrock, Azure and every other AI SDK provider

Agent runtimes

Four adapters map each runtime onto the same components and actions.

AI SDKuseChatcnChat
LangGraphuseChatcnLangGraph
AG-UIuseChatcnAgUi
assistant-uiPart components
CrewAIThrough AG-UI

Mastra, Pydantic AI and Google ADK through AG-UI

Your app

Plain React 19 and Tailwind CSS v4 files in your repo, installed by the shadcn CLI.

Next.jsSmoke tested
ViteSmoke tested
React RouterReact 19
TanStack StartReact 19
shadcn/uiSame CLI
Radix UIOr Base UI
Tailwind CSSv4

Coding agents

Every page has a Markdown twin and the docs speak MCP, so your agent can do the install.

Claude CodeMCP over HTTP
CursorMCP
WindsurfMCP
GitHub CopilotMCP in VS Code
CodexMCP

Or paste llms.txt into any chat

Plug in, in three steps.

One command, one file and the backend you already have. Without it, your team designs 8 tool call states, approvals, stick to bottom scrolling and IME safe Enter by hand.

1 command, 6 lines, your backend unchanged

Install
$ npx shadcn@latest add https://chatcn.dev/r/chatbot.json
Render it
One file, 6 lines you write. The block brings the thread, composer, tool calls, approvals and every state.
Connect your backend
Your route stays plain AI SDK: streamText with any provider, then toUIMessageStreamResponse. Tools with needsApproval get Allow and Deny for free.
AI SDK adapter docs

app/chat/page.tsx

"use client"

import { DefaultChatTransport } from "ai"
import { Chatbot } from "@/components/chatcn/chatbot/chatbot"
import { useChatcnChat } from "@/hooks/use-chatcn-chat"

export default function ChatPage() {
  const chat = useChatcnChat({
    transport: new DefaultChatTransport({ api: "/api/chat" }),
  })
  return <Chatbot chat={chat} fullHeight />
}

The code is yours
Copied into your repo by the shadcn CLI. Read it, change it, ship it.
No lock in
Components take plain props. Swap runtimes later and keep every screen.
Free to use
Personal and commercial products, under the chatcn License.

Every state, in your brand.

Running, waiting, failed, denied: each one is designed, and every color, radius and font is a CSS variable. Pick a preset, install it with one command.

Cobalt. A clear blue for buttons and focus on a neutral ramp. Build your own theme

pnpm dlx shadcn@latest add https://chatcn.dev/r/theme-cobalt.json

tool-callWaiting, done, failed, denied
changed-filesRed and green, always
weather-cardGenerative UI

tool-file-editAsks before it writes

12-Removed: const runs = await getRuns()13-Removed: return <RunsTable runs={runs} />12+Added: const runs = await getRuns({ limit: 20 })13+Added: return <RunsTable runs={runs} loadMore />

Pass a limit of 20 so the page stops loading every run.

test-resultsPassed, failed, skipped
Tests1.84 s
- Passed: returns the latest 20 runs4 ms
  Passed: pages with a cursor6 ms
  expected run_418 to be first, got run_402
1 failed, 3 passed, 1 skipped

Let your agent install it.

The docs are an MCP server and every page has a Markdown twin. Point Claude Code, Cursor or Copilot at chatcn and ask for the screen you want.

1Give your agent the docs

terminal

claude mcp add --transport http chatcn \
  https://chatcn.dev/api/mcp
claude mcp add shadcn -- npx shadcn@latest mcp

/api/mcp lists components, reads any docs page and searches the icons.
/llms.txt for agents without MCP. Add .md to any docs URL.

2Ask for what you want

Add a chatcn tool call that asks before running bash commands.

Set up your agent

Switch in an afternoon.

chatcn installs under components/ui/chatcn, next to what you have. Replace one screen at a time, keep your runtime, remove the old kit when you are done.

Migrate from AI Elements

437 icons, one grid.

Continuous strokes with real bends, at 1.5 px. 25 are drawn for agents: reasoning, handoff, context window, computer use. No sparkles.

Browse all 437 icons

reasoning
agent
subagent
handoff
tool
context-window
memory
artifact
web-search
diff
citation
computer-use

Pro is coming.

Full agent app templates, premium blocks, image and video generation and many more variants, built on the free kit. $99 once, every Pro item for life. Everything here today stays free.

Starter templatesIn progress
Premium blocksIn progress
Component variantsIn progress
Image and video generationPlanned
Extended icon setPlanned
Themes and FigmaPlanned

See what is in Pro

Need something custom? Talk to us.

Custom components, full agent interfaces, or chatcn adapted to your design system. Open now for startups and enterprise teams, from the person who designs chatcn.

Email hello@heyaadi.com Book a call DM @AadiChowdhury7 on X

How custom work runs

Questions teams ask.

Can I use chatcn in a commercial product?

Yes. Use it in as many personal and commercial products as you like, for yourself or for clients. The one thing the license asks is that you do not repackage the components as a kit of your own.

Does it work with my AI runtime?

Components take plain props, so they work with any backend. Adapters for the AI SDK, assistant-ui, AG-UI and LangGraph map their message formats onto those props for you.

Base UI or Radix?

Both. The registry is authored on Base UI and a Radix variant is generated from it, so you install whichever your shadcn setup already uses.

How much work is it to match our brand?

Colors, radii, fonts and motion are CSS variables. Paste a theme from the theme editor, or set a single accent, and every component follows. Because the code is copied into your repo, anything deeper is a normal edit.

Is there a paid version?

chatcn Pro is coming: full agent app templates, premium blocks, image and video generation and many more variants, for $99 once with lifetime updates. Everything you see today stays free. See what is in Pro.

Can you build something custom for us?

Yes. Custom components, full agent interfaces, or chatcn adapted to your design system, for startups and enterprise teams. Write to hello@heyaadi.com or book a call.

Will the components slow my app down?

Leaf components stay under 5 kB gzip, and heavy pieces such as syntax highlighting, math and diagrams load only when they are first used.

Ship the agent interface this week

Start installing

$ npx shadcn@latest add https://chatcn.dev/r/chatbot.json

Free for personal and commercial products. The code lands in your repo, so it is yours to change.