Skip to main content
ChatJS renders AI responses with full syntax highlighting for code blocks, powered by Streamdown.

​
How It Works

​
Backend: Markdown in Responses

The system prompt instructs models to use markdown formatting, including fenced code blocks:
lib/ai/prompts.ts
export const systemPrompt = () => `You are a friendly assistant!

## Your Goals
- Markdown is supported in the response and you can use it to format the response.

## Content Rules:
- Use structured answers with markdown format and tables too.
- If a diagram is needed, return it in a fenced mermaid code block.
`;
Models return code in standard markdown fenced blocks: 
```typescript
function greet(name: string) {
  return `Hello, ${name}!`;
}
```

​
Frontend: Streamdown Rendering

The Response component wraps Streamdown, a markdown renderer optimized for AI streaming:
components/ai-elements/response.tsx
import { Streamdown } from "streamdown";

export const Response = memo(
  ({ className, ...props }: ResponseProps) => (
    <Streamdown
      className={cn(
        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
        className
      )}
      {...props}
    />
  )
);
Streamdown handles:
  • Syntax highlighting for 100+ languages via Shiki
  • Streaming-safe parsing that doesn’t break mid-token
  • Mermaid diagrams rendered inline
  • Math equations with KaTeX support
  • Tables, lists, and formatting with proper styling

​
Supported Languages

Streamdown supports all languages supported by Shiki, including:
CategoryLanguages
WebTypeScript, JavaScript, HTML, CSS, JSON
BackendPython, Go, Rust, Java, C#, Ruby, PHP
SystemsC, C++, Zig, Assembly
DataSQL, GraphQL, YAML, TOML
ShellBash, PowerShell, Fish
MarkupMarkdown, LaTeX, XML

​
Theming

Syntax highlighting automatically adapts to light/dark mode. The theme is configured in Streamdown and uses VS Code-compatible color schemes. To customize the code theme, see the Streamdown documentation.