Ant Design X: A toolkit for rapidly building AI chat interfaces with support for model integration and data flow management.

Ant Design X is a toolkit open-sourced by Ant Group, designed to help developers quickly build AI-driven dialog interfaces. It provides a rich set of components and templates, supports model integration compatible with OpenAI standards, and is suitable for a variety of application scenarios such as intelligent customer service and AI assistants. With Ant Design X, developers can easily create personalized AI interaction interfaces and improve development efficiency.

Demo address: https://x.ant.design/docs/playground/independent-cn

Function List

• Flexible and diverse atomic components: Covering most AI dialogue scenarios, it helps to quickly build personalized AI interaction interfaces.
• Out-of-the-box model integration: Easily connect to OpenAI-compliant inference services.
• Efficient data flow management: Provide powerful tools to manage data flow and improve development efficiency.
• Rich Template Support: Provides a variety of templates to jump-start LUI application development.
• Full TypeScript support: Ensure type coverage to improve development experience and reliability.
• Advanced Theme Customization: Support fine-grained style adjustment to meet diverse usage scenarios and personalized needs.

Using Help

mounting

Ant Design X can be installed using npm, yarn or pnpm:

npm install @ant-design/x --save
yarn add @ant-design/x
pnpm add @ant-design/x

Introduced in the browser

Add script and link tags in the browser and use global variables antdThe We have provided the antdx.js、antdx.min.js 和 antdx.min.js.map。

Using Atomic Components

Based on the RICH interaction paradigm, we provide a number of atomic components to help flexibly build AI dialog applications:

• universal assembly: e.g. Bubble, Conversations
• wake-up call component: e.g. Welcome, Prompts.
• presentation component: e.g. Sender, Attachment, Suggestion.
• Confirmation Component: e.g. ThoughtChain

The following is an example of creating a simple chat interface using the Atom component:

import React from 'react';
import { Bubble, Sender } from '@ant-design/x';
const messages = [{ content: 'Hello, Ant Design X!', role: 'user' }];
const App = () => (
<div>
<Bubble.List items={messages} />
<Sender />
</div>
);
export default App;

Connected Model Reasoning Service

utilization useXAgent runtime tool that makes it easy to connect to OpenAI-compliant model inference services. Here's how to use the useXAgent Examples of:

import React from 'react';
import { useXAgent, Sender } from '@ant-design/x';
const App = () => {
const [agent] = useXAgent({
baseURL: 'https://your.api.host',
model: 'gpt-3.5',
});
function chatRequest(text) {
agent.request({
messages: [{ content: text, role: 'user' }],
stream: true,
});
}
return <Sender onSubmit={chatRequest} />;
};
export default App;

Efficient management of data flow

utilization useXChat Runtime tools that make it easy to manage the flow of data in an AI dialog application:

import React from 'react';
import { useXChat, useXAgent } from '@ant-design/x';
const App = () => {
const [agent] = useXAgent({
baseURL: 'https://your.api.host',
model: 'gpt-3.5',
});
const { onRequest, messages } = useXChat({ agent });
return (
<div>
<Bubble.List items={messages} />
<Sender onSubmit={onRequest} />
</div>
);
};
export default App;

Using modular antd

@ant-design/x ES module tree rocking is supported by default.

TypeScript Support

@ant-design/x Provides built-in TypeScript definitions.

Non-React implementations

Feel free to contribute non-React implementations!