React Hooks & Provider

npm install @deepgram/react

import {
  AgentProvider,
  useAgentState,
  useAgentConversation,
  useAgentMode,
} from "@deepgram/react";

function App() {
  return (
    <AgentProvider
      config={{
        auth: { tokenFactory: () => fetch("/api/token").then((r) => r.text()) },
        agent: "YOUR_AGENT_ID",
      }}
    >
      <VoiceAgent />
    </AgentProvider>
  );
}

function VoiceAgent() {
  const { state, start, stop } = useAgentState();
  const { conversation } = useAgentConversation();
  const { mode } = useAgentMode();

  return (
    <div>
      <p>Mode: {mode}</p>
      <button onClick={() => (state === "connected" ? stop() : start())}>
        {state === "connected" ? "Disconnect" : "Connect"}
      </button>
      <ul>
        {conversation.map((msg) => (
          <li key={msg.id}>
            <strong>{msg.role}:</strong> {msg.content}
          </li>
        ))}
      </ul>
    </div>
  );
}

<AgentProvider
  config={agentSessionConfig}
  microphone={true}
  microphoneOptions={{ sampleRate: 16_000 }}
  tts={true}
  playerSampleRate={24_000}
  autoStart={false}
  onFunctionCall={handleFunctionCall}
>
  {children}
</AgentProvider>

const {
  state,           // "idle" | "connecting" | "connected" | "reconnecting" | "disconnected"
  isIdle,          // true when state === "idle"
  isConnecting,    // true when state === "connecting"
  isConnected,     // true when state === "connected"
  isReconnecting,  // true when state === "reconnecting"
  isDisconnected,  // true when state === "disconnected"
  isActive,        // true when connected, connecting, or reconnecting
  start,           // () => Promise<void> — connect session + open mic
  stop,            // () => void — disconnect + close mic
} = useAgentState();

const {
  conversation,       // ConversationEntry[]
  clearConversation,  // () => void
  sendUserMessage,    // (text: string) => void — inject a text message as the user
  sendAgentMessage,   // (message: string, behavior?: "default" | "queue" | "interrupt") => void
} = useAgentConversation();

const {
  mode,        // "idle" | "listening" | "thinking" | "speaking"
  isSpeaking,  // true when mode === "speaking"
  isListening, // true when mode === "listening"
  isThinking,  // true when mode === "thinking"
} = useAgentMode();

const {
  micActive,       // true when hardware is open
  micMuted,        // true when muted (stream still open, not sending audio)
  setMicMuted,     // (muted: boolean) => void
  toggle,          // () => void — toggle mute state
  enabled,         // false when microphone={false} on provider — mic is fully disabled
  getInputVolume,  // () => number — returns 0-1, call per animation frame
} = useAgentMicrophone();

const {
  outputMuted,      // true when muted
  setOutputMuted,   // (muted: boolean) => void
  toggle,           // () => void — toggle mute state
  enabled,          // false when tts={false} on provider — playback is fully disabled
  getOutputVolume,  // () => number — returns 0-1, call per animation frame
} = useAgentPlayer();

const {
  start,              // () => Promise<void>
  stop,               // () => void
  sendUserMessage,    // (text: string) => void
  sendAgentMessage,   // (message: string, behavior?: "default" | "queue" | "interrupt") => void
  updateListen,       // (listen: ListenSettings) => void
  updateThink,        // (think: ThinkSettings | ThinkSettings[]) => void
  updateSpeak,        // (speak: SpeakSettings | SpeakSettings[]) => void
  updatePrompt,       // (prompt: string) => void
  clearConversation,  // () => void
  setMicMuted,        // (muted: boolean) => void
  setOutputMuted,     // (muted: boolean) => void
} = useAgentControls();

useEffect(() => {
  const handleKey = (e: KeyboardEvent) => {
    if (e.key === "m") setMicMuted(true);
  };
  window.addEventListener("keydown", handleKey);
  return () => window.removeEventListener("keydown", handleKey);
}, [setMicMuted]);

useAgentClientTool(
  name: string,
  handler: (fn: FunctionCallItem) => Promise<string> | string
): void

function WeatherWidget() {
  const [weather, setWeather] = useState(null);

  useAgentClientTool("get_weather", async (fn) => {
    const { city } = JSON.parse(fn.input);
    const data = await fetchWeather(city);
    setWeather(data);
    return JSON.stringify(data);
  });

  return weather ? <WeatherCard data={weather} /> : null;
}

function MapComponent() {
  const [location, setLocation] = useState({ lat: 0, lng: 0 });

  // Always reads the current location value
  useAgentClientTool("getLocation", () => {
    return JSON.stringify(location);
  });

  useAgentClientTool("setLocation", (fn) => {
    const coords = JSON.parse(fn.input);
    setLocation(coords);
    return JSON.stringify({ ok: true });
  });

  return <Map center={location} />;
}

const session = useAgentSession();

useEffect(() => {
  const handler = (msg) => console.log("Agent thinking:", msg);
  session.on("agent-thinking", handler);
  return () => session.off("agent-thinking", handler);
}, [session]);

const ctx = useAgentContext();
// ctx.state, ctx.mode, ctx.conversation, ctx.micMuted, etc.

import { useDeepgramAgent } from "@deepgram/react";

function VoiceAgent() {
  const {
    state,
    conversation,
    micActive,
    outputMuted,
    start,
    stop,
    setMicMuted,
    setOutputMuted,
    sendUserMessage,
    interrupt,
  } = useDeepgramAgent({
    config: {
      auth: { tokenFactory: () => fetch("/api/token").then((r) => r.text()) },
      agent: "YOUR_AGENT_ID",
    },
    micOptions: { sampleRate: 16_000 },
    playerSampleRate: 24_000,
    onFunctionCall: async (fn) => {
      return JSON.stringify({ result: "ok" });
    },
  });

  return (
    <div>
      <button onClick={() => (state === "connected" ? stop() : start())}>
        {state === "connected" ? "Disconnect" : "Start"}
      </button>
      <ul>
        {conversation.map((msg) => (
          <li key={msg.id}>
            <strong>{msg.role}:</strong> {msg.content}
          </li>
        ))}
      </ul>
    </div>
  );
}