Prebuilt UI

A minimal Vite + Express app using Akapulu’s prebuilt conversation UI. Use it when you want the fastest path to a working call and prefer to customize via props or CSS rather than build your own layout. Two folders:

backend/ — Express server that holds your API key and calls Akapulu with @akapulu/server
frontend/ — React app (Vite) using @akapulu/react and @akapulu/react-ui

Prerequisites

Node.js 20+ and npm
An Akapulu API key — akapulu.com/api-keys
A scenario — akapulu.com/scenarios (guide)

Setup

Clone the repo:

git clone https://github.com/Akapulu/prebuilt-ui.git && cd prebuilt-ui

Install and configure the backend. Copy backend/.env.example to backend/.env.local and add your API key:

cd backend && npm install && cp .env.example .env.local

AKAPULU_API_KEY=your_real_api_key_here

Set your scenario id in backend/server.ts:

const connectPayload = {
  scenario_id: "<your-scenario-id>", // <--- replace with your scenario id
  avatar_id: "1285bfe4-3512-4b34-93ad-196098597a1c",
  runtime_vars: {},
  record_conversation: false,
  show_ai_label: false,
};

Start the backend (localhost:3001) and leave it running:

npm run dev

In a second terminal, start the frontend:

cd frontend && npm install && npm run dev

Open localhost:5173 and click Start Call.

How it works

The frontend (localhost:5173) calls your backend (localhost:3001), which calls Akapulu with your API key. This demo does not authenticate users. Anyone who can reach /api/connect can start a conversation on your account. Before production, authenticate users on that route. Pass those headers with config.headers on AkapuluProvider (object or a function called when the request is sent). The backend exposes two routes:

// POST /api/connect  →  starts a conversation
// GET  /api/updates  →  polled while the avatar boots

The frontend wires those into AkapuluProvider and renders AkapuluConversation (connect chime plays when the call goes live; pass playConnectChime={false} to disable):

<AkapuluProvider
  config={{
    endpoints: {
      connectPath: "http://localhost:3001/api/connect",
      updatesPath: "http://localhost:3001/api/updates",
    },
  }}
>
  <AkapuluConversation title="Akapulu prebuilt UI demo" />
</AkapuluProvider>

Prebuilt UI (styled) — dark theme, custom tool toasts, post-call review
Customized UI — custom hooks + Daily video UI + post-call review

View on GitHub

prebuilt-ui

Overview

Web SDK examples

Example scenarios

Scripted video clips

Prerequisites

Setup

How it works

View on GitHub

​Prerequisites

​Setup

​How it works

​Related examples

​View on GitHub

Prerequisites

Setup

How it works

Related examples

View on GitHub