Tool Invocation

AI chats 46

About

A composable card that displays an AI tool call with state icons (loading, success, error) and collapsible tool details showing arguments and results.

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

Code

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

Usage.tsx

"use client";

import {
	ToolInvocation,
	ToolInvocationContentCollapsible,
	ToolInvocationHeader,
	ToolInvocationName,
	ToolInvocationRawData,
} from "@/components/ui/tool-invocation";

export default function ToolInvocationDemo() {
	return (
		<div className="mx-auto w-full max-w-md p-4">
			<ToolInvocation className="w-full">
				<ToolInvocationHeader>
					<ToolInvocationName
						name="search-database"
						type="output-available"
					/>
				</ToolInvocationHeader>
				<ToolInvocationContentCollapsible defaultOpen>
					<ToolInvocationRawData
						data={{ query: "magical forest stories" }}
						title="Arguments"
					/>
					<ToolInvocationRawData
						data="Found several stories about magical forests, including 'The Whispering Woods' - a tale about a magical forest where trees can talk and animals sing beautiful songs."
						title="Result"
					/>
				</ToolInvocationContentCollapsible>
			</ToolInvocation>
		</div>
	);
}