When the assistant generates or references code, unstyled monospace text sells it short. CodeBlock renders syntax-highlighted snippets with line numbers and a copy button. You can highlight specific lines to draw attention to changes or bugs, and collapse long snippets with `maxCollapsedLines` to keep conversations scannable. **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. Render `CodeBlock` in your UI with tool-compatible props.

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

Register this renderer so tool results display as `CodeBlock`. ```tsx // Backend tool import { tool, jsonSchema } from "ai"; const showCodeBlock = tool({ description: "Show a code snippet", inputSchema: jsonSchema<{}>({ type: "object", properties: {}, additionalProperties: false, }), async execute() { return { id: "code-block-1", code: "console.log('hello');", language: "javascript", filename: "hello.js", highlightLines: [1], }; }, }); // Frontend with assistant-ui import { type Toolkit } from "@assistant-ui/react"; import { CodeBlock } from "@/components/tool-ui/code-block"; import { safeParseSerializableCodeBlock } from "@/components/tool-ui/code-block/schema"; export const toolkit: Toolkit = { showCodeBlock: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableCodeBlock(result); if (!parsed) { return null; } return ; }, }, }; ``` ## Key Features Shiki-powered with 100+ languages Draw attention to specific lines for explanations or diffs Opt-in collapse for long snippets via `maxCollapsedLines` Filename and language badge in the header ## Props ### Core ### Display Options void", }, }} /> ### Standard Props Use [`ToolUI.LocalActions`](/docs/actions) to compose external actions next to `CodeBlock`. ## Supported Languages CodeBlock supports all languages included with Shiki, including: - TypeScript/JavaScript - Python - JSON - Bash/Shell - CSS/HTML - Markdown - SQL - YAML - Go - Rust - And many more... See [Shiki documentation](https://shiki.style/languages) for the complete list. ## Accessibility - Collapsible sections use Radix Collapsible with proper ARIA attributes - Copy button is keyboard-accessible with focus indication - Code content is selectable and works with screen readers ## Related - [Terminal](/docs/terminal): command-line output and logs

Tool UI