Agoda AI chatbot - Ideation

Overview

The Evolution of Agoda AI

While Agoda’s current digital touchpoints are robust, there is a clear opportunity to move from reactive search to proactive assistance. I initiated this project to demonstrate how we can bridge the gap between simple property Q&A and a comprehensive, multi-layered travel assistant.

The Evolution of Agoda AI

Problem Statement

The existing Property AMA Bot, while highly accurate for hotel-specific queries, remains a functional silo. As a traveler, the journey doesn't end at "finding a room"—it includes managing bookings, checking flights, and navigating travel policies. Currently, these tasks require users to navigate different interfaces, causing:

Fragmented UX: Users lose context when switching between the chatbot and their booking dashboard.
Lost Conversions: Every time a user has to "leave the chat" to check a status, there is a drop-off risk.

The Self initiated solution by inspired from Agoda's future enhancements

To solve this, I designed a Multi-Agent Orchestration Architecture. This project moves beyond a single-purpose bot by introducing a "Manager-Worker" model. This architecture allows Agoda to:

Break the Silo: Transition from a "Property Bot" to a Universal Travel Concierge.

Ensure Safety: Implement a Topic Guardrail Agent (initiated to prevent brand risk from off-topic or inappropriate AI hallucinations).
Future-Proof the Tech: Build a Plug-and-Play Engine where new capabilities (like a Flight Agent) can be "plugged in" with zero downtime or core code changes.

Vision for Scale

This self-initiated prototype serves as the blueprint for an Agoda AI Hub. By proving that we can route intents—from searching for a "Boutique Hotel in Bali" to "Canceling Booking AGD-78234"—within one interface, we move from being a booking site to becoming a traveler’s intelligent companion.

Process

To ensure the Agoda AI Hub was both functional and visually consistent, I utilized a modern AI-driven development stack. Instead of a traditional linear handoff, I built a circular workflow using Claude + Figma MCP.

1. Design-to-Code (Figma → HTML/CSS)

The Action: I used the Figma MCP to allow Claude to "read" my design components directly from the Figma canvas.
The Result: Claude generated clean, semantic HTML and modular CSS. This ensured that the chatbot UI—the message bubbles, property cards, and agent status indicators—matched the Agoda brand identity perfectly without manual CSS tweaking.

2. Code-to-Design (Logic → Figma)

The Action: To visualize the multi-agent architecture (the Manager, Guardrails, and Property agents), I prompted Claude to generate Figma layouts based on the JavaScript logic I wrote.
The Result: A live design document that stayed in sync with the actual code structure. This allowed for rapid prototyping of the "Plug-and-Play" UI for future agents (like the Flight Agent).

3. The "Agile Sandbox" (Simple HTML/CSS/JS)

Strategy: I intentionally chose a Vanilla HTML/CSS/JS stack rather than a heavy framework (like React or Angular).
Reasoning: * Portability: The project can be opened in any browser instantly without npm install or complex build steps.
- Speed: It allows for immediate testing of the Orchestrator’s routing logic.
- Demonstration: It proves that complex AI agent logic doesn't require complex infrastructure—it’s about the intelligence of the routing.

Developed this Design System to update Teleport’s design and make all our products visually unique and cohesive. By establishing a unified set of UI components, design patterns, and guidelines, we ensure consistency, scalability, and a seamless user experience. This system modernizes our design approach, strengthens our brand identity, and supports future innovation across all Teleport products.

Agoda AI chatbot - Ideation