import { AudioVisualizer } from "@elabs-ai/components-ai";npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-aiPrompt for your coding agent
Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui AudioVisualizer component (from @elabs-ai/components-ai) to this project. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Look AudioVisualizer up before writing code: `npx -y @elabs-ai/components-cli docs AudioVisualizer` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-ai is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Use it here: [the screen or file, and what it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Avoid
- Passing it a MediaStream or calling getUserMedia inside it — it is presentation-only; feed it `levels` your own analyser loop already computed (D5).
- Reaching for the opt-in useAudioLevel hook from inside this component — the hook only ever creates an AudioContext when a caller-supplied stream is handed to IT, and it stays a separate export the component never imports.
- Relying on colour alone for level — bar/wave HEIGHT carries the amplitude; colour is decorative, never the only channel.
- Expecting the scrolling waveform to keep animating under prefers-reduced-motion — the reduced-motion path renders a static bar chart of the current levels instead of interpolating, so the state stays legible rather than frozen mid-frame.
Works with
Pairs with
Examples
Wave
The `"wave"` variant — a filled envelope through the current samples.
Loading
No stream connected yet — the not-ready state (`loading`). Renders the flat idle baseline instead of `levels` and announces "Microphone not connected".
Silent
A connected mic picking up nothing above the noise floor.
No Status Announcement
A surface that already renders its own live region elsewhere opts out with `statusLabel={null}` so assistive tech is not told twice.
Reduced Motion Frame
A single reduced-motion FRAME. Under `prefers-reduced-motion`, `AudioVisualizer` skips its internal smoothing animation and paints `levels` directly on every prop change — this is exactly that: one settled frame, no interpolation, still fully legible. (A live OS/browser reduced-motion toggle degrades every OTHER story to this same behavior; this story documents what that degradation looks like without depending on the test environment's motion setting.)
Live
API
AudioVisualizer
| Prop | Type | Description |
|---|---|---|
levels | number[] | Normalized 0–1 amplitude samples for the CURRENT frame — one per bar (or per sample point for `variant="wave"`). Update this from your own analyser polling loop (or the opt-in `useAudioLevel` hook) on every frame you want reflected; the component never touches the microphone itself. Any length works — samples are resampled to `barCount`. |
loading | boolean | No stream connected yet — renders the idle baseline instead of `levels`. |
variant | AudioVisualizerVariant | `"bars"` (default) — a bar chart. `"wave"` — a filled envelope through the current samples. Both encode level as HEIGHT, never as hue alone. |
sensitivity | number | Multiplies each level before clamping to [0, 1] — turn up for a quiet input. |
barCount | number | Number of bars/points drawn. |
silenceThreshold | number | Average level, 0–1, at/above which the status text reads "active". |
statusLabel | ReactNode | null | Visually-hidden text announced when the discretized level state changes. Defaults to a localized label ("No input detected" / "Microphone active" / …). Pass `null` when the consuming surface already renders its own live region, so assistive tech is not told twice. |