Claude Code + Codex in Practice: Full Breakdown of Building an AI Travel Companion Mini-Program

Project Background: Why We Need an AI Travel Assistant

A developer named Peter spent six months building an AI travel mini-program called "Travel Companion" using the Vibe Coding approach. Vibe Coding is a concept proposed by OpenAI co-founder Andrej Karpathy in early 2025, referring to a development approach where developers describe requirements in natural language and let AI coding assistants generate the code. Instead of writing code line by line, developers act like "directors" describing the desired outcome while AI handles the implementation. This approach dramatically lowers the programming barrier, enabling product managers, designers, and even non-technical entrepreneurs to rapidly build software products.

The project was inspired by Peter's own trip to Mount Kailash in Tibet — he discovered that no existing product could help users quickly understand the full picture of a destination within five minutes: how to get there, what to do, and what's worth experiencing.

This pain point drove him to develop the first version using Codex immediately after returning from his trip. The project's tech stack centers on Claude Code and Codex, achieving AI-driven content generation and interaction design. Codex is OpenAI's AI coding agent that can autonomously complete code writing, debugging, and testing tasks in a cloud sandbox environment. Claude Code is Anthropic's command-line AI programming tool that allows developers to converse with Claude in the terminal, letting it directly read and write project files and execute commands. The combination of these two represents the cutting edge of AI-assisted development — Codex excels at handling independent coding tasks, while Claude Code is better suited for complex development work requiring understanding of the entire project context.

Product Design: Breaking Down the Travel Experience into Three Phases

Peter broke down the entire travel experience into three core phases, with the first phase currently showcased — the Exploration Module. The core goal of this module is: through AI, enable users to build structured knowledge of a destination within 3-5 minutes.

Interaction Design of the Exploration Module

The product adopts a "LUI + GUI card" interaction approach similar to Qwen, where users can obtain destination information through a conversational interface while content is displayed in structured cards. LUI (Language User Interface) refers to human-computer interaction through natural language conversation, complementing traditional GUI (Graphical User Interface). AI products like Qwen pioneered the exploration of merging both interaction paradigms: users express needs through conversation, and the system presents results in structured visual cards. This hybrid interface solves the problems of low information density in pure conversational AI and insufficient flexibility in pure graphical interfaces, making it particularly suitable for scenarios like travel planning that require both open-ended exploration and structured information display. This design balances the flexibility of AI conversation with the intuitiveness of information presentation.

Immersive Experience with Map Synchronization

One standout interaction design in the product is the synchronization between the map and content: as users scroll through the attraction list, the map automatically switches to the corresponding geographic location and adjusts the zoom level. For example, when browsing Tibet attractions, users can intuitively see Lhasa in the center, Mount Kailash and Lake Manasarovar on the left, Everest Base Camp between them, and the Yarlung Tsangpo Grand Canyon on the right.

This design solves a practical problem: with limited vacation time, users need to quickly determine which attractions can be combined into a connected itinerary. The intuitive geographic presentation significantly lowers the planning barrier. From a technical implementation perspective, this synchronization requires binding each attraction's latitude and longitude coordinates to list scroll events and achieving smooth transitions through the map SDK's viewport animation API — a typical application combining frontend interaction with geographic information systems.

AI Content Generation: From Data Collection to Structured Output

Content Sources and Generation Methods

All destination content in the project is automatically generated by AI, including:

• What to Do: Attraction recommendations with geographic location markers
• What to Eat: Local cuisine recommendations
• Seasonal Experiences: Such as Nyingchi peach blossom season, Namtso lake viewing, horse racing festivals, etc.
• Classic Routes: Automatically generated tour routes
• Transportation Guide: Ways to enter Tibet (flying to Lhasa/Ali Kunsha/Nyingchi, trains, etc.)
• Risk Warnings: Altitude issues, precautions, etc.

What you might not have noticed is that the attraction data collection method is quite creative — Peter equipped the AI with a "crawler"-like tool that automatically browses social media, identifies and filters advertising content, then extracts valuable travel information. Traditional crawlers scrape web data through preset rules, while AI-enhanced crawlers can understand page semantics and automatically judge content value. In the travel information domain, social media is flooded with advertorials and commercial promotions. AI crawlers can identify advertising characteristics through natural language understanding (such as overly beautified descriptions, embedded product links, unnatural recommendation tones), filtering noise to extract genuine user travel experiences and practical information. This approach is far more precise and intelligent than traditional keyword filtering.

Intelligent Route Planning

For larger destinations (like Tibet), AI automatically generates structured route plans across two dimensions — "Core Routes" and "City Explorations":

• Core Routes: Based on geographic constraints, generates sequential loop itineraries (such as the Classic Loop, Ali Small Loop, Ali Grand Loop), with clear daily itinerary annotations
• City Explorations: Generates independent day-trip plans for each city that users can freely combine

The intelligence behind route planning involves a variant of the classic Traveling Salesman Problem (TSP) in travel planning. AI needs to comprehensively consider multiple constraint dimensions including geographic distances between attractions, road accessibility, altitude adaptation patterns (Tibet travel typically recommends gradual progression from low to high altitude), attraction opening hours, and more to generate routes that are both reasonable and efficient. The advantage of large language models for such problems is their ability to uniformly process both hard constraints (such as whether roads are passable) and soft preferences (such as prioritizing scenery versus efficiency).

User Flow: From Exploration to Itinerary Planning

The product designs a clear user journey: during the exploration phase, as users browse various AI-generated information, they can like and bookmark content of interest (such as a specific attraction or route), which automatically gets added to their "Travel Plan." Users can then edit and adjust based on this foundation to generate their customized itinerary.

This "AI generation + user curation + custom adjustment" model leverages AI's strengths in information integration while preserving users' subjective choice. This design philosophy is known as "Human-in-the-Loop" in human-machine collaboration — AI handles the heavy lifting of information processing and plan generation, while humans are responsible for final value judgments and decisions. Compared to fully AI-generated itineraries, this model better satisfies personalized user needs and avoids the risk of information errors from AI "hallucinations."

Technical Reflections: The Practical Value of Vibe Coding in Product Development

This project demonstrates the practical value of Vibe Coding in real product development:

1. Rapid Prototype Validation: From returning from the trip to launching the first version, the Claude Code and Codex combination dramatically shortened the development cycle. Traditional mini-program development typically requires collaboration between frontend developers, backend developers, and designers, with timelines measured in months; under the Vibe Coding model, a solo developer can complete the entire process from concept to usable product within weeks.

2. AI-Native Design: The product is designed around AI capabilities from the ground up, rather than layering AI features onto a traditional product. AI-Native products are fundamentally different from AI-Enhanced products — the latter adds AI features to existing product forms (like adding AI summaries to a search engine), while the former designs the product architecture around AI capabilities. Characteristics of AI-Native products include: content dynamically generated by AI rather than manually edited, interaction logic based on AI understanding rather than fixed flows, and product capabilities that automatically improve as models upgrade.

3. Content Automation: Through AI collection and generation of content, it solves the problem of fragmented travel information. Traditional travel platforms rely on UGC (User Generated Content) or PGC (Professionally Generated Content) — the former varies wildly in quality, while the latter is expensive and slow to update. AI-Generated Content (AIGC) can cover long-tail destinations at extremely low cost while maintaining information timeliness.

According to Peter, a second module — "Travel Canvas" — will be launched subsequently, transforming information collected during the exploration phase into a visual itinerary planning tool. This project demonstrates that individual developers, with the help of AI programming tools, can build applications with complete product logic. As AI tools continue to evolve, the core competitive advantage in product development is shifting from "can we build it" to "can we think clearly about what to build" — the value of creativity and product insight is being further amplified.

Key Takeaways