Streaming Answer, animated React component

An AI answer card that shows its thinking steps ticking off, folds them into a one-line summary, slides in sources and streams the answer word by word. Citation chips pop in where they belong and light up the source they came from when you point at them.

Pro
AI Components
Spring
Hover

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Why are people dropping off during onboarding?

In progress: Searching 3 sources

1AnalyticsOnboarding funnel, Q3 2HelpdeskSupport tickets: setup 3DocsInterview notes, Oct

Props

Prop	Type	Default	What it does
question	string	STREAMING_ANSWER_QUESTION	The user's message, shown in the bubble above the answer.
steps	string[]	STREAMING_ANSWER_STEPS	Thinking steps, ticked off one by one before the answer streams.
sources	StreamingAnswerSource[]	STREAMING_ANSWER_SOURCES	Source cards that slide in once thinking is done: { n, title, where, c, ink?, href? }. Up to three fit the grid.
answer	string	STREAMING_ANSWER_TEXT	The answer text. Write {1}, {2} straight after a word to drop a citation chip for that source number.
thoughtSeconds	number	4	The number in the folded summary line, "Thought for 4s".
width	number	520	Width of the card in px. It never grows past its container.
autoplay	boolean	false	Plays the whole run again every 13 seconds until someone touches the card. Only runs while the card is on screen and never under reduced motion.
className	string	""	Extra classes for the card.
enableSound	boolean	true	Plays interface sounds on interaction. They follow the sound switch (setSoundsEnabled, on by default) and stay silent on hover. Autoplay makes the same sounds once the visitor has used the page. Pass false to silence this component.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/streaming-answer
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
streaming-answer/
index.ts
streaming-answer.tsx
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { StreamingAnswer } from "@/components/streaming-answer";

export default function Page() {
  return (
    <main>
      <StreamingAnswer />
    </main>
  );
}

Streaming Answer questions

Does it make sound, and how do I turn it off?

Ticks quietly as the thinking steps finish and plays one soft completion chord when the answer has streamed in, with nothing for individual words; autoplay makes the same sounds once the visitor has used the page. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

Pro
NewSound
Diff Review
Pro
NewSound
Agent Run
Pro
NewSound
Ghost Autocomplete
Pro
New
Travelling Tooltip