Skip to content

Tool

One tool call, with its input and result. The badge says where the call is, with an icon and a word for each of the seven states.

Sourcecomponents/tool.tsx
Parameters
{  "query": "accessible pricing table",  "limit": 3}
Result
{  "results": [    {      "title": "Tables tutorial",      "url": "https://www.w3.org/WAI/tutorials/tables/"    },    {      "title": "The table element",      "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table"    }  ]}
Parameters
{  "url": "https://example.com/pricing"}
Error
Request failed: 404 Not Found

Usage

Tool usage
import type { ToolState } from "@/components/lib/agent-types";import { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput } from "@/components/tool";
type ToolPart = { type: `tool-${string}`; state: ToolState; input?: unknown; output?: unknown; errorText?: string };
export function ToolUsage({ part }: { part: ToolPart }) {  return (    <Tool>      <ToolHeader type={part.type} state={part.state} />      <ToolContent>        <ToolInput input={part.input} />        <ToolOutput output={part.output} errorText={part.errorText} />      </ToolContent>    </Tool>  );}

When to use

Use when

One tool call, with its input and result as Code Blocks. Pass the part's state; the badge says Pending, Running, Awaiting approval, Responded, Completed, Error or Denied, with an icon

Don’t use when

A run of many steps (use Trace); the answer itself (use Message)