StreamingArtifact

stablev1.0.0

Renders streamed code, markdown, or text output with progressive disclosure, syntax highlighting via line-number table, diff view, and copy action. Integrates with useStream patterns via controlled content + state props.

ai-agentInteractive/Storybook ↗

import { StreamingArtifact } from "@nodus/design-system"

CODETS

1	async function executePayment(id: string) {
2	const payment = await getPayment(id);
3	await validateCounterparty(payment.beneficiary);
4	return submitToSWIFT(payment);
5	}

Loading demo…

Props

Prop	Type	Default	Description
`content`req	`string`	—	Content to render. May grow as streaming progresses.
`kind`	`"code" \| "markdown" \| "text"`	"text"	Content type — controls rendering mode.
`language`	`string`	—	Programming language hint for code kind.
`state`	`"streaming" \| "complete" \| "error"`	"complete"	Current stream state. Controls cursor blink and auto-scroll.
`showLineNumbers`	`boolean`	true	Show line numbers for code kind.
`diff`	`DiffLine[]`	—	When provided, renders a diff view instead of plain content.
`showCopy`	`boolean`	true	Show copy-to-clipboard button.
`maxHeight`	`string \| number`	480	Maximum visible height before scroll kicks in.
`label`	`string`	—	Accessible region label.

contentrequired

Type stringDefault —

Content to render. May grow as streaming progresses.

kind

Type "code" | "markdown" | "text"Default "text"

Content type — controls rendering mode.

language

Type stringDefault —

Programming language hint for code kind.

state

Type "streaming" | "complete" | "error"Default "complete"

Current stream state. Controls cursor blink and auto-scroll.

showLineNumbers

Type booleanDefault true

Show line numbers for code kind.

diff

Type DiffLine[]Default —

When provided, renders a diff view instead of plain content.

showCopy

Type booleanDefault true

Show copy-to-clipboard button.

maxHeight

Type string | numberDefault 480

Maximum visible height before scroll kicks in.

label

Type stringDefault —

Accessible region label.

Metadatasemantic type motion surface border

Design Rationale

This component was designed to express:

View all principles →

Explore Related

FunctionCallVisualizer→

Renders AI tool call execution: function name, input parameters (syntax-highlighted JSON with line numbers), status badge (pending/running/done/error), output preview, execution duration, and call ID. Collapsible detail panel.

StreamingDot→

Animated dot sequence for streaming/typing indicators

TokenCounter→

Live token usage counter with budget threshold

Was this helpful?