# Voice agent

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Blocks](https://beamline.io/components/blocks) category. Live demo: https://beamline.io/components/voice-agent

A voice agent in three layouts on one session: a support panel that mixes typing and talking, a call screen with the agent's orb and one call button, and a workspace with an empty state, the live transcript and the conversation bar. One adapter connects any provider.

## Use it for

- A support widget where people type or talk to an agent (panel).
- A phone-style call with an agent (call).
- Apps where voice is the main way to work with the agent (workspace).

## Not for

- Text-only assistants ([agent-workspace](https://beamline.io/components/agent-workspace), or conversation + message).
- People talking to people ([chat-thread](https://beamline.io/components/chat-thread)).
- Dictating into a form ([speech-input](https://beamline.io/components/speech-input)).

## Anatomy

- panel: header (agent orb, name, status, menu), conversation (greeting, typed and spoken lines), composer (field, voice button, send) that becomes the conversation bar during a call
- call: agent orb (reacts to both voices), name and role, status and timer, latest line as a caption, one call button (and mute in a call), failure with fix
- workspace: header (agent, status, microphone settings), empty state with suggestions, transcript, conversation bar

## Variants

- **layout**: panel, call, workspace

## States

- idle
- typing (text session)
- asking for the microphone
- connecting
- listening
- thinking
- talking
- muted
- reconnecting
- ended
- error: blocked / no microphone / connection / service
- microphone unavailable (agent cannot hear; typing still works)

## Keyboard

- Tab order follows the layout: header, conversation, composer or bar
- Enter sends a typed message
- The call button, mute and voice button are buttons (Enter / Space); mute and voice are toggles
- Escape closes the typing field in the bar

## Motion

The orb and bars move only while connected and on screen; the conversation follows new lines unless you scroll up. Under reduced motion the orb holds still with a state ring and bars show numbers.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `layout` | `"panel" \| "call" \| "workspace"` | `"panel"` |  |
| `adapter` | `VoiceAgent` | — | The provider (see conversation-bar for wiring); the block holds its own session. |
| `session` | `VoiceAgentSession` | — | Or one session from useVoiceAgent(), shared across layouts and the rest of the screen. |
| `agent` | `{ name: string; role?: string; greeting?: string }` | `{ name: "Assistant" }` |  |
| `suggestions` | `string[]` | — | Workspace empty state: things to ask. |
| `className` | `string` | — |  |
| `classNames` | `VoiceAgentClassNames` | — |  |
| `style / ref` | `CSSProperties / Ref<HTMLElement>` | — |  |

## Built from

- conversation
- message
- response
- orb
- [conversation-bar](https://beamline.io/components/conversation-bar)
- [voice-button](https://beamline.io/components/voice-button)
- [mic-selector](https://beamline.io/components/mic-selector)
- input
- [empty-state](https://beamline.io/components/empty-state)
- button
- [dropdown-menu](https://beamline.io/components/dropdown-menu)
- popover
- tooltip
- alert

## Dependencies

`lucide-react`, `use-stick-to-bottom`, `streamdown`

## Import

```tsx
import { VoiceAgent } from "@/blocks/voice-agent/voice-agent";
```

## Get it

Voice agent 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 Blocks

- [AI agent workspace](https://beamline.io/components/agent-workspace): Threads, a conversation with streamed reasoning, cited answers and a plan that waits for approval then runs step by step, and an artifacts panel with…
- [Analytics dashboard](https://beamline.io/components/analytics-dashboard): A SaaS overview in the app shell, fed by your metrics hook: range and segment filters drive KPIs, new and expansion revenue, channels, plan mix, uptime…
- [Auth page](https://beamline.io/components/auth): The whole sign-in / sign-up route: product mark, a quiet dotted field with a light that follows the mouse, an optional notice, the SignIn and SignupForm…
- [Changelog feed](https://beamline.io/components/changelog-feed): An in-app What's new page: release notes grouped by month with tags, versions, pictures and details, a tag filter with counts, entries since your last…
- [CRM pipeline](https://beamline.io/components/crm): A pipeline screen: KPIs and stage mix derived from a virtualised deals grid with inline edit, bulk moves and delete with undo; a row opens the deal in a…
- [Empty states](https://beamline.io/components/empty-states): The five empty moments every product has, written and wired: first use with a first step, no results with the filters to clear, an error with retry and a…
- [Page header](https://beamline.io/components/page-header): The top of a record or project page: breadcrumb, title with status, description and meta, a primary action with secondary actions that fold into a More…
- [Plan comparison](https://beamline.io/components/plan-comparison): Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in…
- [Settings](https://beamline.io/components/settings): Profile and workspace settings with one draft and real save handler. Personal mode omits workspace data; optional profile fields share validation…
- [Sign in](https://beamline.io/components/sign-in): The sign-in card: email and password, a one-time code or a magic link, passkeys and single sign-on, with validation, progress, errors and a signed-in…
- [Sign up form](https://beamline.io/components/signup-form): The account creation card: single sign-on, name, work email and a password with strength and Caps Lock hints, terms consent, inline validation, your…
- [Step form](https://beamline.io/components/step-form): The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the…
- [Trading terminal](https://beamline.io/components/trading-terminal): A perpetuals terminal on your feed and your account: ticker tape, market header with funding, candles, book / trades / depth, order ticket, account…