前端 + agent 开发学习路线

优质文章学习记录

— 12 min read
背景：团队启动Agent项目，从零开始学习工程化AI开发

感谢ai老师写的学习指南。存档！

引言：从困惑到清晰

最近团队要启动Agent项目，我第一次接触这个概念时，只停留在“接入大模型API+优化Prompt”的浅层理解。经过大量学习和实践探索，我才发现工程化Agent开发是系统化的架构设计，而不仅仅是API调用。

这篇文章记录我从前端视角出发，探索Agent工程化开发的学习路径和实践经验。如果你也是前端/全栈开发者，想要在AI时代找到自己的定位，这篇指南应该能帮到你。

一、认知重塑：什么是工程化Agent？

1.1 我的错误认知 vs 现实

我原来的理解：

Agent = 大模型API + Prompt优化

实际上的工程化Agent：

Agent = 系统架构 + 可控执行 + 安全审查 + 领域适配 + 可观测性

1.2 Agent的分层架构（医疗场景示例）

你的主战场

任务分解器

工具路由器

记忆管理器

状态监控器

应用层 - 前端界面

AI服务层 - Python/RAG

业务服务层 - Java微服务

二、技术栈深度解析：前端开发者怎么选？

2.1 产业真实技术分布

公司类型技术栈组合前端开发者切入点
大型企业Java + Python + Node.jsNode.js作为BFF层
中小公司Python + Node.js全栈Node.js开发
AI创业公司Python为主AI集成与界面开发

2.2 Node.js在AI时代的独特定位

作为前端开发者，我们不需要转Python！Node.js在AI工程中有明确位置：

// Node.js作为AI网关层（BFF - Backend for Frontend）// 这是我们的优势领域！const express =require('express');const{ createAgent }=require('@langchain/core');const app =express();// 1. Agent编排中心 app.post('/api/agent/medical-triage',async(req, res)=>{const agent =awaitcreateMedicalAgent();const stream =await agent.stream(req.body);// 流式响应 - 前端友好 res.setHeader('Content-Type','text/event-stream');forawait(const chunk of stream){ res.write(`data: ${JSON.stringify(chunk)}\n\n`);}});// 2. 工具调用代理 app.post('/api/agent/tools',async(req, res)=>{const{ toolName, params }= req.body;// 前端工具 vs 后端工具的路由if(isFrontendTool(toolName)){// 触发前端操作（如打开日历）return res.json({action:'frontend',tool: toolName });}else{// 调用后端服务const result =awaitcallBackendService(toolName, params);return res.json(result);}});

2.3 现代AI开发技术栈

# 前端层（你的舒适区）前端框架: React/Vue/Next.js/Nuxt.js AI集成库: Vercel AI SDK / VueUse AI 可视化: D3.js / ECharts / React Flow # BFF层（你的成长区）运行时: Node.js 框架: Express/Fastify/NestJS AI框架: LangChain.js / OpenAI SDK 数据库: PostgreSQL + Redis + 向量数据库 # AI服务层（了解即可）语言: Python 框架: LangChain / LlamaIndex 模型: OpenAI / Claude / 国内大模型

三、核心模块：Agent开发的七支柱

3.1 必须掌握的七大模块

