跳到正文
FunCoding

搜索

搜索文档、Skill 和 MCP

嵌入 Web Shell 与 React 绑定

连接 daemon 会话并选择同源页面、代理或后端转发部署。

Web Shell 使用 daemon HTTP/SSE 维护会话,再把事件投影为客户端 transcript。它的 Web terminal 是浏览器内的语义渲染器,提供终端风格布局与流式块,不是服务器 PTY 或 Ink 画面的简单转发。

选择嵌入层

使用 @qwen-code/web-shell 的 WebShellWithProviders 可嵌入完整界面;需要自定义 React UI 时,可从 @qwen-code/web-shell/daemon-react-sdk 使用 DaemonSessionProvider 及相应 hooks。

Provider 负责创建或附加会话、订阅 SSE,并由 DaemonSessionClient 保留重放游标。默认自动重连;测试或自定义连接管理可设置 autoReconnect={false}。

无 React 的宿主可直接使用共享 UI store。不要为了复用 reducer 引入完整 Web Shell。

浏览器部署形态

形态路径与要求
daemon 自己提供的页面页面与 API 同源,可直接连接;适合本机验证
独立本地前端开发服务与 daemon 端口不同即跨源;需同源代理或改由 daemon 提供页面
远程应用通常由 BFF 持有 daemon 地址、token、工作区路由和会话信息,再向浏览器发送应用事件

daemon 不接受任意浏览器 Origin。旧 channel/web 草案中“浏览器完全不能直接连接”的描述属于早期设计,当前同源 Web Shell 是明确支持的路径;不能据此放开任意跨域请求。

BFF 形态应把 bearer token 留在后端,并自行决定用户可以访问哪个 daemon 与工作区。直接提供的 Web Shell 使用自己的认证流程,详见daemon 认证。

宿主仍需负责的 UI

消息、思考块、工具状态、Shell 输出、审批控件和错误展示由宿主选择布局。已知事件可以用共享原语处理;缺失的界面能力应明确展示,不要默默模拟与另一客户端完全一致。

Webview 嵌入还需由宿主连接 transport 与 UI,不能只嵌入组件就假定本机编辑器、浏览器、文件和凭据会自动出现在 daemon 所在环境。

侧栏默认值、菜单与会话操作见侧栏定制。