Hello Realtime is a complete OpenAI Realtime application that supports both WebRTC and SIP (telephone) users. You can access the app via WebRTC at https://hello-realtime.val.run, or via SIP by calling 425-800-0042.

This demo shows off the new SIP API, the new all-in-one WebRTC API, and the new server-side websocket interface.

If you remix the app, you'll just need to pop in your own OPENAI_API_KEY (from platform.openai.com), and if you want SIP, the OPENAI_SIGNING_SECRET.

This application is built as a Hono-based web server that provides both WebRTC and SIP interfaces to OpenAI's Realtime API. The architecture follows a modular design with separate route handlers for different communication protocols.

graph TB
    subgraph "Client Interfaces"
        A[Web Browser<br/>WebRTC Client] 
        B[SIP Phone<br/>425-800-0042]
    end
    
    subgraph "Val Town Application"
        C[main.tsx<br/>Hono Router]
        D[/rtc Route<br/>WebRTC Handler]
        E[/sip Route<br/>SIP Webhook]
        F[/observer Route<br/>WebSocket Observer]
        G[Frontend<br/>HTML/JS Interface]
        H[Utils<br/>Shared Configuration]
    end
    
    subgraph "OpenAI Services"
        I[Realtime API<br/>Voice Processing]
        J[WebSocket Interface<br/>Session Monitoring]
    end
    
    A --> G
    G --> D
    B --> E
    D --> I
    E --> I
    D --> F
    E --> F
    F --> J
    
    style C fill:#6aa1ff
    style I fill:#22c55e
    style J fill:#22c55e

Flow Overview:

1. WebRTC Flow: Browser connects to frontend → creates WebRTC offer → /rtc endpoint handles SDP negotiation with OpenAI → observer monitors session
2. SIP Flow: Phone calls trigger webhook → /sip endpoint verifies and accepts call → observer monitors session
3. Monitoring: Observer establishes WebSocket connection to OpenAI for real-time session logging

• frontend/index.html - Complete web interface with WebRTC client, audio handling, and real-time connection status
• main.tsx - Main Hono application entry point that sets up routing and serves the frontend
• routes/observer.ts - WebSocket observer that connects to OpenAI's realtime API for session monitoring and logging
• routes/rtc.ts - WebRTC endpoint that handles SDP offer/answer negotiation with OpenAI's realtime API
• routes/sip.ts - SIP webhook endpoint that verifies and accepts incoming phone calls via OpenAI's telephony integration
• routes/utils.ts - Shared utilities including OpenAI API configuration, session setup, and voice agent instructions