Themes

Customize the chat UI with theme variables. The preview below shows a few example styles from the docs playground, but in code the theme prop accepts a theme.json object rather than a preset string.

Custom Theme

For full control, create a theme.json with CSS custom properties. It has three sections: theme (shared), light, and dark (mode-specific colors). Use the Theme Builder to generate this file visually.

app/page.tsx

"use client"

import theme from "./theme.json"
import { useChat } from "@ai-sdk/react"
import { AgentChat, createAgentChat } from "@21st-sdk/nextjs"

const chat = createAgentChat({
  agent: "my-agent",
  tokenUrl: "/api/an-token",
})

export default function Page() {
  const { messages, sendMessage, status, stop, error } = useChat({ chat })

  return (
    <AgentChat
      messages={messages}
      onSend={(message) =>
        sendMessage({
          role: "user",
          parts: [{ type: "text", text: message.content }],
        })
      }
      status={status}
      onStop={stop}
      error={error ?? undefined}
      theme={theme}
    />
  )
}

Variable Reference

All available CSS custom properties grouped by category.

Want a fully custom look?

Use the visual Theme Builder to configure every aspect with live preview.

Open Theme Builder