1. 任务规划与分解
// 用Node.js实现任务分解器classTaskPlanner{asyncdecompose(goal){// 使用LLM分析复杂目标const steps =await llm.analyzeTask(goal);// 转化为可执行工作流returnthis.createWorkflow(steps);}// 前端思维的应用：状态流转设计createWorkflow(steps){return{id:generateId(), steps,currentStep:0,status:'pending',// 类似React状态管理getNextStep:function(){returnthis.steps[this.currentStep++];}};}}
2. 工具调用系统
// 将现有API包装为Agent工具classAPIToToolAdapter{constructor(apiConfig){this.tools =this.createTools(apiConfig);}// OpenAPI规范转换createTools(apiConfig){return apiConfig.endpoints.map(endpoint=>({name: endpoint.name,description: endpoint.description,parameters: endpoint.parameters,execute:async(args)=>{// 调用现有后端APIreturnawaitfetch(endpoint.url,{method: endpoint.method,body:JSON.stringify(args)});}}));}}
3. 记忆管理系统
// 短期 + 长期记忆组合interfaceMemorySystem{ shortTerm: ConversationMemory;// 对话上下文 longTerm: VectorMemory;// 向量数据库 cache: RedisCache;// 缓存层}// 实际实现classMedicalAgentMemoryimplementsMemorySystem{private maxContext =10;// 最近10轮对话asyncremember(conversationId:string, query:string){// 1. 检查缓存const cached =awaitthis.cache.get(conversationId);if(cached)return cached;// 2. 向量搜索相似病例const similarCases =awaitthis.longTerm.search(query);// 3. 维护上下文窗口awaitthis.shortTerm.add(conversationId, query);return{ similarCases, context:this.shortTerm.get(conversationId)};}}
4. 执行控制引擎
// 有限状态机实现Agent流程控制classAgentStateMachine{constructor(){this.states ={'idle':this.handleIdle.bind(this),'processing':this.handleProcessing.bind(this),'awaiting_input':this.handleAwaitingInput.bind(this),'executing_tool':this.handleExecutingTool.bind(this),'completed':this.handleCompleted.bind(this)};this.currentState ='idle';}// 状态转移（类似前端路由）transition(newState, data){ console.log(`State: ${this.currentState} -> ${newState}`);this.currentState = newState;returnthis.states[newState](data);}}
5. 安全与审查层
// 必须有的安全检查classSafetyGuard{private sensitivePatterns =[/* 敏感词正则 */];private allowedActions =[/* 许可的操作 */];asynccheckInput(input:string):Promise<SafetyResult>{// 1. 敏感词过滤if(this.containsSensitive(input)){return{ safe:false, reason:'sensitive_content'};}// 2. 意图分析const intent =awaitthis.analyzeIntent(input);if(!this.isAllowedIntent(intent)){return{ safe:false, reason:'disallowed_intent'};}// 3. 上下文合规检查const contextSafe =awaitthis.checkContext(input);return{ safe: contextSafe, reason: contextSafe ?'passed':'context_violation'};}}
6. 评估与监控
// Agent性能监控classAgentMonitor{ metrics ={latency:[],// 延迟accuracy:[],// 准确率cost:[],// 成本（Token消耗）userSatisfaction:[]// 用户满意度};asynctrackInvocation(agentName, input, output, metadata){// 记录每次调用const record ={timestamp: Date.now(),agent: agentName,inputLength: input.length,outputLength: output.length,latency: metadata.latency,tokenUsage: metadata.tokenUsage };// 存储到监控系统awaitthis.storeMetric(record);// 实时告警（如延迟过高）if(metadata.latency >5000){// 5秒阈值this.triggerAlert('high_latency', record);}}}
7. 部署与运维
# docker-compose.yml - Agent系统部署version:'3.8'services:# BFF层 - Node.jsagent-bff:build: ./bff ports:-"3000:3000"environment:- NODE_ENV=production - OPENAI_API_KEY=${OPENAI_API_KEY}depends_on:- redis - postgres # AI服务 - Pythonai-service:build: ./ai-service ports:-"8000:8000"# 向量数据库vectordb:image: chromadb/chroma ports:-"8001:8000"# 缓存redis:image: redis:alpine # 监控prometheus:image: prom/prometheus ports:-"9090:9090"

3.2 不需要"炼丹"也能做的Agent

很多开发者（包括我）担心需要深度学习背景，其实大部分工程化Agent项目不需要训练模型：

需求场景无训练解决方案实现方式
领域专业知识RAG检索增强向量数据库 + 文档检索
特定输出格式Function Calling结构化输出定义
控制AI行为System Prompt工程系统提示词 + 少样本
降低成本模型选择优化小模型 + 缓存策略

四、前端开发者的具体赋能路径

4.1 将前端技能迁移到Agent开发

我发现自己的前端经验在Agent开发中特别有用：

前端技能 → Agent开发应用 ─────────────────────────────────────────── 状态管理 → Agent执行状态管理 （Redux/Zustand） （工作流状态机） 组件化思维 → 工具/技能组件化 （React组件） （可复用Agent模块） 用户体验设计 → 多轮对话设计 （UX设计） （对话流编排） 异步数据处理 → 流式响应处理 （Promise/Stream） （SSE/WebSocket） 可视化能力 → Agent决策可视化 （D3/ECharts） （执行过程展示）

4.2 四个具体的赋能方向

