用全栈体验闭合产品闭环
我的理解
这一课完成从 API 到完整产品的最后一步：构建前端 UI。核心观点是 API 再强大也只是半成品，架构师必须保持用户中心视角。实践流程是先用 Swagger UI 做全面后端测试（验证直接回答和工具调用两类场景），然后把 openapi.json 的 URL 直接喂给 Cursor，用一段描述性 Prompt 生成带聊天历史面板和”thinking”动画的 Web 前端，让后端同时 serve 前端。这完成了”Document as a First Deliverable”工作流——API 文档既是测试场也是前端生成的输入。
相关链接
- Ch02-L02 打好基础 FastAPI应用 — openapi.json 在这里首次介绍，本课用它生成前端
- Ch02-L05 用Agentic工具扩展能力 — 前端调用的后端 /chat 端点在此构建
- Ch02-L08 模块小结 — 本课是 Phase A 的最后一个实践步骤
原文
Lesson 16 of 46 用全栈体验闭合产品闭环 / Closing the Loop with a Full-Stack Experience
API 再强大，作为产品也是不完整的。只有当它被客户端应用调用，并为终端用户提供切实可感的体验时，它的价值才真正得以释放。架构师必须始终保持以用户为中心的视角，确保自己设计的后端系统最终能够转化为顺畅、直观的用户界面。
在后端开发和测试阶段，Swagger UI 一直是我们不可或缺的得力工具，但它面向的是工程师，而不是真正的用户。本模块的最后一步，就是闭合这个产品闭环——构建一个简洁但功能完备的前端，把我们强大的 API 转化为一个完整、可交互的 Web 应用。
全面的后端测试：在动手构建 UI 之前，先最后一次使用 Swagger UI 进行一轮充分的测试。同时验证”直接回答”和”调用工具”这两类场景，确保后端足够稳定。这是 Document as a First Deliverable（以文档为首要交付物）工作流中的重要一步——你的 API 文档就是你的测试场。
指挥 AI 构建前端：接下来，我们将指挥 AI 构建用户界面。我们会给出一段描述性的 Prompt，说明这个聊天应用的结构和行为。首先，从 Swagger UI 中复制 openapi.json 的 URL：
然后在 Cursor 的聊天框中使用以下 Prompt：
Create a chat web application. Use <the link to openapi.json, e.g. http://localhost:8000/openapi.json> as the backend, and the base URL is <your backend URL, e.g. http://localhost:8000/>. Also change the backend to serve the frontend. We want a panel for chat history. And each chat shows user messages and assistant messages. Show a “thinking” animation when waiting.
端到端体验：如有需要，让 AI 帮你（重新）启动服务器。随便输入一条消息进行测试。
学习成果：你已经成功地把所有独立组件整合成了一个完整、连贯的全栈应用。你不再只是一名后端开发者或前端开发者——你已经亲历了从最初的战略决策，到最终面向用户的体验，架构一款完整 AI 产品的端到端全过程。