Agent 在回答里渲染业务卡片的四种实现方式

技术老baby @niemingxing2023原推发布于 2026.10.17

在 X 上打开原推

🃏 为什么 ChatGPT、Claude 能在回答里弹出商品卡、表单，而你的 Agent 只会吐一大段文字？ 拆了一圈主流产品，让 Agent 返回业务卡片，基本就这 4 种做法： 1️⃣ 工具调用式（目前最主流） 把卡片注册成 show_card 这类"展示工具"，模型调用它 = 声明要展示什么，前端按工具名渲染组件。参数有 JSON Schema 约束，格式最稳。ChatGPT Apps、Claude 的各种卡片都是这个思路。 2️⃣ 文本标记式 模型在正常回答里插入约定标记，比如 <card type="order" ref="xxx"/>，前端流式解析时替换成组件。图文混排最自然，上线最快，但要做好半截标签的缓冲和容错。 3️⃣ 结构化输出式 用 JSON Schema 约束整个回复，输出 text、card 交替的 blocks 数组。格式 100% 可控，适合要同时下发到飞书、企微、钉钉卡片的 B 端场景，代价是流式体验差一些。 4️⃣ 确定性绑定式 卡片根本不经过模型：业务工具执行完，编排层直接按工具类型套模板下发，模型只负责写解释文字。Coze 的插件卡片就是这样，数据最可靠。 实战中通常组合使用，记住三条原则： ✅ 数据别让模型写。业务工具只给模型返回 data_ref，出卡片时由后端回填真实数据，价格、订单号零幻觉。 ✅ 展示工具不阻塞 loop。服务端立刻合成一个 tool_result，卡片同时推给前端，无需等待。 ✅ 表单类卡片要结束回合。展示后直接结束本轮，用户提交的答案作为新消息回来，并在编排层硬性截断，别只靠 prompt 约束。 想走标准化，可以关注 A2UI、MCP Apps、AG-UI 三个协议。 欢迎评论区讨论下你是如何实现的agent里渲染业务卡片？关注我，多交流