前端Agent架构师指南从零搭建智能前端Agent从感知到执行深入理解Agent的核心架构与工程化实践 · 面向Agent开发岗位的完整知识体系 目录导航引言Agent时代已经到来什么是Agent核心概念与本质前端Agent整体架构设计感知-决策-执行循环Agent Loop大脑LLM选型与Prompt工程手脚Tools工具调用系统记忆Memory系统设计规划Planning与推理链MCP协议Agent的通用工具标准Skills技能系统可复用的能力封装前端集成方案工程化最佳实践与避坑指南未来展望与总结一、引言Agent时代已经到来2023年以来大语言模型LLM的能力突飞猛进。从最初的聊天机器人到今天能够自主完成复杂任务的智能体AI正在经历从工具到助手再到Agent的范式转变。 核心判断未来3-5年前端开发将从写页面进化为编排Agent。掌握Agent架构设计能力将是前端工程师的核心竞争力。那么什么是Agent前端Agent和后端Agent有什么区别如何从零搭建一个生产可用的前端Agent本文将带你系统性地掌握这些知识。1.1 从工具到Agent的演进传统应用固定流程LLM应用Prompt驱动Agent自主决策维度 传统应用 LLM应用 Agent应用交互方式 点击按钮 自然语言对话 目标驱动决策主体 开发者预设 LLM生成 LLM自主规划执行能力 固定API 单步生成 多步工具调用容错能力 无 弱 自我修正二、什么是Agent核心概念与本质2.1 Agent的定义Agent智能体是一个能够感知环境、自主决策并采取行动以实现特定目标的计算系统。用大白话来说Agent就像一个数字员工你告诉它目标它自己想办法、用工具、分步骤去完成遇到问题还会自己调整。2.2 Agent的三大核心特征 目标导向Agent不是被动响应而是围绕目标主动行动。你说帮我订明天去北京的机票它会自己查航班、选座、支付。 自主决策能根据环境状态选择下一步动作而非按照固定脚本执行。LLM是它的大脑。️ 工具使用能调用外部工具API、浏览器、数据库等来扩展能力边界完成仅靠语言模型无法完成的任务。2.3 前端Agent vs 后端Agent很多人会问前端Agent和后端Agent有什么区别核心区别在于执行环境和交互方式。对比维度 后端Agent 前端Agent运行环境 Node.js / Python 服务端 浏览器 / 前端框架主要能力 数据处理、API编排、批处理 UI交互、页面操作、实时反馈工具类型 数据库、文件系统、外部API DOM操作、浏览器API、用户交互典型场景 数据分析、内容生成 智能表单、自动化测试、页面辅助延迟要求 可接受秒级延迟 需要实时响应三、前端Agent整体架构设计一个完整的前端Agent通常由以下核心模块组成。我们先来看整体架构图外部服务工具层Agent核心层用户层调用检索连接大语言模型 APIMCP Server知识库/向量库浏览器工具DOM操作工具网络请求工具自定义业务工具感知模块 Perception决策模块 DecisionLLM Planning执行模块 Action记忆模块 Memory 用户输入3.1 架构分层说明用户层接收用户的自然语言输入或目标指令Agent核心层包含感知、决策、执行、记忆四大模块是Agent的大脑工具层Agent可调用的各种能力如浏览器操作、网络请求等外部服务LLM API、MCP服务器、向量数据库等基础设施四、感知-决策-执行循环Agent LoopAgent的核心运行机制是一个循环感知环境 → 思考决策 → 执行动作 → 观察结果 → 再思考……直到目标达成。4.1 ReAct 模式目前最主流的Agent运行模式是 ReActReasoning Acting即推理-行动交替进行。未达成目标已达成目标 接收用户目标 推理思考Reasoning️ 选择并执行工具Acting️ 观察工具结果Observation 输出最终结果一个典型的ReAct对话过程用户帮我查一下北京今天的天气然后推荐穿什么衣服 Thought我需要先获取北京的天气信息️ Actionget_weather({“city”: “北京”})️ Observation北京今天晴气温18-26°C微风 Thought天气晴朗温度适中我来推荐穿搭️ Actionget_clothing_advice({“temp”: “18-26°C”, “weather”: “晴”})️ Observation建议穿薄外套长袖早晚温差大注意保暖 Thought已经获取了足够信息可以回答了 Final Answer北京今天晴18-26°C。建议穿薄外套搭配长袖早晚温差较大注意保暖。4.2 前端实现伪代码// Agent Loop 核心实现async function agentLoop(userGoal, agent) {const messages [{ role: ‘user’, content: userGoal }];let maxIterations 10; // 防止无限循环while (maxIterations-- 0) {// 1. 决策让LLM思考下一步const response await agent.llm.chat({messages,tools: agent.tools,});// 2. 如果LLM直接给出最终答案结束循环 if (response.content !response.tool_calls) { return response.content; } // 3. 执行工具调用 if (response.tool_calls) { messages.push(response); // 记录LLM的决策 for (const toolCall of response.tool_calls) { const result await agent.executeTool(toolCall); messages.push({ role: tool, tool_call_id: toolCall.id, content: JSON.stringify(result), }); } }}throw new Error(‘Agent 超过最大迭代次数’);}五、大脑LLM选型与Prompt工程5.1 如何选择合适的LLMLLM是Agent的大脑选择合适的模型至关重要。考虑以下因素考量因素 说明 建议上下文长度 能处理多少Token的对话历史 复杂任务选 128K工具调用能力 是否原生支持 Function Calling 必须支持推理能力 复杂逻辑推理的准确性 规划类任务要强推理模型响应速度 首Token延迟和生成速度 前端交互优先选快模型成本 Token价格 根据调用量权衡多模态能力 是否支持图片/语音 UI理解类任务需要✅ 选型策略采用大小模型搭配策略。复杂推理用强模型如 GPT-4o、Claude 3.5简单任务用快模型如 GPT-4o-mini、DeepSeek。可以通过路由层自动分发。5.2 System Prompt 设计System Prompt 是Agent的人设和行为准则直接决定Agent的表现。一个好的System Prompt包含const SYSTEM_PROMPT 你是一个专业的前端开发助手Agent。角色定位你是一名资深前端工程师擅长 React、Vue、TypeScript。能力范围编写和优化前端代码分析和修复Bug解释技术概念代码审查行为准则先理解需求再给出方案不确定时主动询问不要猜测给出代码时必须包含注释遇到无法解决的问题要如实告知工具使用你可以使用以下工具来辅助完成任务read_file: 读取文件内容write_file: 写入文件search_code: 搜索代码run_command: 执行命令记住优先使用工具获取真实信息不要凭空编造。;六、手脚Tools工具调用系统如果说LLM是Agent的大脑那么Tools就是Agent的手脚。没有工具LLM只能纸上谈兵有了工具Agent才能真正动手做事。6.1 什么是ToolTool工具是Agent可以调用的外部能力本质上是一个函数或API。LLM通过 Function Calling 机制来决定调用哪个工具、传入什么参数。决定调用weathersearchdomObservation LLM工具调用请求name arguments工具分发器get_weatherweb_searchclick_element执行结果6.2 定义一个Tool一个Tool通常包含三部分名称name、描述description、参数定义parameters。// 定义一个获取天气的工具const getWeatherTool {type: ‘function’,function: {name: ‘get_weather’,description: ‘获取指定城市的天气信息包括温度、天气状况、风力等’,parameters: {type: ‘object’,properties: {city: {type: ‘string’,description: ‘城市名称如北京、“上海”’,},date: {type: ‘string’,description: ‘日期格式为YYYY-MM-DD默认为今天’,default: new Date().toISOString().slice(0, 10),},},required: [‘city’],},},// 实际执行函数async execute({ city, date }) {const res await fetch(https://api.weather.com/v1/${city}?date${date});return res.json();},};6.3 前端常用工具集️ DOM操作工具click_element、input_text、scroll_page、extract_text用于自动化操作页面元素 浏览器工具navigate、screenshot、get_cookies、execute_js控制浏览器行为 网络工具fetch_api、upload_file、download发起网络请求 存储工具localStorage_get/set、indexedDB_query、cache_get/set本地数据读写6.4 工具执行的安全控制⚠️ 安全提醒Agent调用工具时必须经过安全控制防止恶意行为。权限校验每个工具定义权限级别敏感操作需要用户确认参数校验用 JSON Schema 校验LLM传入的参数执行沙箱代码执行类工具放在沙箱中运行审计日志记录所有工具调用便于追溯七、记忆Memory系统设计记忆是Agent能够持续学习和保持上下文连贯的关键。一个好的记忆系统让Agent记得住、想得起来、用得对。7.1 记忆的三种类型Memory 记忆系统重要信息沉淀相关信息检索短期记忆Short-term Memory当前对话上下文长期记忆Long-term Memory历史交互与知识情景记忆Episodic Memory关键事件与经验记忆类型 存储位置 生命周期 典型内容短期记忆 Context Window 单次对话 当前对话消息、中间思考长期记忆 向量数据库 跨会话持久 用户偏好、历史任务、知识库情景记忆 结构化存储 长期 成功/失败案例、关键决策7.2 向量检索RAG长期记忆通常基于向量数据库实现。核心流程用户问题Embedding向量化向量数据库相似度检索Top-K 相关记忆拼接到 PromptLLM 生成回答// 记忆系统实现示例class MemorySystem {constructor(vectorStore, embeddingModel) {this.store vectorStore;this.embedder embeddingModel;}// 写入记忆async save(text, metadata {}) {const embedding await this.embedder.embed(text);await this.store.upsert({id: crypto.randomUUID(),values: embedding,metadata: { text, timestamp: Date.now(), …metadata },});}// 检索记忆async recall(query, topK 5) {const embedding await this.embedder.embed(query);const results await this.store.query({vector: embedding,topK,includeMetadata: true,});return results.matches.map(m m.metadata.text);}}7.3 记忆管理策略滑动窗口只保留最近N轮对话超出的部分丢弃或摘要对话摘要用LLM将长对话压缩为摘要节省Token重要性评分对记忆内容打重要性分低优先级的先淘汰TTL过期给记忆设置有效期过期自动清理八、规划Planning与推理链复杂任务往往需要多步完成Planning模块让Agent具备拆解问题、制定计划、逐步执行的能力。8.1 Plan-and-Execute 模式接收复杂目标规划器 Planner拆解为子任务任务列表Task 1, 2, 3…执行器 Executor执行 Task 1执行 Task 2执行 Task 3汇总结果8.2 常见规划策略策略 原理 适用场景Chain of Thought (CoT) 让LLM逐步推理“Let’s think step by step” 逻辑推理、数学计算Tree of Thoughts (ToT) 生成多个推理分支择优选择 需要探索多种方案的问题ReAct 推理与行动交替 需要工具调用的交互任务Plan-and-Execute 先规划整体步骤再逐步执行 复杂的多步骤任务Reflexion 执行后自我反思调整策略 需要反复优化的任务// Plan-and-Execute 实现class PlanAndExecuteAgent {async run(goal) {// 1. 规划阶段拆解任务const plan await this.planner.plan(goal);// plan [// { id: 1, description: ‘搜索相关资料’ },// { id: 2, description: ‘整理关键信息’ },// { id: 3, description: ‘生成总结报告’ }// ]const results []; for (const task of plan.tasks) { // 2. 执行阶段逐步执行每个子任务 const result await this.executor.execute(task, results); results.push({ task, result }); // 3. 可选重新规划如果执行遇到问题 if (result.needsReplanning) { plan.tasks await this.planner.replan(goal, results); } } // 4. 汇总结果 return this.summarizer.summarize(results);}}九、MCP协议Agent的通用工具标准MCPModel Context Protocol是由 Anthropic 提出的开放协议旨在为Agent提供统一的工具连接标准。可以理解为Agent界的USB接口。9.1 为什么需要MCP在MCP出现之前每个Agent框架都有自己的工具定义方式导致工具无法复用。MCP的目标是一次开发处处可用。9.2 MCP 架构MCP Server - 工具侧传输层MCP Client - Agent侧Tools 工具MCP Server SDKPrompts 提示模板Resources 资源stdioHTTP/SSEWebSocketMCP Client SDKAgent9.3 MCP 核心概念Tools工具可调用的函数Agent通过名称参数调用Resources资源可读取的数据如文件、数据库记录Prompts提示模板预定义的提示词模板Transport传输Client与Server的通信方式支持 stdio、HTTP/SSE 等9.4 创建一个 MCP Server// 用 modelcontextprotocol/sdk 创建MCP Serverimport { Server } from ‘modelcontextprotocol/sdk/server/index.js’;import { CallToolRequestSchema, ListToolsRequestSchema } from ‘modelcontextprotocol/sdk/types.js’;const server new Server({ name: ‘weather-mcp’, version: ‘1.0.0’ },{ capabilities: { tools: {} } });// 注册工具列表server.setRequestHandler(ListToolsRequestSchema, async () ({tools: [{name: ‘get_weather’,description: ‘获取城市天气’,inputSchema: {type: ‘object’,properties: { city: { type: ‘string’, description: ‘城市名’ } },required: [‘city’],},}],}));// 处理工具调用server.setRequestHandler(CallToolRequestSchema, async (request) {const { name, arguments: args } request.params;if (name ‘get_weather’) {const weather await fetchWeather(args.city);return { content: [{ type: ‘text’, text: JSON.stringify(weather) }] };}});// 启动服务await server.connect(new StdioServerTransport());十、Skills技能系统可复用的能力封装Skill技能是比Tool更高层次的抽象。Tool是单个动作Skill是完成一类任务的完整流程包含多步工具调用和逻辑编排。10.1 Tool vs Skill维度 Tool工具 Skill技能粒度 原子操作 完整任务流程复杂度 低 高是否需要LLM 否纯函数 是需要编排复用性 高通用 中面向特定场景举例 click_element 自动完成表单填写10.2 Skill 的结构Syntax error in textmermaid version 10.9.8// Skill 定义示例const formAutoFillSkill {name: ‘auto_fill_form’,description: ‘自动识别并填写页面上的表单’,version: ‘1.0.0’,tools: [‘extract_form_fields’, ‘get_user_profile’, ‘input_text’, ‘click_element’],prompt: 你是一个表单填写助手。执行以下步骤用 extract_form_fields 获取页面所有表单字段用 get_user_profile 获取用户信息逐字段匹配并填写最后点击提交按钮,examples: [{ input: ‘填写注册表单’, output: ‘已完成表单填写并提交’ }],// 可选自定义执行逻辑async execute(agent, params) {const fields await agent.callTool(‘extract_form_fields’);const profile await agent.callTool(‘get_user_profile’);// … 编排逻辑}};十一、前端集成方案11.1 前端Agent的两种部署模式模式B前后端协同BFF 网关前端应用Agent ServiceLLM APIMCP Servers前端工具模式A纯浏览器端Agent Runtime前端应用LLM API 直连浏览器工具模式 优点 缺点 适用场景纯浏览器端 低延迟、数据不离开浏览器、部署简单 API Key 暴露、受浏览器限制 本地工具、隐私敏感场景前后端协同 安全、能力强、可集中管理 延迟较高、架构复杂 生产环境、复杂任务11.2 前端Agent SDK 设计// 前端 Agent SDK 核心类class FrontendAgent {constructor(config) {this.llm config.llm; // LLM 客户端this.tools config.tools || []; // 工具列表this.memory config.memory; // 记忆系统this.skills config.skills || []; // 技能列表this.messageHistory []; // 对话历史}// 主入口发送消息async sendMessage(userInput) {this.messageHistory.push({ role: ‘user’, content: userInput });// 1. 检索相关记忆 const memories await this.memory.recall(userInput); // 2. 构造 Prompt const messages [ { role: system, content: this.buildSystemPrompt() }, ...memories.map(m ({ role: system, content: [记忆] ${m} })), ...this.messageHistory, ]; // 3. 执行 Agent Loop return await this.agentLoop(messages);}// 注册工具registerTool(tool) {this.tools.push(tool);}// 注册技能registerSkill(skill) {this.skills.push(skill);}}// 使用示例const agent new FrontendAgent({llm: new OpenAIClient({ apiKey: ‘xxx’, model: ‘gpt-4o’ }),tools: [clickElementTool, inputTextTool, fetchApiTool],memory: new MemorySystem(vectorStore, embedder),skills: [formAutoFillSkill],});agent.on(‘message’, (msg) {console.log(‘Agent:’, msg);});await agent.sendMessage(‘帮我把这个表单填一下’);11.3 UI 交互设计前端Agent的UI需要展示思考过程和执行状态提升用户信任感流式输出打字机效果展示LLM回复工具调用可视化展示当前调用了哪个工具、结果如何进度状态显示正在思考…/“正在搜索…”/“正在执行…”中断与重试允许用户中断当前任务或重试失败步骤确认机制敏感操作前弹出确认对话框十二、工程化最佳实践与避坑指南12.1 性能优化优化点 策略降低延迟 流式输出SSE、首屏预加载、模型路由节省Token 上下文裁剪、对话摘要、缓存重复请求并发控制 工具调用并发执行、请求队列限流本地缓存 Embedding缓存、工具结果缓存12.2 错误处理与容错否是LLM超时工具失败参数错误权限不足是否Agent执行是否出错?继续执行错误分类错误类型重试 降级模型记录 尝试替代工具让LLM重新生成参数请求用户授权是否可恢复?优雅失败 提示用户// 带重试和降级的LLM调用async function callLLMWithFallback(messages, tools) {const models [‘gpt-4o’, ‘gpt-4o-mini’, ‘deepseek-chat’];const maxRetries 3;for (const model of models) {for (let i 0; i maxRetries; i) {try {return await llm.chat({ model, messages, tools, timeout: 30000 });} catch (err) {console.warn(Model ${model} attempt ${i 1} failed:, err.message);if (err.status 429) {await sleep(1000 * Math.pow(2, i)); // 指数退避}}}}throw new Error(‘所有模型均调用失败’);}12.3 安全考量 安全红线Agent安全是生产环境的重中之重绝不可忽视。Prompt Injection 防护对用户输入做转义和检测防止注入攻击API Key 保护前端绝不暴露 Key走后端代理工具权限最小化只给Agent完成任务必需的工具权限敏感操作确认删除、支付等操作必须二次确认数据脱敏传给LLM的敏感数据要脱敏处理内容审核对LLM输出做安全审核过滤有害内容12.4 监控与可观测性调用链路追踪记录每次LLM调用、工具调用的耗时和结果Token用量统计监控成本设置预算告警错误率监控跟踪失败率及时发现问题用户行为分析了解用户如何使用Agent优化体验质量评估定期用测试集评估Agent表现十三、未来展望与总结13.1 前端Agent的发展趋势 多Agent协作多个Agent分工协作如规划Agent、执行Agent、审核Agent形成Agent团队 端侧小模型浏览器内运行轻量模型简单推理本地完成降低延迟和成本️ 多模态融合Agent能看页面截图、听语音指令理解更丰富的上下文 自主进化Agent能从交互中学习自动优化工具使用策略和Prompt13.2 知识体系总结前端Agent知识体系核心概念Agent定义ReAct模式Agent Loop架构组件LLM大脑Tools工具Memory记忆Planning规划协议标准MCP协议Function Calling工程实践前端集成性能优化安全防护监控可观测13.3 给Agent开发者的建议打好基础深入理解LLM原理、Prompt工程、向量数据库动手实践用 LangChain / LangGraph / LlamaIndex 等框架搭一个Demo关注标准MCP协议是未来趋势尽早学习重视工程Agent不只是Prompt工程化能力决定能否上线保持好奇这个领域日新月异持续学习是唯一不变的法则 结语前端Agent是一个充满想象力的领域。它不是要取代前端开发者而是让我们从写代码升级为设计智能体。掌握Agent架构就是掌握下一代前端开发的入场券。 本文由前端Agent架构师视角撰写 · 持续更新中如有疑问或交流欢迎在评论区留言
前端Agent架构师指南：从零搭建智能前端Agent
前端Agent架构师指南从零搭建智能前端Agent从感知到执行深入理解Agent的核心架构与工程化实践 · 面向Agent开发岗位的完整知识体系 目录导航引言Agent时代已经到来什么是Agent核心概念与本质前端Agent整体架构设计感知-决策-执行循环Agent Loop大脑LLM选型与Prompt工程手脚Tools工具调用系统记忆Memory系统设计规划Planning与推理链MCP协议Agent的通用工具标准Skills技能系统可复用的能力封装前端集成方案工程化最佳实践与避坑指南未来展望与总结一、引言Agent时代已经到来2023年以来大语言模型LLM的能力突飞猛进。从最初的聊天机器人到今天能够自主完成复杂任务的智能体AI正在经历从工具到助手再到Agent的范式转变。 核心判断未来3-5年前端开发将从写页面进化为编排Agent。掌握Agent架构设计能力将是前端工程师的核心竞争力。那么什么是Agent前端Agent和后端Agent有什么区别如何从零搭建一个生产可用的前端Agent本文将带你系统性地掌握这些知识。1.1 从工具到Agent的演进传统应用固定流程LLM应用Prompt驱动Agent自主决策维度 传统应用 LLM应用 Agent应用交互方式 点击按钮 自然语言对话 目标驱动决策主体 开发者预设 LLM生成 LLM自主规划执行能力 固定API 单步生成 多步工具调用容错能力 无 弱 自我修正二、什么是Agent核心概念与本质2.1 Agent的定义Agent智能体是一个能够感知环境、自主决策并采取行动以实现特定目标的计算系统。用大白话来说Agent就像一个数字员工你告诉它目标它自己想办法、用工具、分步骤去完成遇到问题还会自己调整。2.2 Agent的三大核心特征 目标导向Agent不是被动响应而是围绕目标主动行动。你说帮我订明天去北京的机票它会自己查航班、选座、支付。 自主决策能根据环境状态选择下一步动作而非按照固定脚本执行。LLM是它的大脑。️ 工具使用能调用外部工具API、浏览器、数据库等来扩展能力边界完成仅靠语言模型无法完成的任务。2.3 前端Agent vs 后端Agent很多人会问前端Agent和后端Agent有什么区别核心区别在于执行环境和交互方式。对比维度 后端Agent 前端Agent运行环境 Node.js / Python 服务端 浏览器 / 前端框架主要能力 数据处理、API编排、批处理 UI交互、页面操作、实时反馈工具类型 数据库、文件系统、外部API DOM操作、浏览器API、用户交互典型场景 数据分析、内容生成 智能表单、自动化测试、页面辅助延迟要求 可接受秒级延迟 需要实时响应三、前端Agent整体架构设计一个完整的前端Agent通常由以下核心模块组成。我们先来看整体架构图外部服务工具层Agent核心层用户层调用检索连接大语言模型 APIMCP Server知识库/向量库浏览器工具DOM操作工具网络请求工具自定义业务工具感知模块 Perception决策模块 DecisionLLM Planning执行模块 Action记忆模块 Memory 用户输入3.1 架构分层说明用户层接收用户的自然语言输入或目标指令Agent核心层包含感知、决策、执行、记忆四大模块是Agent的大脑工具层Agent可调用的各种能力如浏览器操作、网络请求等外部服务LLM API、MCP服务器、向量数据库等基础设施四、感知-决策-执行循环Agent LoopAgent的核心运行机制是一个循环感知环境 → 思考决策 → 执行动作 → 观察结果 → 再思考……直到目标达成。4.1 ReAct 模式目前最主流的Agent运行模式是 ReActReasoning Acting即推理-行动交替进行。未达成目标已达成目标 接收用户目标 推理思考Reasoning️ 选择并执行工具Acting️ 观察工具结果Observation 输出最终结果一个典型的ReAct对话过程用户帮我查一下北京今天的天气然后推荐穿什么衣服 Thought我需要先获取北京的天气信息️ Actionget_weather({“city”: “北京”})️ Observation北京今天晴气温18-26°C微风 Thought天气晴朗温度适中我来推荐穿搭️ Actionget_clothing_advice({“temp”: “18-26°C”, “weather”: “晴”})️ Observation建议穿薄外套长袖早晚温差大注意保暖 Thought已经获取了足够信息可以回答了 Final Answer北京今天晴18-26°C。建议穿薄外套搭配长袖早晚温差较大注意保暖。4.2 前端实现伪代码// Agent Loop 核心实现async function agentLoop(userGoal, agent) {const messages [{ role: ‘user’, content: userGoal }];let maxIterations 10; // 防止无限循环while (maxIterations-- 0) {// 1. 决策让LLM思考下一步const response await agent.llm.chat({messages,tools: agent.tools,});// 2. 如果LLM直接给出最终答案结束循环 if (response.content !response.tool_calls) { return response.content; } // 3. 执行工具调用 if (response.tool_calls) { messages.push(response); // 记录LLM的决策 for (const toolCall of response.tool_calls) { const result await agent.executeTool(toolCall); messages.push({ role: tool, tool_call_id: toolCall.id, content: JSON.stringify(result), }); } }}throw new Error(‘Agent 超过最大迭代次数’);}五、大脑LLM选型与Prompt工程5.1 如何选择合适的LLMLLM是Agent的大脑选择合适的模型至关重要。考虑以下因素考量因素 说明 建议上下文长度 能处理多少Token的对话历史 复杂任务选 128K工具调用能力 是否原生支持 Function Calling 必须支持推理能力 复杂逻辑推理的准确性 规划类任务要强推理模型响应速度 首Token延迟和生成速度 前端交互优先选快模型成本 Token价格 根据调用量权衡多模态能力 是否支持图片/语音 UI理解类任务需要✅ 选型策略采用大小模型搭配策略。复杂推理用强模型如 GPT-4o、Claude 3.5简单任务用快模型如 GPT-4o-mini、DeepSeek。可以通过路由层自动分发。5.2 System Prompt 设计System Prompt 是Agent的人设和行为准则直接决定Agent的表现。一个好的System Prompt包含const SYSTEM_PROMPT 你是一个专业的前端开发助手Agent。角色定位你是一名资深前端工程师擅长 React、Vue、TypeScript。能力范围编写和优化前端代码分析和修复Bug解释技术概念代码审查行为准则先理解需求再给出方案不确定时主动询问不要猜测给出代码时必须包含注释遇到无法解决的问题要如实告知工具使用你可以使用以下工具来辅助完成任务read_file: 读取文件内容write_file: 写入文件search_code: 搜索代码run_command: 执行命令记住优先使用工具获取真实信息不要凭空编造。;六、手脚Tools工具调用系统如果说LLM是Agent的大脑那么Tools就是Agent的手脚。没有工具LLM只能纸上谈兵有了工具Agent才能真正动手做事。6.1 什么是ToolTool工具是Agent可以调用的外部能力本质上是一个函数或API。LLM通过 Function Calling 机制来决定调用哪个工具、传入什么参数。决定调用weathersearchdomObservation LLM工具调用请求name arguments工具分发器get_weatherweb_searchclick_element执行结果6.2 定义一个Tool一个Tool通常包含三部分名称name、描述description、参数定义parameters。// 定义一个获取天气的工具const getWeatherTool {type: ‘function’,function: {name: ‘get_weather’,description: ‘获取指定城市的天气信息包括温度、天气状况、风力等’,parameters: {type: ‘object’,properties: {city: {type: ‘string’,description: ‘城市名称如北京、“上海”’,},date: {type: ‘string’,description: ‘日期格式为YYYY-MM-DD默认为今天’,default: new Date().toISOString().slice(0, 10),},},required: [‘city’],},},// 实际执行函数async execute({ city, date }) {const res await fetch(https://api.weather.com/v1/${city}?date${date});return res.json();},};6.3 前端常用工具集️ DOM操作工具click_element、input_text、scroll_page、extract_text用于自动化操作页面元素 浏览器工具navigate、screenshot、get_cookies、execute_js控制浏览器行为 网络工具fetch_api、upload_file、download发起网络请求 存储工具localStorage_get/set、indexedDB_query、cache_get/set本地数据读写6.4 工具执行的安全控制⚠️ 安全提醒Agent调用工具时必须经过安全控制防止恶意行为。权限校验每个工具定义权限级别敏感操作需要用户确认参数校验用 JSON Schema 校验LLM传入的参数执行沙箱代码执行类工具放在沙箱中运行审计日志记录所有工具调用便于追溯七、记忆Memory系统设计记忆是Agent能够持续学习和保持上下文连贯的关键。一个好的记忆系统让Agent记得住、想得起来、用得对。7.1 记忆的三种类型Memory 记忆系统重要信息沉淀相关信息检索短期记忆Short-term Memory当前对话上下文长期记忆Long-term Memory历史交互与知识情景记忆Episodic Memory关键事件与经验记忆类型 存储位置 生命周期 典型内容短期记忆 Context Window 单次对话 当前对话消息、中间思考长期记忆 向量数据库 跨会话持久 用户偏好、历史任务、知识库情景记忆 结构化存储 长期 成功/失败案例、关键决策7.2 向量检索RAG长期记忆通常基于向量数据库实现。核心流程用户问题Embedding向量化向量数据库相似度检索Top-K 相关记忆拼接到 PromptLLM 生成回答// 记忆系统实现示例class MemorySystem {constructor(vectorStore, embeddingModel) {this.store vectorStore;this.embedder embeddingModel;}// 写入记忆async save(text, metadata {}) {const embedding await this.embedder.embed(text);await this.store.upsert({id: crypto.randomUUID(),values: embedding,metadata: { text, timestamp: Date.now(), …metadata },});}// 检索记忆async recall(query, topK 5) {const embedding await this.embedder.embed(query);const results await this.store.query({vector: embedding,topK,includeMetadata: true,});return results.matches.map(m m.metadata.text);}}7.3 记忆管理策略滑动窗口只保留最近N轮对话超出的部分丢弃或摘要对话摘要用LLM将长对话压缩为摘要节省Token重要性评分对记忆内容打重要性分低优先级的先淘汰TTL过期给记忆设置有效期过期自动清理八、规划Planning与推理链复杂任务往往需要多步完成Planning模块让Agent具备拆解问题、制定计划、逐步执行的能力。8.1 Plan-and-Execute 模式接收复杂目标规划器 Planner拆解为子任务任务列表Task 1, 2, 3…执行器 Executor执行 Task 1执行 Task 2执行 Task 3汇总结果8.2 常见规划策略策略 原理 适用场景Chain of Thought (CoT) 让LLM逐步推理“Let’s think step by step” 逻辑推理、数学计算Tree of Thoughts (ToT) 生成多个推理分支择优选择 需要探索多种方案的问题ReAct 推理与行动交替 需要工具调用的交互任务Plan-and-Execute 先规划整体步骤再逐步执行 复杂的多步骤任务Reflexion 执行后自我反思调整策略 需要反复优化的任务// Plan-and-Execute 实现class PlanAndExecuteAgent {async run(goal) {// 1. 规划阶段拆解任务const plan await this.planner.plan(goal);// plan [// { id: 1, description: ‘搜索相关资料’ },// { id: 2, description: ‘整理关键信息’ },// { id: 3, description: ‘生成总结报告’ }// ]const results []; for (const task of plan.tasks) { // 2. 执行阶段逐步执行每个子任务 const result await this.executor.execute(task, results); results.push({ task, result }); // 3. 可选重新规划如果执行遇到问题 if (result.needsReplanning) { plan.tasks await this.planner.replan(goal, results); } } // 4. 汇总结果 return this.summarizer.summarize(results);}}九、MCP协议Agent的通用工具标准MCPModel Context Protocol是由 Anthropic 提出的开放协议旨在为Agent提供统一的工具连接标准。可以理解为Agent界的USB接口。9.1 为什么需要MCP在MCP出现之前每个Agent框架都有自己的工具定义方式导致工具无法复用。MCP的目标是一次开发处处可用。9.2 MCP 架构MCP Server - 工具侧传输层MCP Client - Agent侧Tools 工具MCP Server SDKPrompts 提示模板Resources 资源stdioHTTP/SSEWebSocketMCP Client SDKAgent9.3 MCP 核心概念Tools工具可调用的函数Agent通过名称参数调用Resources资源可读取的数据如文件、数据库记录Prompts提示模板预定义的提示词模板Transport传输Client与Server的通信方式支持 stdio、HTTP/SSE 等9.4 创建一个 MCP Server// 用 modelcontextprotocol/sdk 创建MCP Serverimport { Server } from ‘modelcontextprotocol/sdk/server/index.js’;import { CallToolRequestSchema, ListToolsRequestSchema } from ‘modelcontextprotocol/sdk/types.js’;const server new Server({ name: ‘weather-mcp’, version: ‘1.0.0’ },{ capabilities: { tools: {} } });// 注册工具列表server.setRequestHandler(ListToolsRequestSchema, async () ({tools: [{name: ‘get_weather’,description: ‘获取城市天气’,inputSchema: {type: ‘object’,properties: { city: { type: ‘string’, description: ‘城市名’ } },required: [‘city’],},}],}));// 处理工具调用server.setRequestHandler(CallToolRequestSchema, async (request) {const { name, arguments: args } request.params;if (name ‘get_weather’) {const weather await fetchWeather(args.city);return { content: [{ type: ‘text’, text: JSON.stringify(weather) }] };}});// 启动服务await server.connect(new StdioServerTransport());十、Skills技能系统可复用的能力封装Skill技能是比Tool更高层次的抽象。Tool是单个动作Skill是完成一类任务的完整流程包含多步工具调用和逻辑编排。10.1 Tool vs Skill维度 Tool工具 Skill技能粒度 原子操作 完整任务流程复杂度 低 高是否需要LLM 否纯函数 是需要编排复用性 高通用 中面向特定场景举例 click_element 自动完成表单填写10.2 Skill 的结构Syntax error in textmermaid version 10.9.8// Skill 定义示例const formAutoFillSkill {name: ‘auto_fill_form’,description: ‘自动识别并填写页面上的表单’,version: ‘1.0.0’,tools: [‘extract_form_fields’, ‘get_user_profile’, ‘input_text’, ‘click_element’],prompt: 你是一个表单填写助手。执行以下步骤用 extract_form_fields 获取页面所有表单字段用 get_user_profile 获取用户信息逐字段匹配并填写最后点击提交按钮,examples: [{ input: ‘填写注册表单’, output: ‘已完成表单填写并提交’ }],// 可选自定义执行逻辑async execute(agent, params) {const fields await agent.callTool(‘extract_form_fields’);const profile await agent.callTool(‘get_user_profile’);// … 编排逻辑}};十一、前端集成方案11.1 前端Agent的两种部署模式模式B前后端协同BFF 网关前端应用Agent ServiceLLM APIMCP Servers前端工具模式A纯浏览器端Agent Runtime前端应用LLM API 直连浏览器工具模式 优点 缺点 适用场景纯浏览器端 低延迟、数据不离开浏览器、部署简单 API Key 暴露、受浏览器限制 本地工具、隐私敏感场景前后端协同 安全、能力强、可集中管理 延迟较高、架构复杂 生产环境、复杂任务11.2 前端Agent SDK 设计// 前端 Agent SDK 核心类class FrontendAgent {constructor(config) {this.llm config.llm; // LLM 客户端this.tools config.tools || []; // 工具列表this.memory config.memory; // 记忆系统this.skills config.skills || []; // 技能列表this.messageHistory []; // 对话历史}// 主入口发送消息async sendMessage(userInput) {this.messageHistory.push({ role: ‘user’, content: userInput });// 1. 检索相关记忆 const memories await this.memory.recall(userInput); // 2. 构造 Prompt const messages [ { role: system, content: this.buildSystemPrompt() }, ...memories.map(m ({ role: system, content: [记忆] ${m} })), ...this.messageHistory, ]; // 3. 执行 Agent Loop return await this.agentLoop(messages);}// 注册工具registerTool(tool) {this.tools.push(tool);}// 注册技能registerSkill(skill) {this.skills.push(skill);}}// 使用示例const agent new FrontendAgent({llm: new OpenAIClient({ apiKey: ‘xxx’, model: ‘gpt-4o’ }),tools: [clickElementTool, inputTextTool, fetchApiTool],memory: new MemorySystem(vectorStore, embedder),skills: [formAutoFillSkill],});agent.on(‘message’, (msg) {console.log(‘Agent:’, msg);});await agent.sendMessage(‘帮我把这个表单填一下’);11.3 UI 交互设计前端Agent的UI需要展示思考过程和执行状态提升用户信任感流式输出打字机效果展示LLM回复工具调用可视化展示当前调用了哪个工具、结果如何进度状态显示正在思考…/“正在搜索…”/“正在执行…”中断与重试允许用户中断当前任务或重试失败步骤确认机制敏感操作前弹出确认对话框十二、工程化最佳实践与避坑指南12.1 性能优化优化点 策略降低延迟 流式输出SSE、首屏预加载、模型路由节省Token 上下文裁剪、对话摘要、缓存重复请求并发控制 工具调用并发执行、请求队列限流本地缓存 Embedding缓存、工具结果缓存12.2 错误处理与容错否是LLM超时工具失败参数错误权限不足是否Agent执行是否出错?继续执行错误分类错误类型重试 降级模型记录 尝试替代工具让LLM重新生成参数请求用户授权是否可恢复?优雅失败 提示用户// 带重试和降级的LLM调用async function callLLMWithFallback(messages, tools) {const models [‘gpt-4o’, ‘gpt-4o-mini’, ‘deepseek-chat’];const maxRetries 3;for (const model of models) {for (let i 0; i maxRetries; i) {try {return await llm.chat({ model, messages, tools, timeout: 30000 });} catch (err) {console.warn(Model ${model} attempt ${i 1} failed:, err.message);if (err.status 429) {await sleep(1000 * Math.pow(2, i)); // 指数退避}}}}throw new Error(‘所有模型均调用失败’);}12.3 安全考量 安全红线Agent安全是生产环境的重中之重绝不可忽视。Prompt Injection 防护对用户输入做转义和检测防止注入攻击API Key 保护前端绝不暴露 Key走后端代理工具权限最小化只给Agent完成任务必需的工具权限敏感操作确认删除、支付等操作必须二次确认数据脱敏传给LLM的敏感数据要脱敏处理内容审核对LLM输出做安全审核过滤有害内容12.4 监控与可观测性调用链路追踪记录每次LLM调用、工具调用的耗时和结果Token用量统计监控成本设置预算告警错误率监控跟踪失败率及时发现问题用户行为分析了解用户如何使用Agent优化体验质量评估定期用测试集评估Agent表现十三、未来展望与总结13.1 前端Agent的发展趋势 多Agent协作多个Agent分工协作如规划Agent、执行Agent、审核Agent形成Agent团队 端侧小模型浏览器内运行轻量模型简单推理本地完成降低延迟和成本️ 多模态融合Agent能看页面截图、听语音指令理解更丰富的上下文 自主进化Agent能从交互中学习自动优化工具使用策略和Prompt13.2 知识体系总结前端Agent知识体系核心概念Agent定义ReAct模式Agent Loop架构组件LLM大脑Tools工具Memory记忆Planning规划协议标准MCP协议Function Calling工程实践前端集成性能优化安全防护监控可观测13.3 给Agent开发者的建议打好基础深入理解LLM原理、Prompt工程、向量数据库动手实践用 LangChain / LangGraph / LlamaIndex 等框架搭一个Demo关注标准MCP协议是未来趋势尽早学习重视工程Agent不只是Prompt工程化能力决定能否上线保持好奇这个领域日新月异持续学习是唯一不变的法则 结语前端Agent是一个充满想象力的领域。它不是要取代前端开发者而是让我们从写代码升级为设计智能体。掌握Agent架构就是掌握下一代前端开发的入场券。 本文由前端Agent架构师视角撰写 · 持续更新中如有疑问或交流欢迎在评论区留言
