Web Calls

mkdir talk-to-agent && cd talk-to-agent
npm init -y
npm i express @waylovoice/client
npm i -D esbuild

WAYLO_API_URL=https://api.poc.app.waylovoice.ai
WAYLO_API_KEY=sk_waylo_...
WORKSPACE_ID=your-workspace-id
AGENT_ID=your-agent-id

// Server. Node 20.6+ with Express. Run it with: node --env-file=.env server.mjs
import express from 'express';

const { WAYLO_API_KEY, WORKSPACE_ID, AGENT_ID } = process.env;
const WAYLO_API_URL = process.env.WAYLO_API_URL?.replace(/\/+$/, '');

if (!WAYLO_API_URL || !WAYLO_API_KEY || !WORKSPACE_ID || !AGENT_ID) {
  throw new Error('Set WAYLO_API_URL, WAYLO_API_KEY, WORKSPACE_ID and AGENT_ID in .env');
}

const app = express();

app.post('/api/waylo/session', express.json(), async (request, response) => {
  // Check your own login here; answer 401 when there is none.
  const { agentId } = request.body ?? {};

  if (agentId !== AGENT_ID) return response.status(403).json({ error: 'access_denied' });

  const upstream = await fetch(`${WAYLO_API_URL}/sessions/web`, {
    method: 'POST',
    headers: { Authorization: `Bearer ${WAYLO_API_KEY}`, 'Content-Type': 'application/json' },
    body: JSON.stringify({ workspaceId: WORKSPACE_ID, agentId }),
  }).catch(error => console.error('Waylo API unreachable:', error.cause?.code ?? error.name));

  if (!upstream?.ok) {
    // A Waylo 401, 403 or 404 is about your setup, not the visitor: log it and answer 502.
    if (upstream) {
      const { error } = await upstream.json().catch(() => ({}));

      console.error('Waylo API returned', upstream.status, error?.code);
    }

    return response.status(upstream?.status === 429 ? 429 : 502).end();
  }

  response.set('Cache-Control', 'no-store').type('application/json');
  response.status(200).send(await upstream.text());
});

app.use(express.static('public')); // the page and its bundled script
app.listen(3000, () => console.log('Open http://localhost:3000'));

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Talk to the agent</title>
  </head>
  <body>
    <button id="talk">Talk</button>
    <p id="status"></p>
    <script type="module" src="/main.js"></script>
  </body>
</html>

import { WayloVoice, type WayloVoiceStage, type WayloVoiceState } from '@waylovoice/client';

const AGENT_ID = 'your-agent-id'; // the same id as AGENT_ID in .env; the server refuses others
const talkButton = document.querySelector<HTMLButtonElement>('#talk')!;
const statusText = document.querySelector<HTMLElement>('#status')!;
let wayloVoice: WayloVoice | undefined;

const STATUS: Record<WayloVoiceStage, string> = {
  idle: '',
  connecting: 'Calling the agent…',
  joining: 'The agent is joining…',
  preparing: 'The agent is getting ready…',
  speaking: 'The agent is speaking',
  listening: "Go ahead, I'm listening",
  thinking: 'Thinking…',
  reconnecting: 'Reconnecting…',
  ended: 'Call ended',
};

function isLive(state: WayloVoiceState): boolean {
  return state.connection !== 'idle' && !state.end;
}

function render(state: WayloVoiceState): void {
  talkButton.textContent = isLive(state) ? 'Hang up' : 'Talk';
  statusText.textContent =
    state.end?.status === 'failed' ? `Call failed: ${state.end.error.code}` : STATUS[state.stage];
}

talkButton.addEventListener('click', () => {
  if (wayloVoice && isLive(wayloVoice.getState())) {
    void wayloVoice.stop();

    return;
  }

  wayloVoice = new WayloVoice({ sessionEndpoint: '/api/waylo/session' });
  wayloVoice.on('state', render);
  // A call failure ends with state.end, which render() shows. A RangeError means bad options.
  wayloVoice.start({ agentId: AGENT_ID }).catch(error => {
    if (error instanceof RangeError) console.error(error);
  });
});

npx esbuild src/main.ts --bundle --format=esm --outfile=public/main.js
node --env-file=.env server.mjs