> ## 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.

# CC GUI VS Code 端簡介

> 用圖形介面在 VS Code 裡使用 Claude Code、Codex、OpenCode、Kimi、Grok 和 Pi。

**CC GUI**（也稱 **CCGUI** / **ccgui**）是開源的多 CLI 圖形介面。VS Code 端以擴充功能形式執行，讓你在側欄或編輯器標籤裡對話，而不必只盯著終端。

當前擴充功能 ID 為 `MossX.vscode-cc-gui`，顯示名為 **CCGUI / CC GUI（Claude Codex OpenCode Kimi）**。

<Note>
  CC GUI 是獨立開源專案，與 Anthropic、OpenAI、Microsoft 及其他第三方工具廠商無隸屬、背書或贊助關係。
</Note>

<img src="https://mintcdn.com/mossx-docs/kz4nt5KFSKzkAZwe/images/vscode/sidebar-overview.png?fit=max&auto=format&n=kz4nt5KFSKzkAZwe&q=85&s=48176df129a500e2002de47f6f30622c" alt="左側側欄總覽" width="100%" data-path="images/vscode/sidebar-overview.png" />

## 它能做什麼

* 在 VS Code 裡直接和 Claude Code、Codex 對話。
* 檢測並呼叫本機已安裝的 Grok、Kimi、OpenCode、Pi CLI。
* 用 `@` 引用檔案、`/` 執行斜槓命令、`#` 選擇智能體、`!` 插入提示詞。
* 管理 MCP、Skills、Agents、提示詞庫和許可權確認。
* 把編輯器選區、檔案路徑、診斷資訊和 Git 變更送到對話裡。

## 支援的執行時

| 型別     | 名稱                                              | 依賴                               |
| ------ | ----------------------------------------------- | -------------------------------- |
| SDK    | [Claude Code](/zh-Hant/vscode/providers/claude) | `@anthropic-ai/claude-agent-sdk` |
| SDK    | [Codex](/zh-Hant/vscode/providers/codex)        | `@openai/codex-sdk`              |
| 本機 CLI | [Kimi](/zh-Hant/vscode/providers/kimi)          | 系統裡的 `kimi`                      |
| 本機 CLI | [Grok](/zh-Hant/vscode/providers/grok)          | 系統裡的 `grok`                      |
| 本機 CLI | [OpenCode](/zh-Hant/vscode/providers/opencode)  | 系統裡的 `opencode`                  |
| 本機 CLI | [Pi](/zh-Hant/vscode/providers/pi)              | 系統裡的 `pi`                        |

<Note>
  Gemini 文案入口尚未作為獨立執行時交付，本文件 V1 不覆蓋。
</Note>

## 和其他端的關係

CC GUI 還有 JetBrains 外掛、獨立客戶端和手機端。對話、供應商、MCP、Skills 這些能力各端共用；Activity Bar、編輯器右鍵、原始碼管理裡的 Commit 按鈕只屬於 VS Code。

本系列文件只寫 VS Code 端。JetBrains 見 [JetBrains 端簡介](/zh-Hant/jetbrains/index)，客戶端見 [客戶端簡介](/zh-Hant/desktop/index)。側欄分組：快速開始、詳細介紹、供應商 / CLI、進階使用、社群。

## 從這裡開始

<Columns cols={2}>
  <Card title="安裝擴充功能" icon="download" href="/zh-Hant/vscode/start/install">
    從 VS Code Marketplace 安裝 CCGUI。
  </Card>

  <Card title="準備環境" icon="wrench" href="/zh-Hant/vscode/start/setup">
    配好 Node.js 20+、SDK 和可選 CLI。
  </Card>

  <Card title="供應商 / CLI" icon="boxes" href="/zh-Hant/vscode/providers/overview">
    Claude、Codex、Kimi、Grok、OpenCode、Pi 各自成頁。
  </Card>

  <Card title="發出第一條訊息" icon="message-square" href="/zh-Hant/vscode/start/first-task">
    選供應商、填金鑰、完成第一次對話。
  </Card>

  <Card title="看懂介面" icon="layout-dashboard" href="/zh-Hant/vscode/start/interface">
    側欄、標籤頁、對話 / 歷史 / 設定三檢視。
  </Card>
</Columns>