Code Block

Copy<script setup lang="ts">
import { DownloadIcon, FileCodeIcon, WrapTextIcon } from '@lucide/vue'
import { useToggle } from '@vueuse/core'
import { Button } from '@/components/ui/button'
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockLine,
  CodeBlockTitle,
  CodeBlockToken,
  useHighlightedCode,
} from '@/components/ui/code-block'

const code = `import { streamText } from "ai"

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)

  const result = streamText({
    model: "anthropic/claude-sonnet-4.5",
    system: "You are a helpful assistant. Answer in one short paragraph.",
    messages,
  })

  return result.toUIMessageStreamResponse()
})`

const [wrap, toggleWrap] = useToggle(false)
const lines = useHighlightedCode(code, 'ts')

function download(value: string, filename: string) {
  const url = URL.createObjectURL(new Blob([value], { type: 'text/plain' }))
  const link = document.createElement('a')
  link.href = url
  link.download = filename
  link.click()
  URL.revokeObjectURL(url)
}
</script>

<template>
  <div class="w-full max-w-lg">
    <CodeBlock>
      <CodeBlockHeader>
        <CodeBlockTitle>
          <FileCodeIcon />
          server/api/chat.post.ts
        </CodeBlockTitle>
        <CodeBlockActions>
          <Button
            variant="ghost"
            size="icon-xs"
            aria-label="Wrap lines"
            :aria-pressed="wrap"
            class="aria-pressed:text-foreground"
            @click="toggleWrap()"
          >
            <WrapTextIcon />
          </Button>
          <Button
            variant="ghost"
            size="icon-xs"
            aria-label="Download"
            @click="download(code, 'chat.post.ts')"
          >
            <DownloadIcon />
          </Button>
          <CodeBlockCopyButton :value="code" />
        </CodeBlockActions>
      </CodeBlockHeader>
      <CodeBlockContent :wrap="wrap" line-numbers>
        <CodeBlockLine
          v-for="(line, index) in lines"
          :key="index"
          :variant="index >= 5 && index <= 9 ? 'highlighted' : 'default'"
        >
          <CodeBlockToken v-for="(token, i) in line" :key="i" :token="token" />
        </CodeBlockLine>
      </CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import { CodeBlock, CodeBlockContent } from '@/components/ui/code-block'

const output = `$ pnpm build
> nuxt build

 ✔ Client built in 4215ms
 ✔ Server built in 1803ms

Route                      Size  Gzip
┌ ○ /                    1.9 kB  0.9 kB
├ ○ /about               993 B   0.5 kB
└ ƒ /api/chat            141 B   0.1 kB`
</script>

<template>
  <div class="w-full max-w-md">
    <CodeBlock>
      <CodeBlockContent>{{ output }}</CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import { TerminalIcon } from '@lucide/vue'
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockTitle,
} from '@/components/ui/code-block'

const command = 'pnpm add ai @ai-sdk/vue zod'

const output = `$ ${command}
Packages: +14
Progress: resolved 412, reused 398, downloaded 14, added 14, done
Done in 2.8s using pnpm v10.18.0`
</script>

<template>
  <div class="w-full max-w-md">
    <CodeBlock>
      <CodeBlockHeader>
        <CodeBlockTitle>
          <TerminalIcon />
          Terminal
        </CodeBlockTitle>
        <CodeBlockActions>
          <CodeBlockCopyButton :value="command" />
        </CodeBlockActions>
      </CodeBlockHeader>
      <CodeBlockContent>{{ output }}</CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import { DownloadIcon, TerminalIcon, WrapTextIcon } from '@lucide/vue'
import { useToggle } from '@vueuse/core'
import { Button } from '@/components/ui/button'
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockTitle,
} from '@/components/ui/code-block'

const output = `$ pnpm lint
app/components/MessageList.vue
  18:22  error    'messages' is possibly 'undefined'. Add a guard before calling map  ts/no-unsafe-call
  42:7   warning  'scrollToBottom' is assigned a value but never used  unused-imports/no-unused-vars

✖ 2 problems (1 error, 1 warning)`

