Components•Tool call card
Components•Tool call card
Tool call card
One tool invocation as a quiet row: status, name, summary and a live duration. It opens to tinted JSON input and output, with copy buttons and long results clamped.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/tool-call-cardHow to use
import { ToolCallCard, ToolCallGroup, SAMPLE_TOOL_CALLS } from "@/components/bjork-ui/ai/tool-call-card";export function Demo() { return ( <ToolCallGroup> {SAMPLE_TOOL_CALLS.map(({ id, ...call }) => ( <ToolCallCard key={id} {...call} /> ))} </ToolCallGroup> );}
Input
{ "query": "refund not received", "tags": [ "billing" ], "status": "open", "limit": 5}Output
{ "total": 3, "tickets": [ { "id": "TCK-4821", "subject": "Refund still pending after 10 days", "priority": "high", "age_days": 10 }, { "id": "TCK-4790", "subject": "Charged twice for annual plan",Input
{ "customer_id": "cus_8Hq2Lm", "include": [ "plan", "payments" ]}Output
{ "id": "cus_8Hq2Lm", "name": "Maren Osei", "email": "maren@fieldnotes.dev", "plan": "Studio annual", "lifetime_value": 1188, "delinquent": false, "last_payment": { "amount": 99, "card": "visa •4242", "refunded": null }}Input · streaming
Receiving arguments…
Options
Outcome