Introduction - Ant Design X

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

Features

Conversation management: Manage message parsing, state, and operations through useXChat.
Request processing: Use XRequest for streaming responses, middleware, global configuration, and manual control.
Model integration: Switch model services through the Chat Provider mechanism.
Agent Runtime integration: Normalize messages, reasoning, tools, approvals, tasks, and artifacts into unified events through a model-independent AgentProvider.
Multiple conversations: Isolate concurrent conversation data with independent keys.

Installation

Install using npm or yarn or pnpm or bun or utoo

We recommend using npm or yarn or pnpm or bun or utoo for development, which allows easy debugging in development environment and safe production deployment, while enjoying the benefits of the entire ecosystem and toolchain.

npm

yarn

pnpm

Bun

utoo

bash

$ npm install @ant-design/x-sdk --save

If your network environment is poor, we recommend using cnpm.

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 first.

Example

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 Sandbox

Loading Demo...