Package Exports

@ant-design/x
@ant-design/x/es/bubble/BubbleList
@ant-design/x/es/bubble/BubbleList.js
@ant-design/x/es/index.js
@ant-design/x/es/version/token-meta.json
@ant-design/x/es/version/token.json
@ant-design/x/lib/index.js
@ant-design/x/locale/en_US
@ant-design/x/locale/en_US.js
@ant-design/x/locale/zh_CN
@ant-design/x/locale/zh_CN.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ant-design/x) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Ant Design X

Craft AI-driven interfaces effortlessly.

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

demos

✨ Features

🌈 Best Practices from Enterprise-level AI Products: Based on the RICH interaction paradigm, delivering an excellent AI experience
🧩 Flexible Atomic Components: Covering most AI chat scenarios, helping you quickly build personalized AI UIs
✨ Streaming-friendly, extensible, high-performance Markdown renderer: Formula, code highlight, mermaid, etc. @ant-design/x-markdown
🚀 Out-of-the-box model/agent integration: Easily connect to OpenAI-compatible models/agents @ant-design/x-sdk
⚡️ Efficient conversation data flow management: Powerful data flow management for efficient development @ant-design/x-sdk
📦 Rich templates: Multiple templates for quick LUI app development Playground
🛡 Full TypeScript support: Developed in TypeScript, providing complete type definitions
🎨 Deep theme customization: Fine-grained style adjustments for all scenarios

📦 Installation

npm install @ant-design/x

yarn add @ant-design/x

pnpm add @ant-design/x

ut install @ant-design/x

🖥️ Import in Browser

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

We provide antdx.js, antdx.min.js, and antdx.min.js.map in the dist directory of the npm package.

Strongly not recommended to use built files as they cannot be tree-shaken and are hard to get bug fixes for dependencies.

Note: antdx.js and antdx.min.js depend on react, react-dom, dayjs, antd, @ant-design/cssinjs, @ant-design/icons. Please make sure to import these files first.

🧩 Atomic Components

Based on the RICH interaction paradigm, we provide a large number of atomic components for different interaction stages to help you flexibly build your AI chat applications:

Below is an example of building a simple chat box with atomic components:

import React from 'react';
import {
  // Message bubble
  Bubble,
  // Input box
  Sender,
} from '@ant-design/x';

const messages = [
  {
    key: 'message_1',
    content: 'Hello, Ant Design X!',
    role: 'user',
  },
  {
    key: 'x_message_1',
    content: 'Hello, I am Ant Design X!',
    role: 'x',
  },
];

const role = {
  // Bubble position: end
  x: {
    placement: 'end',
  },
};

const App = () => (
  <div>
    <Bubble.List items={messages} role={role} />
    <Sender />
  </div>
);

export default App;

⚡️ Model/Agent Integration & Efficient Data Flow Management

@ant-design/x-sdk provides a set of tools and APIs to help developers manage AI chat app data flow out of the box. See details here.

Qwen Integration Example

Note: 🔥 dangerouslyApiKey has security risks, see documentation for details.

import { useXAgent, Sender, XRequest } from '@ant-design/x';
import React from 'react';

const { create } = XRequest({
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  dangerouslyApiKey: process.env['DASHSCOPE_API_KEY'],
  model: 'qwen-plus',
});

const Component: React.FC = () => {
  const [agent] = useXAgent({
    request: async (info, callbacks) => {
      const { messages, message } = info;
      const { onUpdate } = callbacks;

      // current message
      console.log('message', message);
      // messages list
      console.log('messages', messages);

      let content: string = '';

      try {
        create(
          {
            messages: [{ role: 'user', content: message }],
            stream: true,
          },
          {
            onSuccess: (chunks) => {
              console.log('sse chunk list', chunks);
            },
            onError: (error) => {
              console.log('error', error);
            },
            onUpdate: (chunk) => {
              console.log('sse object', chunk);
              const data = JSON.parse(chunk.data);
              content += data?.choices[0].delta.content;
              onUpdate(content);
            },
          },
        );
      } catch (error) {
        // handle error
      }
    },
  });

  const onSubmit = (message: string) => {
    agent.request(
      { message },
      {
        onUpdate: () => {},
        onSuccess: () => {},
        onError: () => {},
      },
    );
  };

  return <Sender onSubmit={onSubmit} />;
};

OpenAI Integration Example

import { useXAgent, useXChat, Sender, Bubble } from '@ant-design/x';
import OpenAI from 'openai';
import React from 'react';

const client = new OpenAI({
  apiKey: process.env['OPENAI_API_KEY'],
  dangerouslyAllowBrowser: true,
});

const Demo: React.FC = () => {
  const [agent] = useXAgent({
    request: async (info, callbacks) => {
      const { messages, message } = info;

      const { onSuccess, onUpdate, onError } = callbacks;

      // current message
      console.log('message', message);

      // history messages
      console.log('messages', messages);

      let content: string = '';

      try {
        const stream = await client.chat.completions.create({
          model: 'gpt-4o',
          // if chat context is needed, modify the array
          messages: [{ role: 'user', content: message }],
          // stream mode
          stream: true,
        });

        for await (const chunk of stream) {
          content += chunk.choices[0]?.delta?.content || '';
          onUpdate(content);
        }

        onSuccess(content);
      } catch (error) {
        // handle error
        // onError();
      }
    },
  });

  const {
    // use to send message
    onRequest,
    // use to render messages
    messages,
  } = useXChat({ agent });

  const items = messages.map(({ message, id }) => ({
    // key is required, used to identify the message
    key: id,
    content: message,
  }));

  return (
    <>
      <Bubble.List items={items} />
      <Sender onSubmit={onRequest} />
    </>
  );
};

export default Demo;

✨ Markdown Renderer

@ant-design/x-markdown provides a streaming-friendly, extensible, high-performance Markdown renderer. Supports formula, code highlight, mermaid, etc. See details here.

🧩 Atomic Components

Based on the RICH interaction paradigm, we provide a large number of atomic components for different interaction stages to help you flexibly build your AI chat applications:

Below is an example of building a simple chat box with atomic components:

import React from 'react';
import {
  // Message bubble
  Bubble,
  // Input box
  Sender,
} from '@ant-design/x';

const messages = [
  {
    key: 'message_1',
    content: 'Hello, Ant Design X!',
    role: 'user',
  },
  {
    key: 'x_message_1',
    content: 'Hello, I am Ant Design X!',
    role: 'x',
  },
];

const role = {
  // Bubble position: end
  x: {
    placement: 'end',
  },
};

const App = () => (
  <div>
    <Bubble.List items={messages} role={role} />
    <Sender />
  </div>
);

export default App;

Please read our CONTRIBUTING.md first.

If you'd like to help us improve Ant Design X, just create a Pull Request. Feel free to report bugs and issues here.

We strongly recommend reading How To Ask Questions The Smart Way, How to Ask a Question in Open Source Community, and How to Report Bugs Effectively before posting. Well-written bug reports help us help you!

Community

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

When asking questions on GitHub Discussions, please use the Q&A tag.