logoAnt Design X

设计研发组件X MarkdownX SDK演示
  • 介绍
  • 数据流
    • useXChat会话数据
    • useXConversations会话管理
    • Chat Provider数据提供
  • 工具
    • XRequest请求
    • XStream流

介绍

@ant-design/x-sdk 提供了一系列的工具API，旨在帮助开发人员开箱即用的管理AI对话应用数据流

特性

  • 会话管理：提供 useConversations Hook 管理会话列表，支持创建、删除
  • 统一数据流管理：提供 useXChat Hook 管理会话数据，支持消息解析、状态管理和操作API
  • 强大的请求处理：内置 XRequest API 支持流式响应、中间件、全局配置和手动控制
  • 多模型支持：通过 Chat Provider 机制支持不同AI模型的无缝接入，内置DeepSeek、OpenAI兼容方案
  • 多会话并存：支持同时管理多个会话，每个会话独立数据流

安装

使用 npm 或 yarn 或 pnpm 或 bun 安装 或 utoo 安装

我们推荐使用 npm 或 yarn 或 pnpm 或 bun 或 utoo 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

npm iconnpm
yarn iconyarn
pnpm iconpnpm
Bun LogoBun
Utoo Logoutoo
bash
$ npm install @ant-design/x-sdk --save

如果你的网络环境不佳，推荐使用 cnpm。

浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 XSDK。

我们在 npm 发布包内的 dist 目录下提供了 x-sdk.js、x-sdk.min.js 和 x-sdk.min.js.map。

强烈不推荐使用已构建文件，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。

注意：x-sdk.js 和 x-sdk.min.js 和 x-sdk.min.js.map。依赖 react、react-dom请确保提前引入这些文件。

示例

Loading Demo...
import React,{ useEffect, useState } from 'react';
import { XRequest } from '@ant-design/x-sdk';

export default () => {
  const [status, setStatus] = useState<'string'>('');
  const [lines, setLines] = useState<Record<string, string>[]>([]);

  useEffect(() => {
    setStatus('pending');

    XRequest('https://api.example.com/chat', {
      params: {
        model: 'gpt-3.5-turbo',
        messages: [{ role: 'user', content: 'hello, who are u?' }],
        stream: true,
      },
      callbacks: {
        onSuccess: (messages) => {
          setStatus('success');
          console.log('onSuccess', messages);
        },
        onError: (error) => {
          setStatus('error');
          console.error('onError', error);
        },
        onUpdate: (msg) => {
          setLines((pre) => [...pre, msg]);
          console.log('onUpdate', msg);
        },
      },
    });
  }, []);

  return (
    <div>
      <div>Status: {status}</div>
      <div>Lines: {lines.length}</div>
    </div>
  );
};
Open on CodeSandboxOpen Sandbox