Ant Design X of Vue

ant-design-x-vue-next 是遵循 Ant Design 设计体系的 Vue UI 库，用于构建由 AI 驱动的界面。

它是官方 React 版 @ant-design/x 的社区续作（基于 ant-design-x-vue），持续对齐官方能力与文档结构。

+

快速入口

入口	说明
组件总览	按 RICH 分组浏览全部组件
更新日志	版本变更时间线（对齐官方风格）
对齐进度	与 @ant-design/x 的对照表
设计语言	官方 RICH 设计指南（外链）
样板间	独立式 / 助手式演示

特性

• 基于 RICH 交互范式，提供卓越的 AI 交互体验
• 覆盖对话场景常用组件：唤醒、表达、确认、反馈
• 轻松对接符合 OpenAI 标准的模型推理服务
• 提供 useXChat / XRequest / XStream 等数据流能力
• TypeScript 开发，细粒度样式与语义化 DOM 可定制

安装

IMPORTANT

确保你的 Vue 版本大于等于 3.5，并安装 ant-design-vue。

npm

$ npm install ant-design-vue ant-design-x-vue-next --save

pnpm

$ pnpm add ant-design-vue ant-design-x-vue-next

yarn

$ yarn add ant-design-vue ant-design-x-vue-next

bun

$ bun add ant-design-vue ant-design-x-vue-next

浏览器引入

在浏览器中使用 script 引入 UMD 产物，全局变量为打包配置中的库名。可通过 jsDelivr 或 UNPKG 获取：

<script src="https://unpkg.com/ant-design-x-vue-next/dist/index.umd.js"></script>

推荐在现代工程中使用 npm 安装与按需/自动导入。

自动导入

使用 unplugin-vue-components 时，可通过 resolver 自动解析以 AX 开头的组件：

vite.config.js

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import components from 'unplugin-vue-components/vite';
import { AntDesignXVueResolver } from 'ant-design-x-vue-next/resolver';

export default defineConfig({
  plugins: [
    vue(),
    components({
      resolvers: [AntDesignXVueResolver()],
    }),
  ],
});

webpack.config.js

const Components = require('unplugin-vue-components/webpack');
const { AntDesignXVueResolver } = require('ant-design-x-vue-next/resolver');

module.exports = {
  configureWebpack: {
    plugins: [
      Components.default({
        resolvers: [AntDesignXVueResolver()],
      }),
    ],
  },
};

<script setup>
// auto import equals to
// import { Bubble as AXBubble } from 'ant-design-x-vue-next';
</script>

<template>
  <AXBubble content="Hello AI" />
</template>

快速上手

<script setup lang="ts">
import { Bubble, Sender } from 'ant-design-x-vue-next';

const messages = [{ content: 'Hello, Ant Design X Vue Next!', role: 'user' }];
</script>

<template>
  <Bubble.List :items="messages" />
  <Sender />
</template>

原子组件（RICH）

分组对齐官方 Ant Design X：

• 通用: Bubble、Conversations、notification（系统 Web Notification）
• 唤醒: Welcome、Prompts
• 表达: Sender、Attachments、Suggestion、Folder、CodeHighlighter、Mermaid
• 确认: Think、ThoughtChain
• 反馈: Actions、Sources、FileCard
• 工具: XMarkdown（MVP）、useXAgent / useXChat / XStream / XRequest、XProvider

完整对照见 与 Ant Design X 对齐。

WARNING

文档中 tsx 风格的代码示例采用 defineRender 编写，要运行它们还需集成 Vue Macros。

也可在左上角将 风格偏好 切换至 setup 预览模板风格示例。