Code execution tool

Name: chatcn
Author: Aaditya Chowdhury

Code run in a sandbox: the code with line numbers, then output, errors and the result.

Markdown

On this page

Code, output and the result of the last expression.

Installation

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

Usage

tsx

import { ToolCodeExec } from "@/components/ui/chatcn/tool-code-exec"

<ToolCodeExec state="output-available" language="python" code={code} stdout={stdout} result={value} />

tsx

import { ToolCodeExecPart, toolCodeExecRenderers } from "@/components/ui/chatcn/tool-code-exec"

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

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

Props

Prop	Type	Notes
`language`	`string`	Names the title: Ran Python
`code`	`string`
`stdout`, `stderr`	`string`	Each shows only when present
`result`	`string`	The last expression, formatted
`attachments`	`ReactNode`	Charts or files the run produced
`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.