从零开始：前端转型 AI Agent 直到就业——第十八天
1. 今日目标今天是前端转型 AI Agent 的第十八天。经过前十七天的学习我们已经掌握了 Python 基础、LangChain 核心概念、Agent 工作流设计等关键知识。今天的目标是打通从本地 Agent 原型到可部署服务的最后一公里完成一个能对外提供 API 服务的 Agent 应用并理解部署上线的基本流程。2. 回顾与定位在开始今天的内容之前先快速回顾一下前十七天的学习路径第 1-5 天Python 语法、虚拟环境、依赖管理完成前端思维到后端思维的初步转换第 6-10 天LangChain 基础、Prompt 工程、模型调用封装第 11-15 天Agent 核心机制ReAct、Tool Calling、记忆管理、多工具编排第 16-17 天构建了一个本地可运行的 Agent 原型具备联网搜索和简单问答能力今天我们要做的就是把第 17 天完成的本地原型改造成一个可以通过 HTTP 接口访问的服务。3. 为什么需要服务化本地脚本和线上服务之间隔着几个关键差异并发处理本地脚本一次只能服务一个请求线上服务需要同时处理多个用户请求接口标准化前端调用后端需要统一的 RESTful API 或 WebSocket 协议状态管理Agent 的多轮对话需要会话隔离不同用户不能互相干扰可观测性线上环境需要日志、监控、错误追踪而不是简单的 print作为前端开发者我们对 HTTP 协议、JSON 序列化、异步请求这些概念并不陌生这恰恰是服务化改造中最大的优势。4. 技术选型我们选择FastAPI作为 Web 框架原因如下性能优秀基于 Starlette 和 Pydantic异步原生支持上手简单对前端开发者友好装饰器风格类似 Express自动文档内置 Swagger UI调试方便类型提示与 Python 类型系统完美结合减少运行时错误安装依赖pipinstallfastapi uvicorn5. 改造本地 Agent 为 API 服务5.1 项目结构调整将原来的单文件脚本拆分为清晰的项目结构agent-service/ ├── app/ │ ├── __init__.py │ ├── main.py # FastAPI 入口 │ ├── agent.py # Agent 核心逻辑 │ ├── schemas.py # 请求/响应模型 │ └── session.py # 会话管理 ├── requirements.txt └── .env5.2 定义请求与响应模型# app/schemas.pyfrompydanticimportBaseModelfromtypingimportOptionalclassChatRequest(BaseModel):message:strsession_id:Optional[str]NoneclassChatResponse(BaseModel):reply:strsession_id:strusage:Optional[dict]None5.3 封装 Agent 调用# app/agent.pyfromlangchain.agentsimportAgentExecutorfromlangchain.memoryimportConversationBufferMemoryclassAgentService:def__init__(self):self.memory_map{}self.agentself._build_agent()def_build_agent(self):# 复用第 17 天构建的 Agent 逻辑# 这里省略具体实现保持与之前一致passdefchat(self,message:str,session_id:str)-str:ifsession_idnotinself.memory_map:self.memory_map[session_id]ConversationBufferMemory()# 调用 Agent 并返回结果returnself.agent.invoke({input:message})5.4 创建 FastAPI 入口# app/main.pyfromfastapiimportFastAPIfromapp.schemasimportChatRequest,ChatResponsefromapp.agentimportAgentServiceimportuuid appFastAPI(titleAI Agent Service)agent_serviceAgentService()app.post(/chat,response_modelChatResponse)asyncdefchat(request:ChatRequest):session_idrequest.session_idorstr(uuid.uuid4())replyagent_service.chat(request.message,session_id)returnChatResponse(replyreply,session_idsession_id)app.get(/health)asyncdefhealth():return{status:ok}5.5 启动服务uvicorn app.main:app--host0.0.0.0--port8000--reload启动后访问http://localhost:8000/docs即可看到自动生成的 API 文档可以直接在页面上测试接口。6. 前端如何对接作为前端开发者对接这个 API 非常自然// 前端调用示例asyncfunctionchatWithAgent(message,sessionId){constresponseawaitfetch(http://localhost:8000/chat,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({message,session_id:sessionId})});returnresponse.json();}这里有几个前端需要注意的点跨域问题开发环境需要配置 CORSFastAPI 中可通过CORSMiddleware解决流式输出如果需要打字机效果可以改用StreamingResponse返回 SSE 流会话管理前端负责生成或保存session_id实现多轮对话的上下文延续7. 部署上线基础本地跑通后下一步是部署到服务器。最轻量的方式是使用 DockerFROM python:3.11-slim WORKDIR /app COPY requirements.txt . RUN pip install -r requirements.txt COPY . . CMD [uvicorn, app.main:app, --host, 0.0.0.0, --port, 8000]构建并运行dockerbuild-tagent-service.dockerrun-p8000:8000 agent-service8. 今日总结第十八天我们完成了从本地脚本到 API 服务的跨越。核心收获理解了本地开发与线上服务的差异掌握了 FastAPI 的基本用法完成了 Agent 的服务化封装打通了前端调用 Agent 的完整链路明天我们将深入流式输出和 SSE 协议让 Agent 的回复像 ChatGPT 一样逐字输出进一步提升用户体验。9. 实践作业将你第 17 天的 Agent 原型改造成 FastAPI 服务用 Postman 或前端页面调用/chat接口验证多轮对话尝试在 FastAPI 中配置 CORS允许前端跨域访问思考如果同时有 100 个用户调用当前实现会有什么问题
