Tool fallback

The renderer for tools nobody wrote a renderer for: summary first, JSON one click away. Also home to the renderer map that ties tool names to renderers.

Markdown

On this page

Summary first, JSON on demand.

Installation

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

Usage

tsx

import { renderToolPart } from "@/components/ui/chatcn/tool-fallback"
import { toolBashRenderers } from "@/components/ui/chatcn/tool-bash"
import { toolWebSearchRenderers } from "@/components/ui/chatcn/tool-web-search"

const renderers = { ...toolBashRenderers, ...toolWebSearchRenderers }

{message.parts.filter(isToolPart).map((part) =>
  renderToolPart(part, renderers, { variant: "inline", onApprove, onDeny }),
)}

Lookup is exact first, then case and separator insensitive, so readFile, read-file and read_file all match. Anything unknown renders ToolFallbackPart.

Examples

Renderer map

Tool names map to renderers; anything unknown falls back.

Props

Prop	Type	Notes
`name`	`string`	Tool name. Sets the title
`input`, `inputText`, `output`		Summarized, raw on demand
`title`, `icon`	`ReactNode`	Optional overrides
`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.