React SDK

1
import { useScribe } from "@elevenlabs/react";
2
import { useEffect } from "react";
3
4
function MyComponent() {
5
  const scribe = useScribe({
6
    modelId: "scribe_v2_realtime",
7
    onPartialTranscript: (data) => {
8
      console.log("Partial:", data.text);
9
    },
10
    onCommittedTranscript: (data) => {
11
      console.log("Committed:", data.text);
12
    },
13
  });
14
15
  // Start recording
16
  const handleStart = async () => {
17
    try {
18
      const token = await fetchTokenFromServer();
19
      await scribe.connect({
20
        token,
21
        microphone: {
22
          echoCancellation: true,
23
          noiseSuppression: true,
24
        },
25
      });
26
    } catch (err) {
27
      console.error("Failed to start recording:", err);
28
    }
29
  };
30
31
  // Stop recording
32
  const handleDisconnect = () => {
33
    scribe.disconnect();
34
  };
35
36
  // Disconnect on unmount
37
  useEffect(() => {
38
    return () => {
39
      if (scribe.isConnected) {
40
        scribe.disconnect();
41
      }
42
    };
43
  }, [scribe]);
44
45
  return (
46
    <div>
47
      <button onClick={handleStart} disabled={scribe.isConnected}>
48
        Start Recording
49
      </button>
50
      <button onClick={handleDisconnect} disabled={!scribe.isConnected}>
51
        Stop
52
      </button>
53
54
      {scribe.partialTranscript && <p>Live: {scribe.partialTranscript}</p>}
55
56
      <div>
57
        {scribe.committedTranscripts.map((t) => (
58
          <p key={t.id}>{t.text}</p>
59
        ))}
60
      </div>
61
    </div>
62
  );
63
}

1
// Client
2
const fetchToken = async () => {
3
  const response = await fetch("/scribe-token");
4
  const { token } = await response.json();
5
  return token;
6
};

1
const scribe = useScribe({
2
  // Connection options (can be overridden in connect())
3
  token: "optional-default-token",
4
  modelId: "scribe_v2_realtime",
5
  baseUri: "wss://api.elevenlabs.io",
6
7
  // VAD options
8
  commitStrategy: CommitStrategy.VAD,
9
  vadSilenceThresholdSecs: 0.5,
10
  vadThreshold: 0.5,
11
  minSpeechDurationMs: 100,
12
  minSilenceDurationMs: 500,
13
  languageCode: "en",
14
15
  // Microphone options (for automatic mode)
16
  microphone: {
17
    deviceId: "optional-device-id",
18
    echoCancellation: true,
19
    noiseSuppression: true,
20
    autoGainControl: true,
21
  },
22
23
  // Manual audio options (for file transcription)
24
  audioFormat: AudioFormat.PCM_16000,
25
  sampleRate: 16000,
26
27
  // Auto-connect on mount
28
  autoConnect: false,
29
30
  // Event callbacks
31
  onSessionStarted: () => console.log("Session started"),
32
  onPartialTranscript: (data) => console.log("Partial:", data.text),
33
  onCommittedTranscript: (data) => console.log("Committed:", data.text),
34
  onCommittedTranscriptWithTimestamps: (data) => console.log("With timestamps:", data),
35
  onError: (error) => console.error("Error:", error),
36
  onAuthError: (data) => console.error("Auth error:", data.error),
37
  onQuotaExceededError: (data) => console.error("Quota exceeded:", data.error),
38
  onConnect: () => console.log("Connected"),
39
  onDisconnect: () => console.log("Disconnected"),
40
});

1
function MicrophoneTranscription() {
2
  const scribe = useScribe({
3
    modelId: "scribe_v2_realtime",
4
  });
5
6
  const startRecording = async () => {
7
    const token = await fetchToken();
8
    await scribe.connect({
9
      token,
10
      microphone: {
11
        echoCancellation: true,
12
        noiseSuppression: true,
13
        autoGainControl: true,
14
      },
15
    });
16
  };
17
18
  return (
19
    <div>
20
      <button onClick={startRecording} disabled={scribe.isConnected}>
21
        {scribe.status === "connecting" ? "Connecting..." : "Start"}
22
      </button>
23
      <button onClick={scribe.disconnect} disabled={!scribe.isConnected}>
24
        Stop
25
      </button>
26
27
      {scribe.partialTranscript && (
28
        <div>
29
          <strong>Speaking:</strong> {scribe.partialTranscript}
30
        </div>
31
      )}
32
33
      {scribe.committedTranscripts.map((transcript) => (
34
        <div key={transcript.id}>{transcript.text}</div>
35
      ))}
36
    </div>
37
  );
38
}

