File read tool
A file read: path and line range in the header, a numbered preview of what the agent saw.
On this page
Path, line range and a numbered preview.
Installation
Usage
import { ToolFileRead } from "@/components/ui/chatcn/tool-file-read"
<ToolFileRead state="output-available" path="src/app/runs/layout.tsx" content={source} />import { ToolFileReadPart, toolFileReadRenderers } from "@/components/ui/chatcn/tool-file-read"
// One part straight from AI SDK or the chatcn contract
<ToolFileReadPart part={part} onApprove={approve} onDeny={deny} />
// Or map tool names to renderers for a whole message
renderToolPart(part, { ...toolFileReadRenderers })ToolCodePreview is exported too: code with a line number gutter, a cap and highlighted lines, used by the write and code execution renderers.
Props
| Prop | Type | Notes |
|---|---|---|
path | string | |
content | string | What was read |
startLine, endLine | number | Range read. Shown as L40-42 |
maxLines | number | Preview cap. Default 40 |
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.