An expandable section showing AI agent tool usage with icons, inputs, and outputs.
Command Palette
Search for a command to run...
Search for a command to run...
An expandable section showing AI agent tool usage with icons, inputs, and outputs.
Gmail
Google Calendar
Shows a collapsible timeline of tools an AI agent used during a conversation, with stacked icons and expandable details for each call.
Supports custom integration icons via URL and special agent categories like handoff and retrieve_tools.
Linear
GitHub
Slack
npx shadcn@latest add https://ui.heygaia.io/r/tool-calls-section.jsonimport { ToolCallsSection } from "@/components/ui/tool-calls-section";
const toolCalls = [
{
tool_name: "search_web",
tool_category: "search",
message: "Searched for 'React best practices'",
inputs: { query: "React best practices" },
output: "Found 10 relevant results.",
},
{
tool_name: "send_email",
tool_category: "gmail",
message: "Sent email to the team",
},
];
export default function Example() {
return <ToolCallsSection toolCalls={toolCalls} />;
}| Prop | Type | Default | Description |
|---|---|---|---|
| toolCalls | ToolCallEntry[] | - | Array of tool call entries (required) |
| integrations | Map<string, IntegrationInfo> | - | Optional lookup for custom integration icons |
| maxIconsToShow | number | 10 | Max icons in stacked display |
| defaultExpanded | boolean | false | Start with accordion expanded |
| className | string | - | Custom container class |
| iconSize | number | 21 | Icon size in pixels |
| renderIcon | (call, size) => ReactNode | - | Custom icon renderer override |
| renderContent | (content) => ReactNode | - | Custom content renderer for inputs/outputs |
interface ToolCallEntry {
tool_name: string; // Name of the tool
tool_category: string; // Category for icon lookup
message?: string; // Human-readable description
show_category?: boolean; // Show category label (default: true)
tool_call_id?: string; // Unique identifier
inputs?: Record<string, unknown>; // Input parameters
output?: string; // Tool output/result
icon_url?: string; // Custom icon URL
integration_name?: string; // Friendly integration name
}
interface IntegrationInfo {
iconUrl?: string;
name?: string;
}