Ai Code Block

An agent-written AI code block streaming line-by-line with syntax highlighting, tokenization, copy feedback, replay controls, and multiple theme variants.

...

How to Import

Add this import to your component file

app/page.tsx

1import { AiCodeBlock } from "@/components/lightswind/ai-code-block";

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

code	string	-	Code content to display and stream	Optional
filename	string	"churn.ts"	Filename in header bar	Optional
language	string	"TypeScript"	Programming language badge label	Optional
variant	"default" \| "glass" \| "minimal" \| "dark"	"default"	Visual styling theme variant	Optional
isStreaming	boolean	true	Enable line-by-line streaming animation	Optional
streamSpeedMs	number	220	Line delay in milliseconds	Optional
showLineNumbers	boolean	true	Show line numbers column	Optional
showCopyButton	boolean	true	Show copy button in header	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1<AiCodeBlock
2  filename="churn.ts"
3  language="TypeScript"
4  code={`export async function churnBatch() {
5  const flavor = await getFlavor("pistachio");
6  return base.gallons;
7}`}
8  isStreaming={true}
9/>

Previousai-aurora-blob

Nextai-prompt-bar

A product byＭＵＨＩＬＡＮ and Team❤️.

Ai Code Block

An agent-written AI code block streaming line-by-line with syntax highlighting, tokenization, copy feedback, replay controls, and multiple theme variants.

...

How to Import

Add this import to your component file

app/page.tsx

1import { AiCodeBlock } from "@/components/lightswind/ai-code-block";

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

code	string	-	Code content to display and stream	Optional
filename	string	"churn.ts"	Filename in header bar	Optional
language	string	"TypeScript"	Programming language badge label	Optional
variant	"default" \| "glass" \| "minimal" \| "dark"	"default"	Visual styling theme variant	Optional
isStreaming	boolean	true	Enable line-by-line streaming animation	Optional
streamSpeedMs	number	220	Line delay in milliseconds	Optional
showLineNumbers	boolean	true	Show line numbers column	Optional
showCopyButton	boolean	true	Show copy button in header	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1<AiCodeBlock
2  filename="churn.ts"
3  language="TypeScript"
4  code={`export async function churnBatch() {
5  const flavor = await getFlavor("pistachio");
6  return base.gallons;
7}`}
8  isStreaming={true}
9/>

Previousai-aurora-blob

Nextai-prompt-bar

A product byＭＵＨＩＬＡＮ and Team❤️.

Ai Code Block

How to Import

Props

Basic Usage

On This Page

Contribute

Ai Code Block

How to Import

Props

Basic Usage

On This Page

Contribute

React Ai Code Block Component - Lightswind UI

Key Details of React Ai Code Block

Ai Code Block

How to Import

Props

Basic Usage

On This Page

Contribute

Ai Code Block

How to Import

Props

Basic Usage

On This Page

Contribute