File write tool
A new file: the path in the header, then a file card with its name, size and first lines.
On this page
A created file card with size and first lines.
Installation
Usage
import { ToolFileWrite } from "@/components/ui/chatcn/tool-file-write"
<ToolFileWrite state="output-available" path={path} content={content} />import { ToolFileWritePart, toolFileWriteRenderers } from "@/components/ui/chatcn/tool-file-write"
// One part straight from AI SDK or the chatcn contract
<ToolFileWritePart part={part} onApprove={approve} onDeny={deny} />
// Or map tool names to renderers for a whole message
renderToolPart(part, { ...toolFileWriteRenderers })Props
| Prop | Type | Notes |
|---|---|---|
path | string | |
content | string | The written file |
overwrite | boolean | Says Wrote instead of Created |
previewLines | number | Default 12 |
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.