x

几行代码把 AI 聊天助手嵌进你的 React 应用

x 是一个基于 React 与 Ant Design 的 AI 界面开发框架，目标是让开发者用最少代码快速搭建聊天、Copilot 等 AI 交互界面。它把对话流、消息渲染、输入框、工具调用展示等常见 AI 交互模式封装成可复用组件，解决从零手写 AI 前端成本高、状态管理复杂、UI 风格不统一的问题。核心能力包括：开箱即用的 Chat UI 组件、对主流大模型 API 的适配层、流式输出与 Markdown 渲染、可插拔的会话状态管理，以及与 antd 设计体系一致的视觉风格。项目用 TypeScript 编写，类型完整，适合在现有 React 后台或 SaaS 产品中快速嵌入 AI 助手，也适合作为独立 AI 应用的前端基座。

开源 free 开发框架

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 4802

维护状态活跃

是否开源是

定价模式 free

项目预览

项目数据

分类开发框架

开发团队ant-design

所属国家

官网地址https://x.ant.design

GitHubhttps://github.com/ant-design/x

定价模式free

价格说明开源免费使用

访问状态

是否开源是

开源协议

主要语言TypeScript

技术栈/模型ai,antd,chat-ui,copilot,react

GitHub 星标★ 4802

30天Star增速

HF 下载量

上线时间2024-05-09 00:00:00

代码更新—

仓库体积—

本站数据更新—

维护状态活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-10-08

浏览次数0

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

正在加载星标数据…

技术标签

使用教程

—

难度：入门约 10 分钟部署方式：库/依赖 5 步

⚠ 该项目 README 未提供完整安装说明，以下步骤为通用流程，请以官方文档为准。

环境要求

已安装 Node.js 与 npm（README 使用 npm i -g 全局安装）
一个已存在的 React + TypeScript 前端工程（用于嵌入组件）
可正常访问 npm 源（包均发布在 npm 上）

安装与启动步骤

1检查 Node 环境

确认本机已装 Node.js 与 npm，后续要用 npm 全局安装 utoo 工具。
```
node -v
npm -v
```
2全局安装 utoo

README 明确给出的第一步：用 npm 全局安装 utoo 命令行工具，装完可用 ut 命令。
```
npm i -g utoo
```
3安装工程依赖

在工程根目录执行 ut install（README 中写作 ut [install]），用 utoo 安装项目依赖。
```
ut install
```
4安装核心组件包

从 README 包列表中选取核心包 @ant-design/x，通过 npm 安装到你的 React 工程。
```
npm install @ant-design/x
```
5安装扩展包

需要 Markdown 渲染或 SDK 能力时，按 README 表格再加装对应扩展包。
```
npm install @ant-design/x-markdown @ant-design/x-sdk
```

如何确认成功

ut install 执行无报错、工程 node_modules 生成，且能 import 到 @ant-design/x 即视为安装成功。

常见问题

Q：README 没写 npm install @ant-design/x，能这样装吗？

A：

Q：utoo 和 ut 命令是什么关系？

A：utoo 是 README 指定的依赖安装工具，先用 npm i -g utoo 全局安装，随后即可使用 ut install 命令安装工程依赖。

Q：有哪些包可以装？

A：README 包列表给出四个：核心组件 @ant-design/x，以及 @ant-design/x-markdown、@ant-design/x-sdk、@ant-design/x-skill。

Q：装完怎么启动看效果？

A：README 未提供启动或运行命令，需把它嵌入已有 React 工程，参考官网 x.ant.design 的示例。

注意事项

README 只给出 npm i -g utoo 与 ut [install]，未提供任何启动/运行命令，请以官网文档为准。
@ant-design/x 是 React 组件库，不能独立启动服务，需嵌入现有 React 项目使用。
具体版本号与最新可用包名请以 README 表格和 npm 页面为准。

核心亮点

基于 antd 组件体系，与现有中后台项目视觉和交互无缝衔接
内置流式输出、Markdown 渲染和消息状态管理，省去大量胶水代码
TypeScript 类型完整，组件 API 设计清晰，上手成本低

不足之处

生态和周边工具仍在成长，复杂多轮会话与工具调用场景需自行扩展
文档与示例覆盖度有限，深度定制时需阅读源码

适用场景

在企业中后台系统里快速嵌入 AI 客服或知识问答助手
为 SaaS 产品增加 Copilot 式侧边栏对话入口
搭建内部 AI 工具平台的前端对话界面

替代项目

assistant-ui、Vercel AI SDK、chatbot-ui

项目介绍

x 是开发框架领域的开源项目，由 ant-design 开发，2024 年首次发布。

在全站 13,916 个收录项目中，它的 GitHub 星标数（4,802）位列前 9%，在开发框架分类的 844 个项目里位列前 11%。

项目目前处于活跃维护状态，最近一次代码更新于 2026-10-01。开源免费使用。

它主要面向的使用场景是：在企业中后台系统里快速嵌入AI客服或知识问答助手。同类可对比的替代方案包括 assistant-ui、Vercel AI SDK、chatbot-ui。

上一篇：draive

下一篇：tilelang

x