SuperAPI AI 工具集

x-card

设计与创作

查看项目

更新于 10-15 16:49

技能介绍

用途:@ant-design/x-card 是 A2UI 协议的 React 渲染实现,供 AI 智能体通过结构化 JSON 命令流动态渲染富交互 UI。

主要能力:XCard.Box(容器,接收命令、持有 catalogMap/surfaceCatalogMap,向所有 Card 分发命令并聚合 onAction)与 XCard.Card(按 surfaceId 渲染单个 surface,持有组件树与数据模型)。支持 A2UI v0.9 命令 createSurface、updateComponents、updateDataModel、deleteSurface;自定义组件注册与目录(catalog)管理;通过 JSON Pointer 路径(RFC 6901)做数据绑定;动作处理,把用户事件回传给智能体;流式渐进渲染。v0.9 为推荐协议,v0.8 仅向后兼容。

使用方式:npm install @ant-design/x-card 安装;从包中导入 XCard、registerCatalog、loadCatalog、validateComponent、clearCatalogCache 及类型 XAgentCommand_v0_9、XAgentCommand_v0_8、ActionPayload、Catalog、CatalogComponent。流程为定义并注册目录、通过 XCard.Box 的 components 属性注册自定义组件、用 XCard.Box 包裹 XCard.Card、把命令推入 commands、在 onAction 中接收 ActionPayload。子组件通过 XCard.Box 传入而非 Card。

限制与规则:每条命令必须带 "version": "v0.9";每个 surface 组件树只能有一个 id 为 "root" 的根;只能用扁平邻接表,children 以 id 字符串引用;布局用 updateComponents,数据/状态用 updateDataModel;注册目录需在挂载前调用 registerCatalog();components 对象避免内联重建,保持稳定;输入组件需 value: { path: "..." } 才能双向绑定;流式场景应追加命令而非替换。action.event.context 中的路径为写入目标,触发时 X-Card 会把 { path } 解析为 { value }。

适用场景:AI 聊天结构化卡片、独立智能体表单 UI、流式 Markdown 加卡片侧栏,以及 HTTP 流式响应作为命令输入等。可配合 use-x-chat、x-components、x-markdown、x-request 使用。详细参考 USAGE.md、COMMANDS.md、DATA_BINDING.md、ACTIONS.md、CATALOG.md、API.md 及 A2UI 官方文档。