https://github.com/deepgram/react
https://github.com/deepgram/react
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/deepgram/react
- Owner: deepgram
- License: mit
- Created: 2026-04-13T19:07:31.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-05-05T01:20:35.000Z (about 2 months ago)
- Last Synced: 2026-05-05T08:42:41.067Z (about 2 months ago)
- Language: TypeScript
- Size: 79.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
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/react
[](https://www.npmjs.com/package/@deepgram/react)
[](LICENSE)
[](https://github.com/deepgram/react/actions/workflows/ci.yml)
React hooks and provider for the [Deepgram Voice Agent API](https://developers.deepgram.com/docs/voice-agent). Manages connection lifecycle, microphone capture, audio playback, conversation state, and mode tracking.
## Install
```bash
npm install @deepgram/react @deepgram/agents
```
## Quick Start
```tsx
import { AgentProvider, useAgentState, useAgentConversation } from "@deepgram/react";
function App() {
return (
fetch('/api/deepgram-token').then(r => r.text()) },
agent: { think: { provider: { type: 'open_ai' }, model: 'gpt-4o-mini' } },
}}
>
);
}
function VoiceAgent() {
const { state, start, stop } = useAgentState();
const { conversation } = useAgentConversation();
return (
{state === "idle" ? "Start" : "Stop"}
{conversation.map((entry) => (
{entry.role}: {entry.content}
))}
);
}
```
## Hooks
| Hook | Purpose |
|------|---------|
| `useAgentState` | Connection state (`idle`, `connecting`, `connected`, etc.) and `start`/`stop` controls |
| `useAgentMode` | Speaking/listening mode tracking |
| `useAgentConversation` | Conversation transcript and `sendUserMessage` |
| `useAgentMicrophone` | Mic state, mute controls, input volume |
| `useAgentPlayer` | Audio playback state, mute controls, output volume |
| `useAgentControls` | Stable action methods (never change identity) |
| `useAgentClientTool` | Register client-side function call handlers scoped to component lifecycle |
| `useAgentSession` | Direct access to the underlying `AgentSession` (escape hatch) |
| `useDeepgramAgent` | Standalone hook -- no provider needed |
See the [package README](packages/react/README.md) for full API documentation.
## Related Packages
| Package | Repo | Description |
|---------|------|-------------|
| [`@deepgram/agents`](https://github.com/deepgram/agent) | `deepgram/agent` | Core SDK -- WebSocket session, microphone capture, audio playback |
| [`@deepgram/ui`](https://github.com/deepgram/ui) | `deepgram/ui` | Pre-built React UI components with Tailwind CSS theming |
| [`@deepgram/agents-widget`](https://github.com/deepgram/agent) | `deepgram/agent` | Self-contained widget (UMD + ESM) |
## Documentation
- [Deepgram Voice Agent docs](https://developers.deepgram.com/docs/voice-agent)
- [API reference](https://developers.deepgram.com/reference)
- [`@deepgram/ui` -- pre-built components](https://github.com/deepgram/ui)
## Development
**Prerequisites:** [Bun](https://bun.sh/) 1.3+
This package depends on `@deepgram/agents` via a `file:` pointer. Clone the agent repo as a sibling:
```bash
git clone git@github.com:deepgram/agent.git ../agent
cd ../agent && bun install && bun run build
```
Then:
```bash
git clone git@github.com:deepgram/react.git
cd react
bun install
```
```bash
bun run build # Build @deepgram/react
bun run typecheck # Type-check
bun run test # Run tests
bun run dev # Watch-build
```
## Contributing
See [CONTRIBUTING.md](.github/CONTRIBUTING.md) for development setup and guidelines.
## License
MIT -- see [LICENSE](LICENSE)