Repository files navigation

Ant Design X

Craft AI-driven interfaces effortlessly.

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

• 🌈Derived from Best Practices of Enterprise-Level AI Products: Built on the RICH interaction paradigm, delivering an exceptional AI interaction experience.
• 🧩Flexible and Diverse Atomic Components: Covers most AI dialogue scenarios, empowering you to quickly build personalized AI interaction interfaces.
• ⚡Out-of-the-Box Model Integration: Easily connect with inference services compatible with OpenAI standards.
• 🔄Efficient Management of Conversation Data Flows: Provides powerful tools for managing data flows, enhancing development efficiency.
• 📦Rich Template Support: Offers multiple templates for quickly starting LUI application development.
• 🛡Complete TypeScript Support: Developed with TypeScript, ensuring robust type coverage to improve the development experience and reliability.
• 🎨Advanced Theme Customization: Supports fine-grained style adjustments to meet diverse use cases and personalization needs.

npm install @ant-design/x --save

yarn add @ant-design/x

pnpm add @ant-design/x

Addscript andlink tags in your browser and use the global variableantd.

We provideantdx.js,antdx.min.js, andantdx.min.js.map in thedist directory of the npm package.

We do not recommend using the built files because they cannot be tree-shaken and will not receive bug fixes for underlying dependencies.

Note:antdx.js andantdx.min.js depend onreact,react-dom,dayjs,antd,@ant-design/cssinjs,@ant-design/icons, please ensure these files are loaded before using them.

Based on the RICH interaction paradigm, we provide numerous atomic components for various stages of interaction to help you flexibly build your AI dialogue applications:

• Components Overview
• Playground

Below is an example of using atomic components to create a simple chatbot interface:

importReactfrom'react';import{// Message bubbleBubble,// Input boxSender,}from'@ant-design/x';constmessages=[{content:'Hello, Ant Design X!',role:'user',},];constApp=()=>(<><Bubble.Listitems={messages}/><Sender/></>);exportdefaultApp;

We help you integrate standard model inference services out of the box by providing runtime tools likeuseXAgent,XRequest, etc.

Here is an example of integrating Qwen:

Note: 🔥dangerouslyApiKey has security risks, more details can be found in thedocumentation.

import{useXAgent,Sender,XRequest}from'@ant-design/x';importReactfrom'react';const{ create}=XRequest({baseURL:'https://dashscope.aliyuncs.com/compatible-mode/v1',dangerouslyApiKey:process.env['DASHSCOPE_API_KEY'],model:'qwen-plus',});constComponent:React.FC=()=>{const[agent]=useXAgent({request:async(info,callbacks)=>{const{ messages, message}=info;const{ onUpdate}=callbacks;// current messageconsole.log('message',message);// messages listconsole.log('messages',messages);letcontent: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);constdata=JSON.parse(chunk.data);content+=data?.choices[0].delta.content;onUpdate(content);},},);}catch(error){// handle error}},});constonSubmit=(message:string)=>{agent.request({ message},{onUpdate:()=>{},onSuccess:()=>{},onError:()=>{},},);};return<SenderonSubmit={onSubmit}/>;};

We help you efficiently manage the data flow of AI chat applications out of the box by providing theuseXChat runtime tool:

Here is an example of integrating OpenAI:

import{useXAgent,useXChat,Sender,Bubble}from'@ant-design/x';importOpenAIfrom'openai';importReactfrom'react';constclient=newOpenAI({apiKey:process.env['OPENAI_API_KEY'],dangerouslyAllowBrowser:true,});constDemo:React.FC=()=>{const[agent]=useXAgent({request:async(info,callbacks)=>{const{ messages, message}=info;const{ onSuccess, onUpdate, onError}=callbacks;// current messageconsole.log('message',message);// history messagesconsole.log('messages',messages);letcontent:string='';try{conststream=awaitclient.chat.completions.create({model:'gpt-4o',// if chat context is needed, modify the arraymessages:[{role:'user',content:message}],// stream modestream:true,});forawait(constchunkofstream){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});constitems=messages.map(({ message, id})=>({// key is required, used to identify the messagekey:id,content:message,}));return(<><Bubble.Listitems={items}/><SenderonSubmit={onRequest}/></>);};exportdefaultDemo;

@ant-design/x supports ES modules tree shaking by default.

@ant-design/x provides a built-in ts definition.

Welcome to contribute!

Ant Design X is widely used in AI-driven user interfaces within Ant Group. If your company and products use Ant Design X, feel free to leave a commenthere.

Please read ourCONTRIBUTING.md first.

If you'd like to help us improve antd, just create aPull Request. Feel free to report bugs and issueshere.

If you're new to posting issues, we ask that you readHow To Ask Questions The Smart Way andHow to Ask a Question in Open Source Community andHow to Report Bugs Effectively prior to posting. Well written bug reports help us help you!

If you encounter any issues while using Ant Design X, you can seek help through the following channels. We also encourage experienced users to assist newcomers via these platforms.

When asking questions on GitHub Discussions, it's recommended to use theQ&A tag.

1. GitHub Discussions
2. GitHub Issues