综合介绍

Claude Code Chat UI 是一个为 Visual Studio Code 设计的扩展插件，它为 Windows 用户提供了一个原生的 Claude Code 聊天界面。该项目的核心目标是解决在 Windows 系统上使用 Claude Code 时遇到的常见问题，例如对 WSL (Windows Subsystem for Linux) 的依赖和命令行工具操作的繁琐性。通过创建一个集成的图形用户界面（GUI），这个插件让开发者可以直接在编辑器中与 Claude 进行流畅的交互，而无需切换到外部终端。它只需要用户安装了 Git Bash 和 Node.js 即可运行，显著降低了环境配置的复杂性。此工具不仅支持官方的 Claude 服务，还可以灵活配置使用第三方的 API 接口，并提供了诸如实时费用追踪、文件路径自动转换和多模态交互等实用功能，旨在提升编码效率和优化“沉浸式编码”体验。

功能列表

• 原生Windows支持：无需安装WSL，仅依赖Git Bash和Node.js即可在Windows环境下直接运行。
• 实时成本追踪：在聊天界面中即时显示每次交互消耗的Token数量和预估费用，帮助用户清晰地了解使用成本。
• 智能路径处理：自动识别并兼容Windows风格的文件路径，解决了在跨系统交互中常见的路径格式问题。
• MCP模块化扩展：支持模块化命令协议（MCP），允许用户通过单击调用外部工具，扩展了Claude的能力。
• 第三方API兼容：用户可以灵活配置并使用自定义的API服务，不局限于官方服务。
• 多模态交互：支持在聊天中直接粘贴图片和检索文件，可以充分利用Claude的多模态模型能力。
• 精美的用户界面：提供为高分屏优化的（HiDPI）图标、自适应编辑器主题和流畅的动画效果，提升了视觉和使用体验。
• 操作历史记录：记录所有通过AI完成的文件操作，并提供一键撤销或重做的功能。
• 便捷的安装方式：已在VS Code Marketplace上架，支持一键搜索安装，同时也提供离线安装和从源码构建的选项。

使用帮助

这个插件旨在简化在Windows上使用Claude Code的流程。以下是详细的安装和使用步骤，帮助你快速上手。

第一步：搭建本地环境（仅需一次）

在安装插件之前，需要确保你的Windows系统上已经准备好了它所依赖的基础软件：Git 和 Node.js。

1. 安装 Git for Windows
   • 这个插件需要Git环境中包含的Bash作为终端来执行命令。
   • 请访问官方网站 https://git-scm.com/ 下载并安装最新版本的Git。
   • 安装时请使用默认设置，确保Git Bash被正确安装。
2. 安装 Node.js
   • Node.js是运行插件后台服务和相关命令所必需的。
   • 请访问 https://nodejs.org/ 下载并安装长期支持版（LTS），版本要求大于或等于18。
3. 配置环境变量
   • 为了确保命令行工具能被系统正确找到，需要检查并可能需要手动添加npm的全局路径到系统环境变量Path中。
   • 默认路径通常位于 C:\Users\你的用户名\AppData\Roaming\npm。
   • 请根据你的实际用户名替换路径，并将其添加到系统的“Path”变量中。

第二步：安装 Claude Code 命令行工具 (CLI)

插件的许多核心功能是通过调用Anthropic官方的claude-code命令行工具实现的。

1. 全局安装CLI
   • 打开一个新的终端窗口（如CMD或PowerShell），输入以下命令进行全局安装：

     npm install -g @anthropic-ai/claude-code
     

2. 登录Claude账号
   • 安装完成后，运行登录命令：

     claude login
     

   • 此时，你的默认浏览器会打开一个授权页面。请登录你的Anthropic Claude账号，授权成功后复制页面上提供的Token。
   • 将复制的Token粘贴回终端窗口并按回车，即可完成登录。
3. 验证安装
   • 运行一个简单的测试命令来确认环境是否配置成功：

     claude chat -m sonnet -p "hello"
     

   • 如果终端成功返回了Claude的回复，说明你的本地环境和CLI工具已准备就绪。

