A collapsible row that displays an AI agent's tool call, showing its name, input parameters, and output or error in a quiet expandable panel.
import {
Tool,
ToolContent,
ToolHeader,
ToolInput,
ToolOutput,
} from "@/components/ui/tool";
const part = {
toolName: "listOpenInvoices",
state: "output-available" as const,
input: { customerId: "cust_12345", status: "open" },
output: [
{ id: "inv_001", amount: 250, dueDate: "2025-02-01" },
{ id: "inv_002", amount: 480, dueDate: "2025-02-15" },
],
errorText: undefined as string | undefined,
};
export default function ToolDemo() {
return (
<div className="w-full max-w-md p-6">
<Tool defaultOpen>
<ToolHeader
input={part.input}
state={part.state}
title={part.toolName}
type={`tool-${part.toolName}`}
/>
<ToolContent>
<ToolInput input={part.input} />
<ToolOutput errorText={part.errorText} output={part.output} />
</ToolContent>
</Tool>
</div>
);
}
Part of simple-ai — browse the full library on 21st.dev.