https://github.com/deepgram/ui
https://github.com/deepgram/ui
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/deepgram/ui
- Owner: deepgram
- License: mit
- Created: 2026-04-08T10:18:35.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-05-11T16:51:02.000Z (about 2 months ago)
- Last Synced: 2026-05-11T18:35:16.441Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://ui-web-eight.vercel.app
- Size: 296 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# @deepgram/ui
[](https://www.npmjs.com/package/@deepgram/ui)
[](LICENSE)
[](https://github.com/deepgram/ui/actions/workflows/ci.yml)
React UI component library for [Deepgram Voice Agent](https://developers.deepgram.com/docs/voice-agent) — Tailwind v4, shadcn/ui, fully themeable.
## Install
```bash
npm install @deepgram/ui @deepgram/react @deepgram/agents
```
## Quick Start
```tsx
import {
AgentProvider,
AgentStartButton,
AgentConversation,
AgentMessage,
AgentTextInput,
AgentStatus,
} from "@deepgram/ui";
import "@deepgram/ui/styles.css";
function App() {
return (
fetch('/api/deepgram-token').then(r => r.text()) },
agent: { think: { provider: { type: 'open_ai' }, model: 'gpt-4o-mini' } },
}}
>
{conversation.map((entry) => (
))}
);
}
```
## Components
### Agent UI Components
| Component | Description |
|-----------|-------------|
| [`AgentStatus`](packages/ui/) | Connection state indicator (idle, connecting, connected, reconnecting, disconnected) |
| [`AgentConversation`](packages/ui/) | Scrollable conversation container with auto-scroll |
| [`AgentMessage`](packages/ui/) | Individual message bubble with role-aware styling, avatar, and timestamp |
| [`AgentTextInput`](packages/ui/) | Text input field for sending messages |
| [`AgentMicrophoneButton`](packages/ui/) | Microphone mute/unmute toggle |
| [`AgentSpeakerButton`](packages/ui/) | Speaker mute/unmute toggle |
| [`AgentStartButton`](packages/ui/) | Start/stop connection button |
### Advanced Components
| Component | Description |
|-----------|-------------|
| [`VoiceButton`](packages/ui/) | All-in-one button reflecting full lifecycle (idle/connecting/listening/speaking/error) |
| [`Orb`](packages/ui/) | Canvas 2D animated hoop with idle/listening/talking states, audio-reactive |
| [`LiveWaveform`](packages/ui/) | Canvas-based real-time waveform driven by volume getter(s) |
| [`BarVisualizer`](packages/ui/) | Frequency bar visualization |
| [`Response`](packages/ui/) | Lightweight markdown renderer for AI responses with Tailwind Typography |
## Packages
| Directory | Package | Description |
|-----------|---------|-------------|
| [`packages/ui/`](packages/ui/) | `@deepgram/ui` | React UI components + compiled Tailwind CSS |
| [`packages/registry/`](packages/registry/) | `@deepgram/ui-registry` | shadcn-compatible registry build (private) |
| [`apps/web/`](apps/web/) | -- | Landing page ([ui.deepgram.com](https://ui.deepgram.com)) |
## Links
- [Documentation](https://developers.deepgram.com/docs/voice-agent)
- [API Reference](https://developers.deepgram.com/reference)
- [Landing Page](https://ui.deepgram.com)
## Development
**Prerequisites:** [Bun](https://bun.sh/) 1.3+
```bash
git clone git@github.com:deepgram/ui.git
cd ui
bun install
```
`@deepgram/agents` and `@deepgram/react` install from npm. No sibling checkouts required.
```bash
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](.github/CONTRIBUTING.md).
## License
MIT — see [LICENSE](LICENSE)