零幻觉交付：如何构建一个高可用 AI 图表生成组件
在让大模型（LLM）生成图表（如 VChart）的实际场景中，开发者往往面临两个极端的困境：要么 AI 输出的 JSON 太过复杂导致报错，要么流式输出的不确定性让前端解析变得异常困难。
为了解决这些问题，我总结了一套**“轻量级契约 + 强力兜底 + 伪流式调度”**的实现方案。以下是核心逻辑：
1. 极简契约：约定解析边界
不要试图让 AI 学习复杂的配置文档。我们通过 Prompt 与 LLM 达成约定：所有图表数据必须包裹在特定的自定义标签中，例如 ···vchart ···。
更重要的是，交给 AI 的数据结构必须极致简化。
- 痛点：结构越复杂，AI 出错率呈指数级升高。
- 策略：只让 AI 提供核心的
data数组和必要的chartType。复杂的样式（Colors, Axes, Legends）全部由前端组件默认配置。
原则：AI 只做“填空题”，不做“开放性简答题”。
2. 代码兜底：稳健性的最后防线
永远不要完全信任 AI 的输出。在前端组件层，我们需要编写一套强大的配置合路逻辑：
- 解析截断：JS 截获
···vchart标签内的内容。 - 默认值注入：使用预设的 VChart 配置模板，将 AI 生成的简易数据注入到
data字段。 - 异常捕获：如果 AI 生成的 JSON 语法破碎，使用正则提取或简单的字符串修复技巧，确保图表至少能“画出来”。
3. MCP 增强：通过 Tool Call 完善数据
如果业务需要的数据 AI 无法直接生成（例如需要查询实时数据库），我们可以引入 MCP (Model Context Protocol) 。
通过 tool_call，AI 可以主动调用外部工具来获取或校准数据：
- 场景：AI 发现用户请求的数据量庞大，它不再尝试口胡，而是调用一个
get_vchart_schema的工具。 - 优势：利用 MCP 可以在数据传递给前端之前，在服务端就完成结构的标准化和校验。
4. 流式策略：真流式 vs 假流式
在 UI 表现上，我们面临一个取舍：
| 方案 | 逻辑 | 优势 | 缺点 |
|---|---|---|---|
| 真流式 | 实时解析 Markdown 碎片 | 极速响应，用户感知快 | 解析破碎 JSON 极难，图表闪烁 |
| 假流式 | 全量接收 -> 前端模拟输出 | 易于截留完整 JSON，解析极稳 | 初始首屏时间（TTFT）略长 |
我的推荐做法：假流式（Pseudo-streaming）
逻辑如下：
- 前端全量拦截 LLM 返回的消息。
- 一旦检测到完整的图表 JSON，立即在后台完成图表初始化。
- 文本渲染：使用
setInterval匀速输出文字，模拟打字机效果。 - 图表渲染：当“打字机”运行到图表锚点时，瞬间展示已经渲染好的 VChart 实例。这种方式既保留了 AI 的“呼吸感”，又规避了流式解析 JSON 的技术噩梦。
总结
让 AI 生成图表，核心不在于它有多聪明，而在于前端的“边界控制”。通过简化数据契约、代码强力兜底、MCP 工具辅助以及假流式调度，我们可以将原本不可控的 AI 输出转变为工业级的稳定组件。
