6425-800-0042.
7
8This demo shows off the new SIP API, the new all-in-one WebRTC API, and the new
9server-side websocket interface.
10
11If you remix the app, you'll just need to pop in your own `OPENAI_API_KEY` (from
12[platform.openai.com](https://platform.openai.com)), and if you want SIP, the
13`OPENAI_SIGNING_SECRET`.
25 - observer established to monitor session
26
27## API Endpoints
28
29- `GET /` - serves the WebRTC-based app
30- `POST /rtc` - creates a new WebRTC-based Realtime API session
31- `POST /sip` - handles an incoming Realtime API SIP call
32- `POST /observer` - internal endpoint to establish a Realtime API websocket for
33 session control
34
41└── routes/
42 |
43 ├── agent.ts # Realtime API session configuration and tools
44 ├── observer.ts # Server-side session control for SIP & WebRTC
45 ├── rtc.ts # WebRTC session setup
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <title>OpenAI Realtime API Voice Agent</title>
7 <style>
8 :root {
18 SUM(num_images) as total_images
19 FROM ${USAGE_TABLE}
20 WHERE val_id = ? AND our_api_token = 1
21 GROUP BY val_id
22 `, [valId]);
34 FROM ${INFERENCE_CALLS_TABLE} i
35 JOIN ${USAGE_TABLE} u ON i.usage_id = u.id
36 WHERE u.val_id = ? AND u.our_api_token = 1
37 GROUP BY u.val_id
38 `, [valId]);
41 const requestsResult = await sqlite.execute(`
42 SELECT * FROM ${USAGE_TABLE}
43 WHERE val_id = ? AND our_api_token = 1
44 ORDER BY timestamp DESC
45 `, [valId]);
18 finish_reason?: string;
19 num_images?: number;
20 our_api_token: boolean;
21}
22
1import { useState, useEffect } from "react";
2
3const USER_ENDPOINT = "/api/user";
4
5export function useUser() {
20 SUM(num_images) as total_images
21 FROM ${USAGE_TABLE}
22 WHERE our_api_token = 1
23 `;
24
41 FROM ${INFERENCE_CALLS_TABLE} i
42 JOIN ${USAGE_TABLE} u ON i.usage_id = u.id
43 WHERE u.our_api_token = 1
44 `;
45
1import { renderLayout } from "./layout.ts";
2import { formatNumber, formatPrice, formatDate, formatBoolean } from "../utils/formatters.ts";
3import { CreditAddition } from "../api/credit-additions.ts";
4
5interface UserSummaryRow {
33 finish_reason?: string;
34 num_images?: number;
35 our_api_token: boolean;
36}
37
1import { useState, useEffect } from "react";
2
3const PROJECT_ENDPOINT = "/api/project";
4const FILES_ENDPOINT = "/api/project-files";
5
6export function useProject(projectId: string, branchId?: string) {
1import { useState, useEffect } from "react";
2
3const ENDPOINT = "/api/projects-loader";
4
5export function useProjects() {
8 const fetchBalance = async () => {
9 try {
10 const response = await fetch("/api/credit-balance");
11 if (response.ok) {
12 const data = await response.json();
