Introduction

A collection of React components for building agentic AI interfaces. You compose them into the shape your app needs.

Why this kit

Most chat UI kits land in one of two camps. Some are tied to a single AI SDK and stop working as soon as you swap transports or bring your own agent loop. Others stay neutral but ship a thin set of parts that covers a basic thread and little else. Either way you end up building the harder pieces yourself, like reasoning, tool calls, approvals, citations, and tasks.

This kit covers those too. Reasoning, tool calls, citations, confirmations, and tasks each have their own components, alongside the chat parts you already expect. You compose them into the layout your product needs without rewriting the basics.

Agnostic by design

Components have no opinions about your data layer. There is no built-in store, no required hook, no transport. Any AI SDK in React works, and so does your own fetch loop. The same composer that drives a basic chat can drive a custom agent harness without touching the markup.

Composable

Each piece is built from smaller headless parts. A composer is a root, an input, a toolbar, and a submit. A message is a header, a body, and a row of actions. Pull parts out, swap them, or wrap them.

This keeps the API narrow. A handful of parts compose into many layouts, instead of one large component with a long list of variants.

Built for streaming

Reasoning, tool calls, and replies render as they arrive. Components handle the in-progress states, not just the final ones. A reasoning block streams its own body. A task moves through running, succeeded, and failed without remounting. A composer toolbar can show a stop control while a reply is still streaming.

Beyond chat

Agents do more than reply. They run tools, request approval, cite sources, read documents, and step through long chains of thought. The kit includes components for each of those. Use them inside a conversation, in a sidebar, or on their own.

Own the code

Components live in your repo. There is no package to update. Drop a component in, edit it, fork it, or delete the parts you don't need.

The tradeoff is that you take on the upkeep yourself in exchange for full control over the code.

What's next

Browse the sidebar to see every component, or jump into a specific one to read the API and run the demos. Each page includes a copy-as-markdown button so you can hand the docs to a model when you want help scaffolding a component.