42.VueReactNextjs如何为AI应用设计前端交互

Vue、React、Next.js如何为 AI 应用设计前端交互码海寻道 · 大模型、智能体与 RAG 工程组件系列第 42 篇AI 应用的前端不是把一个输入框和 Markdown 输出拼在一起。它还要处理流式文本、工具调用、引用来源、任务进度、错误重试、取消生成和多轮会话。Vue、React 和 Next.js 都能实现关键是先设计交互状态和后端协议。一、AI 页面有哪些状态idle → submitting → retrieving → generating → completed ↘ failed ↘ cancelled知识库上传还要有uploaded → parsing → embedding → indexing → ready不要只用一个loadingtrue覆盖所有阶段否则用户无法知道系统是在检索、生成还是卡住。二、聊天界面的核心状态typeMessage{id:stringrole:user|assistant|toolcontent:stringcitations?:Citation[]status:streaming|done|error}typeChatState{messages:Message[]activeRunId?:stringphase:idle|retrieving|generating|done|errorerror?:string}把phase、消息内容和引用分开方便局部更新和重试。三、Vue、React 和 Next.js 的定位Vue适合渐进式开发和组件化界面。可以用 Composition API 抽离useChat、useUpload和useJobProgress等逻辑。React适合复杂组件组合和生态集成。聊天消息、流式事件和任务状态可以通过 hooks、Context 或状态库管理。Next.js基于 React提供路由、服务端组件、服务端渲染和流式页面能力适合希望前后端协作在同一应用中的团队。但不要因此绕过独立后端的鉴权和业务边界。选型优先考虑团队熟悉度、现有系统、部署方式和组件生态不要把框架名称当成 AI 能力本身。四、流式消息如何更新界面服务端发送事件event: message_start data: {run_id:run-001} event: token data: {text:你好} event: citation data: {document_id:doc-001,page:3} event: done data: {run_id:run-001}前端收到token时只追加当前助手消息收到citation时更新引用列表收到done时把状态改为完成。不要每个 Token 都重建整棵消息列表。前后端应先约定事件 Schema例如message_start、token、citation、tool_start、tool_end、error、done每个事件带run_id、event_id和可选时间戳。这样前端可以丢弃重复事件、处理乱序保护并在断线后根据事件 ID 或查询接口恢复状态而不是把一段文本当作唯一协议。五、引用和工具调用应该可见AI 应用需要让用户知道答案来自哪里引用文档标题和页码展开原文片段显示当前阶段工具调用涉及外部系统时显示动作写操作前显示确认卡片。引用卡片只展示服务端返回的文档标题、页码、片段和权限允许的链接不能让模型自行拼接下载地址。工具调用应显示“正在查询”“已完成”或“需要确认”等状态避免把内部参数、密钥和异常堆栈暴露给浏览器。“模型正在思考”不如“正在检索知识库”“正在读取订单信息”更可解释。六、上传页面如何设计选择文件 ↓ 上传进度 ↓ 解析进度 ↓ 切分和向量化进度 ↓ 可搜索上传进度和解析进度不是同一件事。文件已经上传完成不代表知识库马上可以检索。前端应根据job_id查询后端状态并允许失败任务重试。七、取消和重试生成中应提供“停止生成”按钮前端发送取消请求后立即更新界面同时等待服务端确认用户点击停止 ↓ POST /runs/{run_id}/cancel ↓ 前端显示 cancelling ↓ 服务端释放模型流和工具任务 ↓ 状态变为 cancelled网络断开后不能默认把任务判定为失败。应通过 run_id 查询服务端最终状态并支持重新连接或加载历史结果。重试应携带原始run_id或新的幂等键并明确是“继续未完成任务”还是“重新生成答案”。如果服务端已经完成但响应丢失前端应先查询运行记录不能直接再次发起一次可能重复扣费的请求。八、状态管理怎么选小页面可以使用组件状态和自定义 hooks/composables跨页面共享会话、任务和权限时再引入 Pinia、Redux 或其他状态管理方案。状态管理不等于服务端事实来源。消息最终状态、任务状态和权限仍应以 API 返回为准前端乐观更新需要能够回滚。九、前端安全边界不把模型 API Key 放在浏览器不相信前端传来的 tenant_id 和 permissionMarkdown 渲染要防止 XSS文件下载链接使用短时授权地址处理 SSE/WebSocket 的鉴权和断线重连不在浏览器保存不必要的敏感对话对用户展示的引用经过服务端权限过滤。同时要使用安全的 Markdown 渲染策略过滤脚本、危险链接和不可信 HTML文件上传限制类型、大小和上传目标不能相信文件名扩展名。前端隐藏按钮不等于完成授权所有操作仍要由服务端重新鉴权。十、结语AI 前端的核心是状态和反馈让用户知道请求是否提交、知识是否检索、答案是否生成、来源在哪里、任务能否重试。Vue、React 和 Next.js 都可以实现真正决定体验的是前后端协议和状态设计。下一篇将专门介绍 SSE为什么聊天应用要实时返回以及如何处理断线、心跳和最终结果。参考资料Vue 官方文档React 官方文档Next.js 官方文档App Router本文为“码海寻道”原创技术文章。前端框架与路由能力会持续更新正式实现请结合目标版本和部署架构验证。