Inspiration
Hong Kong, a dazzling metropolis where East meets West, pulses with vibrant energy, iconic skylines, and a rich tapestry of culture, cuisine, and adventure. Yet, with the growing trend of Hong Kongers venturing north for travel, the city’s tourism scene is craving a bold reboot. We saw an opportunity to rekindle the excitement of exploring Hong Kong by crafting a smart, personalized AI-powered travel companion that showcases the city’s unique charm and endless possibilities.
What it does
Our Hong Kong Travel AI Agent is your ultimate guide to unlocking the best of the city. It:
- Crafts Personalized Itineraries: Tailors Hong Kong travel plans based on user preferences, from savoring dim sum to hiking scenic trails.
- Answers Any HK-Related Query: Provides instant, accurate responses to questions about attractions, dining, transportation, and more.
- Displays Editable Schedules: Presents trip plans in an interactive, user-friendly planner that allows seamless edits for a customized experience.
How we built it
We combined cutting-edge AI and modern web development to bring this vision to life:
- n8n for the AI Agent:
- Powered by the Google Gemini 2.5 Flash Model (accessed via a proxy server), our AI Agent intelligently processes user queries.
- Integrated with specialized tools to fetch real-time data, including:
- DiscoverHongKong for attractions, dining, and shopping insights.
- Hong Kong Observatory (HKO) for weather updates.
Google Maps for transportation details.
- The Agent analyzes user inputs, selects the appropriate tools, and weaves the data into cohesive trip plans or conversational answers.
- React TypeScript Web Interface (Built with Amazon Q Developer):
- A sleek, responsive web app featuring:
- An Introduction Panel to welcome users and highlight Hong Kong’s allure.
- A Chatbot Panel supporting English, Traditional Chinese, and Simplified Chinese, complete with suggested questions for ease of use.
A Trip Planner Panel to visualize and edit AI-generated itineraries.
- Workflow: Users input queries in the chatbot, which triggers the n8n workflow API. The AI’s response is displayed in the chatbot, and if it’s a trip plan, the planner panel updates automatically.
Challenges we ran into
Building this AI Agent wasn’t without its hurdles:
- Model Selection: Balancing processing speed, cost, and minimizing AI hallucinations required careful evaluation.
- Data Source Limitations: Finding reliable, comprehensive data sources for Hong Kong’s tourism ecosystem was a challenge.
- Data Processing: Pre- and post-processing data for the Agent’s tools demanded precision to ensure accuracy.
- System Compatibility: Aligning the Agent’s system prompts, tools, memory, and the baseline LLM model was a complex puzzle.
- n8n-Web Integration: Ensuring seamless communication between the n8n workflow and the React web app required meticulous API matching.
Accomplishments that we're proud of
We’re thrilled with what we’ve achieved:
- The AI generates surprisingly thoughtful and practical travel plans that rival human-crafted itineraries.
- Amazon Q Developer enabled us to rapidly prototype a polished, user-friendly web interface, accelerating our development process.
What we learned
This journey was a masterclass in innovation:
- AI Agent Principles: We mastered workflows, tool integration, and model optimization for building intelligent agents.
- Prompt Engineering: Crafting precise prompts for both the AI Agent and Amazon Q Developer unlocked powerful results.
- Data Processing & API Integration: We honed skills in handling data and ensuring seamless API communication.
- Web Development: Building a dynamic React TypeScript app leveled up our front-end expertise.
What's next
The adventure doesn’t stop here! Our roadmap includes:
- Faster Responses: Optimizing the AI to deliver near-instantaneous answers.
- Audio Input: Enabling voice-based queries for a hands-free experience.
- External Tool Integration: Connecting to platforms like Google Calendar or restaurant booking systems via MCP for a fully integrated travel solution.
- Deployment: Bringing our AI Agent to the world, making Hong Kong exploration effortless for travelers everywhere.
Built With
- ai
- ai-agent
- amazon-q-developer
- data-processing
- discover-hk
- google-gemini-2.5-flash
- google-maps
- hko-api
- n8n
- next
- react
- typescript
Log in or sign up for Devpost to join the conversation.