const [wrap, toggleWrap] = useToggle(true)

function download(value: string, filename: string) {
  const url = URL.createObjectURL(new Blob([value], { type: 'text/plain' }))
  const link = document.createElement('a')
  link.href = url
  link.download = filename
  link.click()
  URL.revokeObjectURL(url)
}
</script>

<template>
  <div class="w-full max-w-md">
    <CodeBlock>
      <CodeBlockHeader>
        <CodeBlockTitle>
          <TerminalIcon />
          Terminal
        </CodeBlockTitle>
        <CodeBlockActions>
          <Button
            variant="ghost"
            size="icon-xs"
            aria-label="Wrap lines"
            :aria-pressed="wrap"
            class="aria-pressed:text-foreground"
            @click="toggleWrap()"
          >
            <WrapTextIcon />
          </Button>
          <Button
            variant="ghost"
            size="icon-xs"
            aria-label="Download"
            @click="download(output, 'lint.log')"
          >
            <DownloadIcon />
          </Button>
          <CodeBlockCopyButton :value="output" />
        </CodeBlockActions>
      </CodeBlockHeader>
      <CodeBlockContent :wrap="wrap">
        {{ output }}
      </CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
} from '@/components/ui/code-block'

const output = `$ pnpm add ai @ai-sdk/vue zod
Progress: resolved 412, reused 398, downloaded 14, added 14, done
dependencies:
+ @ai-sdk/vue 3.0.12
+ ai 6.0.12
+ zod 4.1.12
Done in 2.8s using pnpm v10.18.0`
</script>

<template>
  <div class="w-full max-w-md">
    <CodeBlock>
      <CodeBlockActions>
        <CodeBlockCopyButton :value="output" />
      </CodeBlockActions>
      <CodeBlockContent>{{ output }}</CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import { CodeBlock, CodeBlockContent } from '@/components/ui/code-block'

const code = `{
  "name": "chat",
  "private": true,
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build"
  }
}`
</script>

<template>
  <div class="w-full max-w-md">
    <CodeBlock>
      <CodeBlockContent line-numbers>
        {{ code }}
      </CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import {
  CodeBlock,
  CodeBlockContent,
  CodeBlockHeader,
  CodeBlockLine,
  CodeBlockTitle,
  CodeBlockToken,
  useHighlightedCode,
} from '@/components/ui/code-block'

const code = `  if (!session) {
    throw createError({ statusCode: 401 })
  }

  const projects = await db.project.findMany({
    where: { ownerId: session.user.id },
    orderBy: { updatedAt: "desc" },
  })

  return projects
})`

const lines = useHighlightedCode(code, 'ts')
</script>

<template>
  <div class="w-full max-w-md">
    <CodeBlock>
      <CodeBlockHeader>
        <CodeBlockTitle>server/api/projects.get.ts</CodeBlockTitle>
      </CodeBlockHeader>
      <CodeBlockContent line-numbers :start-line="995">
        <CodeBlockLine v-for="(line, index) in lines" :key="index">
          <CodeBlockToken v-for="(token, i) in line" :key="i" :token="token" />
        </CodeBlockLine>
      </CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import { CodeBlock, CodeBlockContent } from '@/components/ui/code-block'

const output = `Error: The model "anthropic/claude-sonnet-4.5" returned an error: Request too large. The prompt is 212,431 tokens and the context window is 200,000 tokens. Remove some messages or summarize the conversation and try again.`
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-4">
    <CodeBlock>
      <CodeBlockContent>{{ output }}</CodeBlockContent>
    </CodeBlock>
    <CodeBlock>
      <CodeBlockContent wrap>
        {{ output }}
      </CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import {
  CodeBlock,
  CodeBlockContent,
  CodeBlockLine,
} from '@/components/ui/code-block'

