@outspeed/react

React bindings for the Outspeed SDK. Provides hooks and utilities for integrating Outspeed into React apps.

Installation

npm install @outspeed/react

Usage (WIP)

Here's a sample react component that uses the useConversation hook to start and end a session:

import { providers, type SessionConfig } from "@outspeed/client";
import { useConversation } from "@outspeed/react";
import { useState } from "react";

// this requires you to set up a server endpoint that uses your Outspeed API key to generate an ephemeral key
// docs for backend setup: https://docs.outspeed.com/react/setup#backend-setup
const getEphemeralKeyFromServer = async (config: SessionConfig) => {
  const tokenResponse = await fetch(`/token`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(config),
  });

  const data = await tokenResponse.json();
  if (!tokenResponse.ok) {
    throw new Error("Failed to get ephemeral key");
  }

  return data.client_secret.value;
};

const sessionConfig: SessionConfig = {
  model: "outspeed-v1",
  instructions: "You are a helpful but witty assistant.",
  voice: "sophie",
  temperature: 0.5,
  turn_detection: {
    type: "semantic_vad",
  },
  first_message: "Hello, how can i assist you with Outspeed today?",
};

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

  const conversation = useConversation({
    sessionConfig: sessionConfig,
  });

  const startSession = async () => {
    try {
      const ephemeralKey = await getEphemeralKeyFromServer(sessionConfig);

      await conversation.startSession(ephemeralKey);

      // call after startSession to ensure the session is created
      conversation.on("session.created", (event) => {
        console.log("session.created", event);
        setSessionCreated(true);
      });

      setSessionCreated(true);
    } 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 (
      <>
        <h2>Session created!</h2>
        <button onClick={endSession}>Stop Session</button>
      </>
    );
  }

  return (
    <>
      <h2>Click the button to start a session</h2>
      <button onClick={startSession}>Start Session</button>
    </>
  );
}