ChatPanel实战

把AI Agent直接挂在浏览器侧边栏，比在编辑器和浏览器之间来回切Tab效率高得多。ChatPanel这个工具最核心的逻辑是它不绑定模型，而是提供一个“桥接”机制，让你能把自己的CLI Agent（比如Claude Code、Pi）或者本地模型直接接进来。

对于在意隐私的开发者来说，它在发送数据前会对NER（命名实体识别）和PII（个人可识别信息）进行脱敏，这点比直接用网页版大模型要稳妥。

部署与配置流程

要让它跑起来，不能只装个插件，得安装配套的npm包来建立本地桥接：

一、安装浏览器扩展（Chrome/Edge等）。
二、通过终端安装桥接包（具体取决于你要接入哪个Agent）：

npm install -g chatpanel-bridge

三、在侧边栏配置界面中，选择对应的模型来源（Local/Remote/CLI）。

几个好用的实操点

• MCP Hub接入：它内置了MCP Hub，这意味着你可以给侧边栏Agent增加更多外部工具能力，而不需要重新写Prompt。
• 浏览器Act模式：尝试让它在Excalidraw里画图或者直接对当前网页进行TL;DR总结，响应速度很快。
• 本地语音转文本：语音处理全在本地完成，不需要上传音频文件，适合在开会时快速记录要点。

避坑指南： 如果发现连接不上本地模型，优先检查端口占用情况以及npm桥接包是否在后台正常运行，否则侧边栏会显示连接超时。