> ## 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+，見 [準備環境](/zh-Hant/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。要真正發出訊息，繼續 [準備環境](/zh-Hant/vscode/start/setup)：檢查 Node.js、安裝 Claude / Codex SDK，並按需安裝本機 CLI。