Introduction

chatcn is a set of React components for the parts of a product where people work with an AI: tool calls, reasoning, approvals, streaming answers, artifacts and the states between them. You copy them into your project with the shadcn CLI and own the code from then on.

What you get

• Components that handle every state an agent produces, including the awkward ones: partial input, waiting for approval, denied, failed, cancelled.
• 437 icons on one 24 px grid, including a set drawn for agents: reasoning, tool, subagent, handoff, memory, context window.
• A token system in OKLCH with a pure neutral ramp, one optional accent and a written motion spec.
• Plain props everywhere. The same component works with AI SDK, assistant-ui, LangGraph or your own backend.
• Scripted streams for every component, so demos and tests run without an API key.

Principles

• Content is the interface. Chrome recedes so the answer, the code and the decision stay in front.
• Quiet chrome, meaningful color. The frame stays neutral; color marks status, diffs, code and data, and never works alone.
• Motion with a reason. Nothing animates without a job, and nothing triggered by the keyboard animates at all.
• Every state is designed. If a state has no design, the component is not finished.

chatcn and NeonKit

NeonKit is the expressive sibling: neon components that glow when they matter. chatcn is the quiet one, built only for AI interfaces. They share the same icon drawings. NeonKit lights them as glass tubes, chatcn sets them in ink. If you want the neon version of any icon here, it lives on NeonKit.

Status

chatcn is built in public. The foundations are done: tokens, motion, icons, the data contract, the registry and the reference component, Tool call. Conversation, composer, markdown, reasoning and the rest of the catalog come next.