AI Tool Call Card
Display AI tool executions with status indicators and expandable input/output details. Supports six tool types and four status states with color-coded visual styling.
Preview
Tool calls with different statuses
Searching the web
Input
{
"query": "React hooks 2025"
}Output
Found 5 results with comprehensive information about React hooks patterns and best practices.
Running code
Querying database
Tool Types
Six built-in tool types with unique colors and icons
Searching the web
Running code
Querying database
Calculating
Generating image
Reading file
Status States
Four status states with visual indicators
Searching the web
Running code
Querying database
Calculating
Props
AIToolCallCard component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
tool | ToolType | 'web_search' | Type of tool being called |
status | StatusType | 'completed' | Current status of the tool call |
input | Record<string, unknown> | {} | Input parameters for the tool |
output | string | Record<string, unknown> | null | null | Output from the tool execution |
expandable | boolean | true | Whether the card can be expanded to show details |
defaultExpanded | boolean | false | Initial expanded state |
className | string | — | Additional CSS classes for the container |
ToolType
"web_search" |"code_execution" |"database_query" |"calculator" |"image_generation" |"file_read"
StatusType
"pending" |"running" |"completed" |"failed"
Usage
Import and implementation example
import { AIToolCallCard } from '@/blocks/ai-tools/ai-tool-call-card'
export default function Example() {
return (
<div className="space-y-4">
{/* Completed web search */}
<AIToolCallCard
tool="web_search"
status="completed"
input={{ query: 'React hooks' }}
output="Found 10 results about React hooks patterns."
/>
{/* Running code execution */}
<AIToolCallCard
tool="code_execution"
status="running"
input={{ code: 'processData()' }}
/>
{/* Failed database query */}
<AIToolCallCard
tool="database_query"
status="failed"
input={{ sql: 'SELECT * FROM users' }}
output="Error: Connection timeout"
/>
{/* Non-expandable card */}
<AIToolCallCard
tool="calculator"
status="completed"
expandable={false}
/>
{/* Default expanded */}
<AIToolCallCard
tool="file_read"
status="completed"
defaultExpanded={true}
input={{ path: '/data/config.json' }}
output={{ settings: { theme: 'dark' } }}
/>
</div>
)
}Features
Built-in functionality
- Six tool types: Web search, code execution, database query, calculator, image generation, file read
- Four status states: Pending (gray), running (indigo), completed (teal), failed (rose)
- Expandable details: Click to view input/output with JSON formatting
- Color-coded icons: Each tool type has unique color and icon
- Animated loading: Spinning loader icon for running state
- JSON formatting: Pretty-printed input/output in monospace font
- Running highlight: Special indigo border and background for active tools
- Chevron animation: Smooth rotation on expand/collapse
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Expandable header is a clickable div with cursor pointerStatus badge shows current state visuallyIcons are decorative and support text labelsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Focus the expandable card header |
| Enter / Space | Toggle expanded state when focused |
Notes
- Status is communicated through both icon and text label
- Input/output sections have clear uppercase labels
- Consider adding aria-expanded to the header
- Consider adding role="button" to expandable header
- Running state animation is decorative