const code = `export default defineNuxtConfig({
  experimental: {
    viewTransition: true,
    typedPages: true,
  },
  image: {
    domains: ["avatars.githubusercontent.com"],
  },
})`

const highlighted = [2, 3]
</script>

<template>
  <div class="w-full max-w-md">
    <CodeBlock>
      <CodeBlockContent line-numbers>
        <CodeBlockLine
          v-for="(line, index) in code.split('\n')"
          :key="index"
          :variant="highlighted.includes(index) ? 'highlighted' : 'default'"
        >
          {{ line }}
        </CodeBlockLine>
      </CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockLine,
  CodeBlockTitle,
} from '@/components/ui/code-block'

const patch = ` <template>
-  <p>Hello, {{ name }}</p>
+  <p class="text-sm text-muted-foreground">
+    Hello, {{ name }}!
+  </p>
 </template>`

function getVariant(line: string) {
  if (line.startsWith('+'))
    return 'added'

  if (line.startsWith('-'))
    return 'removed'

  return 'default'
}
</script>

<template>
  <div class="w-full max-w-md">
    <CodeBlock>
      <CodeBlockHeader>
        <CodeBlockTitle>components/Greeting.vue</CodeBlockTitle>
        <CodeBlockActions>
          <CodeBlockCopyButton :value="patch" />
        </CodeBlockActions>
      </CodeBlockHeader>
      <CodeBlockContent>
        <CodeBlockLine
          v-for="(line, index) in patch.split('\n')"
          :key="index"
          :variant="getVariant(line)"
        >
          {{ line.slice(1) }}
        </CodeBlockLine>
      </CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockTitle,
} from '@/components/ui/code-block'

const logs = Array.from(
  { length: 40 },
  (_, index) =>
    `[${String(index + 1).padStart(2, '0')}] GET /api/chat 200 in ${12 + ((index * 7) % 40)}ms`,
).join('\n')
</script>

<template>
  <div class="w-full max-w-md">
    <CodeBlock>
      <CodeBlockHeader>
        <CodeBlockTitle>Logs</CodeBlockTitle>
        <CodeBlockActions>
          <CodeBlockCopyButton :value="logs" />
        </CodeBlockActions>
      </CodeBlockHeader>
      <CodeBlockContent class="max-h-48 scroll-fade-y">
        {{ logs }}
      </CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import { ChevronDownIcon } from '@lucide/vue'
import { useToggle } from '@vueuse/core'
import { useId } from 'vue'
import { Button } from '@/components/ui/button'
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockFooter,
  CodeBlockHeader,
  CodeBlockLine,
  CodeBlockTitle,
  CodeBlockToken,
  useHighlightedCode,
} from '@/components/ui/code-block'

const code = `<script setup lang="ts">
import { Chat } from "@ai-sdk/vue"
import { ref } from "vue"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

const input = ref("")
const chat = new Chat({})

function onSubmit() {
  chat.sendMessage({ text: input.value })
  input.value = ""
}
<\/script>

<template>
  <div class="flex flex-col gap-4">
    <div v-for="message in chat.messages" :key="message.id">
      <template v-for="(part, index) in message.parts" :key="index">
        <p v-if="part.type === 'text'">
          {{ part.text }}
        </p>
      </template>
    </div>
    <form @submit.prevent="onSubmit">
      <Input v-model="input" />
      <Button :disabled="chat.status !== 'ready'">
        Send
      </Button>
    </form>
  </div>
</template>`

const [expanded, toggleExpanded] = useToggle(false)
const lines = useHighlightedCode(code, 'vue')
const id = useId()
</script>

