简体中文
简体中文
# hbuilderx-ai-chat
HBuilderX 需5.0+版本
hbuilderx-ai-chat 插件，在HBuilderX 5.0 alpha版发布，将基于终端的模型cli工具，封装为可视化界面。
但该插件并没有为uni-app (x)的开发做定制优化。只是直接对接了几家cli。并且大部分开发者因为众所周知的原因，无法使用顶尖的AI Coding模型。
从HBuilderX 5.01起，专为uni-app (x)开发优化的agent上线，并内置了顶尖的AI Coding模型，称之为uni-agent。
从HBuilderX 5.02起，老版的ai-chat插件被废弃。DCloud将长期专注于uni-agent，为开发者提供最擅长编写uni-app (x)的数字员工。
========以下为过期内容==========
hbuilderx-ai-chat 插件将对话式 AI 能力整合进 HBuilderX，允许开发者用自然语言与不同的 CLI 型 AI 助手(如 Claude、Copilot、Cursor、Gemini 等)交互。
你可以询问代码问题、要求生成功能、修复 bug、重构、补充注释、生成测试用例，AI 会基于你选择的项目上下文给出帮助。
# 插件具体可以做什么?
- 代码解释:逐行解释函数、复杂逻辑、第三方依赖的用途。
- 代码生成:创建新文件、组件、接口调用、表单等(可指定框架/语言/风格)。
- Bug 修复建议:定位错误,给出修复方案并附带示例补丁。
- 重构:建议并实施函数拆分、命名改进、性能优化等。
- 注释与文档:自动生成注释、README 段落、API 文档模板。
- 单元测试:生成或补全测试用例。
- 代码转换:例如转换为 TypeScript/ES6/更现代的 API。
- 样式与 UI 代码:生成页面布局、样式类、响应式适配建议。
- ......
# 安装插件
如下图所示,工具栏,点击最右侧的 AI 图标,即可安装AI chat插件。
# 启动插件
HBuilderX,可以通过以下方式打开聊天视图。
- 工具栏,点击最右侧的
AI图标 - 菜单【视图】【插件扩展视图】【AI Code Chat】
- 快捷键: Windows
Ctrl+Alt+I; MacOS⌃⌘I
# 聊天视图概览
如下图所示,AI聊天视图,提供了多个AI助手,以便大家选择。
您可以根据自己的需要,选择合适的AI助手。各 CLI 助手需要手动在命令行中安装,详见 CLI AI 助手管理。
- CLI AI 助手管理(安装、切换、更新)
- 切换项目
- 顶部会话:
- 切换项目
- 历史会话
- 新会话
- 聊天对话框:引用文件
- 聊天对话框:上传图片
- MCP服务
# AI-CLI助手管理
# 助手选择与切换
在 HBuilderX AI Chat 插件的聊天视图中,提供了多个 AI 助手供您选择:
- 在中央卡片列表中选择助手。每个卡片显示:
- CLI 助手名称与版本(例如:Claude Code CLI 2.0.53)
- 安装状态:已安装、未安装、需要更新
- 切换 CLI 助手:在会话中切换助手会影响后续回答。建议在长会话需要不同能力时,开始 新会话 再切换。
# CLI 助手手动安装
重要提示:HBuilderX AI Chat 插件不提供自动安装功能,您需要在命令行中手动安装各个 AI CLI 助手。
以下是各主流 AI CLI 助手的官方安装方式:
# 1. Claude Code CLI
官方网站:https://claude.com/claude-code
安装方式:
macOS / Linux:
curl -fsSL https://claude.ai/install.sh | bash
Windows:
irm https://claude.ai/install.ps1 | iex
npm 安装(跨平台):
npm install -g @anthropic-ai/claude-code
验证安装:
claude --version
# 2. Qoder CLI
安装方式:
macOS / Linux:
brew install qoderai/qoder/qodercli --cask
Windows:
curl -fsSL https://qoder.com/install | bash
npm 安装(跨平台):
npm install -g @qoder-ai/qodercli
验证安装:
qodercli --version
# 3. Cursor CLI
官方网站:https://cursor.com/cn/cli
安装方式:
macOS / Windows:
curl https://cursor.com/install -fsS | bash
验证安装:
cursor-agent --version
# 4. Copilot CLI
官方网站:https://docs.github.com/en/copilot/how-tos/set-up/install-copilot-cli
前置要求:需要有 GitHub Copilot 订阅
安装方式:
npm install -g @github/copilot
验证安装:
copilot --version
# 5. Gemini CLI
安装方式:
npm install -g @google/gemini-cli
验证安装:
gemini --version
# 安装后刷新
安装完成后,请执行以下操作:
- 重启 HBuilderX:确保 HBuilderX 能够检测到新安装的 CLI 工具
- 重新打开 AI Chat 视图:检查助手是否显示版本号
- 验证路径:确保 CLI 工具已添加到系统 PATH 环境变量中
# 常见安装问题
Q: 安装后 HBuilderX 仍显示"未安装"状态?
A: 请检查:
- CLI 工具是否已正确添加到系统 PATH 环境变量
- 在命令行中运行
which <cli-name>(macOS/Linux)或where <cli-name>(Windows)验证安装路径 - 重启 HBuilderX
Q: 权限不足无法安装?
A:
- macOS/Linux:在命令前添加
sudo - Windows:以管理员身份运行终端
- npm 全局安装权限问题:参考 npm 权限修复指南
Q: 网络问题导致安装失败?
A:
- 使用国内镜像源(npm、pip)
- 配置代理:
npm config set proxy http://your-proxy:port - 直接从 GitHub Releases 下载预编译包
# 开启聊天
# 开启第一次聊天
在聊天对话框输入hello, 回车试试。
如上,提示错误:错误: No workspace folder found. Please open a folder first. 因为:开启聊天,必须选择一个项目。
# 选择项目开启聊天
开启聊天,必须选择一个项目。如果没有项目,在HBuilderX内新建或拖入一个项目,然后重新打开聊天视图。
# 向提示加上下文
通过提供正确的上下文,您可以获得更相关、更准确的回复。
为了获得最佳聊天效果,编写聊天提示时,可以添加上下文:
- 引用特定文件
- 获取控制台内容 (比如获取uni-app运行控制台错误信息)
- 获取当前打开的文件
- 获取鼠标选中内容
# 上下文-引用特定文件
- 在聊天对话框中,输入
@符号,会自动打开文件选择窗口。 - 聊天对话框,右下角点击
@图标,也会自动打开文件选择窗口
# 上下文-当前选中的代码
如下图所示:您可以告诉AI,操作当前选中的代码,比如
删除当前被选中的代码
# 上下文-获取HBuilderX控制台信息
如下图所示:当你运行uni-app的时候,控制台出现错误信息,您可以告诉AI
获取控制台错误信息,然后进行修复
# 上传图片
如下图所示,聊天对话框,右下角,点击图片icon,可以上传图片,让AI实现相应功能。
# 常见问题
# Q1:未选择项目
错误消息:No workspace folder found. Please open a folder first.
解决方案:
开启聊天,必须选择一个项目。如果没有项目,在HBuilderX内新建或拖入一个项目,然后重新打开聊天视图。
# Prompts: 推荐提示语模板
# P1. 登录页面(手机号 + 验证码)生成模板
请为 uni-app x 项目生成一个登录页面(pages/login/login.uvue)。要求:
1. 输入手机号(格式校验)
2. 验证码输入框 + "获取验证码"按钮同一行
3. 登录按钮在下方
4. 生成完整 .uvue 代码,包括 script、template、style。
# P2. Bug定位并修复
@pages/index/index.uvue,请你根据其中的报错或潜在问题进行定位,并给出修复方案。
输出结构:
- Bug 列表
- Bug 产生原因
- 修复代码(只修改必要部分)
