# Response

A React component in [Beamline](https://beamline.io/)'s [AI & agents](https://beamline.io/components/ai) category. Live demo: https://beamline.io/components/response

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](https://beamline.io/components/rich-text-editor) read-only).
- Short answers whose claims carry numbered sources ([citations](https://beamline.io/components/citations)' CitedText).
- Code on its own ([code-block](https://beamline.io/components/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

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in AI & agents

- [Approval card](https://beamline.io/components/approval-card): The agent stops and asks before it acts: what it wants to do, exactly what that changes, any choices it needs, and Approve or Reject; both run your…
- [Attachment](https://beamline.io/components/attachment): A file tile: preview or typed glyph with the type named, name, size, upload progress, error with retry, and a keyboard-reachable remove.
- [Chat thread](https://beamline.io/components/chat-thread): People talking to people: messages grouped by person and day, reactions, delivery and read receipts that glide to the newest message read, who is typing…
- [Citations](https://beamline.io/components/citations): Inline numbered citations that preview their source on hover or focus, plus a numbered source list; streamed answers flow in at an even pace with the…
- [Context cards](https://beamline.io/components/context-cards): The knowledge an agent retrieved before it answered: one card per chunk with what it is about, the text it read with the search words marked, how…
- [Conversation](https://beamline.io/components/conversation): The scrolling column of a conversation: follows new content while you are at the bottom, stops when you scroll up to read, and offers a way back; shared…
- [Flowchart](https://beamline.io/components/flowchart): A workflow as steps on a dotted canvas: a trigger, conditions that branch into paths side by side, actions and waits, read top to bottom; during a run…
- [Image generation](https://beamline.io/components/image-generation): The frame an AI image is generated into: a field of brand-hued pixels breathes with the progress while the model works, then the image arrives —…
- [Message](https://beamline.io/components/message): One turn in a conversation with an agent: the person's words in a quiet bubble, the agent's answer on the page with its orb mark, trace, tool calls and…
- [Plan](https://beamline.io/components/plan): An agent's plan: numbered steps with live status, progress, and Approve / Edit / Reject when it needs sign-off; approving shows progress, and a refusal…
- [Prompt bar](https://beamline.io/components/prompt-bar): The agent composer: a field that grows, @ to add a source, / for a command, a model picker, files and dictation, and one button that sends with progress…
- [Reasoning](https://beamline.io/components/reasoning): The agent's trace, fed by your stream: a shimmering label and the seconds so far while it works, then "Thought for N seconds"; steps that check off…
- [Recommendation card](https://beamline.io/components/recommendation-card): One suggestion from the agent that the person may take or leave: what it suggests, why, the expected effect and how sure it is (a meter and a word…
- [Selection actions](https://beamline.io/components/selection-actions): Select a passage and hand it to the agent: a bar over the selection with quick actions, your own instruction and More; while the agent works it says so…
- [Task rows](https://beamline.io/components/task-rows): Background work an agent is doing, one row per task: status as a glyph and a word, what it produced, how long it has run or took, a progress bar while…
- [Tool call](https://beamline.io/components/tool-call): One tool call in an agent's run: status, what it did and a short result on one quiet row that opens to the exact input and output; stops for permission…