痛点概览

• 想要一个现成、可直接使用的 Agent 工作台，却又不想从基础开始建立 UI。
• 需要把工作台嵌入到已有项目中，只关注业务层。
• 在浏览器和桌面两端共享同一套 UI 逻辑，但传输方式不同导致实现繁琐。
• 多 Agent、多工作区和多会话管理太过复杂，缺少统一状态管理方案。不过，
• 权限、认证、文件程序等宿主能力无法灵活注入或自定义。

主要架构

@acp-components/core

负责传输、状态管理与业务逻辑；零 React 依赖，可配 Vue / Svelte / Solid / 原生 JS。

提供上下文 Provider、组件与 Hooks，负责渲染与交互。

至于开箱即用，两种宿主示例

Web Demo

通过 Vite 驱动。一个 WebSocket ↔ stdio 桥接服务器将本地 Agent 暴露给浏览器。由于浏览器无法直接 spawn 子进程，桥接服务器充当中间件。

# 启动桥接服务器
pnpm dev:server # 默认 opencode
pnpm dev:server-codex # 或 Codex
pnpm dev:server-claude # 或 Claude
# 启动前端
pnpm dev # http://localhost:

Tauri Desktop

Tauri 版直接通过 stdio 拉起本地 Agent。无需桥接服务器，实现本地优先。使用 Tauri 的插件实现文件读写与目录选择，并集成 Monaco 编辑器进行代码预览。

pnpm dev:tauri # 开发模式
pnpm build:tauri # 生产建立

功能一览

多 Agent · 多工作区 · 多会话支持

• 多 Agent：可同时连接多个 ACP Agent，各自独立传输、能力与会话管理；使用者添加的 Agent 持久化到 storage.
• 多工作区：按工作目录组织会话；工作区列表自动持久化到 `storage.
• 多会话 + 分屏：- 可并排运行/查看多个会话；按理说，每个会话状态完全隔离；批处理保证流式输出互不干扰。

至于传输层支持，Stdio / HTTP / WebSocket / Custom

// 示例配置
// Stdio - Electron/Tauri/Node 桌面
{ id:'desktop',name:'Desktop',transport:{type:'stdio',command:'opencode',args:} }
// HTTP - HTTP POST 接口
{ id:'http',name:'HTTP',transport:{type:'http'。url:'http://localhost:/acp'} }
// WebSocket - 浏览器桥接
{ id:'ws',name:'WebSocket',transport:{type:'websocket',url:'ws://.:'} }
// Custom - 自定义实现
// { id:'custom',name:'Custom',transport:{type:'custom',transport:myTransport} }

聊天界面 & 工具调用 & 计划视图

• #ChatView：- 消息轮次分组；内联渲染 Plan、Usage、Config 面板及权限提示。
• #流式 UX：- 实时内容与思考流式渲染；动画指示器、工具调用状态、token 用量追踪。
• #ToolCallCard：- 展示工具调用名称、状态、输入/输出及 diff 等信息。其实，
• #PlanView / ThoughtView / DiffView：- 对应条目可视化展示。

#Session Panel 与 File 系列组件

• #FileTree: 懒加载文件树；支持展开/折叠、刷新还有实时监听)。
• #FileViewer: 内置 Monaco 文件查看器；语法高亮 + 行定位)，

#Permission & Auntication Flow

• #PermissionPrompt: 在 ChatView 内联渲染，用于批准或拒绝工具调用请求。按理说，
• #LoginDialog: 内置登录对话框。支持 env_var 与 terminal 两种方式。

#Settings & Command Palette

• #SkillView: 实时拉取已连接 Agent 的技能目录，按作用域分组并搜索。)​
• #SettingsView: 全页设置，可 SETTINGS_SECTIONS. #CommandPalette:   - 支持斜杠命令面板。

#Theme & i18n

• 暗色/亮色主题皆内置，通过 CSS 自定义属性。运行时 useSettings.setTheme 切换，并支持自定义覆盖变量。i18n：- 内置 en‑US 和 zh‑CN，由 i18next 自动读取宿主语言。

"作为依赖库的观点是，最小可用配置"

@acp-components/react 版本 ^1.x.x;@acp-components/core 同步更新.
javascript
import {
I18nProvider,PlatformProvider。AcpProvider,WorkbenchShell,LoginDialog,useAcpStore,} from '@acp-components/react';

import { createWebPlatform } from './webPlatform';// 自己实现 Platform 工厂

function AppInner { const activeSessionId = useAcpStore => s.activeSessionId);return ( { {} {} } );}

function App { return ( { {

php import { acpStore。sessionStore,fileTreeStore,skillStore,createAcpProvider,sendPrompt } from '@acp-components/core';

const provider = createAcpProvider( { agents:}}]},stdioFactory /* 宿主 spawn 能力 */);

provider.subscribe=>{ if console.log;})，其实，

// 动态增删 agent 示例 await provider.addAgent({id:"analyze"。name:"Analyze",transport:{type:"websocket",url:"ws://..."} });await provider.removeAgent;按理说，provider.destroy;

"怎么选？"

"接下来"

• MVP 快速跑起来：克隆仓库 → 按 README.md 的 “Web Demo” 或 “Tauri Desktop” 步骤启动。
• @acp-components 做为 SDK 使用：从上面的 “最小可用配置” 开始。根据宿主环境实现 Platform 并注入所需 Transport.
• @acp-components ：挑选表格里的一个方向，自定义 Transport / Platform / 注入工作台视图等。欢迎 issue/PR，💡如果你在搭建代理工作台，这里是你最佳起点。📦 项目地址：