AI Tool Call Card

AI
Tools

Display AI tool executions with status and expandable details

Interactive Preview

Display AI tool executions with status and expandable details

Web SearchCompleted

Searching the web

Code ExecutionRunning

Running code

Database QueryFailed

Querying database

Features

  • 6 tool types (web search, code execution, database, calculator, image gen, file read)
  • Status indicators (pending, running, completed, failed)
  • Expandable details with input/output display
  • JSON formatted input/output with syntax highlighting
  • Color-coded icons for different tool types
  • Animated loading states with spinner

Installation

This component displays AI tool execution status with expandable input/output details. Perfect for showing function calls in AI assistants.

// Required imports
import { Globe, Code, Database, ..., Check } from 'lucide-react'
import { useState } from 'react'