Vibe编辑器
Vibe编辑器 是 AI Skill Hub 本期精选Agent工作流之一。综合评分 7.5 分，整体质量较高。我们推荐使用将其纳入你的 AI 工具库，帮助提升工作效率。
📚 深度解析
Vibe编辑器 工作流的设计遵循"最小配置，最大复用"原则：核心逻辑已经封装好，用户只需配置自己的 API Key 和业务参数即可快速上手。工作流内置错误处理和重试机制，在网络波动或 API 限速等情况下仍能稳定运行，适合作为生产环境的自动化基础设施。
在实际部署时，建议先在测试环境中运行 3-5 次，验证各个环节的输出结果符合预期，再部署到生产环境。AI Skill Hub 评分 7.5 分，是同类 Agent 工作流中的精选推荐。
📋 工具概览
Vibe编辑器 是一套完整的 AI Agent 自动化工作流方案。通过可视化的节点编排，将复杂的多步骤任务拆解为清晰的自动化流程，实现全程无人值守的智能处理。支持与数百种外部服务和 API 无缝集成，适合构建数据处理管线、业务自动化和 AI 辅助决策系统。
📖 中文文档
Vibe编辑器 是一套完整的 AI Agent 自动化工作流方案。通过可视化的节点编排，将复杂的多步骤任务拆解为清晰的自动化流程，实现全程无人值守的智能处理。支持与数百种外部服务和 API 无缝集成，适合构建数据处理管线、业务自动化和 AI 辅助决策系统。
- 可视化 Agent 工作流编排，无需编写复杂代码
- 支持多步骤自动化任务链，实现全流程无人值守
- 与外部 API、数据库和第三方服务无缝集成
- 内置错误处理与自动重试机制，保障稳定运行
- 提供可复用的自动化模板，快速在同类场景部署
- 自动化日常重复性工作，将精力集中于创造性任务
- 构建数据采集 → 处理 → 输出的完整自动化管线
- 实现跨平台、跨系统的数据流转和业务协同
# 方式一：npm 全局安装 npm install -g vibeeditor # 方式二：npx 直接运行（无需安装） npx vibeeditor --help # 方式三：项目依赖安装 npm install vibeeditor # 方式四：从源码运行 git clone https://github.com/zbeeeeeeeeee/VibeEditor cd VibeEditor npm install npm start
- 访问 GitHub 仓库获取工作流文件
- 在对应平台（Dify / Flowise / Make 等）中找到「导入工作流」功能
- 上传工作流文件
- 按照提示配置必要的环境变量和 API Key
- 运行测试确认流程正常后投入使用
# 命令行使用
vibeeditor --help
# 基本用法
vibeeditor [options] <input>
# Node.js 代码中使用
const vibeeditor = require('vibeeditor');
const result = await vibeeditor.run(options);
console.log(result);
# vibeeditor 配置说明 # 查看配置选项 vibeeditor --config-example > config.yml # 常见配置项 # output_dir: ./output # log_level: info # workers: 4 # 环境变量（覆盖配置文件） export VIBEEDITOR_CONFIG="/path/to/config.yml"
VibeEditor
English
基于 Monaco Editor + Vue 3 的 AI 辅助代码编辑器，同时支持服务器部署和 Electron 桌面端。
功能需求与开发进度
图例: ✅ 已完成 ⚠️ 框架就绪，待实现 ❌ 未开始
MCP (Model Context Protocol) 支持
VibeEditor 内置完整的 MCP 客户端，支持通过标准协议接入外部工具。
传输模式：
| 模式 | 使用场景 |
|---|---|
| **STDIO** | 本地 MCP 服务器（子进程启动） |
| **HTTP** | 远程 MCP 服务器（HTTP POST，无状态） |
| **SSE** | 远程 MCP 服务器（Server-Sent Events，自动提取 Mcp-Session-Id） |
核心类： - McpManager — 多服务器生命周期管理：连接、发现工具、自动路由调用 - MCPClient — 单服务器连接（initialize → tools/list → tools/call） - MCPToolAdapter — 将 MCP tools/call 桥接为 ITool 接口，含参数类型自动转换 - ToolCatalog — 只读扁平工具元数据存储，用于展示/CLI 输出
使用示例（多服务器）：
const manager = new McpManager();
await manager.connectAll({
mcpServers: {
filesystem: { type: 'stdio', command: 'npx', args: ['-y', '@anthropic/mcp-server-filesystem'] },
remote: { type: 'sse', url: 'https://example.com/mcp', headers: { Authorization: 'Bearer xxx' } },
},
});
const tools = await manager.discoverAndCreateAdapters();
tools.forEach(t => agent.registerTool(t));集成点： - Server SSE 端点（routes/agent.ts）从请求体读取 mcpConfig，连接服务器并将工具注册到 Agent - CLI（cli.ts）支持交互式 MCP 工具调用 - 前端 McpSettingsPanel.vue 管理 MCP 服务器配置 - npm run mcp:test 运行跨三种传输模式的集成测试
1. 包依赖关系
箭头方向：A --> B 表示 B 依赖 A（A 是被依赖方）
AI Agent 框架
· Agent / Session / ToolRegistry
· IAgentProvider / ILLMProvider
· MCP Client (STDIO/HTTP/SSE)
· executeEdits / parseToolCalls"] core["@vibeeditor/core
共享核心
· IFileSystem
· LocalFileSystem / ServerFS / VirtualFS
· EditorTab / EditOperation
· EditorState 管理"] server["@vibeeditor/server
Express 后端
· /api/files/* REST API
· /api/agent/* SSE 流式
· 路径遍历防护"] web["@vibeeditor/web
Vue 3 前端
· Monaco Editor 封装
· AgentPanel 聊天 UI
· useAgent / useFileSystem
· agentService SSE 客户端"] electron["@vibeeditor/electron
Electron 桌面壳
· IPC 桥接 (preload.ts)
· 原生文件对话框
· 主进程 fs 操作"] agent --> core agent --> server agent --> web core --> server core --> web core --> electron
关键变化（相对旧架构）： - 新增 @vibeeditor/agent —— Agent 相关代码从 core 和 server 中抽离，形成独立的智能体模块，含 MCP 客户端 - @vibeeditor/core 瘦身 —— 移除了 agent/ 目录（types、context、executor），聚焦文件系统和编辑器状态 - @vibeeditor/server 瘦身 —— 移除了 agent/ 目录（provider、loop），改为依赖 @vibeeditor/agent - 零外部依赖 —— @vibeeditor/agent 不依赖任何工作区包，通过 IAgentFileSystem 接口与平台解耦
2. 架构图 — 包依赖与部署拓扑
AI Agent 框架 · LLM Provider · 工具循环"] core["@vibeeditor/core
共享类型 / FS抽象 / 编辑器状态"] server["@vibeeditor/server
Express · REST API"] web["@vibeeditor/web
Vue 3 · Vite · Monaco"] electron["@vibeeditor/electron
Electron 壳 · IPC 桥接"] end subgraph Runtime["运行时环境"] browser["Browser
File System Access API"] node_srv["Node.js 服务器
本地 / 远程文件"] desktop["Electron 桌面
原生 fs 对话框"] end agent --> core agent --> server agent --> web core --> server core --> web core --> electron web -.->|dev proxy /api → :20385| server electron -->|加载 web/dist 或 Vite dev URL| web server -->|SERVE_STATIC 时提供| web electron -->|IPC invoke| desktop server -->|fs 操作| node_srv web -->|File System Access API| browser
说明：@vibeeditor/agent 是独立的 AI Agent 框架模块，提供 LLM Provider、Agent 循环和工具执行等核心能力。@vibeeditor/core 聚焦文件系统抽象和编辑器状态管理。前端 web 在开发时通过 Vite proxy 将 /api 转发到 server；Electron 模式下前端由 Electron 窗口加载，文件操作通过 preload.ts 暴露的 IPC 桥接到主进程的 Node.js fs。
安装依赖
npm install
P4 — 部署 & 分发
| # | 功能 | 状态 | 说明 |
|---|---|---|---|
| 33 | 服务器部署 (Express + 静态前端) | ✅ | SERVE_STATIC 环境变量指向 web/dist |
| 34 | Electron 桌面应用 | ✅ | 支持 dev/prod 模式, IPC 文件操作, 文件对话框 |
| 35 | Electron 原生菜单栏 | ✅ | File/Edit/Help 菜单含快捷键，main.ts 和 main-server.ts 均已实现 |
| 36 | Electron 打包 / 安装程序 (electron-builder) | ⚠️ | package.json 已配置基本 build 字段 (appId, productName); 缺少平台目标 (win/mac/linux)、图标、自动更新等; 未验证 |
| 37 | 路径遍历防护 | ✅ | Server file routes 已做 resolve → startsWith 校验 |
| 38 | 认证 / 鉴权 (Bearer Token) | ⚠️ | 中间件已实现, 但 index.ts 中未被导入或挂载 (死代码) |
| 39 | Docker 部署 | ❌ | |
| 40 | CI/CD (GitHub Actions) | ❌ |
快速开始
```bash
部署模式
| 模式 | 文件系统 | 启动命令 |
|---|---|---|
| **Electron** 桌面端 | 本地 FS, 通过 IPC (Node.js fs) | npm run dev:electron（自动启动 Vite + Electron，自动构建 agent、core 和 electron）<br/>两个入口：main.ts（标准窗口）和 main-server.ts（嵌入式服务器 + 原生菜单 + 无边框窗口） |
| **Server** 部署 (远程文件) | Server FS, 通过 REST API | npm run dev:server + npm run dev:web |
| **Browser** 本地文件 | File System Access API | npm run dev:web |
前端会在运行时自动检测环境, 在 packages/web/src/services/fileService.ts 中选择合适的文件服务。
同时启动服务器和前端（自动构建 @vibeeditor/agent + @vibeeditor/core）
npm run dev:all
或分别启动（均会自动构建 @vibeeditor/agent + @vibeeditor/core）
npm run dev:server # 后端运行在 http://localhost:20385 npm run dev:web # 前端运行在 http://localhost:5173 npm run dev:electron # Electron 桌面端（自动启动 Vite 前端 + Electron 窗口）
环境变量
| 变量 | 使用者 | 说明 | 默认值 |
|---|---|---|---|
LLM_API_URL | openai-client.ts | LLM Provider API 地址 | https://api.openai.com/v1 |
LLM_API_KEY | openai-client.ts | LLM Provider API 密钥 | (空) |
LLM_MODEL | openai-client.ts | LLM 模型名称 | gpt-4o |
SERVER_PORT / PORT | server/run.ts, electron/main-server.ts | 服务端口 | 20385（app-config.json） |
SERVE_STATIC | server/run.ts | 静态前端文件路径（生产模式） | (空) |
VITE_DEV_SERVER_URL | electron/main.ts, electron/main-server.ts | Vite 开发服务器 URL | http://localhost:5173 |
AUTH_TOKEN | middleware/auth.ts | Bearer Token（中间件未挂载） | (空) |
ELECTRON_MIRROR | npm install | Electron 二进制下载镜像（国内使用） | (空) |
配置优先级：显式传入参数 > 环境变量 > 默认值
CLI 和 MCP 测试
npm run cli # 交互式 Agent CLI（支持 MCP 工具） npm run mcp:test # MCP 集成测试（STDIO / HTTP / SSE） ```
服务端 API
| 方法 | 端点 | 说明 |
|---|---|---|
| GET | /api/files/list?path=&root= | 列出目录内容 |
| GET | /api/files/read?path=&root= | 读取文件内容 |
| GET | /api/files/read-buffer?path=&root= | 读取文件为 base64（二进制文件） |
| POST | /api/files/write | 写入文件 { path, content, root } |
| DELETE | /api/files/delete?path=&root= | 删除文件 |
| POST | /api/files/mkdir | 创建目录 { path, root } |
| DELETE | /api/files/rmdir?path=&root= | 删除目录 |
| GET | /api/files/exists?path=&root= | 检查路径是否存在 |
| GET | /api/files/stat?path=&root= | 获取文件/目录元数据 |
| POST | /api/files/rename | 重命名 { oldPath, newPath, root } |
| POST | /api/agent/chat | 发送消息给 Agent |
| POST | /api/agent/stream | 流式返回 Agent 响应 (SSE) |
| POST | /api/agent/apply-edits | 应用 AI 生成的编辑操作到文件 |
| POST | /api/mcp/test | 测试 MCP 服务器连接 { config } |
| GET | /api/config/:filename | 读取配置文件 |
| PUT | /api/config/:filename | 写入配置文件 |
| GET | /api/health | 健康检查 |
简单易用，支持智能AI
- 需要让 Claude / Cursor 操作本地工具的 AI 工程师
- 构建多智能体协作系统的 Agent 开发者
- 跨境业务、多语言内容运营团队
- 配置 MCP 服务器时建议使用 stdio 传输 + JSON-RPC，避免暴露公网
- 生产部署优先使用 Docker Compose 隔离依赖，并挂载 volume 持久化数据
- 本地部署优先选 GGUF 量化模型，节省显存并保持响应速度
- Agent 任务先做 dry-run 验证工具调用链，再开启自主执行
- API key 直接提交到 git 仓库（请用 .env 并加入 .gitignore）
- MCP 配置路径拼错或权限不足，重启 Claude Desktop 才生效
- 容器内无法访问宿主机 localhost — 使用 host.docker.internal
- 显存不足直接 OOM — 优先降低 context 或换更小的量化模型
- Docker：VibeEditor 提供官方镜像，docker compose up 一键启动
- CLI：直接 npm install -g / pip install，命令行调用
- 本地部署：CPU 8GB 起，GPU 推荐 16GB+ 显存
- 云端托管：可放在 Vercel / Railway / Fly.io 等 PaaS 平台
⚡ 核心功能
- 可视化 Agent 工作流编排，无需编写复杂代码
- 支持多步骤自动化任务链，实现全流程无人值守
- 与外部 API、数据库和第三方服务无缝集成
- 内置错误处理与自动重试机制，保障稳定运行
- 提供可复用的自动化模板，快速在同类场景部署
- 需要让 Claude / Cursor 操作本地工具的 AI 工程师
- 构建多智能体协作系统的 Agent 开发者
- 跨境业务、多语言内容运营团队
- 配置 MCP 服务器时建议使用 stdio 传输 + JSON-RPC，避免暴露公网
- 生产部署优先使用 Docker Compose 隔离依赖，并挂载 volume 持久化数据
- 本地部署优先选 GGUF 量化模型，节省显存并保持响应速度
- Agent 任务先做 dry-run 验证工具调用链，再开启自主执行
- API key 直接提交到 git 仓库（请用 .env 并加入 .gitignore）
- MCP 配置路径拼错或权限不足，重启 Claude Desktop 才生效
- 容器内无法访问宿主机 localhost — 使用 host.docker.internal
- 显存不足直接 OOM — 优先降低 context 或换更小的量化模型
👥 适合人群
🎯 使用场景
- 自动化日常重复性工作，将精力集中于创造性任务
- 构建数据采集 → 处理 → 输出的完整自动化管线
- 实现跨平台、跨系统的数据流转和业务协同
⚖️ 优点与不足
- +大幅减少重复性人工操作
- +可视化流程，清晰直观
- +可扩展性强，支持复杂场景
- −初始配置和调试需投入一定时间
- −强依赖外部服务的稳定性
- −复杂场景需具备一定技术基础
该工具使用 AGPL-3.0 协议，商用场景请仔细阅读协议条款，必要时咨询法律意见。
AI Skill Hub 为第三方内容聚合平台，本页面信息基于公开数据整理，不对工具功能和质量作任何法律背书。
建议在沙箱或测试环境中充分验证后，再部署至生产环境，并做好必要的安全评估。
⚠️ AGPL 3.0 — 最严格的 Copyleft，网络服务端使用也需开源，SaaS 使用受限。
🔗 相关工具推荐
❓ 常见问题 FAQ
经综合评估，Vibe编辑器 在Agent工作流赛道中表现稳健，质量良好。如果你已有明确的使用需求，可以直接上手体验；如果还在评估阶段，建议对比同类工具后再做决策。
| 原始名称 | VibeEditor |
| 原始描述 | 开源AI工作流：Simple editor supports agentic AI.。⭐8 · TypeScript |
| Topics | AI编辑器工作流 |
| GitHub | https://github.com/zbeeeeeeeeee/VibeEditor |
| License | AGPL-3.0 |
| 语言 | TypeScript |
收录时间：2026-06-07 · 更新时间：2026-06-08 · License：AGPL-3.0 · AI Skill Hub 不对第三方内容的准确性作法律背书。