前言

前面了解了Claude Code CLI的基本使用,但很多小伙伴可能还是不习惯用黑乎乎的命令行终端窗口,这两天发现一个不错的Claude Code开源项目,可以以编辑器插件可视化聊天形式提供对Claude Code CLI的使用,真是nice,推荐喜欢Claude Code和可视化交互的小伙伴,对往期内容感兴趣的小伙伴也可以看往期内容:

  • Claude Code CLI初体验

插件安装

在VS Code插件市场搜索“Claude Code Chat”,点击【安装】

图片

或者到Claude Code Chat Github开源仓库手动下载安装。

Github地址:github.com/andrepiment…

图片

安装完成后,在工作区目录和侧边栏上会分别展示Claude Code Chat的入口

图片

点击工作区目录上的入口会在编辑器页签打开Claude Code Chat聊天窗口

图片

点击侧边栏上的入口会在侧边栏打开Claude Code Chat聊天窗口,个人还是比较喜欢侧边栏形式。

图片

登录授权配置

Claude Code Chat插件的工作依赖于Claude Code CLI,使用前需要先安装Claude Code C LI,Claude Code CLI安装方式查看往期:
Claude Code CLI初体验

这里以智谱GML-4.5为例,在全局配置或者在项目工作区 .claude/settings.json 文件中添加授权配置

{
    "env":{
        "ANTHROPIC_BASE_URL""https://open.bigmodel.cn/api/anthropic",
        "ANTHROPIC_AUTH_TOKEN": your api key,
        "ANTHROPIC_MODEL""glm-4.5"
    }
}

图片

基本使用

基本设置

Claude Code Chat提供了基础设置功能,点击右上角【设置】打开设置页面,最上面WSL Configuration是Windows上WSL相关配置

图片

【Permissions】模块是Claude Code权限相关配置,点击【+Add permission】可以添加指定类型选取,相当于Claude Code CLI配置中的 permissions 权限配置

图片

权限配置添加完成会以列表形式展示,也可以点击【Remove】手动移除

图片

设置页面最下方是Yolo配置,也就是Claude Code CLI中的 auto-accept 模式

图片

开启Yolo模式后会在Chat页面提示

图片

模型选择

在Chat页面点击【Model】可以切换不同模型,目前提供了 Claude Opus 、 Claude Sonnet 以及 自定义 模型,前面两个模型都是Claude Code官方默认模型,如果使用了其他平台模型可以点击【Config】进行配置

图片

User configured模型配置会在编辑器中新启一个命令行终端执行Claude Code CLI的 /model 命令进行模型设置

图片

这里我使用的是智谱GLM-45模型,切换到【Sonnet-Balanced model】选项后输出的模型信息是 claude-sonnet-4-20250514,但是实际上用的应该还是智谱GLM-45

图片

切换到【Default-User configured】选项择输出到模型信息是glm-4.5

图片

Chat聊天

Claude Code Chat的对话界面如下

图片

在聊天框输入内容即可与Claude Code CLI进行对话,Claude Code Chat会实时记录请求和tokens消耗并在Chat界面下方展示,我们可以时刻关注到会话tokens和金额的消耗情况

图片

在对话框输入 / 或者点击右侧的 / 会弹出自 定义提示词模版命令 和 Cluade Code CLI内置命令 列表

图片

图片

点击自定义提示词快捷命令 /bug-fix 效果如下,就是将提前配置好的提示词快速填充到聊天框

图片

点击Claude Code CLI内置命令 /clear 效果如下,会打开编辑器命令行终端调用Claude Code CLI的交互命令 /clear

图片

在对话框输入 @ 或者点击右侧的 @ 会弹出可视化文件选择页面,支持通过关键词检索

图片

点击【图片】可以选择图片作为上下文(目前该功能有bug,上传后没有任何作用),也可以从剪切板拷贝图片

图片

从剪切板粘贴的图片会统一存放到 工作区/.claude/claude-code-chat-images 目录下,再通过文件选择或者全路径引用

图片

历史会话

Claude Code Chat提供了历史会话功能,可以查看历史会话记录

图片

点击对应会话可以进入到该会话详情

图片

Checkpoint检查点

Claude Code Chat提供了检查点功能

图片

点击【Restore checkpoint】会对任务进行回退

图片

源文件的修改也对应回退了,感觉这比 Esc+Esc 好用,不知道是不是使用不对,我使用 Esc+Esc 无法进行源文件操作回退

图片

对话模式

Claude Code Chat提供了 Plan、Thinking 和 Yolo 三种模式

Plan

图片

图片

Claude Code Chat会输出 功能规划、技术架构、实现细节、开发和测试计划,并不会执行任何操作,和Claude Code CLI效果一致

图片

Thinking modes

这个thinkimg模式设计的也挺巧妙,深度思考本属于提示词范围,通过在提示词中添加 Think、Think Hard、Think Harder、Ultrathink 来达到让AI深度思考的效果,在Claude Code CLI中也并没有提供对应的模式,Claude Code Chat以可视化形式做成了选项提供使用,可以来一波赞了。

选择深度思考程度,点击【Confirm】确认

图片

聊天框状态就会变成对应状态

图片

以 9.9和9.11哪个大? 这个经典问题来看一下,未开启深度思考和开启深度思考的区别。

未开启深度思考

图片

开启深度思考

图片

开启深度思考后,AI思考的时间明显变长,虽然结果还不是那么令人完全满意,但是思考的层次和复杂度明显增加。

YOLO 模式

Claude Code Chat提供了Yolo模式,也就是Claude Code CLI中的 auto-accept 模式,未开启前调用工具、执行任务需要手动授权

图片

开启后会跳过授权过程直接调用工具

图片

自定义提示词代码块

这是Claude Code Chat自己提供的功能提示词快捷操作命令,非Claude Code CLI中的自定义命令功能。在聊天框输入/唤起命令面板,点击【Add Custom Command】添加一条新的提示词命令,输入 命令名称 和 提示词内容

图片

点击【Save Command】保存,在命令面板就可以看到对应的提示词命令,不要时也可以点击右侧【删除】删除不需要的提示词模版命令

图片

点击提示词命令会在聊天框自动填充对应的提示词内容

图片

MCP服务

Claude Code Chat提供了可视化MCP配置,点击聊天框上的【MCP】打开MCP面板,Claude Code Chat内置了主流的MCP配置

图片

我们只需要点击MCP就可以将MCP添加到MCP列表,不需要任何额外的配置流程。删除也很简单,直接点击MCP右侧的【Delete】即可

图片

如果没有你需要的MCP服务,可以点击【+Add MCP Server】进行可视化自定义添加

图片

添加完成后,同样会在MCP列表展示,这里有些不足的就是目前无法查看MCP服务的启用状态和Tools信息

图片

验证MCP的成功与否可以直接询问AI

context7 MCP支持哪些工具?

图片

友情提示

见原文:不习惯终端黑窗口?Claude Code Chat可视化插件猜你会喜欢

本站提供的所有下载资源均来自互联网,仅提供学习交流使用,版权归原作者所有。如需商业使用,请联系原作者获得授权。 如您发现有涉嫌侵权的内容,请联系我们 邮箱:[email protected]