<template>
  <div class="w-full max-w-md">
    <CodeBlock>
      <CodeBlockHeader>
        <CodeBlockTitle>components/Chat.vue</CodeBlockTitle>
        <CodeBlockActions>
          <CodeBlockCopyButton :value="code" />
        </CodeBlockActions>
      </CodeBlockHeader>
      <CodeBlockContent
        :id="id"
        line-numbers
        :class="expanded ? undefined : 'max-h-64 scroll-fade-y overflow-y-hidden'"
      >
        <CodeBlockLine v-for="(line, index) in lines" :key="index">
          <CodeBlockToken v-for="(token, i) in line" :key="i" :token="token" />
        </CodeBlockLine>
      </CodeBlockContent>
      <CodeBlockFooter class="justify-center">
        <Button
          variant="ghost"
          size="xs"
          :aria-expanded="expanded"
          :aria-controls="id"
          @click="toggleExpanded()"
        >
          <ChevronDownIcon class="transition-transform in-aria-expanded:rotate-180" />
          {{ expanded ? 'Show less' : 'Show more' }}
        </Button>
      </CodeBlockFooter>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import { ChevronDownIcon } from '@lucide/vue'
import { useToggle } from '@vueuse/core'
import { useId } from 'vue'
import { Button } from '@/components/ui/button'
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockFooter,
  CodeBlockHeader,
  CodeBlockLine,
  CodeBlockTitle,
  CodeBlockToken,
  useHighlightedCode,
} from '@/components/ui/code-block'

const code = `<script setup lang="ts">
import { Chat } from "@ai-sdk/vue"
import { ref } from "vue"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

const input = ref("")
const chat = new Chat({})

function onSubmit() {
  chat.sendMessage({ text: input.value })
  input.value = ""
}
<\/script>

<template>
  <div class="flex flex-col gap-4">
    <div v-for="message in chat.messages" :key="message.id">
      <template v-for="(part, index) in message.parts" :key="index">
        <p v-if="part.type === 'text'">
          {{ part.text }}
        </p>
      </template>
    </div>
    <form @submit.prevent="onSubmit">
      <Input v-model="input" />
      <Button :disabled="chat.status !== 'ready'">
        Send
      </Button>
    </form>
  </div>
</template>`

const [expanded, toggleExpanded] = useToggle(false)
const lines = useHighlightedCode(code, 'vue')
const id = useId()
</script>

<template>
  <div class="w-full max-w-md">
    <CodeBlock>
      <CodeBlockHeader>
        <CodeBlockTitle>components/Chat.vue</CodeBlockTitle>
        <CodeBlockActions>
          <CodeBlockCopyButton :value="code" />
        </CodeBlockActions>
      </CodeBlockHeader>
      <CodeBlockContent
        :id="id"
        line-numbers
        :class="expanded ? 'max-h-96 scroll-fade-y' : 'max-h-64 scroll-fade-y overflow-y-hidden'"
      >
        <CodeBlockLine v-for="(line, index) in lines" :key="index">
          <CodeBlockToken v-for="(token, i) in line" :key="i" :token="token" />
        </CodeBlockLine>
      </CodeBlockContent>
      <CodeBlockFooter class="justify-center">
        <Button
          variant="ghost"
          size="xs"
          :aria-expanded="expanded"
          :aria-controls="id"
          @click="toggleExpanded()"
        >
          <ChevronDownIcon class="transition-transform in-aria-expanded:rotate-180" />
          {{ expanded ? 'Show less' : 'Show more' }}
        </Button>
      </CodeBlockFooter>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import { TerminalIcon } from '@lucide/vue'
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockTitle,
} from '@/components/ui/code-block'

const output = `$ pnpm add ai @ai-sdk/vue zod
Progress: resolved 412, reused 398, downloaded 14, added 14, done
Done in 2.8s using pnpm v10.18.0`
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-4">
    <CodeBlock>
      <CodeBlockHeader>
        <CodeBlockTitle>
          <TerminalIcon />
          Terminal
        </CodeBlockTitle>
        <CodeBlockActions>
          <CodeBlockCopyButton :value="output" />
        </CodeBlockActions>
      </CodeBlockHeader>
      <CodeBlockContent wrap>
        {{ output }}
      </CodeBlockContent>
    </CodeBlock>
    <CodeBlock size="sm">
      <CodeBlockHeader>
        <CodeBlockTitle>
          <TerminalIcon />
          Terminal
        </CodeBlockTitle>
        <CodeBlockActions>
          <CodeBlockCopyButton :value="output" />
        </CodeBlockActions>
      </CodeBlockHeader>
      <CodeBlockContent wrap>
        {{ output }}
      </CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockTitle,
} from '@/components/ui/code-block'

