Code Block

A syntax-highlighted code block for AI-generated code, with copy support - streaming Writing status, line numbers, and highlights. Content stays dir="ltr".

Streaming

status="streaming" shows Writing and auto-scrolls as tokens arrive. Replay remounts the stream.

Loading…

Installation

CLI

npx @sonojs/ui@latest add agent-code-block

Also needs

npx @sonojs/ui@latest add agent-code

npm i lucide-react motion shiki

Usage

agent-code-block.tsx

import { AgentCodeBlock } from "@/components/sonojs/agent-code-block"

export function Example() {
  return (
    <AgentCodeBlock
      filename="app.ts"
      language="typescript"
      code={`export const answer = 42`}
    />
  )
}

Props

Prop	Type	Default	Description
code	string	-	Source text to highlight.
language	AgentCodeLanguage	"typescript"	Highlighter language.
filename	ReactNode	-	Optional filename in the header.
status	"streaming" · "complete"	"complete"	Shows Writing vs Ready in the header.
showLineNumbers	boolean	true	Renders a gutter with line numbers.
highlightLines	number[]	[]	1-based line numbers to tint.
maxHeight	number	280	Scroll viewport max height in pixels.
wrap	boolean	false	Wrap long lines instead of horizontal scroll.
copyable	boolean	true	Shows the copy control in the header.
onCopy	() => void	-	Optional override for the copy action.
className	string	-	Optional class names on the root.