> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mossx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 安装扩展

> 从 VS Code Marketplace 安装 CCGUI，并打开侧栏。

CC GUI VS Code 端以扩展发布，发布者是 **MossX**，扩展 ID 是 `MossX.vscode-cc-gui`。

## 前提条件

* [Visual Studio Code](https://code.visualstudio.com/) 1.85 或更高版本
* 能访问 [VS Code Marketplace](https://marketplace.visualstudio.com/)

macOS、Windows 和 Linux 都可以安装。真正开始对话前，还需要 Node.js 20+，见 [准备环境](/vscode/start/setup)。

## 从 Marketplace 安装

<Steps>
  <Step title="打开扩展视图">
    在 VS Code 左侧点 **扩展**，或按 `Cmd+Shift+X`（Windows / Linux 为 `Ctrl+Shift+X`）。
  </Step>

  <Step title="搜索 CCGUI">
    在搜索框输入 `CCGUI` 或 `CC GUI`。目标扩展的完整显示名是 **CCGUI / CC GUI（Claude Codex OpenCode Kimi）**，发布者是 **MossX**。
  </Step>

  <Step title="安装">
    点 **安装**，等 VS Code 完成下载并激活扩展。
  </Step>

  <Step title="打开 CC GUI">
    在左侧 Activity Bar 点 **CC GUI** 图标，或打开命令面板运行 **CC GUI: Open CC GUI**。
  </Step>
</Steps>

<img src="https://mintcdn.com/mossx-docs/kz4nt5KFSKzkAZwe/images/vscode/marketplace-install.png?fit=max&auto=format&n=kz4nt5KFSKzkAZwe&q=85&s=71689c07d847d73f092596870e611133" alt="Marketplace 搜索 CCGUI" width="100%" data-path="images/vscode/marketplace-install.png" />

也可以在浏览器打开 Marketplace 页面后再点 **Install**：

[https://marketplace.visualstudio.com/items?itemName=MossX.vscode-cc-gui](https://marketplace.visualstudio.com/items?itemName=MossX.vscode-cc-gui)

## 确认安装成功

安装完成后你会看到：

* 左侧 Activity Bar 多了一个 **CC GUI** 图标
* 命令面板输入 `CC GUI` 能搜到一组命令
* 编辑器标题栏右侧会出现打开面板的入口

如果侧栏是空的，先打开一个工作区文件夹。CC GUI 需要项目根目录来定位文件引用、会话和工作目录。

## 下一步

安装只把界面装进 VS Code。要真正发出消息，继续 [准备环境](/vscode/start/setup)：检查 Node.js、安装 Claude / Codex SDK，并按需安装本机 CLI。