Web fetch tool

Name: chatcn
Author: Aaditya Chowdhury

A page fetch: the address, the page title and an excerpt of what the agent read.

Markdown

On this page

The page title, its address and what the agent read.

Installation

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

Usage

tsx

import { ToolWebFetch } from "@/components/ui/chatcn/tool-web-fetch"

<ToolWebFetch state="output-available" url={url} pageTitle={title} excerpt={text} />

tsx

import { ToolWebFetchPart, toolWebFetchRenderers } from "@/components/ui/chatcn/tool-web-fetch"

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

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

Props

Prop	Type	Notes
`url`	`string`	Host and path go in the header
`pageTitle`	`string`	Title of the fetched page
`excerpt`	`string`	What the agent read. Clamped to six lines
`status`	`number`	HTTP status. Shown in the header when not 2xx
`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.