AI Tool Call

AI chats 45

About

Compound component for displaying AI tool and function invocations with status badges, JSON input/output, and a collapsible interface for MCP and function-calling workflows.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Tool Call to your project and fits it to your theme.

Code

How AI Tool Call is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  AiToolCall,
  AiToolCallHeader,
  AiToolCallContent,
  AiToolCallInput,
  AiToolCallOutput,
  AiToolCallError,
} from "@/components/ui/tool-call";

export default function Default() {
  return (
    <div className="mx-auto w-full max-w-md space-y-3 p-6">
      <AiToolCall name="search_web" state="completed">
        <AiToolCallHeader />
        <AiToolCallContent>
          <AiToolCallInput input={{ query: "React best practices 2025" }} />
          <AiToolCallOutput>
            Found 5 relevant articles about React best practices.
          </AiToolCallOutput>
        </AiToolCallContent>
      </AiToolCall>

      <AiToolCall name="create_file" state="running">
        <AiToolCallHeader />
      </AiToolCall>

      <AiToolCall name="delete_database" state="awaiting-approval">
        <AiToolCallHeader />
      </AiToolCall>

      <AiToolCall name="api_request" state="error">
        <AiToolCallHeader />
        <AiToolCallContent>
          <AiToolCallInput input={{ url: "https://api.example.com/data" }} />
          <AiToolCallError error="Connection timeout after 30s" />
        </AiToolCallContent>
      </AiToolCall>
    </div>
  );
}