Code block
Shows code or a diff with a filename, line numbers and a copy button.
app/api/chat/route.ts
import { streamText } from "ai"export async function POST(request: Request) { const { messages } = await request.json() const result = streamText({ model: "anthropic/claude-sonnet-4.5", system: "You are a helpful assistant. Answer in one sentence.", messages, }) return result.toUIMessageStreamResponse()}API Reference
The CodeBlock component is a wrapper around the pre element that adds a filename header, line numbers and diff colours.
| Prop | Type | Default |
|---|---|---|
code | string | — |
filename | string | — |
view | "code""diff" | "code" |
showHeader | boolean | true |
showActions | boolean | true |
highlightLines | number[] | [] |