一、前言

哈喽，我是 alien。在上一篇文章《求求你别再只用 Claude Code 写代码了！解锁一下它全能玩法，》里我们讨论了 Claude Code 在多种场景下的功能比较丰富。今天我想继续沿着 Claude Code 的思路，聊聊如何将它搬到浏览器中。让任何人都能在网页上轻松使用并分享基于 Claude Code 的一些创意。话说回来，

看完这篇。你将获得：

• Claude 运行到终端的新思路
• Claude‑Agent‑SDK 的完整介绍与实战示例
• 如何让 Claude Code 的工作流可控、可观察、可定制

痛点梳理的观点是，为何需要把 Claude Code 搬进浏览器？

• 非研发使用者难以上手Claude Code 本质上是一个 agent。需要管理 skills、MCP、模型切换等配置，对非技术人员来说门槛高。
• CLI 交互不友好终端方式缺乏可视化反馈，无法直观看到工具调用或审批过程。其实，
• 缺少对结果的干预能力在终端里很难进行二次加工或自定义工作流。
• 安全与权限控制不足危险工具触发时没有明确的使用者确认步骤，容易出现误操作。
• 缺乏可视化监控与成本追踪无法实时查看 token 消耗、费用还有执行时间，导致资源浪费。

二、基本实现思路

原理图概览

Cole Claude Code 基于 Node.js，可直接通过 CLI 使用。我们在浏览器端提供一个更友好的 UI，通过 WebSocket 与后端 Node 服务通信。实现以下流程：

1. Create a Node service that handles tool approvals and forwards requests.
2. Easily connect Node and browser via WebSocket .
3. The browser sends query messages;Node passes m to Agent SDK.
4. The SDK runs Claude Code as a child process.

claude‑agent‑sdk 简介

@anthropic‑ai/claude-agent-sdk 是官方发布的“把 CLI 当成 JS 对象驱动”的库。与 @anthropic‑ai/sdk 不同，它封装了：

• - 所有工具集 "
• - Skills / MCP / CLAUDE.md 的加载与解析

• - 多轮会话持久化

• - 权限审批

• - 流式事件

import { query } from '@anthropic-ai/claude-agent-sdk';不过，const stream = query({ prompt的观点是，'在当前目录新建 hello.txt',options: { 至于cwd，'/path/to/project',settingSources:。includePartialMessages: true,permissionMode: 'default',canUseTool: async => { /* ... */ },} });for await { console.log;}

主要 options 参数解读表

参数名称	作用描述及默认值

cwd 工作目录；如果不传，将不会读取 ~/.claude/ 全局配置。

settingSources  决定加载哪些配置文件；默认全部加载，

includePartialMessages true 时开启流式逐字渲染；false 则一次性返回完整文本。说起来，

permissionMode 'default' 权限模式。可根据需求自定义逻辑，

canUseTool 异步回调，用于处理危险工具调用时的审批流程。

signal AbortSignal 用于中断当前回合。

// 简要实现流程 class CodeSession { constructor { this.cwd = cwd;this.onFrame = onFrame;话说回来，this.sessionId = null;this._permIdSeq = 0;this._pendingPerms = new Map;this._abort = null;} async send { this._abort = new AbortController;按理说，const options = { 再看cwd，this.cwd,settingSources:,includePartialMessages:true。permissionMode:'default',canUseTool:this._canUseTool.bind,signal:this._abort.signal };其实，ifoptions.resume=this.sessionId;try{ const stream=query;for await{ ifthis.sessionId=msg.session_id;for)this.onFrame;} this.onFrame;}catch{ if{ this.onFrame;}else{ this.onFrame;} } } stop{this._abort?.abort，} resolvePermission{this._pendingPerms.get?.，} _canUseTool{ const id=++this._permIdSeq;this.onFrame;return new Promise(resolve=>{ const finish==>{ this._pendingPerms.delete; resolve(decision==='allow' {behavior:'allow'。updatedInput=input} :{behavior:'deny',message:'使用者在浏览器端拒绝'});}，this._pendingPerms.set;setTimeout=>finish,30000);// 超时自动拒绝 });} } // normalize 把 SDK 内部事件转为前端易处理帧 function normalize{ if{ return;} if{ return msg.message.content.filter .map);} if{ return msg.message.content.filter .map);} if{ return;} return，}

Node 服务主要代码片段

import { query } from '@anthropic-ai/claude-agent-sdk';class CodeSession{ /* ... */ }

前端代码片段

const ws=new WebSocket;ws.onmessage=e=>{ const frame=JSON.parse;switch{ case 'system_init': renderStatus;break，case 'text_delta': appendToCurrentBubble;break，case 'tool_use': createToolCard;break，case 'tool_result': fillToolCard;break，case 'permission_request': showApprovalBar=>{ ws.send(JSON.stringify({ 从type来看。'permission_response',id:frame.id,decision }));})，break;case 'turn_result': renderMeta-startTime)/1000});break，case 'done': unlockInput;说起来，ifshowBanner;break，case 'error': showError;unlockInput，break;} }，sendBtn.onclick=function{ const text=inputEl.value.trim;ifreturn，按理说，lockInput;ws.send)，};stopBtn.onclick=function{ws.send);}，

协议帧设计原则 & 双向通信概览

类型	字段	类型	字段
UserMessage?	'text'

PmsResponse? 'id' 请求ID,'decision' 'allow'/'deny'

SStop? 

 

'>^Model)> Tools List

'>text> Delta Text

'>id。name,input Call Tool

'tool_result''>id,&'content'&'isError'&&?，?说起来，…，…，…，…，…，…不过，?，?，<\a> &l

...

---

请注意上述表格仅为演示，实际字段需结合项目代码细节。

---

这套方案把传统 CLI 转变为可视化 web 应用。实现了：

• 零配置不必手动管理全局 skills/MCP，只需按需加载即可。
• 流式实时反馈逐字渲染和工具调用卡片，让使用者随时掌握进度。
• 安全审批危险工具触发时弹窗确认，避免误操作。
• 成本追踪每轮账单实时展示花费与 token 使用情况。其实，

如果你正在寻找一种既强大又易用的 AI 编程助手。或者想把自己的 Agent 整合进网站，这套方案值得尝试。欢迎点赞收藏，一起推动 AI 工具走向更广泛的使用场景 🚀

---