新增于HBuilderX 4.72+

# 简介

uni-ai-x,是一个开源的、全平台的、原生的、云端一体的ai聊天套件。

能够连接ai大模型,真流式接收和输出内容,原生渲染markdown。
基于跨平台原生开发框架uni-app x,可以被编译为不同平台的编程语言,如:

平台 编译语言
web平台/小程序 JavaScript
Android平台 Kotlin
iOS平台 Swift
鸿蒙OS平台 ArkTS

# 项目背景:

市面上开源的AI聊天套件大多以Web端为主,像ChatGPT、DeepSeek等的App端并不开源。
而通过Web-view接入AI的体验差强人意,自己开发面临如下核心挑战:

  • 流式网络请求:基于POST的SSE技术实现实时数据传输
  • Markdown流式解析:动态解析富文本格式标记
  • 编程语言代码高亮:实现语法识别与样式渲染
  • Table表格解析渲染:结构化数据的可视化呈现
  • 流式排版性能:确保内容加载不阻塞UI交互操作
  • 跨平台开发困境:缺乏成熟跨平台框架,鸿蒙端开发尤为艰难
  • 极致性能要求:每个Token需同步完成Markdown解析、代码高亮及排版渲染,运算密集且不能卡顿UI

uni-ai-x由此应运而生,专注攻克全平台原生AI聊天场景的技术痛点。

可以满足开发者的如下需求:

  1. 基于uni-ai-x开发全新的ai应用
  2. 在之前的app中引入uni-ai-x的sdk,给app补充ai聊天能力
  3. 客户端和服务器均开源,可以自由定制扩展

# 功能和特点

uni-ai-x功能上参考 deepseek 的客户端设计,并扩展了更多平台。

  1. 多端支持与主题适配 支持Web/H5、iOS、Android、鸿蒙 App、微信小程序。Web 端采用响应式布局,适配 PC 宽屏和移动设备,并提供浅色和暗黑两种主题模式
  2. 丰富的 AI 服务集成与高级功能 集成多家主流 AI 服务商,用户可灵活切换不同 AI 模型,部分模型支持"深度思考"和"联网搜索"等高级能力
  3. 消息与会话管理
    支持多轮对话和历史会话管理,具备会话切换、删除、自动创建等功能,提供完整的 AI 聊天体验
  4. 高级渲染与输出特性 支持 AI 回复内容的流式输出和原生 Markdown 格式渲染,内置高性能解析器,支持代码高亮和复杂文本结构展示

各端效果如下截图,依次平台为:iOS、Android、鸿蒙

web pc端:

# 安装步骤

前提条件:uni-ai-x 支持的大语言模型服务商为阿里百炼,需要先注册账户并创建 API-Key

  1. 下载示例项目
    打开uni-ai-x插件下载地址:https://ext.dcloud.net.cn/plugin?name=uni-ai-x 点击使用HBuilderX导入示例项目

  2. 绑定项目的服务空间

  • 不基于unicloud的项目,可直接删除项目根目录uniCloud目录跳过本步骤
  • 基于unicloud的项目,在项目根目录uniCloud右键选择"关联云服务空间或项目",关联你的服务空间。
  1. 配置获取临时鉴权token
    为提供更好的用户体验,uni-ai-x 由客户端直接连接 AI 服务器。同时为了保证在前端调用大模型时不暴露服务商的apiKey信息,特采用方案:前端调用服务端接口获取临时 token 后,使用临时 token 调用服务商的api。
  • 不基于unicloud的项目,需要根据文档提供获取临时鉴权 token 接口。并配置到/uni_modules/uni-ai-x/config.uts,bailian -> getToken 内

  • 基于unicloud的项目,默认将通过 uni-ai-x-co 获取,需要将API-Key配置到uniCloud/cloudfunctions/common/uni-config-center/uni-ai-x/config.json (需要手动创建) 配置示例:

{
    "apiKey":{
        "bailian": "sk-2****7"
    } 
}
  1. 运行项目
    在菜单点击运行,选择要运行的客户端。 注意: 运行到 App 端需要打自定义基座

完整客户端配置 @cinfig-client 配置文件路径:/uni_modules/uni-ai-x/config.uts

Provider 服务商 @Provider

字段名 类型 说明
models LLMModel[] 该服务商下支持的模型列表详见
description string 服务商描述信息,用于 UI 展示
baseURL string API 基础地址,部分服务商需要
getToken function token 获取方法

LLMModel 模型 @LLMModel

字段名 类型 说明
name string 模型名称,需与服务商实际支持的模型一致

目前仅支持阿里云百炼

目录结构


uni_modules/uni-ai-x/
├── components/                    
│   ├── uni-ai-x-setting/          // AI设置相关组件
│   ├── uni-ai-x-model/            // AI模型相关组件
│   ├── uni-ai-x-msg/              // 消息相关组件
│   ├── uni-marked-el/             // Markdown渲染相关组件
│   ├── uni-rotate-icon/           // 旋转图标组件
│   ├── uni-ai-icon/               // AI图标组件
│   ├── uni-ai-menu.uvue           // AI菜单组件
│   ├── msg-code.uvue              // 代码消息组件
│   ├── msg-tool-bar.uvue          // 消息工具栏组件
│   ├── uni-ai-chat.uvue           // AI聊天主组件
│   ├── input-tool-bar.uvue        // 输入工具栏组件
│   ├── add-chat-btn.uvue          // 新增对话按钮组件
│   ├── add-chat.uvue              // 新增对话组件
│   ├── ai-menu-left.uvue          // 顶部导航栏菜单左侧组件
│   └── ai-menu-right.uvue         // 顶部导航栏菜单右侧组件
├── sdk/                           // AI能力相关SDK
│   ├── index.uts                  // SDK主入口
│   └── types.uts                  // 类型定义
├── static/                        // 静态资源
│   ├── ai-provider/               // AI服务商图标目录
│   └── font/                      // 字体资源目录
├── pages/                         // 页面目录
│   └── uni-ai.uvue                // AI聊天主页面
├── uniCloud/                      // 云函数相关
│   └── cloudfunctions/            // 云函数目录(属于服务器端文件,不参与打包)
│       └── uni-ai-x-co/        // AI聊天云函数
│           ├── index.obj.js       // 云函数主入口
│           ├── utils.js           // 云函数工具
│           └── package.json       // 云函数依赖描述
├── config.uts                     // 插件配置文件
├── package.json                   // 插件依赖与元数据
├── readme.md                      // 插件说明文档
└── changelog.md                   // 插件更新日志

更多相关文档:

  1. uni-ai-x 基于uni-ai,uni-ai的文档详情参考
  2. 通义大模型应用上架及合规备案详情参考

# 常见问题

  1. 项目不是基于uni-app-x而是基于uni-app开发的如何接入? 答:基于uni-app开发的项目暂不支持接入,但可以接入uni-ai-chat
  2. 如遇以下报错,则说明你未打自定义基座运行
  • ‌error: app-service.js(4737:38) ReferenceError:Can't find variable: TextDecoder parseChunkData@app-service.js:4737:38‌
  • ‌error: java.util.regex.PatternSyntaxException: Syntax error in regexp pattern near index 110‌

# 交流群

更多问题欢迎点此加入uni-ai官方交流群

当前项目正在快速迭代UI体验,请关注本项目,订阅更新通知。