Web开发者快速上手AI Agent：基于提示工程的旅游攻略系统实战-洪萨配资

图片来源网络，侵权联系删。

文章目录

引言：从Web需求优化到AI提示词优化
Web开发与AI Agent应用的天然衔接点
Agent提示词优化的核心原理（Web视角解读）
- 1. 提示词 = 前端组件的Props
- 2. Agent的“思维链” = 后端业务逻辑流程
实战：构建旅游攻略系统（Node.js + React）
- 项目结构
- 步骤1：后端集成Agent（Node.js）
- 步骤2：前端展示（React）
常见问题与解决方案（Web开发者视角）
- 问题1：模型输出不稳定，有时漏掉住宿信息
- 问题2：高并发下API调用超时或限流
- 问题3：前端直接调用大模型API导致密钥泄露
总结
- 推荐学习路径（针对Web开发者）：
- 推荐资源：

引言：从Web需求优化到AI提示词优化

作为Web开发者，我们早已习惯于“需求澄清”——产品经理说“做个好看的页面”，我们要追问：好看是指配色？动效？还是响应式？这种不断细化模糊需求的过程，其实与AI领域的**提示词优化（Prompt Engineering）**高度相似。

在AI应用开发中，模型就像一个能力强大但理解力有限的“外包程序员”——你给它一句模糊指令：“帮我生成一份旅游攻略”，它可能输出千篇一律的景点列表；但如果你像对待前端组件一样结构化地描述需求：“用户是情侣，预算5000元，偏好小众文艺目的地，行程3天2晚，需包含交通、住宿、美食和拍照点”，模型就能输出精准、个性化的结果。

本文将带你用熟悉的Web技术栈（Node.js + React），构建一个基于Agent提示工程的智能旅游攻略系统，实现从“模糊请求”到“结构化输出”的端到端流程，助你平滑转型AI应用开发。

Web开发与AI Agent应用的天然衔接点

很多Web开发者误以为AI开发必须重学Python、深度学习框架，其实不然。现代AI Agent（如LangChain、LlamaIndex等）已提供完善的REST API 或 JavaScript SDK，其集成逻辑与调用第三方支付、地图API无异：

Web开发场景	AI Agent类比
调用高德地图API获取POI	调用Agent API生成行程建议
JWT认证保护后端接口	API Key认证调用大模型服务
前端状态管理（Redux）	Agent上下文（Context）管理
组件模板（React）	提示词模板（Prompt Template）
服务部署（Docker/Nginx）	Agent服务资源隔离与限流

因此，Web开发者只需掌握提示工程的核心方法论，即可快速构建AI原生应用。

Agent提示词优化的核心原理（Web视角解读）

1. 提示词 = 前端组件的Props

在React中，我们通过props向组件传递数据：

<TripPlanner travelers="情侣" budget={5000} days={3} style="小众文艺" />

同理，在提示工程中，我们将用户输入结构化为变量，注入预定义的提示模板：

你是一位资深旅行规划师，请为{{travelers}}设计一份{{days}}天{{nights}}晚的{{style}}风格旅游攻略。 总预算不超过{{budget}}元，需包含： - 每日详细行程（含交通方式） - 推荐住宿（名称+价格区间） - 必吃美食（店名+人均） - 适合拍照的打卡点 请以Markdown格式输出，不要使用任何XML标签。

这种**模板化提示（Prompt Template）**极大提升了输出稳定性，避免模型“自由发挥”。

2. Agent的“思维链” = 后端业务逻辑流程

传统Web后端处理订单可能分步：校验库存 → 计算价格 → 生成订单号 → 发通知。
Agent的**思维链（Chain-of-Thought）**也是多步推理：

意图识别：用户要的是亲子游还是蜜月游？
参数提取：从自然语言中抽取出预算、天数、偏好等字段
工具调用：查询天气API、酒店价格数据库
内容生成：基于结构化数据生成攻略
格式化输出：转为Markdown或JSON

这完全可映射为Web中的微服务编排。

实战：构建旅游攻略系统（Node.js + React）

项目结构

