> ## Documentation Index
> Fetch the complete documentation index at: https://docs.outspeed.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React SDK Setup

> Get started with the Outspeed React SDK for realtime voice AI applications

## Installation

Install the React SDK using your preferred package manager:

<CodeGroup>
  ```bash npm theme={null}
  npm install @outspeed/react
  ```

  ```bash pnpm theme={null}
  pnpm add @outspeed/react
  ```

  ```bash yarn theme={null}
  yarn add @outspeed/react
  ```
</CodeGroup>

## Prerequisites

Before using the React SDK, you'll need:

1. **Outspeed API Key**: Get your API key from the [Outspeed Dashboard](https://dashboard.outspeed.com)
2. **Backend Token Endpoint**: A server endpoint to generate ephemeral keys for client authentication

## Backend Setup

<CodeGroup>
  ```javascript Express.js theme={null}
  app.use(express.json());

  app.post("/token", async (req, res) => {
    try {
      const response = await fetch("https://api.outspeed.com/v1/realtime/sessions", {
        method: "POST",
        headers: {
          Authorization: `Bearer ${process.env.OUTSPEED_API_KEY}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify(req.body),
      });

      if (!response.ok) {
        const error = await response.text();
        console.error("failed to generate ephemeral key:", error);
        res.status(response.status).json({ error: "Failed to generate token" });
        return;
      }

      const data = await response.json();
      res.json(data);
    } catch (error) {
      console.error("failed to generate ephemeral key:", error);
      res.status(500).json({ error: "Internal server error" });
    }
  });
  ```

  ```python FastAPI theme={null}
  import os

  import httpx
  from fastapi import FastAPI, HTTPException, Request

  OUTSPEED_API_KEY = os.getenv("OUTSPEED_API_KEY")
  app = FastAPI()


  @app.post("/token")
  async def create_token(request: Request):
      try:
          session_config = await request.json()
          async with httpx.AsyncClient() as client:
              response = await client.post(
                  "https://api.outspeed.com/v1/realtime/sessions",
                  headers={
                      "Authorization": f"Bearer {OUTSPEED_API_KEY}",
                      "Content-Type": "application/json",
                  },
                  json=session_config,
              )
              if not response.is_success:
                  print("error generating ephemeral key:", response.text)
                  raise HTTPException(status_code=response.status_code, detail=response.text)
              return response.json()
      except Exception as e:
          print("error generating ephemeral key:", e)
          raise HTTPException(status_code=500, detail="Internal server error")
  ```
</CodeGroup>

## Environment Variables

Add your Outspeed API key to your server's environment variables:

```bash theme={null}
OUTSPEED_API_KEY=your_outspeed_api_key_here
```

<Warning>
  Never expose your Outspeed API key in client-side code. Always generate ephemeral tokens on your backend server.
</Warning>

## Session Configuration

The React SDK uses a `SessionConfig` object to configure voice sessions:

```typescript theme={null}
import { type SessionConfig } from "@outspeed/client";

const sessionConfig: SessionConfig = {
  model: "outspeed-v1",
  instructions: "You are a helpful assistant.",
  voice: "david", // see the voices page for all available voices
  turn_detection: {
    type: "semantic_vad",
  },
  first_message: "Hello! How can I help you today?", // Optional welcome message
};
```

<Note>
  Want to use a different voice? See all [available voices](/features/voices) you can choose from.
</Note>

### Configuration Options

| Option           | Type     | Description                             |
| ---------------- | -------- | --------------------------------------- |
| `model`          | `string` | Must be `"outspeed-v1"`                 |
| `instructions`   | `string` | System prompt for the AI assistant      |
| `voice`          | `string` | Voice ID to use for speech synthesis    |
| `turn_detection` | `object` | Voice activity detection settings       |
| `first_message`  | `string` | Optional initial message from assistant |

<Info>You can find available voices [here](/features/voices)</Info>

## Next Steps

Now that you have the SDK installed and configured, you can start building voice AI applications:

* [Basic Example](/react/example) - Learn how to create a simple voice conversation
* [API Reference](/api-spec/client) - Explore all available methods and events