AI | CC GUI 集成 IDEA 完整教程

CC GUI 是一款开源免费（MIT 协议）的 JetBrains IDE 插件，能将 Claude Code 和 OpenAI Codex 的能力以可视化界面集成到 IDEA 中。

前置准备

1.检查 IDEA 版本

CC GUI 要求 IDEA 2024.2 及以上版本。检查方式：

• Windows/Linux：Help → About
• Mac：IntelliJ IDEA → About IntelliJ IDEA

若版本过低，请先升级 IDE

确保 Node.js 已安装

打开终端/命令行运行：

node --version 

若未安装，从 nodejs.org 下载安装即可

 

2.安装 CC GUI 插件
通过插件市场安装
打开 IDEA 设置：

Windows/Linux：File → Settings → Plugins
Mac：IntelliJ IDEA → Settings → Plugins
切换到 Marketplace 标签页，搜索 CC GUI
 

 点击 Install 安装，完成后重启 IDE

3.打开 CC GUI 面板

重启后，IDEA 右侧工具栏会出现 CC GUI 图标，点击即可打开。若未显示，通过 View → Tool Windows → CC GUI 手动调出

 

4.安装 SDK 依赖（核心步骤）

首次打开 CC GUI 面板时，会自动弹出提示让你安装 Claude Code SDK：

1. 点击提示中的 “Install SDK” 或 “前往安装”
2. 等待 20-30 秒，出现“SDK 安装成功”提示即可

   

   配置 AI  模型（核心必做）

   CC GUI 支持多种模型接入方式：

    方式一：使用本地 settings.json（推荐）

如果你之前已在终端中配置过 Claude Code CLI，直接在供应商设置中填入 settings.json 路径即可复用配置，无需重新配置 API Key。

 

方式二：添加自定义供应商

1. 打开 CC GUI 面板，点击右上角 ⚙️ 设置图标

2. 选择 “供应商管理” → 点击 “+ Add”

3. 

   填写配置信息： 

   

   础使用

   对话交互

   配置完成后，在 CC GUI 面板输入框中：

   • 直接输入需求发送
   • 输入 @ 引用项目中的文件，让 AI 理解特定代码
   • 支持拖拽上传图片描述视觉需求

内置命令

命令	功能
/init	AI 自动理解项目结构，生成 CLAUDE.md 配置文档
/review	代码审查

查看 Diff 对比

AI 生成的代码修改建议支持 Diff 差异比对，可在面板中直观查看改动，确认后再应用

进阶功能
MCP 扩展
CC GUI 支持 MCP（Model Context Protocol），允许 Agent 调用外部工具：

推荐安装 Chrome Devtools MCP：让 Agent 能直接操控浏览器，适合前端调试和需要登录态的页面测试。

推荐安装 idea MCP：让 Claude Code 与 IDEA 本身建立连接。
 

Skills 技能包

Skills 是 Claude Code 的能力扩展包：

Skill	功能
web-access	打通浏览器通道，处理需登录的页面访问
frontend-design	根据需求描述生成 HTML/CSS 前端代码