const error = `TypeError: Cannot read properties of undefined (reading 'map')
    at setup (components/MessageList.vue:18:22)
    at callWithErrorHandling (runtime-core.esm-bundler.js:199:19)`
</script>

<template>
  <div class="w-full max-w-md">
    <CodeBlock variant="destructive">
      <CodeBlockHeader>
        <CodeBlockTitle>Error</CodeBlockTitle>
        <CodeBlockActions>
          <CodeBlockCopyButton :value="error" />
        </CodeBlockActions>
      </CodeBlockHeader>
      <CodeBlockContent wrap>
        {{ error }}
      </CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import { TerminalIcon } from '@lucide/vue'
import { CodeBlock, CodeBlockContent } from '@/components/ui/code-block'
import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from '@/components/ui/trace'

const output = `$ node --version
v24.18.0`

const error = `$ pnpm dev
Error: listen EADDRINUSE: address already in use :::3000
    at Server.setupListenHandle [as _listen2] (node:net:1908:16)`
</script>

<template>
  <div class="w-full max-w-md">
    <Trace>
      <TraceCollapsible default-open>
        <TraceCollapsibleTrigger>
          <TraceLine>
            <TraceIcon>
              <TerminalIcon />
            </TraceIcon>
            <TraceTitle>Ran node --version</TraceTitle>
          </TraceLine>
        </TraceCollapsibleTrigger>
        <TraceCollapsibleContent>
          <CodeBlock size="sm">
            <CodeBlockContent wrap class="max-h-64">
              {{ output }}
            </CodeBlockContent>
          </CodeBlock>
        </TraceCollapsibleContent>
      </TraceCollapsible>
      <TraceCollapsible default-open>
        <TraceCollapsibleTrigger>
          <TraceLine status="error">
            <TraceIcon>
              <TerminalIcon />
            </TraceIcon>
            <TraceTitle>Failed to run pnpm dev</TraceTitle>
          </TraceLine>
        </TraceCollapsibleTrigger>
        <TraceCollapsibleContent>
          <CodeBlock size="sm" variant="destructive">
            <CodeBlockContent wrap class="max-h-64">
              {{ error }}
            </CodeBlockContent>
          </CodeBlock>
        </TraceCollapsibleContent>
      </TraceCollapsible>
    </Trace>
  </div>
</template>

Copy<script setup lang="ts">
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockLine,
  CodeBlockTitle,
  CodeBlockToken,
  useHighlightedCode,
} from '@/components/ui/code-block'
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@/components/ui/tabs'

const files = [
  {
    id: 'route',
    title: 'server/api/chat.post.ts',
    language: 'ts',
    code: `import { streamText } from "ai"

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)
  const result = streamText({ model: "anthropic/claude-sonnet-4.5", messages })

  return result.toUIMessageStreamResponse()
})`,
  },
  {
    id: 'chat',
    title: 'components/Chat.vue',
    language: 'vue',
    code: `<script setup lang="ts">
import { Chat } from "@ai-sdk/vue"

const chat = new Chat({})
<\/script>

<template>
  <MessageList :messages="chat.messages" />
</template>`,
  },
  {
    id: 'env',
    title: '.env',
    language: 'bash',
    code: 'AI_GATEWAY_API_KEY=your-api-key',
  },
]

const highlighted = files.map(file => useHighlightedCode(file.code, file.language))
</script>

