https://github.com/ashot72/booking.com-ui-agent
AI-powered Booking.com agent, built with LangGraph Studio — integrating APIs and featuring modern UI components.
https://github.com/ashot72/booking.com-ui-agent
agents-ui ai-agents ai-tools booking-agent chat generative-ui generative-user-interface hotels-agent langgraph langgraph-platform langgraph-studio langgraphjs rapid-api rapidapi react-agent react-usestream stripe stripe-payments trip-agent
Last synced: 4 months ago
JSON representation
AI-powered Booking.com agent, built with LangGraph Studio — integrating APIs and featuring modern UI components.
- Host: GitHub
- URL: https://github.com/ashot72/booking.com-ui-agent
- Owner: Ashot72
- Created: 2025-09-17T16:26:04.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-09-17T17:21:31.000Z (5 months ago)
- Last Synced: 2025-09-17T18:56:20.092Z (5 months ago)
- Topics: agents-ui, ai-agents, ai-tools, booking-agent, chat, generative-ui, generative-user-interface, hotels-agent, langgraph, langgraph-platform, langgraph-studio, langgraphjs, rapid-api, rapidapi, react-agent, react-usestream, stripe, stripe-payments, trip-agent
- Language: TypeScript
- Homepage:
- Size: 2.13 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## AI-powered [Booking.com](https://rapidapi.com/DataCrawler/api/booking-com15/playground) 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](https://rapidapi.com/DataCrawler/api/booking-com15/playground) agent.
We use the [Booking.com](https://rapidapi.com/DataCrawler/api/booking-com15/playground) API from [RapidAPI](https://rapidapi.com/hub) 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](https://rapidapi.com/DataCrawler/api/booking-com15/playground) hotel data. [Booking.com](https://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](https://rapidapi.com/DataCrawler/api/booking-com15/playground) 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](https://rapidapi.com/DataCrawler/api/booking-com15/playground) agent to make sure everything—from the UI to the API calls to the payments—works together seamlessly.
For the [Booking.com](https://rapidapi.com/DataCrawler/api/booking-com15/playground) 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](https://rapidapi.com/DataCrawler/api/booking-com15/playground)** – The frontend interface that connects to LangGraph Studio.
---
## 🚀 Clone and Run
```bash
# 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](https://youtu.be/reu5tQTq60A) | 📝 [Booking.com Description](https://ashot72.github.io/booking.com-UI-agent/index.html)