> ## 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.

# Quickstart

> Add a voice agent to your React app in minutes.

## What you'll learn

In this quickstart you'll learn how to:

1. Create an agent in the Outspeed Dashboard
2. Install the Outspeed SDK
3. Build a voice agent that can talk to users

## Step 1: Create Agent in Dashboard

1. Go to the [Outspeed Dashboard](https://dashboard.outspeed.com) and sign in
2. Create a new agent with your desired configuration:
   * **Instructions**: "You are a helpful assistant"
   * **Voice**: Choose from available voices like `sophie`, `david`, etc.
3. **Important**: Make sure **Authentication** is **disabled** for this quickstart
4. Copy your **Agent ID** - you'll need it in the next step

<Info>For production apps, you'll want to enable authentication. See our [Authentication Guide](/get-started/authentication) for details.</Info>

## Step 2: Install Outspeed

Install the React SDK using your preferred package manager:

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

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

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

## Step 3: Create React component

Here's a complete working example:

```tsx theme={null}
import { useConversation } from "@outspeed/react";
import { useState } from "react";

// Replace with your Agent ID from the dashboard
const AGENT_ID = "your-agent-id-here";

export default function App() {
  const [sessionCreated, setSessionCreated] = useState(false);

  const conversation = useConversation({
    onDisconnect: () => {
      console.log("Disconnected! cleaning up...");
      setSessionCreated(false);
    },
  });

  const startSession = async () => {
    try {
      conversation.on("session.created", () => {
        setSessionCreated(true);
      });

      await conversation.startSession({
        agentId: AGENT_ID,
        source: "quickstart"
      });
    } catch (error) {
      console.error("Error starting session", error);
    }
  };

  const endSession = async () => {
    try {
      await conversation.endSession();
    } catch (error) {
      console.error("Error ending session", error);
    } finally {
      setSessionCreated(false);
    }
  };

  if (sessionCreated) {
    return (
      <div>
        <h2>Voice session active!</h2>
        <p>Start talking to your AI assistant</p>
        <button onClick={endSession}>End Session</button>
      </div>
    );
  }

  return (
    <div>
      <h2>Voice AI Assistant</h2>
      <p>Click the button to start talking</p>
      <button onClick={startSession}>Start Session</button>
    </div>
  );
}
```

<Note>Want to customize your agent? Edit the configuration in the [Outspeed Dashboard](https://dashboard.outspeed.com) - changes apply instantly without code updates!</Note>

## That's it!

You now have a working voice agent that can:

* Start and end voice sessions with zero backend setup
* Talk to users with AI-powered responses
* Handle voice activity detection automatically
* Be customized entirely through the dashboard

## More Examples

Want to see complete implementations with different frameworks? Check out our [Examples Repository](https://github.com/outspeed-ai/outspeed-examples) which includes:

* **React + Vite + FastAPI** - Full-featured voice assistant with weather tools
* **React + Vite + Cloudflare Functions** - Serverless voice assistant
* **Create React App + FastAPI** - Simple React setup with Python backend
* **Next.js** - complete Next.js voice assistant (also includes AI-to-AI chat)
* **Swift iOS** - Native iOS voice bot with SwiftUI

## Next Steps

* **Add Authentication**: For production apps, enable authentication in your agent settings and follow our [Authentication Guide](/get-started/authentication)
* **Add Tools**: Give your agent superpowers with [client tools](/features/client-tools) and [system tools](/features/system-tools)
* **Customize Behavior**: Explore [voices](/features/voices), [context management](/features/context-management), and more features