<template>
  <Tabs default-value="route" class="w-full max-w-md">
    <TabsList>
      <TabsTrigger v-for="file in files" :key="file.id" :value="file.id">
        {{ file.title.split('/').at(-1) }}
      </TabsTrigger>
    </TabsList>
    <TabsContent v-for="(file, index) in files" :key="file.id" :value="file.id">
      <CodeBlock>
        <CodeBlockHeader>
          <CodeBlockTitle>{{ file.title }}</CodeBlockTitle>
          <CodeBlockActions>
            <CodeBlockCopyButton :value="file.code" />
          </CodeBlockActions>
        </CodeBlockHeader>
        <CodeBlockContent line-numbers>
          <CodeBlockLine v-for="(line, i) in highlighted[index]?.value" :key="i">
            <CodeBlockToken v-for="(token, j) in line" :key="j" :token="token" />
          </CodeBlockLine>
        </CodeBlockContent>
      </CodeBlock>
    </TabsContent>
  </Tabs>
</template>

Copy<script setup lang="ts">
import { Bubble, BubbleContent } from '@/components/ui/bubble'
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockLine,
  CodeBlockTitle,
  CodeBlockToken,
  useHighlightedCode,
} from '@/components/ui/code-block'
import { Message, MessageContent } from '@/components/ui/message'

const code = `import { streamText } from "ai"

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)

  const result = streamText({
    model: "anthropic/claude-sonnet-4.5",
    messages,
  })

  return result.toUIMessageStreamResponse()
})`

const lines = useHighlightedCode(code, 'ts')
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-4 text-sm">
    <Message align="end">
      <MessageContent>
        <Bubble variant="muted">
          <BubbleContent>How do I stream a response?</BubbleContent>
        </Bubble>
      </MessageContent>
    </Message>
    <Message>
      <MessageContent class="gap-3">
        <p>Create a server route that returns the stream:</p>
        <CodeBlock>
          <CodeBlockHeader>
            <CodeBlockTitle>server/api/chat.post.ts</CodeBlockTitle>
            <CodeBlockActions>
              <CodeBlockCopyButton :value="code" />
            </CodeBlockActions>
          </CodeBlockHeader>
          <CodeBlockContent>
            <CodeBlockLine v-for="(line, index) in lines" :key="index">
              <CodeBlockToken v-for="(token, i) in line" :key="i" :token="token" />
            </CodeBlockLine>
          </CodeBlockContent>
        </CodeBlock>
        <p>The client reads it with Chat from @ai-sdk/vue.</p>
      </MessageContent>
    </Message>
  </div>
</template>

Copy<script setup lang="ts">
import { FileCodeIcon } from '@lucide/vue'
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockLine,
  CodeBlockTitle,
  CodeBlockToken,
  useHighlightedCode,
} from '@/components/ui/code-block'

const code = `import { streamText } from "ai"

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)
  const result = streamText({ model: "anthropic/claude-sonnet-4.5", messages })

  return result.toUIMessageStreamResponse()
})`

const lines = useHighlightedCode(code, 'ts')
</script>

<template>
  <div class="typeset w-full max-w-md">
    <h3>Stream a response</h3>
    <p>
      Create a server route that calls <code>streamText</code> and returns
      the stream to the client.
    </p>
    <CodeBlock>
      <CodeBlockHeader>
        <CodeBlockTitle>
          <FileCodeIcon />
          server/api/chat.post.ts
        </CodeBlockTitle>
        <CodeBlockActions>
          <CodeBlockCopyButton :value="code" />
        </CodeBlockActions>
      </CodeBlockHeader>
      <CodeBlockContent line-numbers>
        <CodeBlockLine v-for="(line, index) in lines" :key="index">
          <CodeBlockToken v-for="(token, i) in line" :key="i" :token="token" />
        </CodeBlockLine>
      </CodeBlockContent>
    </CodeBlock>
    <p>
      The <code>Chat</code> class from <code>@ai-sdk/vue</code> reads the
      stream on the client and renders the answer while it is written.
    </p>
  </div>
</template>

Copy<script setup lang="ts">
import {
  CodeBlock,
  CodeBlockContent,
  CodeBlockHeader,
  CodeBlockLine,
  CodeBlockTitle,
  CodeBlockToken,
  useHighlightedCode,
} from '@/components/ui/code-block'