1
import { useScribe, AudioFormat } from "@elevenlabs/react";
2
import { useState } from "react";
3
4
function FileTranscription() {
5
  const [file, setFile] = useState<File | null>(null);
6
  const scribe = useScribe({
7
    modelId: "scribe_v2_realtime",
8
    audioFormat: AudioFormat.PCM_16000,
9
    sampleRate: 16000,
10
  });
11
12
  const transcribeFile = async () => {
13
    if (!file) return;
14
15
    const token = await fetchToken();
16
    await scribe.connect({ token });
17
18
    // Decode audio file
19
    const arrayBuffer = await file.arrayBuffer();
20
    const audioContext = new AudioContext({ sampleRate: 16000 });
21
    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
22
23
    // Convert to PCM16
24
    const channelData = audioBuffer.getChannelData(0);
25
    const pcmData = new Int16Array(channelData.length);
26
27
    for (let i = 0; i < channelData.length; i++) {
28
      const sample = Math.max(-1, Math.min(1, channelData[i]));
29
      pcmData[i] = sample < 0 ? sample * 32768 : sample * 32767;
30
    }
31
32
    // Send in chunks
33
    const chunkSize = 4096;
34
    for (let offset = 0; offset < pcmData.length; offset += chunkSize) {
35
      const chunk = pcmData.slice(offset, offset + chunkSize);
36
      const bytes = new Uint8Array(chunk.buffer);
37
      const base64 = btoa(String.fromCharCode(...bytes));
38
39
      scribe.sendAudio(base64);
40
      await new Promise((resolve) => setTimeout(resolve, 50));
41
    }
42
43
    // Commit transcription
44
    scribe.commit();
45
  };
46
47
  return (
48
    <div>
49
      <input type="file" accept="audio/*" onChange={(e) => setFile(e.target.files?.[0] || null)} />
50
      <button onClick={transcribeFile} disabled={!file || scribe.isConnected}>
51
        Transcribe
52
      </button>
53
54
      {scribe.committedTranscripts.map((transcript) => (
55
        <div key={transcript.id}>{transcript.text}</div>
56
      ))}
57
    </div>
58
  );
59
}

1
const scribe = useScribe(/* options */);
2
3
console.log(scribe.status); // "connected"
4
console.log(scribe.isConnected); // true
5
console.log(scribe.partialTranscript); // "hello world"
6
console.log(scribe.committedTranscripts); // [{ id: "...", text: "...", words: ..., isFinal: true }]
7
console.log(scribe.error); // null or error string

1
await scribe.connect({
2
  token: "your-token", // Required
3
  microphone: {
4
    /* ... */
5
  }, // For microphone mode
6
  // OR
7
  audioFormat: AudioFormat.PCM_16000, // For manual mode
8
  sampleRate: 16000,
9
});

1
scribe.disconnect();

1
scribe.sendAudio(base64AudioChunk, {
2
  commit: false, // Optional: commit immediately
3
  sampleRate: 16000, // Optional: override sample rate
4
  previousText: "Previous transcription text", // Optional: context from a previous transcription. Can only be sent in the first audio chunk.
5
});

1
scribe.commit();

1
scribe.clearTranscripts();

1
const connection = scribe.getConnection();
2
// Returns RealtimeConnection | null

1
import { CommitStrategy } from '@elevenlabs/react';
2
3
// Manual (default) - you control when to commit
4
const scribe = useScribe({
5
  commitStrategy: CommitStrategy.MANUAL,
6
});
7
8
// Later...
9
scribe.commit(); // Commit transcription
10
11
// Voice Activity Detection - model detects silences and automatically commits
12
const scribe = useScribe({
13
  commitStrategy: CommitStrategy.VAD,
14
});

1
import { useScribe, CommitStrategy } from "@elevenlabs/react";
2
import { useEffect } from "react";
3
4
function ScribeDemo() {
5
  const scribe = useScribe({
6
    modelId: "scribe_v2_realtime",
7
    commitStrategy: CommitStrategy.VAD,
8
    onSessionStarted: () => console.log("Started"),
9
    onCommittedTranscript: (data) => console.log("Committed:", data.text),
10
    onError: (error) => console.error("Error:", error),
11
  });
12
13
  const startMicrophone = async () => {
14
    const token = await fetchToken();
15
    await scribe.connect({
16
      token,
17
      microphone: {
18
        echoCancellation: true,
19
        noiseSuppression: true,
20
      },
21
    });
22
  };
23
24
  const handleDisconnect = () => scribe.disconnect();
25
26
  const handleClearTranscripts = () => scribe.clearTranscripts();
27
28
  useEffect(() => {
29
    return () => {
30
      handleDisconnect();
31
    };
32
  }, []);
33
34
  return (
35
    <div>
36
      <h1>Scribe Demo</h1>
37
38
      {/* Status */}
39
      <div>
40
        Status: {scribe.status}
41
        {scribe.error && <span>Error: {scribe.error}</span>}
42
      </div>
43
44
      {/* Controls */}
45
      <div>
46
        {!scribe.isConnected ? (
47
          <button onClick={startMicrophone}>Start Recording</button>
48
        ) : (
49
          <button onClick={handleDisconnect}>Stop</button>
50
        )}
51
        <button onClick={handleClearTranscripts}>Clear</button>
52
      </div>
53
54
      {/* Live Transcript */}
55
      {scribe.partialTranscript && (
56
        <div>
57
          <strong>Live:</strong> {scribe.partialTranscript}
58
        </div>
59
      )}
60
61
      {/* Committed Transcripts */}
62
      <div>
63
        <h2>Transcripts ({scribe.committedTranscripts.length})</h2>
64
        {scribe.committedTranscripts.map((t) => (
65
          <div key={t.id}>
66
            <span>{new Date(t.timestamp).toLocaleTimeString()}</span>
67
            <p>{t.text}</p>
68
          </div>
69
        ))}
70
      </div>
71
    </div>
72
  );
73
}