README-zh_CN.md

Ant Design X SDK

高效管理大模型数据流

更新日志 · 报告一个 Bug · 想新增特性？ · English · 中文

介绍

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

安装

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

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

📦 安装

npm install @ant-design/x-sdk

yarn add @ant-design/x-sdk

pnpm add @ant-design/x-sdk

ut install @ant-design/x-sdk

浏览器引入

在浏览器中使用 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请确保提前引入这些文件。

示例

import React from 'react';
import { XRequest } from '@ant-design/x-sdk';

export default () => {
  const [status, setStatus] = React.useState<'string'>('');
  const [lines, setLines] = React.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>
  );
};

🌈 开箱即用的大模型企业级组件

@ant-design/x 基于 RICH 交互范式，在不同的交互阶段提供了大量的原子组件，帮助你灵活搭建你的 AI 应用，详情点击这里。

✨ Markdown 渲染器

@ant-design/x-markdown 旨在提供流式友好、强拓展性和高性能的 Markdown 渲染器。提供流式渲染公式、代码高亮、mermaid 等能力，详情点击这里。

如何贡献

在任何形式的参与前，请先阅读 贡献者文档。如果你希望参与贡献，欢迎提交 Pull Request，或给我们 报告 Bug。

强烈推荐阅读 《提问的智慧》、《如何向开源社区提问题》 和 《如何有效地报告 Bug》、《如何向开源项目提交无法解答的问题》，更好的问题更容易获得帮助。

社区互助

如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。

通过 GitHub Discussions 提问时，建议使用 Q&A 标签。

1. GitHub Discussions
2. GitHub Issues