Quickstart

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>
  );
}