Skip to content
Sign in

The UI kit for AI chat and agents

Beautifully designed components for AI chat and agent products, with every state built in. 203 free for shadcn, 449 more in Pro, each one command away.

Browse componentsSee what is in Pro
$ npx shadcn@latest add https://chatcn.dev/r/chatbot.json

One command adds any component, block or whole screen to your repo. Free and Pro install the same way.

Works with the models, agents and frameworks you already use

  • Claude
  • OpenAI
  • Gemini
  • DeepSeek
  • Mistral
  • Ollama
  • Claude Code
  • Cursor
  • Windsurf
  • GitHub Copilot
  • AI SDK
  • LangChain
  • CrewAI
  • Next.js
  • React
  • Vite
  • TanStack
  • Tailwind CSS
  • shadcn/ui
  • Radix UI

Every piece, already beautiful.

Voice, vision, video and the agent around them. Live, themed and finished down to the empty state.

Browse all 652
ChatbotLive. Confirm the booking when it asks.Open block
Context window mapPro
Voice orbFree
Dither revealPro
Image compareFree
Keyframe stripPro
Video generationFree
Computer viewFree
Research progressFree
3D asset viewerPro
Image loaderFree
ASCII 3DPro
Product carouselPro
Embedding mapPro
Relight spherePro
Image edit regionFree
LED matrixPro
Chess boardPro
Spatial windowPro
Media galleryFree

Generative UI, out of the box.

A few lines map a tool result to a component. Every state comes with it.

$npx shadcn add tool-call
message-parts.tsx
import { ToolCall, toolCallPropsFromPart } from "@/components/ui/chatcn/tool-call"

// Any tool call, with its input, output and the approval it waits on.
if (isToolPart(part)) {
  return (
    <ToolCall
      {...toolCallPropsFromPart(part)}
      onApprove={(id, scope) => resolve(id, { approved: true, scope })}
      onDeny={(id, reason) => resolve(id, { approved: false, reason })}
    />
  )
}
Renders

10 themes, or your own.

Color, corners and type carry into every state. Drag the line to try one on.

Make your own theme

437 icons on one grid.

Hand drawn at 1.5 px, 25 made for agents. Point at one and it draws itself.

Browse all 437 icons

ProAvailable now

The rest of the product, already built.

Components you get with Pro

652

Up from 203 in the free kit. Pro adds 449, and everything it ships next.

  • 9Whole starter apps
  • 25Families
  • $99Once, with every update
Get access to all of itSee pricing

Built for the team that ships it.

Startups launch this month. Enterprises pass the review.

  • $ npx shadcn add chatbotAdded 14 files in 2 s
    $ npx shadcn add coding-agentAdded 22 files in 2 s
    $ npx shadcn add research-agentAdded 17 files in 2 s

    Whole screens, one command each

    A chatbot, a coding agent or a research agent lands working, so the first week goes to the product.

    • RunningEditing runs.ts
    • Needs approvalvercel deploy
    • Rate limitedResumes at 9:02
    • FailedRetry with Sonnet 5.5
    • DonePR #219 ready

    The edge cases are already drawn

    Streaming, approvals, rate limits and failures each have a designed state, in every component.

  • /* brand.css */
--chatcn-accent: oklch(0.55 0.21 259)
--chatcn-radius: 10px
--font-sans: "Your Grotesk"
    + yours

    Your brand in one file

    Pick a theme or write one. Color, corners and type follow into every component.

  • DenyAllow

    Accessible before review

    Keyboard paths, visible focus, polite live regions, contrast checked in light and dark.

  • components/ui/chatcn
    tool-call.tsxA
    message.tsxA
    composer.tsxA
    reasoning.tsxA

    Code you own

    The shadcn CLI copies plain files into your repo. Read them, change them; nothing calls home.

    • AI SDK
    • LangGraph
    • AG-UI
    • assistant-ui
    chatcn

    Fits the stack you run

    Plain props on Base UI or Radix, with adapters for the runtimes teams already use.

Build free. Finish with Pro.

The chat and the agent are free, for good. Pro brings the studios, devices, evals and effects that make up the rest of your product, for $99 once.

Free

The chat and agent kit, for any product.

$0forever

Browse free components
$ npx shadcn@latest add https://chatcn.dev/r/chatbot.json
  • 203 components with every state drawn
  • 7 whole screens: chatbot, coding agent, research
  • 10 themes, every token a CSS variable
  • 437 icons, 25 drawn for agents
  • AI SDK, AG-UI, LangGraph and assistant-ui
  • Base UI or Radix, one API
  • Installs with the shadcn CLI or over MCP
  • Light, dark, RTL and reduced motion
  • Personal and commercial products
The full kit

Pro

Available now

Everything in Free, and the rest of the product.

$99once

Get chatcn Pro

One payment. No subscription, every update for life.

Pro components
449
Starter apps
9
Families
25

9 whole apps you clone, rename and ship.

449 components across the whole product.

  • 72Effects and image reveals
  • 59Image and video studios
  • 46Audio and voice agents
  • 66Evals, traces and RAG
  • 38Coding and computer use
  • 50Commerce, credits, widgets
  • 34Marketing and device frames
  • 27Data, writing and safety
  • 48Chat, composer and more
  • Everything Pro releases after you buy
  • Unlimited personal and client projects
  • A private registry: install with the shadcn CLI or MCP
  • When they ship: more composers, the extended icon set, brand presets and the Figma kit

Team

Pro for the whole team, fitted to it.

Quoteper team

Get a quote
  • Everything in Pro
  • Seats for the whole team
  • Invoice billing
  • chatcn fitted to your design system
  • Custom components and agent screens
  • A fixed quote in writing, first

Fair questions.

Something else? Write to hello@heyaadi.com and the person who designs chatcn answers.

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.

Can we switch from AI Elements, assistant-ui or prompt-kit?

Yes, one screen at a time. chatcn installs beside the kit you have and keeps your runtime, so nothing has to move at once. There are step by step guides for AI Elements, assistant-ui and prompt-kit.

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 adds 449 components: image and video studios, observability, evals, coding agents, computer use and commerce, for $99 once with every later addition included. Everything free today stays free. See what is in Pro.

Can you build something custom for us?

Yes. Custom components, whole agent interfaces, or chatcn fitted to your design system. Write to hello@heyaadi.com or book a call.

Will the components slow my app down?

Leaf components stay under 5 kB gzip. Syntax highlighting, math and diagrams load the first time a page needs them.

Ship the AI product this week.

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

Give your agent the docs

Terminalclaude mcp add --transport http chatcn https://chatcn.dev/api/mcp