AI-powered Booking.com agent, built with LangGraph Studio — integrating APIs and featuring modern UI components.

I extended my React Multi-Agent Chat app (powered by LangGraph Server Agents) by adding a new Booking.com agent. We use the Booking.com API from RapidAPI to access hotel data and integrate it into our booking flow. As you can see, there are several Booking.com implementations. The Booking.com API on RapidAPI is made by third-party developers. They provide a way to access Booking.com's hotel data. Booking.com doesn't officially support these APIs, but many people use them successfully in their apps.

You will see how the system transforms traditional chatbot interactions from simple text exchanges into rich, app-like experiences. Instead of users having to remember specific commands or navigate through multiple steps of text, they get intuitive interfaces that guide them through complex processes such as booking travel, making payments, or managing data. The agent-uis system essentially bridges the gap between conversational AI and traditional web applications, providing the best of both worlds: the natural language understanding of AI agents and the user-friendly interfaces of modern web apps.

We start by looking at how custom AI agents can be built to handle real-world tasks. One example is a Booking.com agent that connects to the API to fetch live hotel data and display it in an interactive carousel. We also design reusable hotel card components that show images, ratings, and prices in a clean, consistent way, and integrate Stripe to provide secure, user-friendly payment processing.

Along the way, we compare AI agent development with traditional web development, highlighting the differences in workflows and tools. We also explore how AI is changing the coding landscape, from faster prototyping to fewer errors. Finally, we run full end-to-end testing of the Booking.com agent to make sure everything—from the UI to the API calls to the payments—works together seamlessly.

For the Booking.com agent with a UI in the same project, I wrote less than 5% of the code, and the remaining 95% was generated by Cursor AI Editor through prompting—but you need to know what you’re doing. Since English is the main language for prompts, the more precise you are, the fewer prompts you’ll need to accomplish the same task. Some people think an AI editor is used simply to generate code. However, you can collaborate with the AI on a project—you can discuss the code, ask for better solutions, and more.

Setup Instructions

This project consists of two parts:

1. LangGraph Studio – Runs the backend agents.
2. React Multi-Agent Chat App including Booking.com – The frontend interface that connects to LangGraph Studio.

---

🚀 Clone and Run

# Clone the repository

git clone https://github.com/Ashot72/booking.com-UI-agent.git

# LangGraph Studio

cd booking.com-UI-agent/langgraph-agents

# Create the .env file based on env.example.txt and include the required keys
# (OpenAI API key, Tavily Search key, RapidAPI, Booking.com, Stripe, and NodeMailer settings)

# Install dependencies
npm install

# Start the LangGraph Studio
npm start

# React App

cd booking.com-UI-agent/langgraph-multichat

# Install dependencies
npm install

# Start the React app (http://localhost:3000)
npm run dev

📹 Booking.com Video | 📝 Booking.com Description