shadcn.io is not affiliated with official shadcn/ui
Chat With Tools AI Block for Ark UI
An assistant chat in a framed window that shows each tool call as a card with its state, name, time and typed input and output, with a switch that folds the cards into chips, a Stop button and Regenerate.
Installation
Overview
Show an assistant doing work before it answers, with this AI chat with tools for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Benchmoor, a tool-shop assistant: the top bar names it with its model, and a Switch decides whether tool calls show as cards or as a row of chips. The log is a thread of Message rows; yours are bubbles, the assistant's are plain prose behind a small tile, and inside an answer each call is a Collapsible card with a glyph for its state (spinning, a check or a stop square), a sentence such as "Looked up order 4821", the tool's name and how long it took. Open a card to read the input and the output as typed JSON. A reply runs as a chain: a call runs, finishes, the next one runs, then the words arrive in pieces after a Typing Indicator Text. While it does, the send button turns into Stop; Stop keeps what arrived and says where it stopped. Under a finished answer are Copy, Regenerate, Good response and Bad response. The Shine Button, the only colored control, sends; Enter sends and Shift and Enter add a line. It's built from Message, Bubble, Collapsible, Switch, Textarea, Copy Button and Guides, with CSS only.
FAQ
What stays local, and how do I make it real?
Everything. Three sample questions are answered (an order, stock and a return) from a typed SCRIPT, each with its calls, their input and output and the words of the reply; anything else gets a line that lists the samples as chips. No tool is called and no model runs, as the line under the composer says. To wire it for real, send the message to your model in post, append each tool call as the model streams it (name, input, then the result and its time) and replace the step counter with the events you receive.
How does the chain of calls work?
A reply is a count of steps: two for each call (running, then done) and one for each piece of text. One timer moves the count on, 700 ms before the first step, 800 ms for a running call, then 450 ms per piece of text, and everything on screen is worked out from that number: which calls have appeared, which are done, how much text is shown. Stop and Regenerate only change the number, so there is no separate state to keep in step. With reduced motion the reply lands whole after the first wait.
What does the Tool calls switch do?
It folds every card into a row of chips, each with the tool's name and a state glyph, for people who want the answer and not the working. The input and output are one press away again when you switch it back on. A card's fold state is kept per call, so a card you opened stays open while you switch.
What does Stop do?
It halts the chain where it is. The calls and words that already arrived stay, a running call shows a stop square instead of the spinner, and a line under the answer says where it stopped ("Stopped before get_shipping"). Regenerate replays the same reply from the first step. Focus returns to the composer so you can carry on typing.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log. Each card's header is a button that says its state in a hidden word ("running", "done", "stopped") and opens or closes the card. Good response and Bad response are toggle buttons with a pressed state, Stop has a hidden name, and one polite line says what changed ("Benchmoor replied.", "Noted, in this demo."). State is always a glyph and a word, never a color.