const code = `{
  "location": "San Francisco",
  "temperature": 18,
  "unit": "celsius",
  "conditions": ["fog", "wind"]
}`

const lines = useHighlightedCode(code, 'json')
</script>

<template>
  <div class="w-full max-w-md">
    <CodeBlock>
      <CodeBlockHeader>
        <CodeBlockTitle>getWeather output</CodeBlockTitle>
      </CodeBlockHeader>
      <CodeBlockContent>
        <CodeBlockLine v-for="(line, index) in lines" :key="index">
          <CodeBlockToken v-for="(token, i) in line" :key="i" :token="token" />
        </CodeBlockLine>
      </CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import {
  CodeBlock,
  CodeBlockContent,
  CodeBlockHeader,
  CodeBlockLine,
  CodeBlockTitle,
  CodeBlockToken,
  useHighlightedCode,
} from '@/components/ui/code-block'

const samples = [
  {
    language: 'css',
    title: 'assets/css/main.css',
    code: `@import "tailwindcss";

:root {
  --radius: 0.625rem;
}`,
  },
  {
    language: 'python',
    title: 'main.py',
    code: `def greet(name: str) -> str:
    return f"Hello, {name}!"`,
  },
  {
    language: 'text',
    title: 'notes.txt',
    code: 'A language that is not in the list renders as plain text.',
  },
]

const highlighted = samples.map(sample => useHighlightedCode(sample.code, sample.language))
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-4">
    <CodeBlock v-for="(sample, index) in samples" :key="sample.language">
      <CodeBlockHeader>
        <CodeBlockTitle>{{ sample.title }}</CodeBlockTitle>
      </CodeBlockHeader>
      <CodeBlockContent>
        <CodeBlockLine v-for="(line, i) in highlighted[index]?.value" :key="i">
          <CodeBlockToken v-for="(token, j) in line" :key="j" :token="token" />
        </CodeBlockLine>
      </CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import { TerminalIcon } from '@lucide/vue'
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockLine,
  CodeBlockTitle,
  CodeBlockToken,
  useHighlightedCode,
} from '@/components/ui/code-block'

const output = `$ pnpm test
\x1B[32m✓\x1B[39m src/format.test.ts \x1B[2m(4 tests)\x1B[22m
\x1B[32m✓\x1B[39m src/parse.test.ts \x1B[2m(7 tests)\x1B[22m
\x1B[31m✗\x1B[39m src/stream.test.ts \x1B[2m(3 tests | 1 failed)\x1B[22m

\x1B[31mAssertionError: expected 'hello' to be 'hello world'\x1B[39m

Tests  \x1B[31m1 failed\x1B[39m | \x1B[32m13 passed\x1B[39m (14)`

// eslint-disable-next-line no-control-regex
const plain = output.replace(/\x1B\[[\d;]*m/g, '')

const lines = useHighlightedCode(output, 'ansi')
</script>

<template>
  <div class="w-full max-w-md">
    <CodeBlock>
      <CodeBlockHeader>
        <CodeBlockTitle>
          <TerminalIcon />
          Terminal
        </CodeBlockTitle>
        <CodeBlockActions>
          <CodeBlockCopyButton :value="plain" />
        </CodeBlockActions>
      </CodeBlockHeader>
      <CodeBlockContent wrap>
        <CodeBlockLine v-for="(line, index) in lines" :key="index">
          <CodeBlockToken v-for="(token, i) in line" :key="i" :token="token" />
        </CodeBlockLine>
      </CodeBlockContent>
    </CodeBlock>
  </div>
</template>

Copy<script setup lang="ts">
import { RotateCcwIcon } from '@lucide/vue'
import { useIntervalFn } from '@vueuse/core'
import { computed, ref } from 'vue'
import { Button } from '@/components/ui/button'
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockLine,
  CodeBlockTitle,
  CodeBlockToken,
  useHighlightedCode,
} from '@/components/ui/code-block'

const blocks: {
  title?: string
  language: string
  code: string
  lineNumbers?: boolean
  highlight?: number[]
  diff?: boolean
}[] = [
  {
    title: 'composables/useDebounce.ts',
    language: 'ts',
    lineNumbers: true,
    code: `export function useDebounce<T>(value: Ref<T>, delay = 300) {
  const debounced = shallowRef(value.value)

  watch(value, (next, _, onCleanup) => {
    const timeout = setTimeout(() => (debounced.value = next), delay)
    onCleanup(() => clearTimeout(timeout))
  })

  return debounced
}`,
  },
  {
    language: 'bash',
    code: 'pnpm dlx shadcn-vue@latest add code-block',
  },
  {
    title: 'components/Search.vue',
    language: 'vue',
    lineNumbers: true,
    diff: true,
    code: ` <script setup lang="ts">
 const query = ref("")
-const results = useSearch(query)
+const debounced = useDebounce(query, 300)
+const results = useSearch(debounced)
 <\/script>

 <template>
   <SearchResults :results="results" />
 </template>`,
  },
  {
    title: 'server/api/chat.post.ts',
    language: 'ts',
    lineNumbers: true,
    highlight: [5, 6, 7, 8],
    code: `import { streamText } from "ai"

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)

  const result = streamText({
    model: "anthropic/claude-sonnet-4.5",
    messages,
  })

  return result.toUIMessageStreamResponse()
})`,
  },
  {
    title: '.env',
    language: 'bash',
    code: 'AI_GATEWAY_API_KEY=your-api-key',
  },
]

// Where each block starts in the stream.
const offsets = blocks.map((_, index) =>
  blocks.slice(0, index).reduce((total, block) => total + block.code.length, 0),
)
const total = blocks.reduce((sum, block) => sum + block.code.length, 0)

const length = ref(total)

const streamed = blocks.map((block, index) => {
  const code = computed(() => block.code.slice(0, Math.max(0, length.value - offsets[index]!)))
  const rows = computed(() => code.value.split('\n'))
  // A diff row starts with +, - or a space. The marker is not part of the code.
  const source = computed(() =>
    block.diff ? rows.value.map(row => row.slice(1)).join('\n') : code.value,
  )
  const lines = useHighlightedCode(source, block.language)

  return { block, code, rows, source, lines }
})

function getVariant(item: (typeof streamed)[number], index: number) {
  if (item.block.diff) {
    const row = item.rows.value[index]
    if (row?.startsWith('+'))
      return 'added'
    if (row?.startsWith('-'))
      return 'removed'
    return 'default'
  }

  return item.block.highlight?.includes(index) ? 'highlighted' : 'default'
}

const { pause, resume } = useIntervalFn(() => {
  length.value += 3
  if (length.value >= total)
    pause()
}, 16, { immediate: false })

function replay() {
  length.value = 0
  resume()
}
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-4">
    <template v-for="(item, index) in streamed" :key="item.block.code">
      <CodeBlock v-if="length > offsets[index]!">
        <CodeBlockHeader v-if="item.block.title">
          <CodeBlockTitle>{{ item.block.title }}</CodeBlockTitle>
          <CodeBlockActions>
            <CodeBlockCopyButton
              :value="item.source.value"
              :disabled="item.code.value.length < item.block.code.length"
            />
          </CodeBlockActions>
        </CodeBlockHeader>
        <CodeBlockContent :line-numbers="item.block.lineNumbers">
          <CodeBlockLine
            v-for="(line, i) in item.lines.value"
            :key="i"
            :variant="getVariant(item, i)"
          >
            <CodeBlockToken v-for="(token, j) in line" :key="j" :token="token" />
          </CodeBlockLine>
        </CodeBlockContent>
      </CodeBlock>
    </template>
    <Button
      variant="outline"
      size="sm"
      class="self-start"
      :disabled="length < total"
      @click="replay"
    >
      <RotateCcwIcon />
      Replay
    </Button>
  </div>
</template>