​
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 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
For production apps, you’ll want to enable authentication. See our Authentication Guide for details.

​
Step 2: Install Outspeed

Install the React SDK using your preferred package manager: 
npm install @outspeed/client @outspeed/react

​
Step 3: Create React component

Here’s a complete working example: 
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>
  );
}
Want to customize your agent? Edit the configuration in the Outspeed Dashboard - changes apply instantly without code updates!

​
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 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