Voice agent

A React block (a whole screen) in Beamline's Blocks category.

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, or conversation + message).
People talking to people (chat-thread).
Dictating into a form (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
voice-button
mic-selector
input
empty-state
button
dropdown-menu
popover
tooltip
alert

Dependencies

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

Import

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 · Connect your agent