Skip to content

Tools & Approvals

Tool Call Block

Inline chat card for a tool call: name, collapsible JSON args, status, duration and a result preview.

2 variantsMIT

Preview

Arguments
{
  "query": "postgres 17 logical replication failover slots",
  "limit": 5
}

web.search: Queued

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/tool-call-block.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { ToolCallBlock, type ToolCall } from "@/components/ui/tool-call-block";

// Map your SDK's tool-use events onto ToolCall and re-render as they change.
function toToolCall(part: ToolUsePart): ToolCall {
  return {
    id: part.id,
    name: part.name,
    args: part.input,
    status: part.state === "output-available" ? "success" : part.state === "error" ? "error" : "running",
    durationMs: part.durationMs,
    result: part.output,
    error: part.errorText,
  };
}

export function ToolCalls({ parts }: { parts: ToolUsePart[] }) {
  return parts.map((part) => (
    <ToolCallBlock
      key={part.id}
      data={toToolCall(part)}
      onRetry={(call) => agent.retryToolCall(call.id)}
    />
  ));
}

Props

PropTypeDefaultDescription
data*ToolCall—The tool call. While status is running the duration counts up on its own; pass durationMs once it settles.
defaultOpenbooleanfalseStart with arguments and result expanded.
onRetry(call: ToolCall) => void—Shows a Retry button next to the error when the call failed.
classNamestring—Extra classes for the root element.
type ToolCall = {
  id: string;
  name: string;                 // "web.search", "fs.read"
  args: Record<string, unknown>;
  status: "pending" | "running" | "success" | "error";
  durationMs?: number;
  result?: string | Record<string, unknown>;
  error?: string;
};