Tool Call

What the agent called, with what input, and what came back. States match AI SDK tool parts.

Input

{
  "city": "Lisbon",
  "days": 3
}

Output

{
  "high": 24,
  "low": 16,
  "conditions": "Sunny"
}

Installation

pnpm dlx shadcn@latest add @jds/tool-call

Usage

import { ToolCall, ToolCallContent, ToolCallHeader, ToolCallSection } from "@/components/ai/tool-call"

<ToolCall>
  <ToolCallHeader name="orders.lookup" state={part.state} />
  <ToolCallContent>
    <ToolCallSection label="Input" value={part.input} />
    <ToolCallSection label="Output" value={part.output} error={part.errorText} />
  </ToolCallContent>
</ToolCall>

API Reference

ToolCallHeader

Prop	Type	Default
`name` Tool name.	string	–
`state` Pending, running, done, failed.	"input-streaming" \| "input-available" \| "output-available" \| "output-error"	–

ToolCallSection

Prop	Type	Default
`label` Section heading.	string	–
`value` Rendered as JSON unless it is a string.	unknown	–
`error` Shown in destructive style instead of value.	string	–

Suggestions Call Controls