选型原则
选型遵循一条核心原则：各层优先采用行业标准，不自研协议。行业标准拥有成熟的社区与详细的文档，问题排查、长期升级与版本演进有据可依；围绕标准已形成较完善的配套生态------前端有现成的聊天组件可用，后端有多种成熟的智能体开发框架提供官方集成，调试与观测亦有社区工具支持------接入成本与自研代码量降至最低；同时借助自定义事件等扩展机制，可承接项目各类复杂需求，保证足够的可扩展性。
交互协议选型：AG-UI Protocol
交互协议层定义智能体与前端之间交互事件的类型、结构与语义；AG-UI Protocol（Agent-User Interaction Protocol）是该层的行业标准协议。
候选对比
| 维度 | AG-UI Protocol 行业标准 | 自研 / 私有协议 |
|---|---|---|
| 标准化与治理 | ✅ 开源社区标准，版本演进有治理 | 团队自养或私有体系，无外部治理 |
| 事件语义覆盖 | ✅ 思考、文本增量、工具调用、状态更新、自定义扩展 | 需自行定义并长期维护，或仅覆盖内置场景 |
| 前端成本 | ✅ 现成 SDK 与组件 | 需自研解析器与渲染器，或引入全套私有组件与序列化 |
| 框架生态 | ✅ 多种成熟智能体开发框架提供官方集成 | 与主流生态脱节 |
| 长期维护 | ✅ 社区驱动，升级有依据 | 升级维护全靠自身投入，或受制于上游版本节奏 |
选型依据
- 所需语义已被标准化：流式对话的全部事件语义------思考过程、正文增量、工具调用、状态更新------均在 AG-UI Protocol 事件模型覆盖范围内，且保留自定义事件扩展点，业务特有语义不丢失，无需自行定义协议、自行编写前端解析器；卡片等富媒体不作为协议内置类型，经文本与自定义事件承载。
- 生态是最大杠杆：多种成熟的智能体开发框架提供官方集成，智能体编排可直接包装为 AG-UI Protocol 事件流对外输出；前端有现成聊天组件与状态管理，后端切换大模型或智能体框架时前端几乎不动，调试与观测亦有社区工具可用。自研或私有协议则需自建全链路解析与渲染，并被锁死在私有栈内。
传输层选型：SSE
传输层采用 SSE。流式对话的通信本质是"一次请求、服务端持续返回"的单向流，客户端控制类操作（停止生成、反馈）低频且无实时性约束，无需双向长连接；SSE 保持纯 HTTP 语义，可被现有网关、代理与鉴权体系直接接管，Web 与移动端行为一致。从业界实践看，当前主流大模型与 AI 应用的流式输出几乎均采用 SSE，已在开放互联网环境下经大规模、长周期验证，工程踩坑成本最低。WebSocket、gRPC-Web、WebRTC 等双向能力在本场景无用武之地，反而引入协议升级、代理穿透与长连接治理等额外成本，故均不采用；未来出现持续双向实时需求（语音流、协同编辑等）时再行评估。AG-UI Protocol 亦以 SSE 为默认传输，与交互协议选型天然契合。
前端框架选型：CopilotKit
前端采用 CopilotKit 构建对话界面。CopilotKit 是构建 AI 对话界面的开源前端框架，原生对接 AG-UI Protocol 端点：内置聊天界面、工具调用可视化与状态展示，富媒体渲染经自定义渲染器注册实现。框架拥有活跃的社区生态与详细的文档资料，界面组件、渲染器与交互逻辑均可定制扩展，可承接项目各类复杂的前端交互需求。AG-UI Protocol 为开放协议，前端实现不与单一框架绑定，必要时亦可基于浏览器原生事件源自行实现客户端。
选型总结
综上，Agent 流式交互技术的选型参考结论为：交互协议层采用 AG-UI Protocol；传输层采用 SSE；前端采用 CopilotKit 构建对话界面；后端由成熟的智能体开发框架直接产出 AG-UI Protocol 事件流。总体方向上，传输与交互协议各层均采用行业标准，不自研协议。
选型确定的整体链路如下：
#mermaid-svg-7Z0qVnShAumERFti{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-7Z0qVnShAumERFti .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-7Z0qVnShAumERFti .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-7Z0qVnShAumERFti .error-icon{fill:#552222;}#mermaid-svg-7Z0qVnShAumERFti .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-7Z0qVnShAumERFti .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-7Z0qVnShAumERFti .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-7Z0qVnShAumERFti .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-7Z0qVnShAumERFti .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-7Z0qVnShAumERFti .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-7Z0qVnShAumERFti .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-7Z0qVnShAumERFti .marker{fill:#333333;stroke:#333333;}#mermaid-svg-7Z0qVnShAumERFti .marker.cross{stroke:#333333;}#mermaid-svg-7Z0qVnShAumERFti svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-7Z0qVnShAumERFti p{margin:0;}#mermaid-svg-7Z0qVnShAumERFti .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-7Z0qVnShAumERFti .cluster-label text{fill:#333;}#mermaid-svg-7Z0qVnShAumERFti .cluster-label span{color:#333;}#mermaid-svg-7Z0qVnShAumERFti .cluster-label span p{background-color:transparent;}#mermaid-svg-7Z0qVnShAumERFti .label text,#mermaid-svg-7Z0qVnShAumERFti span{fill:#333;color:#333;}#mermaid-svg-7Z0qVnShAumERFti .node rect,#mermaid-svg-7Z0qVnShAumERFti .node circle,#mermaid-svg-7Z0qVnShAumERFti .node ellipse,#mermaid-svg-7Z0qVnShAumERFti .node polygon,#mermaid-svg-7Z0qVnShAumERFti .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-7Z0qVnShAumERFti .rough-node .label text,#mermaid-svg-7Z0qVnShAumERFti .node .label text,#mermaid-svg-7Z0qVnShAumERFti .image-shape .label,#mermaid-svg-7Z0qVnShAumERFti .icon-shape .label{text-anchor:middle;}#mermaid-svg-7Z0qVnShAumERFti .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-7Z0qVnShAumERFti .rough-node .label,#mermaid-svg-7Z0qVnShAumERFti .node .label,#mermaid-svg-7Z0qVnShAumERFti .image-shape .label,#mermaid-svg-7Z0qVnShAumERFti .icon-shape .label{text-align:center;}#mermaid-svg-7Z0qVnShAumERFti .node.clickable{cursor:pointer;}#mermaid-svg-7Z0qVnShAumERFti .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-7Z0qVnShAumERFti .arrowheadPath{fill:#333333;}#mermaid-svg-7Z0qVnShAumERFti .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-7Z0qVnShAumERFti .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-7Z0qVnShAumERFti .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-7Z0qVnShAumERFti .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-7Z0qVnShAumERFti .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-7Z0qVnShAumERFti .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-7Z0qVnShAumERFti .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-7Z0qVnShAumERFti .cluster text{fill:#333;}#mermaid-svg-7Z0qVnShAumERFti .cluster span{color:#333;}#mermaid-svg-7Z0qVnShAumERFti div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-7Z0qVnShAumERFti .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-7Z0qVnShAumERFti rect.text{fill:none;stroke-width:0;}#mermaid-svg-7Z0qVnShAumERFti .icon-shape,#mermaid-svg-7Z0qVnShAumERFti .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-7Z0qVnShAumERFti .icon-shape p,#mermaid-svg-7Z0qVnShAumERFti .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-7Z0qVnShAumERFti .icon-shape .label rect,#mermaid-svg-7Z0qVnShAumERFti .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-7Z0qVnShAumERFti .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-7Z0qVnShAumERFti .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-7Z0qVnShAumERFti :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} AG-UI 事件流
（SSE 传输）
前端
对话界面
（基于 CopilotKit 构建）
后端
智能体
（END）