Ant Design X SDK

Efficiently manage large model data streams

Changelog · Report a Bug · Request a Feature · English · 中文

Introduction

@ant-design/x-sdk provides a set of tool APIs designed to help developers manage AI conversation application data flows out of the box.

📦 Installation

npm install @ant-design/x-sdk

yarn add @ant-design/x-sdk

pnpm add @ant-design/x-sdk

ut install @ant-design/x-sdk

Browser Import

Use script and link tags to directly import files in the browser, and use the global variable XSDK.

We provide x-sdk.js, x-sdk.min.js, and x-sdk.min.js.map in the dist directory of the npm package.

Strongly not recommended to use built files, as this prevents on-demand loading and makes it difficult to get quick bug fixes for underlying dependency modules.

Note: x-sdk.js, x-sdk.min.js, and x-sdk.min.js.map depend on react and react-dom. Please ensure these files are imported in advance.

Example

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

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

  React.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>
  );
};

🌈 Enterprise-level LLM Components Out of the Box

@ant-design/x provides a rich set of atomic components for different interaction stages based on the RICH interaction paradigm, helping you flexibly build your AI applications. See details here.

✨ Markdown Renderer

@ant-design/x-markdown aims to provide a streaming-friendly, highly extensible, and high-performance Markdown renderer. It supports streaming rendering of formulas, code highlighting, mermaid, and more. See details here.

How to Contribute

Before participating in any form, please read the Contributor Guide. If you wish to contribute, feel free to submit a Pull Request or report a Bug.

We highly recommend reading How To Ask Questions The Smart Way, How to Ask Questions in Open Source Community, How to Report Bugs Effectively, and How to Submit Unanswerable Questions to Open Source Projects. Better questions are more likely to get help.

Community Support

If you encounter problems during use, you can seek help through the following channels. We also encourage experienced users to help newcomers through these channels.

When asking questions on GitHub Discussions, it is recommended to use the Q&A tag.

1. GitHub Discussions
2. GitHub Issues