自定义渲染协议

📚 学习目标

学完这篇文章后，你将能够：

• 设计一套适合电商、数据分析等场景的自定义 XML 协议
• 实现前端流式解析器
• 使用 React 组件动态渲染 AI 输出的结构化数据

前置知识

在开始学习之前，建议先阅读：

• 01-bolt-artifact-protocol

1️⃣ 为什么需要自定义协议？

boltArtifact 是为了写代码设计的。但如果你的 AI 是做电商推荐的呢？你可能希望它输出：

• 商品卡片
• 对比表格
• 价格走势图

纯文本无法满足，Markdown 表格能力有限。你需要一套 Domain Specific Protocol (DSP)。

2️⃣ 协议设计范式

推荐使用 Namespace + Component + Data 的结构。

<aiCard id="rec-01" type="product">
  <aiData format="json">
    {
      "name": "iPhone 15",
      "price": 5999,
      "features": ["A16", "USB-C"]
    }
  </aiData>
</aiCard>

• Namespace: aiCard (避免与 HTML 冲突)
• Component: type="product" (决定用哪个 React 组件渲染)
• Data: <aiData> 包裹的 JSON (结构化数据)

3️⃣ 实现解析与渲染

1. 流式解析器

检测 <aiCard> 和 <aiData> 标签。 当 <aiData> 闭合时，尝试 JSON.parse 内容。

2. 组件映射 (React)

const CARD_COMPONENTS = {
  product: ProductCard,
  comparison: ComparisonTable,
  chart: EChartsWrapper
};

// 在 Markdown 渲染器中替换占位符
const renderMap = {
  aiCard: ({ node }) => {
    const { type, id } = node.attributes;
    const Component = CARD_COMPONENTS[type];
    const data = parseData(node.children); // 伪代码
    return <Component data={data} key={id} />;
  }
}

4️⃣ 交互与回传

卡片不仅是展示，还可以交互。 例如 "购买" 按钮。用户点击后，可以发送一个 Tool Call 或 Hidden Message 给 LLM，让对话继续。

// 商品卡片内部
<Button onClick={() => sendMessage(`用户点击了购买 ${productId}`)}>
  立即购买
</Button>

💡 练习题

1. 设计题：为"股票分析助手"设计一套协议。需要支持：
   • K 线图 (<stockChart>)
   • 财报摘要表格 (<financialTable>)
   • 风险提示警告 (<riskAlert>) 请写出 XML 示例。

📚 参考资源

官方文档

• LangGraph JS

✅ 总结

本章要点：

• 结构化思维：不要让 AI 只吐字，让它吐结构。
• XML > JSON：在混合排版（文本+组件）场景下，XML 标签比 JSON 代码块更自然。
• 灵活性：这套方案可以把任何现有的 React/Vue 组件库接入到 AI 对话中。

恭喜！ 你已经完成了所有高级生态内容的学习。