Code Diff

Display syntax-highlighted diffs.

TypeScript•lib/auth.ts

+1 -1

<CodeDiff  id="code-diff-preview-refactor"  language="typescript"  filename="lib/auth.ts"  oldCode={`export async function fetchUser(id: string) {  const res = await db.users.findUnique({ where: { id } });  if (!res) throw new Error(\"User not found\");  return res;}`}  newCode={`export async function fetchUser(id: string) {  const res = await db.users.findUnique({ where: { id } });  if (!res) return null;  return res;}`}/>

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 for how component roles work.

Getting Started

Run this once from your project root.

npx shadcn@latest add @tool-ui/code-diff

CodeDiff uses @pierre/diffs for diff computation and rendering.

pnpm add @pierre/diffs

Render CodeDiff in your UI with tool-compatible props.

import { CodeDiff } from "@/components/tool-ui/code-diff";export function MyComponent() {  return (    <CodeDiff      id="my-diff-example"      language="typescript"      filename="lib/auth.ts"      oldCode={`function checkAuth(token: string) {  if (!token) throw new Error("Missing token");  return jwt.verify(token, SECRET);}`}      newCode={`function checkAuth(token: string): AuthResult {  if (!token) return { ok: false, error: "missing_token" };  const decoded = jwt.verify(token, SECRET);  return { ok: true, user: decoded };}`}    />  );}

import { type Toolkit } from "@assistant-ui/react";import { CodeDiff } from "@/components/tool-ui/code-diff";import { safeParseSerializableCodeDiff } from "@/components/tool-ui/code-diff/schema";import { createResultToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = {  showCodeDiff: {    type: "backend",    render: createResultToolRenderer({      safeParse: safeParseSerializableCodeDiff,      render: (parsedResult) => (        <CodeDiff {...parsedResult} />      ),    }),  },};