voxclaude

Open-source voice mode for Claude as a single React hook — browser speech-to-text → your Claude backend (streaming + tools) → text-to-speech.

• Live demo: https://voxclaude.vercel.app
• Full toolkit (incl. the server route + demo UI): https://github.com/latent-9/voxclaude

Install

npm i voxclaude

react (>=18) is a peer dependency.

Usage

"use client";
import { useClaudeVoice } from "voxclaude";

export function VoiceButton() {
  const { status, listening, startListening, stopListening } = useClaudeVoice({
    mode: "chef",     // "chef" | "default"
    lang: "en-US",
    api: "/api/chat", // your streaming endpoint (see below)
    onTool: (tool) => console.log(tool),
  });

  return (
    <button onClick={() => (listening ? stopListening() : startListening())}>
      {status}
    </button>
  );
}

The server route

You provide one endpoint at api (default /api/chat) that accepts { messages, mode, lang } and streams newline-delimited JSON:

{"type":"text","text":"..."}         // a chunk of the spoken reply
{"type":"tool","name":"...","input":{...}}
{"type":"done"}

A ready-to-copy Next.js route (works with the Anthropic API or Microsoft Foundry, keeps your key server-side) is in the main repo: app/api/chat/route.ts.

API

useClaudeVoice(opts?) returns:

| Field | Description | |---|---| | messages | conversation so far ({ role, content }[]) | | status | "idle" \| "listening" \| "thinking" \| "speaking" | | listening / speaking | live booleans for UI | | startListening() / stopListening() | control the mic | | sendText(text) | send a message without the mic | | assistantText | the reply currently streaming in | | interim | live partial transcript while you speak | | supported | false if the browser has no speech recognition | | reset() | clear the conversation |

Also exported: useSpeechInput, useSpeechOutput, takeCompleteSentences.

License

MIT