方向1：Agent编排层开发（最推荐）
// 医疗分诊Agent编排import{ StateGraph,END}from"@langchain/langgraph";import{ ChatOpenAI }from"@langchain/openai";// 定义状态interfaceMedicalState{ symptoms:string[]; severity:"low"|"medium"|"high"; suggestedDepartment?:string; needsEmergency?:boolean; conversationHistory:Array<{role:string, content:string}>;}// 创建Agent工作流const workflow =newStateGraph(MedicalState)// 添加节点（类似React组件）.addNode("symptom_collector", collectSymptoms).addNode("severity_assessor", assessSeverity).addNode("department_recommender", recommendDepartment).addNode("emergency_checker", checkEmergency)// 定义边（状态流转）.addEdge("symptom_collector","severity_assessor").addConditionalEdges("severity_assessor",(state)=> state.severity ==="high"?"emergency_checker":"department_recommender").addEdge("emergency_checker",END).addEdge("department_recommender",END);// 编译为可执行Agentconst app = workflow.compile();
方向2：前端AI交互框架
// 构建前端Agent SDKimport{ createAgent, streamText }from'ai';classFrontendAgentSDK{private conversationId:string;private agent:any;constructor(options: AgentOptions){// 初始化Agentthis.agent =createAgent({ model: options.model, tools: options.tools, system: options.systemPrompt });}// 流式对话 async*chatStream(message:string){const{ textStream }=awaitstreamText({ model:this.agent.model, prompt: message, tools:this.agent.tools,onToolCall:(toolCall)=>{// 工具调用可视化this.visualizeToolCall(toolCall);}});forawait(const chunk of textStream){yield chunk;}}// Agent决策可视化（前端优势）visualizeWorkflow(workflow: Workflow){return(<div className="workflow-visualization">{workflow.steps.map((step, index)=>(<WorkflowNode key={index} step={step} status={step.status} onNodeClick={this.handleNodeClick}/>))}<WorkflowEdges steps={workflow.steps}/></div>);}}
方向3：工具调用中间件
// 桥接前端与AI工具调用classToolCallMiddleware{constructor(frontendTools, backendTools){this.toolRegistry =newMap();// 注册前端工具（日历、文件上传等）this.registerFrontendTools(frontendTools);// 注册后端工具（API调用）this.registerBackendTools(backendTools);}asynchandleToolCall(toolCall){const tool =this.toolRegistry.get(toolCall.name);if(!tool){thrownewError(`Tool ${toolCall.name} not found`);}// 执行工具const result =await tool.execute(toolCall.arguments);// 记录日志（可观测性）awaitthis.logToolCall(toolCall, result);return result;}// 前端友好的工具调用asynccallToolWithUI(toolName, args){// 显示加载状态this.showToolLoading(toolName);try{const result =awaitthis.handleToolCall({name: toolName,arguments: args });// 更新UIthis.updateUIWithResult(result);return result;}catch(error){// 错误处理this.showError(error.message);throw error;}finally{this.hideToolLoading();}}}
方向4：多Agent协作前端
// 医疗多Agent协作系统classMedicalMultiAgentSystem{private agents ={ triage:newTriageAgent(), diagnosis:newDiagnosisAgent(), referral:newReferralAgent(), explainer:newPatientExplainerAgent()};private coordinator =newAgentCoordinator();asynchandlePatientCase(patientQuery:string){// 1. 并行处理不同方面const[triageResult, symptoms]=awaitPromise.all([this.agents.triage.assess(patientQuery),this.extractSymptoms(patientQuery)]);// 2. 根据分诊结果路由if(triageResult.needsEmergency){returnawaitthis.handleEmergency(symptoms);}// 3. 诊断与转诊协作const diagnosis =awaitthis.agents.diagnosis.analyze(symptoms);const referral =awaitthis.agents.referral.recommend(diagnosis);// 4. 生成患者友好解释const explanation =awaitthis.agents.explainer.explain({ diagnosis, referral, language:'patient_friendly'});// 5. 返回结构化结果return{ triage: triageResult, diagnosis, referral, explanation, nextSteps:this.generateNextSteps(diagnosis, referral)};}}

五、实战学习路线（6个月计划）

阶段1：基础入门（第1-2个月）

第1-2周：建立正确认知
  • 阅读LangChain官方文档
  • 理解ReAct、CoT等核心范式
  • 完成OpenAI API基础调用
第3-4周：第一个Agent项目
# 创建学习项目mkdir my-first-agent &&cd my-first-agent npm init -y npminstall @langchain/core @langchain/openai openai # 实现基础Agenttouch basic-agent.js

实现一个天气查询Agent：

// basic-agent.jsimport{ ChatOpenAI }from"@langchain/openai";import{ createReactAgent }from"@langchain/langgraph";const weatherTool ={name:"get_weather",description:"获取城市天气",execute:async({ city })=>{// 模拟API调用return`${city}今天晴天，25°C`;}};const agent =awaitcreateReactAgent({llm:newChatOpenAI({model:"gpt-3.5-turbo"}),tools:[weatherTool]});const result =await agent.invoke("北京天气怎么样？"); console.log(result);
第5-8周：完整项目实践