第三步：安装 Claude Code Chat UI 插件

你可以根据网络情况选择最适合你的安装方式。

• 方式一：从 VS Code Marketplace 安装（推荐）
  1. 打开 Visual Studio Code 或 Cursor 编辑器。
  2. 使用快捷键 Ctrl+Shift+X 打开侧边栏的扩展面板。
  3. 在搜索框中输入 Claude Code Chat UI 或 lkbaba。
  4. 找到该插件并点击“安装”按钮。
• 方式二：从 GitHub Releases 离线安装
  1. 如果无法访问Marketplace，可以前往项目的 Releases页面。
  2. 下载最新版本的 .vsix 文件。
  3. 在VS Code中，使用快捷键 Ctrl+Shift+P 打开命令面板，输入并选择 Extensions: Install from VSIX...。
  4. 在弹出的文件选择窗口中，找到并选择你刚刚下载的 .vsix 文件进行安装。

第四步：开始使用

安装完成后，你就可以在VS Code中直接和Claude交互了。

1. 打开聊天面板
   • 使用快捷键 Ctrl+Shift+C 可以快速打开或关闭聊天界面。
   • 你也可以在文件资源管理器顶部，文件夹图标旁边找到插件的图标，点击即可打开。
2. 进行配置
   • 在聊天界面的右上角，点击齿轮图标 ⚙️ 进入设置。
   • 如果你想使用第三方的API服务（例如 anyrouter/tuziapi），请勾选 Use Custom API Endpoint 并填写相应的API地址和密钥。
   • 其他设置，如模型选择、界面语言等，也可以在此处调整。
3. 与Claude交互
   • 在底部的输入框中输入你的问题或指令，然后按回车发送。
   • 你可以直接粘贴代码片段，或者通过@符号引用工作区中的文件，让Claude理解你的项目上下文。
   • 如果需要发送图片，可以直接将图片文件粘贴到输入框中。

应用场景

1. 代码编写与调试在编写代码时，可以直接在VS Code中打开聊天窗口，请求Claude提供代码片段、解释复杂函数或帮助寻找并修复Bug。由于插件支持项目上下文，Claude可以给出更贴合当前项目的回答。
2. 学习与代码理解当接触一个新的代码库或复杂的代码逻辑时，可以选中代码块，让Claude逐行解释其功能和设计思路，加快学习和理解过程。
3. 自动化常规任务对于一些重复性的编码任务，如编写单元测试、生成文档注释或进行代码格式化，可以直接向Claude下达指令，让它自动完成，从而节省时间。
4. Git工作流辅助你可以通过自然语言指令，让Claude辅助完成Git操作，例如生成commit信息、创建分支或对比代码差异，简化版本控制流程。

QA

1. 这个插件和直接使用Claude官网有什么不同？此插件直接集成在VS Code编辑器中，无需在浏览器和编辑器之间来回切换。它能够感知并操作你当前打开的项目文件，例如直接修改代码或创建新文件。此外，它还提供了费用追踪、第三方API支持等官网不具备的定制化功能。
2. 为什么安装后提示 “No suitable shell found” 错误？这个错误通常是因为插件没有找到 Git Bash 的执行路径。请确保你已经正确安装了Git for Windows，并且它的路径被正确配置。在某些旧版本中，可能需要手动设置 SHELL 环境变量指向 bash.exe 的完整路径，并重启电脑。
3. 使用这个插件是否会产生费用？是的。插件本身是免费的，但它通过调用Claude的API来工作。无论是使用Anthropic官方账号还是第三方API，每次与模型交互都会消耗Token，并根据其定价策略产生费用。插件内置的实时成本追踪功能可以帮助你监控这些开销。
4. 我是否可以不登录官方账号，只使用自己的API？可以。插件支持配置第三方的API节点。你可以在设置中启用“Use Custom API Endpoint”选项，并填入你的API服务地址和密钥，之后所有的请求都会通过你配置的节点发送，无需登录官方账号。