bjzgcai/vibe Vibe 项目

项目简介

bjzgcai/vibe（GitHub 仓库：https://github.com/bjzgcai/vibe）是一款开源、网页端的 Vibe Coding 全栈工作台，设计灵感来自字节跳动 Coze 的「网页编程」体验，但完全由社区自托管、可本地部署。项目以 Claude AI 作为底层模型驱动，自带 Monaco 代码编辑器、可视化文件树、实时预览 iframe、控制台输出面板与 AI 编程助手，目标是让用户在浏览器里就能完成「写代码 → 跑效果 → 让 AI 改」的全流程，而不必在本地反复切终端与编辑器。

整个工程由 Next.js 16（App Router）前端 + FastAPI 后端两部分组成，使用 React 19、TypeScript、TailwindCSS、Monaco Editor、Zustand 状态管理、Lucide React 图标库，并通过 OpenRouter 接入 Anthropic SDK 调起 Claude 模型。仓库内置 webapp/、server/、ARCHITECTURE.md 三大目录结构，所有项目均以「文件系统级」方式落到本地存储，便于用户备份与迁移。

核心功能

1. Monaco 代码编辑器 + 多语言高亮：基于 VS Code 同款 Monaco Editor，提供语法高亮、自动补全、错误标记、行号、括号匹配等熟悉的 IDE 体验，支持 JavaScript、TypeScript、HTML、CSS、Python、JSON 等多种语言，编辑器选项与快捷键可按用户偏好定制。
2. 可视化文件树导航：左侧栏以层级树形式展示项目文件，支持新建、重命名、删除、拖拽排序；切换文件时编辑器内容平滑过渡，配合面包屑导航让用户随时知道自己在项目的哪个分支。
3. 实时预览 iframe 面板：右侧面板以 iframe 形式实时运行当前项目（HTML/React/Vue 等），代码变更后自动刷新；提供「强制刷新」按钮应对需要清缓存的场景，预览与编辑可双向滚动同步。
4. 终端 / 控制台输出：底部面板展示后端日志、运行时错误、AI 调试输出，支持 ANSI 颜色、链接点击与历史回放，便于定位前端报错与后端栈追踪。
5. Claude AI 编程助手：基于 Claude + Anthropic SDK 的对话式助手，可生成代码、解释陌生代码、修复 bug、提供改进建议，对话历史本地持久化，支持上下文引用当前打开的文件与项目结构。
6. 基于文件系统的项目存储：所有项目代码、AI 对话、配置都以普通文件形式落到 projects/ 目录下，便于 Git 版本管理、Docker 打包与跨设备迁移，无需数据库即可工作。
7. 多模板项目脚手架：内置 Blank、React、HTML 三种新建项目模板，新手可以一键开启空白页或 React 脚手架，节省初始化时间。

技术实现

整个仓库采用前后端分离 + 文件系统落盘的经典结构：前端 webapp/ 是 Next.js 16 App Router 应用，路由文件位于 app/page.tsx（首页）与 app/editor/page.tsx（编辑器主视图），UI 组件按职责拆分到 components/navbar/（顶部导航）、components/file-explorer/（文件树）、components/code-editor/（Monaco 容器）、components/preview-panel/（iframe 预览）、components/terminal/（控制台）、components/ai-assistant/（AI 对话界面）六个目录，状态层用 Zustand 统一管理，全局 API 客户端封装在 lib/api.ts 与 lib/store.ts。

后端 server/ 是 FastAPI 应用，入口 main.py 把项目 CRUD、文件操作、AI 助手、预览生成四类接口拆分到 routers/projects.py、routers/files.py、routers/ai.py、routers/preview.py，对应服务层放在 services/project_manager.py、services/file_manager.py、services/claude_agent.py，请求/响应模型用 Pydantic 写在 models/schemas.py。AI 部分通过 OpenRouter 统一接入 Anthropic Claude，claude_agent.py 把 Claude 的流式输出转成 FastAPI 的 SSE，前端可边接收边渲染。

环境要求：Node.js 18+ 与 pnpm（前端）、Python 3.10+（后端）、OpenRouter API Key（AI 推理）。后端启动用 python3 main.py（监听 http://localhost:8000），前端启动用 pnpm dev（监听 http://localhost:3000），.env.local 中需要写入 OPEN_ROUTER_API_KEY=***。整个栈不依赖任何云服务，可完全离线运行（除 AI 调用外）。

快速上手

1. 克隆仓库并安装后端依赖：git clone https://github.com/bjzgcai/vibe && cd vibe/server，然后 pip install -r requirements.txt，把 OPEN_ROUTER_API_KEY=你的密钥 写入 .env.local。
2. 启动 FastAPI 服务：在 server/ 目录执行 python3 main.py，看到 Uvicorn running on http://localhost:8000 即可继续。
3. 安装前端依赖并启动：另开终端 cd webapp && pnpm install，等待依赖装好后执行 pnpm dev，浏览器访问 http://localhost:3000。
4. 创建第一个项目：在首页点击「新建项目」，填写项目名，选择 Blank / React / HTML 模板，进入编辑器即可开始写代码，文件树左侧实时更新。
5. 使用 AI 助手：在右下角 AI 助手面板输入「帮我写一个 React 计数器组件」或「把这段代码改成 TypeScript」，Claude 会基于当前文件上下文给出可直接应用的代码片段。

适用人群

• 自托管 Vibe Coding 玩家：希望拥有「像 Coze 网页编程一样」的低门槛网页端编程体验，又不想把代码交给闭源云平台的独立开发者；
• AI 编程教学讲师：需要在课堂上演示「写一段代码 → AI 改 → 实时看效果」闭环的教师与培训师，可直接用 vibe 录制操作过程；
• Next.js / React 学习者：想用真实项目学习 Next.js 16 App Router、FastAPI、Monaco Editor、Zustand 等现代前端栈的中级工程师；
• 产品原型设计者：产品经理、独立创业者需要在零环境配置的前提下快速搭可交互原型，并把对话历史、文件结构一并保存；
• Claude API 集成的工程参考：正在评估 Anthropic SDK + OpenRouter + FastAPI 组合后端方案的后端工程师，可参考 services/claude_agent.py 与 routers/ai.py 的实现。

官方链接

• GitHub 仓库：https://github.com/bjzgcai/vibe
• 架构文档：https://github.com/bjzgcai/vibe/blob/main/ARCHITECTURE.md
• 许可协议：开源（仓库内 LICENSE 文件为准）
• 灵感来源：字节跳动 Coze「网页编程」（Web Coding）功能