Soniox
SDKs

React SDK

Build speech-to-text workflows in React with real-time API.

Soniox React SDK provides React hooks and components for real-time speech-to-text, built on top of the Web SDK. It lets you:

  • Capture audio from the user's microphone with a single hook
  • Stream audio to Soniox in real time
  • Receive transcription and translation results as reactive state

Quickstart

Install

Install via your preferred package manager:

npm install @soniox/react
yarn add @soniox/react
pnpm add @soniox/react
bun add @soniox/react

Setup you temporary API key endpoint

In client enviroment (browser, mobile app, React Native, etc.), you don't want to expose your API key to the client. For this reason, you can create a temporary API key endpoint on your server and use it to issue temporary API keys for the client.

For example, you can use our Node SDK to create a temporary API key endpoint.

import express from 'express';
import { SonioxNodeClient } from '@soniox/node';

const app = express();
const client = new SonioxNodeClient(); // reads SONIOX_API_KEY from env

// Create a temporary API key endpoint
app.get('/tmp-key', async (_req, res) => {
try {
    const { api_key, expires_at } = await client.auth.createTemporaryKey({
    usage_type: 'transcribe_websocket',
    expires_in_seconds: 300, // 1..3600
    });

    res.json({ api_key, expires_at });
} catch (err) {
    res.status(500).json({ error: err instanceof Error ? err.message : 'Failed to create temporary key' });
}
});

app.listen(3000, () => {
  console.log('Server listening on http://localhost:3000');
});

Read more about our Node SDK and Temporary API keys

Create your first real-time session

import { SonioxProvider, useRecording } from "@soniox/react";

// Create a temporary API key endpoint on your server and use it to issue temporary API keys for the client
async function getAPIKey() {
  const res = await fetch("/tmp-key", { method: "POST" });
  const { api_key } = await res.json();
  return api_key;
}

function App() {
  return (
    // Wrap your app with a SonioxProvider and pass the temporary API key getter function
    <SonioxProvider apiKey={getAPIKey}>
      <Transcription />
    </SonioxProvider>
  );
}

function Transcription() {
  // Create a recording session
  const { state, finalText, partialText, start, stop } = useRecording({
    model: "stt-rt-v4",
  });

  return (
    <div>
      <p>
        <span>{finalText}</span>
        <span style={{ color: "gray" }}>{partialText}</span>
      </p>
      <p>State: {state}</p>
      {state === "recording" || state === "connecting" || state === "starting" ? (
        <button onClick={() => void stop()}>Stop</button>
      ) : (
        <button onClick={start}>Start</button>
      )}
    </div>
  );
}

Learn more about Real-time transcription

Next.js example

Transcription and translation example with temporary API key generation.

Next steps

Types

Soniox Client SDK — Types Reference

Real-time transcription

Create and manage real-time speech-to-text sessions with the Soniox React SDK