Web search tool

A web search tool call: the query and result count in the header, results as a quiet list with letter tiles, titles, domains and snippets.

Markdown

On this page

Query, result count and a quiet list of results.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/tool-web-search.json

Usage

tsx

import { ToolWebSearch } from "@/components/ui/chatcn/tool-web-search"

<ToolWebSearch state="output-available" query={query} results={results} />

tsx

import { ToolWebSearchPart, toolWebSearchRenderers } from "@/components/ui/chatcn/tool-web-search"

// One part straight from AI SDK or the chatcn contract
<ToolWebSearchPart part={part} onApprove={approve} onDeny={deny} />

// Or map tool names to renderers for a whole message
renderToolPart(part, { ...toolWebSearchRenderers })

The part renderer reads { results: [...] } or a bare array, with url or link, snippet or description. It handles web_search, search_web, google_search and brave_search.

Props

Prop	Type	Notes
`query`	`string`	Shown in the header
`results`	`Source[]`	`{ url, title?, snippet?, favicon? }`
`initialCount`	`number`	Results before Show all. Default 5
`state`	`ToolDisplayState`	The ToolCall lifecycle: streaming, running, approval, output, error, denied, cancelled
`approval`, `decision`		Approval request and the user's answer, as on ToolCall
`onApprove`, `onDeny`, `onRetry`		Same callbacks as ToolCall
`errorText`	`ReactNode`	Shown on `output-error`
`durationMs`, `startedAt`	`number`	Optional. Measured automatically when omitted
`variant`	`"card" \| "inline"`	Inline sits on a trace rail
`open`, `defaultOpen`, `onOpenChange`		Controlled or uncontrolled details

Keyboard

Key	Action
`Enter`, `Space`	Expand or collapse the details
`Tab`	Move through the header, links, copy buttons and approval actions

Motion

Inherits ToolCall: the status glyph swaps with a 150 ms blur crossfade and details open over 200 ms.
Nothing inside the body animates. Under reduced motion everything snaps.