🚀 Claude Code Chat - 适用于 VS Code 的精美 Claude Code 聊天界面

再也不用敲命令行了。直接在 VS Code 内通过美观直观的界面与 Claude Code 对话吧。

告别命令行，以全新方式体验 Claude Code。这款扩展将惊艳的聊天界面直接融入你的编辑器中，让 AI 辅助变得触手可及、可视化且充满乐趣。

🤖 由 Claude Code 为 Claude Code 打造 - 这款扩展完全使用 Claude Code 自身开发而成。Claude Code 竟然为自己创建了聊天界面！

---

✨ 为什么选择 Claude Code Chat？

🖥️ 无需终端 - 精美的聊天界面取代了命令行交互
⏪ 恢复检查点 - 撤销更改并将代码恢复到任意先前状态
🔌 MCP、技能与插件 - 浏览、搜索并从精选市场安装
💾 对话历史 - 自动保存对话历史并管理会话
🎨 VS Code 和 Cursor - 支持 VS Code、Cursor 及其他兼容编辑器
🧠 Plan 和 Ultrathink 模式 - 提供“先规划”和“超深度思考”模式
⚡ 智能上下文 - 可引用文件、粘贴图片并创建自定义命令
🐧 Windows/WSL 支持 - 完整原生 Windows 和 WSL 支持

---

🌟 核心功能

💬 精美的图形化聊天界面

• 无需终端——所有操作均通过 UI 完成
• 实时流式响应，带有打字提示
• 一键复制消息，并提供视觉反馈
• 增强的 Markdown 支持，带语法高亮
• 输入框可根据内容自动调整大小
• 代码块支持复制到剪贴板

⏪ 检查点与会话管理

• 恢复检查点 - 立即撤销更改，恢复到任意先前状态
• 自动基于 Git 的备份系统，确保实验安全
• 浏览并从任意对话检查点恢复
• 自动保存和恢复对话
• 实时成本与 token 跟踪
• 会话统计与性能指标

📝 内联差异查看器

• 完整差异显示 - 在“编辑”、“多编辑”和“写作”消息中直接查看文件完整变更
• 在 VS Code 差异视图中打开 - 一键按钮即可打开 VS Code 原生的并排差异编辑器
• 智能截断 - 长差异会自动截断，并提供展开按钮以提高可读性
• 语法高亮 - 差异视图中正确显示代码高亮
• 可视化变更标记 - 清晰的绿色/红色高亮显示新增和删除内容

🔌 MCP、技能与插件市场 ⭐ V2.0 新增

• MCP 服务器 - 浏览 30 多个精选服务器（GitHub、Slack、Stripe、Notion 等），支持双重注册表搜索
• 技能 - 浏览并安装 skills.sh 上的精选技能，可选择项目或全局作用域
• 插件 - 浏览并安装插件以扩展 Claude Code 功能
• 智能搜索 - 跨 add-mcp 精选和 Anthropic 官方注册表进行搜索，并按相关性排序
• 项目或全局安装 - 将 MCP 服务器安装到 .mcp.json 或 ~/.claude.json，技能安装到 .claude/skills/
• 一键安装 - 预填充配置，包括环境变量、请求头和 OAuth 认证

🖼️ 图片预览与附件 ⭐ V2.0 新增

• 粘贴图片 - 粘贴图片前会显示缩略图预览
• 文件选择器 - 通过 VS Code 原生文件选择器选择图片
• 预览条 - 在文本框上方显示已附加的图片，并配有移除按钮
• 内联检测 - 消息中的图片路径会被自动检测并以 base64 格式发送
• 多张图片 - 可在单条消息中附加多张图片

🔒 高级权限系统

• 交互式权限对话框 - 提供详细的工具信息及命令预览
• 始终允许功能 - 针对常见工具（npm、git、docker）的智能命令模式匹配
• YOLO 模式 - 跃过所有权限检查，专为高级用户设计
• 工作区权限 - 细粒度控制哪些工具可以执行
• 实时权限管理 - 通过直观的 UI 添加或移除权限

📱 侧边栏集成

• 原生 VS Code 侧边栏 - 侧边栏面板中提供完整的聊天功能
• 智能面板管理 - 自动在主窗口和侧边栏视图之间切换
• 持久会话 - 切换面板时保持状态
• 活动栏集成 - 可从 VS Code 活动栏快速访问

📁 智能文件集成

• 输入 @ 即可即时搜索并引用工作区文件
• 通过文件浏览器和截图粘贴功能添加图片附件
• 极速文件搜索，覆盖整个项目
• 多文件讨论时无缝保留上下文

🛠️ 工具管理

• 可视化仪表盘显示所有可用的 Claude Code 工具
• 实时工具执行，结果格式化呈现
• 处理过程中用停止按钮替代发送按钮
• 智能权限系统，确保工具执行安全

🎨 VS Code 集成

• 原生主题，与编辑器风格一致
• 状态栏配备支持按钮
• 活动栏面板方便快速访问
• 响应式设计，适应任何屏幕尺寸

🤖 模型选择

• 快捷按钮 - 文本框上方设有 GPT、Gemini、MiniMax、Kimi、GLM、DeepSeek 等选项
• Opus - 最强大的模型，适合需要深度推理的复杂任务
• Sonnet - 平衡型模型，在大多数场景下表现优异
• 默认 - 使用您配置的模型设置
• 150+ OpenCredits 模型 - 浏览并切换至任何可用模型
• 模型偏好会在会话间保持
• Claude 模型可选择提供商（OpenCredits 或 Anthropic）

⚡ Slash 命令集成

• Slash 命令弹出框 - 输入 / 即可立即访问所有 Claude Code 命令
• 23+ 内置命令 - 包括 /agents、/cost、/config、/memory、/review 等
• 自定义命令支持 - 可在会话上下文中执行任意 Claude Code 命令
• 会话感知执行 - 所有命令均在当前对话上下文中运行
• 终端集成 - 命令可直接在 VS Code 终端中打开，并支持 WSL

🧠 高级 AI 模式

• 先计划模式 - 切换此模式后，Claude 会在实施更改前先进行规划
• 思考模式 - 可配置的强度等级（思考、深入思考、更深入思考、超深度思考）
• 模式切换开关 - 文本输入区域上方的简单开关
• 智能提示 - 根据所选的思考强度提供不同的提示
• Token 使用感知 - 更高的思考级别会消耗更多 Token，但能提供更深入的推理

💬 支持与反馈 ⭐ V2.0 新增功能

• 应用内支持 - 点击状态栏中的“支持”即可发送反馈
• 错误报告与功能请求 - 可直接从扩展中提交
• 可选邮箱 - 填写您的邮箱以便后续跟进

---

🚀 快速入门

先决条件

• VS Code 1.80+ 或 Cursor - 推荐使用最新版本
• Claude Code CLI - 从 Anthropic 安装
• 有效的 Claude API 或订阅 - 需要 API 或 Pro/Max 方案
• Node.js 18+ - 安装所需

安装步骤

1. 从 VS Code 市场安装

   ext install claude-code-chat
   

2. 或手动安装

   • 从发布页面下载 .vsix 文件
   • 运行 code --install-extension claude-code-chat-x.x.x.vsix

3. 打开 Claude Code Chat

   • 按 Ctrl+Shift+C（Mac 上为 Cmd+Shift+C）
   • 或点击状态栏中的 Claude 图标
   • 或使用命令面板：Claude Code: 打开聊天

---

💡 使用示例

🔥 代码审查与重构

你：@src/components/UserProfile.tsx 能否审查一下这个组件并提出改进建议？

Claude：我会分析你的 UserProfile 组件。根据代码内容，我有以下建议：

1. **性能优化**：添加 React.memo() 以防止不必要的重新渲染
2. **TypeScript 改进**：props 接口可以更加具体
3. **可访问性**：缺少面向屏幕阅读器的 ARIA 标签

[详细的分析及代码示例随后……]

📊 项目分析

你：请分析我的项目整体架构，并指出潜在问题。

Claude：我会检查你的项目结构并找出需要改进的地方：

🏗️ **架构概览**
- 使用 TypeScript 的 React 前端
- Express 后端的 Node.js
- MongoDB 数据库层

⚠️ **已识别的问题**
- React 组件中缺少错误边界
- 数据库查询缺乏适当的索引
- API 路由缺少输入验证

[详细的建议及实现示例……]

🐛 调试助手

你：我的 API 出现了一个奇怪的错误。以下是堆栈跟踪信息：[粘贴错误信息]

Claude：根据这个堆栈跟踪，问题似乎是异步中间件中的竞态条件。具体原因如下：

1. **根本原因**：多个请求同时修改共享状态
2. **解决方案**：实现请求隔离
3. **预防措施**：添加全面的错误处理机制

[逐步调试指南随后……]

⏪ 安全实验与检查点

你：能否将整个组件重构为使用 Hooks 而不是类组件？

Claude：我会将你的组件重构为使用 React Hooks。不用担心——我会先创建一个检查点，这样如果你需要的话可以轻松恢复原状。

[自动创建检查点]

以下是使用 Hooks 重构后的组件：
[展示新的实现]

如果你想撤销这些更改，只需点击“恢复检查点”，即可立即回到原始代码。

---

⚙️ 配置选项

快捷键

快捷键	功能
Ctrl+Shift+C	打开 Claude Code Chat
Enter	发送消息
@	打开文件选择器
/	打开斜杠命令模态框

WSL 配置（Windows 用户）

如果您通过 WSL（Windows Subsystem for Linux）使用 Claude Code，可以将扩展配置为在 WSL 中运行：

1. 打开 VS Code 设置（Ctrl+, 或 Cmd+,）
2. 搜索“Claude Code Chat”
3. 配置以下设置：
   • Claude Code Chat: WSL 已启用 - 启用 WSL 集成
   • Claude Code Chat: WSL 发行版 - 您的 WSL 发行版名称（如 Ubuntu、Debian）
   • Claude Code Chat: WSL Node 路径 - WSL 中 Node.js 的路径（默认：/usr/bin/node）
   • Claude Code Chat: WSL Claude 路径 - WSL 中 Claude 的路径（默认：/usr/local/bin/claude）

settings.json 示例配置：

{
  "claudeCodeChat.wsl.enabled": true,
  "claudeCodeChat.wsl.distro": "Ubuntu",
  "claudeCodeChat.wsl.nodePath": "/usr/bin/node",
  "claudeCodeChat.wsl.claudePath": "/usr/local/bin/claude"
}

---

🎯 专业技巧与窍门

🔥 文件上下文魔法

• 输入 @ 后跟搜索词，即可快速引用文件
• 使用 @src/ 缩小到特定目录
• 在一条消息中引用多个文件，进行跨文件分析
• 直接粘贴图片，发送前可预览缩略图
• 使用 Ctrl+V 粘贴截图，实现即时视觉沟通

⚡ 提升效率的工具

• 在更改前自动创建检查点，确保安全实验
• 如果更改不理想，可立即恢复
• 权限系统可防止意外执行工具
• YOLO 模式专为追求速度而非安全的高级用户设计
• 内置停止按钮，可取消长时间运行的操作
• 可复制消息内容，重复利用 Claude 的回复
• 打开历史记录面板，回顾之前的对话
• 侧边栏集成，支持多面板工作流
• 文本框上方设有“计划模式”和“超深度思考”切换开关

🎨 界面自定义

• UI 会自动适配您的 VS Code 主题
• 消息按颜色区分：绿色代表您，蓝色代表 Claude
• 将鼠标悬停在消息上可显示复制按钮
• 增强的代码块渲染，支持语法高亮
• 代码块可直接复制到剪贴板

---

🔧 高级功能

🛠️ 工具集成

Claude Code Chat 提供对所有 Claude Code 工具的安全访问：

• Bash - 在权限控制下执行 Shell 命令
• 文件操作 - 读取、写入和编辑文件
• 搜索 - 在工作区中使用 Grep 和 Glob 模式匹配
• 网络 - 获取并搜索网页内容
• 批量编辑 - 批量修改文件
• MCP 服务器 - 通过模型上下文协议服务器扩展功能
• 权限系统 - 对工具执行进行细粒度控制，确保安全性

📊 分析与监控

• 实时成本追踪 - 监控您的 API 使用情况
• Token 消耗 - 查看输入和输出的 Token 数量
• 响应时间 - 跟踪性能指标
• 会话统计 - 提供全面的使用分析