travel-agent/ ├── backend/# Node.js后端│ ├── routes/ │ │ └── agent.js# Agent API路由│ ├── services/ │ │ └── promptEngine.js# 提示词引擎│ └── server.js └── frontend/# React前端├── components/ │ └── TripForm.jsx# 用户输入表单└── App.jsx

步骤1：后端集成Agent（Node.js）

使用langchain的JavaScript SDK（无需Python环境）：

// backend/services/promptEngine.jsimport{ChatOpenAI}from"@langchain/openai";import{PromptTemplate}from"@langchain/core/prompts";constllm=newChatOpenAI({model:"gpt-4o-mini",temperature:0.3,openAIApiKey:process.env.OPENAI_API_KEY,});consttemplate=`你是一位资深旅行规划师，请为{travelers}设计一份{days}天{nights}晚的{style}风格旅游攻略。 总预算不超过{budget}元，需包含： - 每日详细行程（含交通方式） - 推荐住宿（名称+价格区间） - 必吃美食（店名+人均） - 适合拍照的打卡点 请以Markdown格式输出，不要使用任何XML标签。`;exportconstgenerateTripPlan=async(params)=>{constprompt=PromptTemplate.fromTemplate(template);constchain=prompt.pipe(llm);constresponse=awaitchain.invoke(params);returnresponse.content;};

// backend/routes/agent.jsimportexpressfrom'express';import{generateTripPlan}from'../services/promptEngine.js';constrouter=express.Router();router.post('/generate',async(req,res)=>{try{const{travelers,budget,days,style}=req.body;constplan=awaitgenerateTripPlan({travelers,budget,days,nights:days-1,style,});res.json({success:true,plan});}catch(error){res.status(500).json({success:false,error:error.message});}});exportdefaultrouter;

步骤2：前端展示（React）

// frontend/components/TripForm.jsx import { useState } from 'react'; export default function TripForm() { const [inputs, setInputs] = useState({ travelers: '情侣', budget: 5000, days: 3, style: '小众文艺' }); const [plan, setPlan] = useState(''); const [loading, setLoading] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); setLoading(true); const res = await fetch('/api/agent/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(inputs) }); const data = await res.json(); setPlan(data.plan); setLoading(false); }; return ( <div> <form onSubmit={handleSubmit}> <input value={inputs.travelers} onChange={e => setInputs({...inputs, travelers: e.target.value})} placeholder="出行人群" /> <input type="number" value={inputs.budget} onChange={e => setInputs({...inputs, budget: e.target.value})} placeholder="预算" /> <input type="number" value={inputs.days} onChange={e => setInputs({...inputs, days: e.target.value})} placeholder="天数" /> <select value={inputs.style} onChange={e => setInputs({...inputs, style: e.target.value})}> <option value="小众文艺">小众文艺</option> <option value="亲子休闲">亲子休闲</option> <option value="户外探险">户外探险</option> </select> <button type="submit" disabled={loading}> {loading ? '生成中...' : '生成攻略'} </button> </form> {plan && ( <div className="markdown-output" dangerouslySetInnerHTML={{ __html: marked.parse(plan) }} /> )} </div> ); }

注：前端需引入marked库将Markdown转为HTML。

常见问题与解决方案（Web开发者视角）

问题1：模型输出不稳定，有时漏掉住宿信息

原因：提示词未强制约束输出结构。
解决方案：在提示模板中加入输出格式示例（Few-shot Prompting）：

...（前面不变） 请严格按照以下格式输出： # 第1天 - 上午：... - 下午：... - 住宿：XX酒店（¥300-400/晚） - 美食：XX餐厅（人均¥80） - 拍照点：... # 第2天 ...

问题2：高并发下API调用超时或限流

类比：如同Web服务遭遇DDoS攻击。
解决方案：

后端增加请求队列（如BullMQ）
使用缓存：对相同参数的请求缓存结果（Redis）
前端加防抖：用户停止输入1秒后再提交

问题3：前端直接调用大模型API导致密钥泄露

错误做法：

// ❌ 千万不要在前端写API Key！constresponse=awaitfetch('https://api.openai.com/v1/chat/completions',{headers:{Authorization:`Bearer${process.env.API_KEY}`}// 会被打包进JS！});