browser-agent
Deepgram Browser Agent SDK
Deepgram runs listen, think, and speak behind one WebSocket and handles the turn-taking between them. These four packages get a browser onto that socket; each wraps the one below. Pick a layer by how much UI you want to build yourself, not by package name. [1]
Pick the layer first
| Package | When | Install |
|---|---|---|
@deepgram/agents-widget |
You want a voice agent on a page today, with no framework and no build step, and you can live with its UI. It ships six layouts (sidebar, floating, inline, button, embedded, orb), themed with CSS custom properties. |
@deepgram/agents-widget |
@deepgram/ui |
React app, and the conversation view, orb, waveform, and mic/speaker buttons listed below are close enough to your design. Retheme them with CSS custom properties. | @deepgram/ui only. See Common mistakes 3 |
@deepgram/react |
React app, you build every pixel. Provider plus focused hooks manage the connection, mic, playback, transcript, and client tools. | @deepgram/react @deepgram/agents |
@deepgram/agents |
You are on Vue, Svelte, Angular, vanilla JS, or another non-React runtime. AgentSession, AgentMicrophone, and AgentPlayer give you the pieces; you wire the events. |
@deepgram/agents |
Each layer re-exports the layer below, so @deepgram/ui alone gives you AgentProvider, the @deepgram/agents types, and all ten hooks: useAgentClientTool, useAgentContext, useAgentControls, useAgentConversation, useAgentMicrophone, useAgentMode, useAgentPlayer, useAgentSession, useAgentState, and useDeepgramAgent. [7]
Versions and stability
All four are pre-1.0, and latest is the only dist-tag on each. @deepgram/ui's README puts it plainly: "This library is pre-1.0. Interfaces may change between minor versions, and releases are cut as the library evolves rather than on a fixed schedule." So resolve the versions against the registry before you install, and resolve them again before you trust a version-specific statement anywhere below: