Vue3 + Node.js Full-Stack Tutorial: Building an AI Travel Assistant

Introduction: From Concept to Product — It's Time for Developers to Get Hands-On

In an era where AI large language model concepts are everywhere, few developers can actually turn these models into usable products. A full-stack developer on Bilibili recently shared a complete AI travel assistant project — from frontend UI to backend API, from LLM integration to server deployment — demonstrating step by step how to combine Alibaba's Qwen (Tongyi Qianwen) LLM with the travel industry to build a production-ready AI agent.

As Baidu's Robin Li famously said, "Don't compete on models — compete on applications." The core philosophy of this project is exactly that: leverage existing LLM APIs, deeply integrate them with specific industry scenarios, and build products that users actually want to use.

Core Features of the AI Travel Assistant

Multi-Turn Dialogue & Multimodal Interaction

The AI travel assistant's primary interaction is through a chat interface that supports multi-turn conversations with streaming output, responding to users character by character. More importantly, it supports multimodal interaction — users can upload images with their questions. The system stores images on the server and passes the image URLs to the LLM for understanding and analysis.

Upon entering the chat interface, the system displays preset default questions to lower the barrier to entry. These default questions can be flexibly configured based on business needs, such as "What are the must-visit attractions in Yunnan?" or "How should I explore Lijiang Old Town?"

Role Configuration & Response Scope Control

One highly practical design in this project is LLM role customization. Developers can define the model's name, responsibilities, affiliated company, and other information in the code. When users ask "Who are you?" or "What can you do?", the LLM responds according to its preset role.

Even more critical is response scope control. Through prompt engineering, the system restricts the LLM's answers to travel-related topics. If a user asks irrelevant questions like "Who is the president of the United States?", the model politely declines. This design is essential for vertical-domain AI agents — it ensures professionalism while avoiding unnecessary risks.

Function Calling in Practice: Train Tickets & Weather Queries

The project leverages the LLM's Function Calling capability to implement two practical tools:

• Train ticket lookup: Users input departure city, destination, and date, and the system returns real train ticket data for that day
• Weather query: Users only need to input a city name or even a district/county name, and the LLM automatically determines the parent city and returns accurate weather data

For example, when a user asks "I'm planning to visit Erhai Lake soon — what's the weather like?", the LLM automatically recognizes that Erhai Lake belongs to Dali and returns real-time weather data for Dali. This intelligent reasoning capability significantly enhances user experience.

Complaint Guidance & Product Recommendation Monetization

In travel scenarios, dispute resolution is a high-frequency need. When a user reports "I was scammed by a travel agency in Kunming," the LLM not only provides the complaint hotline number (a preset real number) but also guides the user to click the "One-Click Complaint" button in the bottom-right corner, redirecting them to a form submission page. The submitted complaint content is stored in the database, forming a complete business loop.

Another highlight is in-conversation product recommendations. The system uses the LLM to analyze conversation content, extract keywords, query the database for related travel packages and product data, and naturally display them to users within the response. This feature directly enables monetization, transforming the AI agent from a simple Q&A tool into a product that generates real commercial value.

Deep Dive into the Technical Architecture

Vue3 Frontend Tech Stack

The frontend is built with Vue3 + TypeScript, using Vite as the build tool, Vant as the UI component library, Pinia for state management, and Fetch API for network requests. This tech stack is highly mainstream in today's frontend ecosystem, with low learning costs and rich community resources.

Node.js Backend API Design

The backend is built with Node.js, with the core functionality being calls to Alibaba Cloud's Qwen API. The entire backend consists of 8 endpoints:

Endpoint	Function
Streaming chat	Handle user conversation requests
Image upload	Store user-uploaded images
Train ticket query	Call external API for train ticket data
Weather query	Call weather API for real-time data
Import products	Batch import product data
Search products	Search products by keywords
Product details	Get detailed product information
Submit complaint	Store user complaint information

The advantage of choosing Node.js is that it has an extremely low barrier to entry for frontend developers, unlike Java which can be bulky and complex.

MongoDB Database & Alibaba Cloud Deployment

The database uses MongoDB, with the entire project requiring only two collections, keeping the data structure simple. For deployment, the project is ultimately hosted on an Alibaba Cloud server, involving these key operations:

• Installing MongoDB on the server with security authentication enabled, setting admin credentials to prevent attacks
• Using PM2 for cluster deployment and load balancing, fully utilizing server CPU resources to support high concurrency
• Configuring free HTTPS certificates and binding a custom domain name to ensure secure access

Industry Extension Value

Although this project uses Yunnan tourism as an example, its architecture is highly versatile. Once developers master it, they can extend the same pattern to different industries:

• Finance: Intelligent investment advisory, insurance consultation assistants
• Legal: Legal consultation, contract review assistants
• Home renovation: Decoration plan recommendations, material selection assistants
• Education: Study tutoring, course recommendation assistants

The core approach is always the same: define a role → restrict response scope → integrate industry data → implement function calling → enable monetization paths.

Conclusion: Opportunities for Full-Stack Developers in the LLM Era

The value of this project lies not only in its technical implementation but also in demonstrating a complete development-to-deployment workflow. For frontend engineers looking to get started with AI application development, this is an excellent hands-on case study — mainstream tech stack, complete functionality, and a clear monetization strategy. It can serve both as a portfolio piece for job interviews and as a prototype for a startup product.

In the LLM era, true competitive advantage doesn't come from knowing AI concepts — it comes from your ability to turn these capabilities into products that users actually want to use. Building something will always be more valuable than just talking about it.