项目：智能待办事项助手

  • 任务分解：将复杂任务拆解
  • 工具调用：集成日历API
  • 记忆管理：记住用户偏好
  • 前端界面：React + 流式响应

阶段2：进阶掌握（第3-4个月）

第9-12周：工作流编排
// 学习LangGraphimport{ StateGraph,END}from"@langchain/langgraph";// 实现审批工作流const workflow =newStateGraph(/*...*/).addNode("draft", createDraft).addNode("review", reviewDraft).addNode("approve", approveDraft).addEdge("draft","review").addConditionalEdges("review",(state)=> state.needsRevision ?"draft":"approve").addEdge("approve",END);
第13-16周：生产级特性
  • 错误处理与重试机制
  • 性能监控与优化
  • 安全防护实现
  • 部署与CI/CD

阶段3：领域深入（第5-6个月）

第17-20周：垂直领域实践

选择1-2个领域深入：

  • 医疗健康：分诊、诊断辅助
  • 金融服务：理财咨询、风险评估
  • 教育辅导：个性化学习助手
第21-24周：毕业项目

完整的多Agent协作系统：

  • 前端：Next.js + 可视化面板
  • BFF：NestJS + Agent编排
  • 后端：微服务集成
  • 部署：Docker + Kubernetes

六、资源推荐与学习工具

6.1 必看资源

文档类（优先级高）
  1. LangChain.js文档 - 核心学习资料
  2. Vercel AI SDK - 前端AI集成
  3. OpenAI Cookbook - 实用案例
项目类
  1. 官方示例：
    • npx create-langchain-app@latest
    • npx create-next-app --example ai-chatbot
  2. 开源项目学习：
    • GitHub搜索：langchain agent example
    • 关注：Vercel官方AI示例
社区与交流
  1. Discord：LangChain官方频道
  2. GitHub Discussions：参与开源项目讨论
  3. 技术博客：关注AI工程化实践分享

6.2 学习工具栈

开发环境:- Node.js 18+ - VS Code + GitHub Copilot - Docker Desktop 测试工具:- Jest (单元测试) - Playwright (E2E测试) - LangSmith (Agent测试) 监控调试:- LangSmith (LangChain调试) - Prometheus + Grafana - Sentry (错误追踪) 部署平台:- Vercel (前端部署) - Railway/Render (Node.js部署) - AWS/GCP (生产环境)

七、立即行动：30天速成计划

第1周：搭建基础

# Day 1-3: 环境搭建npm create vite@latest agent-playground -- --template react-ts cd agent-playground npminstall ai @ai-sdk/openai # Day 4-7: 第一个AI功能# 实现一个聊天界面，集成流式响应

第2周：Agent核心

// Day 8-10: 工具调用// 将你的某个业务API包装为Agent工具// Day 11-14: 工作流设计// 实现一个三步审批流程

第3周：前端集成

// Day 15-17: 状态管理// 将Agent状态接入Redux/Zustand// Day 18-21: 可视化// 用D3.js展示Agent决策过程

第4周：项目整合

# Day 22-25: 部署上线# 部署到Vercel，配置监控# Day 26-30: 文档与分享# 写技术博客，内部分享

八、职业发展建议

短期目标（3-6个月）

  1. 成为团队AI接口人：负责前端与AI的集成
  2. 主导一个内部Agent工具：解决实际业务问题
  3. 建立技术影响力：写博客、做内部分享

中期目标（6-12个月）

  1. 向全栈AI工程师发展：掌握BFF层Agent编排
  2. 理解AI服务层：能调试Python AI服务
  3. 参与架构设计：设计企业级Agent系统

长期目标（1-2年）

  1. Agent架构师：设计复杂多Agent系统
  2. 技术专家：在特定领域建立深度
  3. 开源贡献：参与或发起开源项目

结语：你的优势与机会

作为前端开发者，你在Agent时代拥有独特优势：

  1. 用户体验敏感：知道如何设计自然的AI交互
  2. 状态管理专家：能设计复杂的Agent工作流
  3. 快速迭代能力：前端开发的敏捷性能快速验证想法
  4. 可视化能力：能让黑盒的AI决策变得透明

不要被"AI需要Python"的说法限制，Node.js生态在快速发展，前端开发者在AI工程中有明确且重要的位置。

从今天开始，选择一个小问题，用Agent的思路去解决它。每一步实践都会积累成你的竞争优势。

最有效的学习永远是：动手做，解决真实问题。

