前面七课我们的 Agent 功能已经很全但体验一直停留在终端。这一课我们给它套上网页界面让它从「自己玩的脚本」变成「能分享给别人用的产品」。一、先看清整体架构别怕前端后端没那么玄。整条链路是浏览器网页界面 ↓ FastAPI后端接口 ↓ AgentAgent Loop 工具 ↓ 大模型 搜索 计算对应到我们已有的代码Agent 那部分不用改我们只是给它加一个「入口」。层职责用什么前端显示输入框和回答HTML JS后端接收请求、调用 AgentFastAPIAgent思考、调用工具我们前 7 课的代码模型/工具真正干活DeepSeek Tavily一句话概括网页只是 Agent 的新「门面」里面那颗大脑一点没变。二、安装 FastAPI在终端有(.venv)执行pip install fastapi uvicornFastAPI写后端接口的框架uvicorn把后端跑起来的服务器三、把 Agent 封装成一个函数为了给网页调用我们先把 Agent 逻辑包成一个函数新建agent.pyfrom openai import OpenAI import os import json from tools import calculator, search_web client OpenAI( api_keyos.environ[DEEPSEEK_API_KEY], base_urlhttps://api.deepseek.com ) tools [ { type: function, function: { name: calculator, description: 进行数学计算, parameters: { type: object, properties: { a: {type: number}, b: {type: number}, operation: { type: string, enum: [add, subtract, multiply, divide] } }, required: [a, b, operation] } } }, { type: function, function: { name: search_web, description: 搜索互联网获取最新实时信息, parameters: { type: object, properties: { query: {type: string} }, required: [query] } } } ] def run_agent(user_message): messages [{role: user, content: user_message}] while True: response client.chat.completions.create( modeldeepseek-chat, messagesmessages, toolstools ) message response.choices[0].message messages.append(message) if not message.tool_calls: return message.content for tool_call in message.tool_calls: function_name tool_call.function.name arguments json.loads(tool_call.function.arguments) if function_name calculator: result calculator( arguments[a], arguments[b], arguments[operation] ) elif function_name search_web: result search_web(arguments[query]) else: result 未知工具 messages.append({ role: tool, tool_call_id: tool_call.id, content: str(result) })四、写后端接口新建server.pyfrom fastapi import FastAPI from fastapi.staticfiles import StaticFiles from pydantic import BaseModel from agent import run_agent app FastAPI() class ChatRequest(BaseModel): message: str app.post(/chat) def chat(req: ChatRequest): answer run_agent(req.message) return {answer: answer} app.mount(/, StaticFiles(directorystatic, htmlTrue), namestatic)这里定义了一个接口收到message交给run_agent返回answer。最后一行把static目录当作网页来提供。五、写一个极简前端新建static/index.html!DOCTYPE html html langzh head meta charsetUTF-8 / titleMy AI Agent/title style body { font-family: sans-serif; max-width: 720px; margin: 40px auto; } #log { border: 1px solid #ddd; border-radius: 8px; padding: 16px; min-height: 300px; } .me { color: #2563eb; margin: 8px 0; } .ai { color: #111; margin: 8px 0; white-space: pre-wrap; } #bar { display: flex; margin-top: 12px; gap: 8px; } input { flex: 1; padding: 10px; } button { padding: 10px 20px; } /style /head body h2My AI Agent/h2 div idlog/div div idbar input idq placeholder输入问题例如搜索英伟达市值然后乘以2 / button onclicksend()发送/button /div script async function send() { const q document.getElementById(q).value; if (!q) return; const log document.getElementById(log); log.innerHTML div classme你${q}/div; document.getElementById(q).value ; const res await fetch(/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ message: q }) }); const data await res.json(); log.innerHTML div classaiAgent${data.answer}/div; } /script /body /html六、启动你的网页 Agent在终端执行uvicorn server:app --reload然后打开浏览器访问 http://127.0.0.1:8000你会看到┌─────────────────────────────────────────┐ │ My AI Agent │ ├─────────────────────────────────────────┤ │ 你搜索英伟达市值然后乘以2 │ │ Agent根据最新信息…… │ ├─────────────────────────────────────────┤ │ 输入问题…… [发送] │ └─────────────────────────────────────────┘在网页里输入那句「搜索英伟达市值然后乘以 2」看着它自己搜索、自己计算、自己回答——这一刻你做出了一个真正属于自己的 AI 产品。一句话概括终端里的 Agent 是原型浏览器里的 Agent 才是产品。七、下一步可以怎么升级前端目前只用了原生 HTML完全不用现在去学 React。等真有需要再迭代原生 HTML → 加流式输出打字机效果→ 加历史记录 → React → 部署上线总结这一课我们做了一件很有成就感的事给 Agent 套上了网页界面且一行 Agent 核心逻辑都没改。这再次印证了那个设计思想——模型和界面都是可替换的Agent 的大脑才是核心。到这里一个可以分享的小产品已经诞生。最后一课我们跳出代码聊聊从「小白」到「独立开发 Agent」的完整路线图和认知升级。下一课预告第9课收官从小白到独立开发 Agent——完整路线图与认知升级。