Skip to content

[Enhancement] Add useDeepgramAgent() React hook for Voice Agent API #477

@deepgram-robot

Description

@deepgram-robot

Summary

Add a React hook (useDeepgramAgent) that wraps the Voice Agent WebSocket API, providing a declarative interface for building voice agent UIs in React applications without manual WebSocket management.

Problem it solves

Developers building voice agent interfaces in React currently need to manually manage WebSocket connections, audio capture, playback state, and event handling — requiring 100+ lines of boilerplate per component. A dedicated React hook would reduce this to a single function call, matching the ergonomics developers expect from modern React libraries (e.g., useChat in Vercel AI SDK).

Proposed API

import { useDeepgramAgent } from '@deepgram/sdk/react';

function VoiceAgent() {
  const {
    connect,
    disconnect,
    isConnected,
    isListening,
    isSpeaking,
    transcript,      // current user transcript
    agentText,       // current agent response text
    error,
    sendFunctionResult,
  } = useDeepgramAgent({
    apiKey: process.env.DEEPGRAM_API_KEY,  // or token endpoint
    agent: {
      think: { provider: { type: 'open_ai' }, model: 'gpt-4o-mini' },
      speak: { model: 'aura-asteria-en' },
    },
    onFunctionCall: async (name, params) => {
      // handle tool calls
      return { result: 'done' };
    },
    onTranscript: (text, isFinal) => {},
    onAgentResponse: (text) => {},
  });

  return (
    <button onClick={isConnected ? disconnect : connect}>
      {isConnected ? 'End' : 'Start'} Conversation
    </button>
  );
}

Acceptance criteria

  • Exported from @deepgram/sdk/react or a separate @deepgram/react package
  • Handles microphone capture and audio playback internally
  • Manages WebSocket connection lifecycle (connect, reconnect, disconnect)
  • Exposes typed state for UI binding (isConnected, isListening, isSpeaking, transcript, agentText)
  • Supports function calling via callback
  • Documented with usage example
  • Compatible with existing API
  • Works in Next.js (App Router) and standard React/Vite projects

Raised by the DX intelligence system.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions