> ## 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](/vscode/providers/claude) | `@anthropic-ai/claude-agent-sdk` |
| SDK    | [Codex](/vscode/providers/codex)        | `@openai/codex-sdk`              |
| 本机 CLI | [Kimi](/vscode/providers/kimi)          | 系统里的 `kimi`                      |
| 本机 CLI | [Grok](/vscode/providers/grok)          | 系统里的 `grok`                      |
| 本机 CLI | [OpenCode](/vscode/providers/opencode)  | 系统里的 `opencode`                  |
| 本机 CLI | [Pi](/vscode/providers/pi)              | 系统里的 `pi`                        |

<Note>
  Gemini 文案入口尚未作为独立运行时交付，本文档 V1 不覆盖。
</Note>

## 和其他端的关系

CC GUI 还有 JetBrains 插件、独立客户端和手机端。对话、供应商、MCP、Skills 这些能力各端共用；Activity Bar、编辑器右键、源代码管理里的 Commit 按钮只属于 VS Code。

本系列文档只写 VS Code 端。JetBrains 见 [JetBrains 端简介](/jetbrains/index)，客户端见 [客户端简介](/desktop/index)。侧栏分组：快速开始、详细介绍、供应商 / CLI、进阶使用、社区。

## 从这里开始

<Columns cols={2}>
  <Card title="安装扩展" icon="download" href="/vscode/start/install">
    从 VS Code Marketplace 安装 CCGUI。
  </Card>

  <Card title="准备环境" icon="wrench" href="/vscode/start/setup">
    配好 Node.js 20+、SDK 和可选 CLI。
  </Card>

  <Card title="供应商 / CLI" icon="boxes" href="/vscode/providers/overview">
    Claude、Codex、Kimi、Grok、OpenCode、Pi 各自成页。
  </Card>

  <Card title="发出第一条消息" icon="message-square" href="/vscode/start/first-task">
    选供应商、填密钥、完成第一次对话。
  </Card>

  <Card title="看懂界面" icon="layout-dashboard" href="/vscode/start/interface">
    侧栏、标签页、对话 / 历史 / 设置三视图。
  </Card>
</Columns>