Multimodal Voice + UI Travel Booking Agent

The Problem

Booking a vacation package means talking, tapping, and checking an itinerary that has to stay consistent. Voice and UI that do not share state force people to repeat themselves and abandon the flow.

The Architecture

flowchart TB
  subgraph input [User Input]
      Voice[Voice via OpenAI Realtime]
      UI[Next.js UI]
  end

  subgraph backend [FastAPI]
      Agents[OpenAI Agents SDK]
      Realtime[Realtime session]
      State[Shared trip state]
  end

  subgraph apis [Booking Systems]
      Packages[Package and availability APIs]
  end

  Voice --> Realtime
  UI --> Agents
  Realtime --> State
  Agents --> State
  State --> Packages
  State --> Voice
  State --> UI

Voice and UI Stay in Sync

Every voice turn and every click updates the same trip state.

1. Shared state — talk or tap; the itinerary does not fork
2. Agents SDK — conversational booking tools on the backend
3. Realtime voice — browser audio after the backend mints a short-lived session; no API key in the client

Tech Stack

• FastAPI — booking agents and Realtime session minting
• Next.js — chat and itinerary UI
• OpenAI Agents SDK — tool-using booking conversation
• OpenAI Realtime API — low-latency voice

The Impact

Voice and chat stay on one trip. Talk or tap; the itinerary does not fork.