open-index/open-npm huggingface dataset:
npm package: @spark-ai/chat
Description: a free and open-source chat framework for building excellent LLM-powered chat experiences
Latest version: 1.1.4


# spark-ai/chat 

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

## 介绍

![O1CN01PXnfNo1TXaRlPEuYp_!!6000000002392-2-tps-2944-1864.png](https://img.alicdn.com/imgextra/i3/O1CN01PXnfNo1TXaRlPEuYp_!!6000000002392-2-tps-2944-1864.png)


![O1CN01UsX0vG1dU3YEqZHvG_!!6000000003738-2-tps-2944-1864.png](https://img.alicdn.com/imgextra/i4/O1CN01UsX0vG1dU3YEqZHvG_!!6000000003738-2-tps-2944-1864.png)


## 多形式内容展示


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

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

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

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

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


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


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


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


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


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


然后构造数据并渲染它：


```javascript
<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