Drop-in React components that stop AI chat from looking like a JSON log

What it does

tool-ui is a collection of copy/paste React components for the awkward moment when an LLM calls a tool and your app has to show the result. Instead of dumping raw JSON into the chat stream, you get pre-built UI patterns — approval cards, parameter sliders, data tables, charts, even Instagram post previews — that users can read and interact with.

The interesting bit

The shadcn/ui model is the real hook: components live in your codebase, not a dependency you version-lock. Each one ships with a Zod schema, so tool payloads get validated before rendering. There’s also a “receipt” pattern — user choices flow back to the assistant and persist in the conversation, which is the part most “tool UIs” forget about.

Key highlights

• Copy/paste, not install — shadcn/ui model; no npm dependency to drift
• Schema-validated by default — every component has a Zod schema; safe fallback on bad tool output
• Interactive, not decorative — users can approve, select, or adjust; choices return to the assistant as receipts
• Built on familiar primitives — Radix + Tailwind, fits existing shadcn/ui theming
• Gallery with presets — realistic example data for each component so you can preview before wiring

Caveats

• README doesn’t specify framework support beyond React; Vue/Svelte developers are out of luck unless they port
• The “receipt” flow back to the assistant is mentioned but not deeply explained — unclear how much plumbing you write vs. get

Verdict

Worth a look if you’re building chat interfaces with tool use and tired of JSON blobs. Skip it if you’re not on React/shadcn/ui already or if your tool calls are simple enough that a formatted code block suffices.