祝你在Agent开发的道路上顺利前行！

Read more

用 Vue 3 重构 Dify 聊天前端（上篇）：项目搭建与基础架构

用 Vue 3 重构 Dify 聊天前端（上篇）：项目搭建与基础架构

本系列教程将带你从零开始，用 Vue 3 + TypeScript 复刻一个类似 Dify 的 AI 聊天前端。上篇聚焦项目搭建、类型设计、路由认证、HTTP 封装和状态管理。 项目简介 背景 Dify 是一个开源的 LLM 应用开发平台，提供了对话式 AI 的后端服务。在实际项目中，我们往往需要自建前端来对接Dify后端 API或LLM后端服务，实现定制化的聊天界面。 本项目的目标：用 Vue 3 构建一个生产级的 AI 聊天前端，具备以下能力： * SSE 流式输出（打字机效果） * Markdown 渲染 + 代码高亮 * 用户认证 * 文件/图片上传 * 聊天会话历史管理 * 工作流执行可视化 * Agent 思考过程展示 * 移动端响应式适配

零成本搭建飞书机器人：手把手教你用Webhook实现高效消息推送

1. 为什么你需要一个飞书机器人？ 在日常工作中，我们经常需要处理各种通知需求。比如系统报警、任务提醒、审批结果通知等等。传统的解决方案包括短信、邮件或者第三方推送平台，但这些方式要么成本高，要么实时性差。飞书机器人提供了一种零成本、高效率的替代方案。 我去年负责的一个ERP系统升级项目就遇到了这个问题。当时我们需要在关键业务流程节点给不同部门的同事发送实时通知。如果使用短信，按照每天200条计算，一个月就要花费上千元。后来我们改用飞书机器人，不仅完全免费，还能实现更丰富的消息格式和精准的@提醒功能。 飞书机器人本质上是一个自动化程序，它通过Webhook技术接收外部系统的消息，并转发到指定的飞书群聊中。这种机制特别适合企业内部系统与飞书之间的集成，比如： * 运维报警通知 * 审批流程提醒 * 业务系统状态更新 * 日报/周报自动推送 * 数据监控预警 2. 5分钟快速创建你的第一个机器人 创建飞书机器人非常简单，不需要任何开发经验。下面我以电脑端操作为例，手把手带你完成整个过程。 首先打开飞书客户端，进入你想要添加机器人的群聊。点击右上角的"..."菜单，

Spring Boot 04 整合Web（上）

返回JSON数据 spring-boot-starter-web依赖默认加入了jackson-databind作为JSON处理器 创建实体类与Controller类，返回实体对象就行 默认的jackson-databind publicclassPeople{privateString name;@JsonIgnoreprivateString gender;@JsonFormat(pattern ="yyyy-MMM")privateLocalDate birthday;} @RestControllerpublicclassPeopleController{@GetMapping("/people")publicPeoplegetPeople(){People people =newPeople(); people.setName("张三"); people.setGender("男"); people.setBirthday(LocalDate.now());return people;}} 最终界面会打印如图数据 @JsonFormat规定了birthday的输
前后端分离Web教师个人成果管理系统系统｜SpringBoot+Vue+MyBatis+MySQL完整源码+部署教程

前后端分离Web教师个人成果管理系统系统｜SpringBoot+Vue+MyBatis+MySQL完整源码+部署教程

摘要 随着教育信息化的快速发展，教师个人成果管理逐渐成为高校和科研机构的重要需求。传统的手工记录和文件管理方式效率低下，难以满足教师成果的动态更新和高效查询需求。尤其在科研成果、教学成果、学术论文等多维度数据的管理上，缺乏统一的平台导致数据分散、统计困难。因此，开发一套高效、安全、易用的教师个人成果管理系统具有重要的现实意义。该系统能够实现教师成果的集中管理、分类展示和快速检索，提升管理效率，同时为学校管理层提供数据支持，辅助决策分析。关键词：教师成果管理、信息化、动态更新、数据统计、决策支持。 本系统采用前后端分离架构，前端基于Vue.js框架实现响应式界面，后端使用SpringBoot提供RESTful API接口，数据库采用MySQL存储数据，并通过MyBatis实现数据持久化操作。系统功能模块包括用户权限管理、成果分类管理（如论文、项目、获奖等）、数据导入导出、多条件查询及可视化统计等。前端通过Axios与后端交互，结合Element UI组件库优化用户体验；后端采用JWT进行身份验证，确保系统安全性。系统支持教师个人成果的增删改查操作，同时提供管理员后台进行数据审核与统计