Tool
A collapsible card for a tool call: name, status badge, parameters and result as highlighted JSON.
import { Tool } from "@cynco-labs/ui/ai";Example
import { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput } from "@cynco-labs/ui/ai";
export default function ToolDemo() {
return (
<Tool defaultOpen className="max-w-[560px]">
<ToolHeader type="tool-find_invoice" state="output-available" title="find_invoice" />
<ToolContent>
<ToolInput input={{ reference: "INV-2026-0142" }} />
<ToolOutput
output={{ number: "INV-2026-0142", status: "sent", balanceDue: "12720.00" }}
errorText={undefined}
/>
</ToolContent>
</Tool>
);
}Use
Every tool call in a transcript.
Props
ToolHeader (type, state, title), ToolContent › ToolInput input, ToolOutput output errorText.
Notes
States: input-streaming, input-available, approval-requested, output-available, output-error, output-denied.