@spark-ai/chat v1.1.3

spark-ai/chat

一个免费、开源的对话框架，用于构建优秀的 LLM 对话体验

介绍

多形式内容展示

Spark Chat 所有对话都基于一个统一模型：

• 每条消息 = 一个 Bubble
• 每个 Bubble 包含多个 cards [ ]
• 每张卡片由 { code, data } 构成

这意味着：一切消息、内容、交互行为，都是一张“卡片”，是结构化的，你可以将文本、图表、推荐、流程、轮播、统计数据以卡片的形式组织，你也可以让每次模型回答都变成一组“可被理解与操作的块，这种结构具有两个重要技术价值：

• 统一渲染引擎：所有对话内容都走统一的 card 渲染管线，避免 UI 特例和嵌套分支逻辑
• 语义隔离：每种卡片封装自己的样式、逻辑、状态，无副作用，利于测试和协同

在数据层面，它实现了从“语言-界面”之间的解耦：开发者可以仅通过结构数据来操控 UI 呈现，让人机交互从“流式对话”走向“结构对话”。

Spark Chat 不再要求模型吐出自然语言，再由 UI “包裹”这些文字。我们拒绝“钉死”的输入输出组件，而是选择用“乐高式”语法描述整个界面状态，于是我们设计了一种对大模型友好的 UI 协议：

<Bubble
  cards={[
    {
      code: 'Text',
      data: {
        content: 'Hello World',
      },
    },
  ]}
/>

你可以创建自定义卡片并注册：

function MyCard(props) {
  return <div>MyCard</div>;
}

<CustomCardsProvider cardConfig={{ MyCard }}>...</CustomCardsProvider>

然后构造数据并渲染它：

<Bubble
  cards={[
    {
      code: 'Text',
      data: {
        content: 'Hello World',
      },
    },
    {
      code: 'MyCard',
      data: [
        ['Active Users', 112893],
        ['Account Balance (CNY)', 112893],
      ],
    },
  ]}
/>

如何使用

• https://bailian.agentscope.io/chat#/docs/development/overview-cn