⏪ 检查点系统

• 即时恢复 - 一键恢复到任意先前状态
• 对话检查点 - 每次更改都会创建一个恢复点
• 可视化时间线 - 查看并导航所有项目状态

🔄 对话历史

• 自动保存 - 每次对话都会被保留
• 智能恢复 - 从您上次离开的地方继续
• 切换聊天 - 轻松查看并切换到之前的对话

---

🤝 贡献

我们欢迎各种形式的贡献！以下是您可以参与的方式：

1. 🐛 报告问题 - 使用我们的问题追踪器
2. 💡 提出功能建议 - 分享您的想法
3. 🔧 提交 Pull Request - 帮助我们改进代码库
4. 📚 完善文档 - 让文档更加完善

开发环境搭建

git clone https://github.com/andrepimenta/claude-code-chat
cd claude-code-chat
npm install

按下 "F5" 运行扩展，或在 VS Code 中打开“运行与调试”面板

---

📝 许可证

详情请参阅 LICENSE 文件。

---

🙏 致谢

• Anthropic - 感谢他们创造了出色的 Claude AI，尤其是 Claude Code SDK
• VS Code 团队 - 感谢其强大的扩展平台
• 我们的社区 - 感谢大家的反馈、建议和贡献

---

📞 支持

需要帮助吗？我们随时为您提供支持：

• 💬 应用内 - 点击状态栏中的“支持”按钮，直接发送反馈
• 🐛 问题：GitHub Issues

---

Claude Code Chat 快速上手指南

Claude Code Chat 是一款专为 VS Code 和 Cursor 设计的精美图形化界面扩展，让你无需使用终端命令即可直接与 Claude Code 进行对话、代码审查和重构。

🛠️ 环境准备

在开始之前，请确保你的开发环境满足以下要求：

• 编辑器: VS Code 1.80+ 或 Cursor（推荐使用最新版本）。
• 核心依赖: 已安装 Claude Code CLI。
• 运行环境: Node.js 18+。
• 账号权限: 有效的 Claude API 密钥或 Pro/Max 订阅计划。

注意：如果你在中国大陆地区，安装 Node.js 包或访问相关服务时可能会遇到网络延迟。建议配置国内镜像源（如淘宝镜像 npmmirror.com）以加速依赖安装。

📦 安装步骤

你可以通过以下两种方式之一安装该扩展：

方式一：通过 VS Code 市场安装（推荐）

在 VS Code 终端中运行以下命令：

ext install claude-code-chat

或者在扩展商店搜索 claude-code-chat 并点击安装。

方式二：手动安装

1. 从 GitHub Releases 页面下载最新的 .vsix 文件。
2. 在终端运行以下命令进行安装（请将文件名替换为实际下载的文件名）：

code --install-extension claude-code-chat-x.x.x.vsix

🚀 基本使用

安装完成后，按照以下步骤开始体验：

1. 启动聊天界面

你可以通过以下任意一种方式打开聊天窗口：

• 快捷键: 按下 Ctrl+Shift+C (Mac: Cmd+Shift+C)。
• 状态栏: 点击 VS Code 底部状态栏的 Claude 图标。
• 命令面板: 按 Ctrl+Shift+P，输入 Claude Code: Open Chat 并回车。

2. 简单对话示例

打开聊天窗口后，你可以像在日常聊天中一样与 AI 交互。

示例：请求代码审查

在输入框中输入以下内容（使用 @ 引用具体文件）：

@src/components/UserProfile.tsx 请审查这个组件并提出改进建议。

预期响应： Claude 将分析代码并提供关于性能优化、类型定义完善性或可访问性等方面的具体建议，甚至直接生成修改后的代码块。

3. 高级功能速览

• 引用文件: 输入 @ 即可快速搜索并引用工作区内的文件。
• 发送图片: 直接粘贴截图或使用文件选择器上传图片，AI 将识别图像内容。
• 使用命令: 输入 / 打开命令面板，使用 /review, /fix 等内置命令。
• 安全回滚: 在进行重大修改前，系统会自动创建检查点（Checkpoint），如果不满意结果，可一键恢复到修改前的状态。

---

现在，你可以在优雅的图形界面中尽情探索 Claude Code 的强大功能了！