Docs Components

Components

The live spectra, the complete conversation widget, the provider, and the CSS variables that theme them.

AudioVisualizer

AudioVisualizer paints the live analyser data from a controller. It never invents levels: when no session is active it draws a static standby grid and baseline, and when a session is live it draws the microphone and agent spectra from their analyser data.

Panel.svelte

<script lang="ts">  import { AudioVisualizer, useConversation } from 'svelte-elevenlabs';  const conversation = useConversation({    agentId: 'agent_your_public_id'  });</script><AudioVisualizer  {conversation}  height={212}  label="Live microphone and agent room tone"/>

AudioVisualizer props
Prop	Type	Default	Notes
`conversation`	`ConversationController \| null`	`null`	Controller to read. Renders the idle state when omitted.
`height`	`number`	`176`	Canvas height in CSS pixels.
`showLegend`	`boolean`	`true`	Show the YOU and AGENT labels.
`label`	`string`	Live microphone and agent audio spectra	Accessible label and description source.
`class`	`string`	`''`	Extra class names on the root element.

The widget packages the target field, start and stop control, spectra, transcript, text composer, feedback, playback volume, device selectors, and telemetry. Use it as a complete surface or turn sections off and build around the parts you keep.

App.svelte

<script lang="ts">  import { ConversationWidget, useConversation } from 'svelte-elevenlabs';  const conversation = useConversation({    agentId: 'agent_your_public_id'  });</script><ConversationWidget  controller={conversation}  title="Support line"  subtitle="Voice or text"  showTelemetry={false}/>

ConversationWidget props
Prop	Type	Default	Notes
`controller`	`ConversationController`	None	Existing controller. When omitted the widget creates and destroys its own.
`agentId`	`string`	`''`	Initial target shown in the field.
`signed`	`boolean`	`false`	Exchange the target through the signed URL endpoint.
`title`	`string`	Conversation	Widget heading.
`subtitle`	`string`	ElevenLabs Conversational AI · Svelte 5	Small line under the heading.
`showTargetInput`	`boolean`	`true`	Show the agent id field.
`showVisualizer`	`boolean`	`true`	Show the live spectra.
`showTranscript`	`boolean`	`true`	Show the transcript log.
`showTelemetry`	`boolean`	`true`	Show latency, format, and session counters.
`textOnly`	`boolean`	`false`	Run widget owned sessions without audio. Ignored with `controller`.
`showTextInput`	`boolean`	`true`	Show the text composer.
`showFeedback`	`boolean`	`true`	Show response feedback buttons.
`showAudioControls`	`boolean`	`true`	Show playback volume and device controls.
`class`	`string`	`''`	Extra class names on the root element.

When you pass an external controller, the widget still owns its own start and stop button but uses your controller, so state stays shared with the rest of the page. The textOnly prop is ignored in that mode because the controller already owns the mode.

ConversationProvider

The provider shares one controller through Svelte context. Pass an existing conversation, or pass options and let the provider create and destroy its own. Descendants can read it with getConversationContext() or register tools with useConversationClientTool().

App.svelte

<script lang="ts">  import { ConversationProvider, ConversationWidget } from 'svelte-elevenlabs';</script><ConversationProvider options={{ agentId: 'agent_your_public_id' }}>  <ConversationWidget /></ConversationProvider>

The context value is set during initialisation and does not change for the life of the provider. Use an external conversation when the controller must outlive the provider or come from a store.

Theme variables

Both components read CSS custom properties. Set them on a wrapping element to theme one instance, or on :root to theme every instance.

CSS custom properties
Variable	Used by	Purpose
`--se-panel`	Widget	Widget background.
`--se-panel-raised`	Widget	Raised controls and fields.
`--se-ink`	Widget	Primary text.
`--se-muted`	Widget	Secondary text and metadata.
`--se-line`	Widget	Borders and dividers.
`--se-signal`	Both	Accent color for controls and input data.
`--se-agent`	Both	Live state and agent output color.
`--se-font-display`	Widget	Display font stack.
`--se-font-mono`	Both	Mono font stack.
`--se-widget-radius`	Widget	Widget corner radius. Defaults to 4px.
`--se-viz-bg`	Visualizer	Canvas background.
`--se-viz-border`	Visualizer	Canvas border.
`--se-viz-ink`	Visualizer	Legend and standby text.
`--se-viz-radius`	Visualizer	Canvas corner radius. Defaults to 2px.

CSS

.chat-shell {  --se-panel: #101014;  --se-panel-raised: #191920;  --se-ink: #f5f1e8;  --se-muted: rgba(245, 241, 232, 0.6);  --se-line: rgba(245, 241, 232, 0.16);  --se-signal: #ff6a3d;  --se-agent: #c8ff76;  --se-font-display: 'Bricolage Grotesque Variable', sans-serif;  --se-font-mono: 'Azeret Mono Variable', monospace;  --se-widget-radius: 0;  --se-viz-bg: #0a0a0c;}

Tailwind v4

The components use scoped styles. When they render utility class names inside a Tailwind v4 app, add the package output to Tailwind's source scanning:

app.css

@import 'tailwindcss';@source '../node_modules/svelte-elevenlabs/dist';

If you only use the controller and the audio helpers, no Tailwind setting is required. See Install for the package setup.

Accessibility

The visualizer exposes a text description on its figure that follows the session state, while the canvas is hidden from assistive technology. The widget uses native buttons, inputs, selects, and a labelled transcript log, and it respects prefers-reduced-motion. The default visualizer label can be replaced when the surrounding page already provides context.

Edit this page on GitHub