@deepgram/ui

React UI component library for Deepgram Voice Agent — Tailwind v4, shadcn/ui, fully themeable.

Install

npm install @deepgram/ui @deepgram/react @deepgram/agents

Quick Start

import {
  AgentProvider,
  AgentStartButton,
  AgentConversation,
  AgentMessage,
  AgentTextInput,
  AgentStatus,
} from "@deepgram/ui";
import "@deepgram/ui/styles.css";

function App() {
  return (
    <AgentProvider
      config={{
        auth: { tokenFactory: () => fetch('/api/deepgram-token').then(r => r.text()) },
        agent: { think: { provider: { type: 'open_ai' }, model: 'gpt-4o-mini' } },
      }}
    >
      <div data-dg-agent>
        <AgentStatus />
        <AgentConversation>
          {conversation.map((entry) => (
            <AgentMessage key={entry.id} entry={entry} />
          ))}
        </AgentConversation>
        <AgentTextInput />
        <AgentStartButton />
      </div>
    </AgentProvider>
  );
}

Components

Agent UI Components

Component	Description
AgentStatus	Connection state indicator (idle, connecting, connected, reconnecting, disconnected)
AgentConversation	Scrollable conversation container with auto-scroll
AgentMessage	Individual message bubble with role-aware styling, avatar, and timestamp
AgentTextInput	Text input field for sending messages
AgentMicrophoneButton	Microphone mute/unmute toggle
AgentSpeakerButton	Speaker mute/unmute toggle
AgentStartButton	Start/stop connection button

Advanced Components

Component	Description
VoiceButton	All-in-one button reflecting full lifecycle (idle/connecting/listening/speaking/error)
Orb	Canvas 2D animated hoop with idle/listening/talking states, audio-reactive
LiveWaveform	Canvas-based real-time waveform driven by volume getter(s)
BarVisualizer	Frequency bar visualization
Response	Lightweight markdown renderer for AI responses with Tailwind Typography

Packages

Directory	Package	Description
packages/ui/	@deepgram/ui	React UI components + compiled Tailwind CSS
packages/registry/	@deepgram/ui-registry	shadcn-compatible registry build (private)
apps/web/	--	Landing page (ui.deepgram.com)

Links

• Documentation
• API Reference
• Landing Page

Development

Prerequisites: Bun 1.3+

git clone git@github.com:deepgram/ui.git
cd ui
bun install

@deepgram/agents and @deepgram/react install from npm. No sibling checkouts required.

bun run build              # Build @deepgram/ui
bun run build:registry     # Build shadcn registry
bun run build:web          # Build landing page
bun run typecheck           # Type-check @deepgram/ui
bun run dev                 # Watch-build @deepgram/ui

Contributing

See CONTRIBUTING.md.

License

MIT — see LICENSE