RAG & search

CodeBlock

Lightweight code block with a copy button and regex-based highlighting for strings, comments, numbers, and keywords. Pair with Shiki or Prism for production-grade highlighting — this one keeps the bundle ~400 bytes.

Sourcesrc/components/ai/code-block.tsx

TypeScript with filename

Pass language for the badge and filename to render a tab-style header.

generate.tstypescript

import { generateText } from 'ai'
import { openai } from '@ai-sdk/openai'

// Stream a response and collect the final text
const { text } = await generateText({
  model: openai('gpt-4o'),
  prompt: 'Explain pgvector in one sentence.',
})

console.log(text)

Python (no filename)

Drop the filename to render just the language badge.

python

from anthropic import Anthropic

client = Anthropic()

# Single-turn completion using claude-sonnet-4-6
message = client.messages.create(
    model="claude-sonnet-4-6",
    max_tokens=1024,
    messages=[{"role": "user", "content": "Summarise the attached report"}],
)

print(message.content[0].text)

JSON request body

The regex highlighter colours strings and numbers — good enough for inline payloads.

request.jsonjson

{
  "model": "gpt-4o",
  "messages": [
    { "role": "system", "content": "You are a concise assistant." },
    { "role": "user", "content": "Explain RAG in one paragraph." }
  ],
  "temperature": 0.2,
  "max_tokens": 512
}