CC GUI（MossX 开源，JetBrains IDEA/VSCode 插件）界面全解析
CC GUI（MossX开源，JetBrains IDEA/VSCode插件）界面全解析
CC GUI 是 Claude Code 的图形界面包装工具（不是Anthropic官方产品），v0.5.9版本截图，适合放进你的博客。 一句话定位：给Claude Code Agent做可视化面板，不用敲命令行，直接在IDE里调用Claude Code、DeepSeek、Codex等模型，自动读写项目文件、执行代码任务
窗口顶部区域
1. 窗口标题栏：CC GUI | AI1
CC GUI：主面板标签AI1：会话分组标签，可以创建多组独立会话，隔离不同项目- 窗口右上角图标（从左到右）
- 分享图标：导出/分享当前会话记录
- ⋮三点菜单：更多操作（会话导出、清除缓存、重置、插件信息）
-最小化窗口操作：点击三点菜单，可以导出对话日志、修改全局插件配置。
2. New Session（新会话）工具栏
| 图标 | 名称 | 作用 | 怎么操作 |
|---|---|---|---|
+加号 |
新建会话 | 创建全新空白对话，独立上下文，适合开启新项目需求 | 点击加号，自动生成New Session，历史会话互不干扰 |
| 双方块 | 复制会话 | 克隆当前会话，复制全部对话历史、引用文件，用于分支测试prompt | 选中会话，点击克隆，修改prompt做A/B测试 |
| 放大镜 | 搜索会话 | 检索历史会话内容，查找之前对话记录 | 点击放大镜，输入关键词搜索历史聊天 |
| 环形箭头 | 重置会话 | 清空当前会话消息，保留已经加载的文件上下文 | 点一下，清空对话，不需要重建项目上下文 |
| ⚙️齿轮 | 设置按钮 | 全局插件配置（API密钥、模型供应商、SDK安装、主题、权限） | 首次使用必点这里，配置API Key，安装Claude Code SDK，切换语言 |
中间主区域：Send message to Claude Code
中间大空白区域：对话主画布
- 中间花形Logo + v0.5.9：版本号
Send message to Claude Code：对话消息展示区，AI回复、任务日志、代码diff都会在这里渲染- 作用：查看对话、AI输出、代码修改预览、工具调用日志
- 操作：聊天记录上下滚动；AI修改代码时，这里会展示代码变更Diff，可直接批准/拒绝修改。
中部标签栏：Tasks / Subagent / Edits（三个Tab，核心功能）
Tab1：Tasks 任务面板
✅ 作用：可视化查看Claude Code Agent正在执行的任务清单、任务进度、子步骤，Agent自动拆解复杂需求为任务列表。
当你下达大需求（重构项目、迁移Oracle到OceanBase、批量改代码），AI会自动拆分任务，在这里看每一步执行状态，看哪些完成/等待/失败。
- 操作：
- 切换到Tasks标签；
- 发送复杂需求后，面板自动生成任务列表；
- 点击任务，可以跳转到对应执行日志，查看失败原因；
- 可以手动暂停、重试单个任务。
Tab2：Subagent 子智能体面板
✅ 作用：管理子Agent（子智能体），Claude Code支持嵌套子Agent，专门拆分专项任务（比如单独一个子Agent做SQL审查，另一个做单元测试）。
适合大型项目：主Agent负责整体规划，Subagent负责单一细分任务，隔离职责。
- 操作：
- 在聊天框输入
#invoke agents唤起子Agent； - 在这个面板查看所有正在运行的子Agent、各自的上下文、状态；
- 可以单独给子Agent下发指令，独立终止子Agent，不影响主会话。
Tab3：Edits 文件修改面板
✅ 作用：所有文件变更记录，Agent读写、修改代码后的Diff预览，是程序员最常用面板。
AI修改项目代码，全部变更在这里汇总，可以逐行预览、批量接受、回滚、打开文件。
- 操作：
- AI执行代码修改后，切换Edits；
- 查看每一个被改动文件，红删绿增Diff视图；
- 单文件批准/拒绝，一键全部应用修改；
- 点击文件名，直接跳转到IDE对应代码位置。
输入框上方状态栏
0% | File Context
0%：Token加载进度，加载项目文件、引用文件时，这里显示读取文件的进度百分比；File Context：文件上下文管理器- 下拉箭头：查看当前会话已经加载到AI上下文里的所有文件列表；
- 循环箭头：刷新文件上下文，重新读取项目文件。
作用：查看哪些文件已经给到AI，控制上下文大小，避免token超限。
聊天输入框（核心指令区）
提示文字：@reference files, #invoke agents, !insert prompts, Enter to send
这里是输入prompt的地方，内置3个特殊前缀语法（CC GUI增强语法，Claude Code原生没有）
@@reference files 文件引用- 作用：把项目里的代码文件加入对话上下文，让AI读取真实代码。
- 使用：输入
@，弹出项目文件选择器，点击文件，自动插入到消息里。示例：@UserService.java 帮我review这段代码，找出SQL风险 - 场景：代码审查、重构、SQL迁移，没有@引用文件，AI看不到你的代码。
##invoke agents 唤起子Agent- 作用：手动调用自定义子智能体。
- 使用：
#invoke agents sql-review，调用预先定义好的SQL审查子Agent，单独处理数据库相关任务。
!!insert prompts 插入预设提示词模板- 作用：快速加载保存好的提示词模板（你博客里写的XML模板、代码Review模板）。
- 使用：
!insert prompts code-review，一键把预存的系统提示词插入输入框。
- 基础操作：写完prompt，直接回车
Enter to send发送消息；支持粘贴代码、图片。
左下角控制栏（模型/权限/Plan选项）
从左到右：
- 双横线图标：权限控制开关
- 作用：控制Claude Code读写本地文件、执行终端命令的权限。
- 模式：只读模式 / 需要人工批准修改 / 完全自动模式。安全重点！只读模式下AI不能修改任何本地文件，适合先做代码分析。
- 花瓣图标：流式输出开关，开启后AI逐字输出；关闭会等全部结果一次性返回。
Plan：规划模式开关- 作用：开启Plan，AI先输出整体方案规划，询问确认，再执行代码修改。
- 推荐开启：复杂项目重构，AI先给方案，你确认同意，才动手改代码，防止乱改文件。
- 模型下拉框：
deepseek-v4.1-flash[1M] 1M High- 作用：切换模型供应商和模型。这里当前选中DeepSeek，你可以切换Claude系列、其他模型。
- 操作：下拉菜单切换模型，支持多模型切换，同一个会话可以换模型跑。
1M High：代表100万上下文窗口，高算力模式。
右下角发送按钮
▶ 蓝色箭头：发送消息按钮，和回车等价，发送输入框prompt。
✨ 博客配套：CC GUI 内置指令速查表（直接放进博客）
| 指令前缀 | 语法 | 功能 | 示例 |
|---|---|---|---|
@ |
@文件名 |
引用项目文件 | @t_bill.sql 检查OceanBase语法 |
# |
#invoke agents xxx |
唤起自定义子Agent | #invoke agents log-analyzer 分析这个报错 |
! |
!insert prompts 模板名 |
加载预设提示词模板 | !insert prompts xml-code-review |
兼容Claude Code原生斜杠命令：输入框内可以直接写
/init/review/btw/cost，和原生Claude Code一样生效。
⚠️ 博客重点避坑（价值点）
- CC GUI 不是Anthropic官方软件，是MossX开源包装层，底层依然调用Claude Code SDK；
@ / # / !这三个是CC GUI扩展语法，原生Claude Code网页端不识别；- File Context加载文件会消耗token，不要一次性引入整个大项目，只引用需要的文件；
- 权限开关很重要，陌生Agent任务建议切到只读模式，防止意外修改代码；
- Plan模式适合大改动，小bug修复可以关闭Plan直接执行。
📖 博客使用案例（示例，可直接贴）
需求：Oracle迁移OceanBase，ReviewSQL
- 打开CC GUI，新建New Session；
- 输入
@xxx.sql引用账单SQL文件； - 输入prompt：
<instructions>检查SQL，适配OceanBase语法，列出风险点</instructions>； - Plan保持开启，发送；
- AI输出方案，确认后自动修改SQL；
- 切换Edits面板，查看所有修改Diff，批准文件变更；
- Tasks面板看每一步执行日志；
- 复杂场景，使用
#invoke agents sql-check子Agent单独校验SQL。
如果你想，我可以把这一段直接整理成Markdown博客原文，或者增加一张「CC GUI界面标注图」文字版。
要不要我顺便写一个CC GUI快速上手教程（从零安装+配置APIKey+第一个代码任务）放在你的博客？
浙公网安备 33010602011771号