CodeDiff renders syntax-highlighted diffs with additions and deletions marked in color. Pass `oldCode` / `newCode` for file comparisons or a `patch` string for unified diffs from version control. **Role:** Information. For displaying data the user reads. See [Design Guidelines](/docs/design-guidelines) for how component roles work. ## Getting Started Run this once from your project root. CodeDiff uses [`@pierre/diffs`](https://www.npmjs.com/package/@pierre/diffs) for diff computation and rendering. ```bash pnpm add @pierre/diffs ``` Render `CodeDiff` in your UI with tool-compatible props.

```tsx import { CodeDiff } from "@/components/tool-ui/code-diff"; export function MyComponent() { return ( ); } ```

Register this renderer so tool results display as `CodeDiff`. ```tsx import { type Toolkit } from "@assistant-ui/react"; import { CodeDiff } from "@/components/tool-ui/code-diff"; import { safeParseSerializableCodeDiff } from "@/components/tool-ui/code-diff/schema"; export const toolkit: Toolkit = { showCodeDiff: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableCodeDiff(result); if (!parsed) { return null; } return ; }, }, }; ``` ## Key Features Pass `oldCode`/`newCode` for file diffs, or `patch` for unified diffs Language-aware highlighting powered by @pierre/diffs Side-by-side comparison with `diffStyle="split"` Collapse long diffs with `maxCollapsedLines` ## Props ### Core ### Display Options ### Standard Props Use [`ToolUI.LocalActions`](/docs/actions) to compose external actions next to `CodeDiff`. ## Accessibility - Collapsible sections use Radix Collapsible with proper ARIA attributes - Copy button is keyboard-accessible with focus indication - Diff content is selectable and works with screen readers ## Related - [Code Block](/docs/code-block): single-file syntax-highlighted code display - [Terminal](/docs/terminal): command-line output and logs

Tool UI