Agent kit
Blocks for the agent's side of the conversation.
Four React blocks for an interface where an agent works: what it called, what it asks leave for, what it is writing, and what it read. Each is one file you own, built on Base UI and Tailwind, and written out for the theme you pick, in that theme's spacing, type and colors.
01 / The blocks
One file each. No library to install.
Tool call
One call an agent made to a tool: its name, whether it is running, done or failed, and on demand what went in and what came back.
components/agent/tool-call.tsx
Approval
A request to do something the agent may not do on its own: what will happen, the exact command, and buttons to allow or deny it. The answer stays on screen.
components/agent/approval.tsx
Stream
An answer that is still being written: the text so far with a caret, a line that says the agent is working, and a button to stop it.
components/agent/stream.tsx
Citations
A numbered marker for running text and the list of sources it points at, each with its title, where it is from and the passage that was used.
components/agent/citations.tsx
They hold no state of their own beyond open and closed: your code says whether a call is running, whether a request was allowed, and what the answer is so far. The source is in packages/kit.
02 / Look
The kit in Strict One.
03 / Themes
Pick the theme. The kit follows it.
A block does not carry sizes of its own. For each theme it is written out again: a gap is that theme's spacing step, a label is that theme's label size in its label font. Every one of them is run through Strict Check in light and dark mode, at two widths, with hover and focus.