Response

A React component in Beamline's AI & agents category.

An assistant's answer as streamed markdown in the system's reading type: bursty tokens flow in at an even pace, each new word fades in through a short brand-hue colour trail, code is highlighted in the system's colours, and tables and quotes are set cleanly.

Use it for

The body of every assistant answer, streaming or settled.

Not for

Static documents (write them as components, or rich-text-editor read-only).
Short answers whose claims carry numbered sources (citations' CitedText).
Code on its own (code-block).

Anatomy

root (data-streaming while live)
markdown blocks: headings, paragraphs, lists, tables, quotes, rules, inline code (always left to right, isolated), links
code block: language, highlighted body, copy/download on hover or focus
table: copy/download on hover or focus; cells break only between words, right-aligned figure columns never wrap and keep sign and unit in right-to-left text; a wide table scrolls in its own frame

Variants

reveal: spectrum (default: fade in through brand hue → +45° → +90°, then ink), fade (opacity only), trail (arrives in the accent, settles to ink), none

States

streaming
catching up after the stream ends
settled (history renders at once)
reduced motion (text as it arrives, no animation)
right to left (prose and tables follow the direction; code stays left to right)

Keyboard

Code and table actions (copy, download) are buttons that appear on hover and on focus.
Links are ordinary links.

Motion

~140 characters/s at rest, speeding up to stay within 0.6s of the stream; cuts only at word boundaries; each new word runs its own Web Animation (spectrum 1.8× and trail 2.5× --pui-duration-considered, fade --pui-duration-standard; read from the scope's tokens) so ~10 words are in flight at once; a table is held back until it is complete (it lands whole, its words revealing in order, instead of re-sizing its columns row by row) and a bare block marker until it has text; a streamed answer wraps greedily so a finished line never re-breaks. Reduced motion: none of it.

Props

Prop	Type	Default	Description
`children` (required)	`string`	—	Markdown, complete or still arriving. Unfinished syntax (an open **, half a table) renders cleanly.
`streaming`	`boolean`	—	True while the answer is still arriving.
`reveal`	`"spectrum" \| "fade" \| "trail" \| "none"`	—	How new words arrive. Default spectrum.
`pace`	`number`	—	Characters per second when the model is not ahead (default 140).
`…Streamdown props`	`StreamdownProps`	—	Everything else passes to Streamdown (components, remarkPlugins, controls, linkSafety …).
`style`	`CSSProperties`	—	Styles the visual response root, including local CSS tokens used by streamed word reveals.
`style / ref`	`CSSProperties / native Ref`	—	native HTMLDivElement
`classNames`	`ResponseClassNames`	—

Dependencies

streamdown, lowlight

Import

import { Response } from "@/components/response/response";

Get it

Response is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent