CodeVibe

Describe it. Watch it build. Ship it.

An open-source AI-powered collaborative code editor that turns natural language into production-ready Next.js apps — in real time.

Live Demo →

---

The Idea

You type "build me a personal finance tracker with charts and a dark theme."

Then you watch. The AI classifies your request (web app vs. workflow automation), asks for one-tap approval, then reasons through the architecture, writes each file one by one, installs packages, handles errors, and spins up a live preview — all streaming in real time. Other users can join your session and edit alongside you. When it's ready, push to GitHub or deploy to Vercel in one click.

How It Works

1. Describe → Type what you want in plain English
2. Approve → Confirm "Next.js app" or "n8n workflow" template
3. Watch → AI builds it file-by-file with live preview
4. Collaborate → Others join via shared link, edit together
5. Iterate → Ask for changes, AI fixes/adds in real time
6. Ship → Push to GitHub or deploy to Vercel

Architecture

System Overview

graph TB
subgraph Client["Browser"]
UI[Next.js Frontend]
Monaco[Monaco Editor]
Preview[Live Preview iframe]
Yjs[Yjs CRDT Document]
end
subgraph Servers["Backend Services"]
Next[Next.js Server :3000]
Agent[LangGraph Agent :2024]
WS[Hocuspocus WebSocket :1234]
DB[(PostgreSQL)]
end
subgraph Sandbox["E2B Cloud Sandbox"]
FS[File System]
Runtime[Node.js Runtime]
DevServer[Next.js Dev Server]
end
UI -->|useStream| Agent
Agent -->|Kimi K2.5| Sandbox
Agent -->|codePatch events| Monaco
Agent -->|fileTreeSync| UI
Monaco <-->|y-monaco binding| Yjs
Yjs <-->|WebSocket| WS
WS <-->|sync| Yjs2[Other Users' Yjs]
UI -->|tRPC| Next
Next -->|Prisma| DB
Preview -->|iframe src| DevServer
Monaco -->|write-to-sandbox| FS

Loading

AI Agent Flow

sequenceDiagram
participant U as User
participant F as Frontend
participant A as LangGraph Agent
participant C as Kimi K2.5
participant S as E2B Sandbox
participant Y as Yjs Server
U->>F: "Build a todo app"
F->>A: useStream (submit)
A->>C: Prompt + Tools + Extended Thinking
C-->>A: Reasoning + Tool Calls
loop For each component
A->>S: e2b_write_file(page.tsx)
S-->>A: Success
A-->>F: codePatch (streaming_start)
A-->>F: codePatch (streaming_chunk)
A-->>F: codePatch (streaming_end)
F->>Y: Update Yjs document
Y-->>F: Broadcast to collaborators
end
A->>S: e2b_run_command(npm install)
A-->>F: tool_progress
A->>S: e2b_list_files_recursive
A-->>F: fileTreeSync
F->>U: Live preview updates

Loading

Real-Time Collaboration

graph LR
subgraph User_A["User A"]
EA[Monaco Editor A]
YA[Y.Doc A]
end
subgraph User_B["User B"]
EB[Monaco Editor B]
YB[Y.Doc B]
end
subgraph AI["AI Agent"]
Agent[LangGraph]
YC[Yjs Update]
end
subgraph Server["Hocuspocus :1234"]
Hub[WebSocket Hub]
end
EA <-->|y-monaco| YA
EB <-->|y-monaco| YB
YA <-->|WebSocket| Hub
YB <-->|WebSocket| Hub
Agent -->|updateYjsDocument| YC
YC -->|WebSocket| Hub
style Hub fill:#4ECDC4,color:#000
style Agent fill:#FF6B6B,color:#000

Loading

Features

Feature	Description
AI Code Generation	Kimi K2.5 on AWS Bedrock builds full Next.js apps from prompts
Dual Templates	Pick between Next.js web apps or n8n workflow automations — agent classifies and asks for approval
Live Preview	Sandboxed app running in E2B with hot reload as code is written
Real-Time Collab	Yjs CRDTs + Hocuspocus — cursor presence, conflict-free merging
Streaming Editor	Code appears character-by-character with auto-scroll
Background Runs	LangGraph + Postgres checkpointer — close the tab, agent keeps working
GitHub Integration	Push to a new or existing repo, or import an existing repo into a sandbox
One-Click Deploy	Ship the running sandbox straight to Vercel
Download Project	Export the full project as a zip at any time
Session Sharing	One link to invite collaborators into your session
Tool Transparency	Every file write, shell command, and decision visible in chat
Mobile Ready	Tab-based interface (Chat / Code / Preview) for mobile
MCP Integration	Playwright + n8n + Next.js Docs via Model Context Protocol

Tech Stack

graph LR
subgraph Frontend
A[Next.js 16] --> B[React 19]
B --> C[Monaco Editor]
B --> D[Tailwind + Shadcn UI]
B --> E[Framer Motion]
B --> F[Zustand]
end
subgraph Collaboration
G[Yjs] --> H[y-monaco]
G --> I[Hocuspocus]
I --> J[WebSocket]
end
subgraph AI
K[LangGraph] --> L[Kimi K2.5]
K --> M[MCP Tools]
K --> N[E2B Sandbox]
end
subgraph Data
O[tRPC] --> P[Prisma]
P --> Q[PostgreSQL]
R[Clerk Auth]
end
style Frontend fill:#1a1a2e,color:#fff
style Collaboration fill:#16213e,color:#fff
style AI fill:#0f3460,color:#fff
style Data fill:#533483,color:#fff

Loading

Getting Started

Prerequisites

• Node.js 21+
• PostgreSQL
• API keys: E2B_API_KEY, CLERK_SECRET_KEY, AWS credentials (AWS_ACCESS_KEY_ID / AWS_SECRET_ACCESS_KEY / AWS_REGION) for Bedrock

Setup

git clone https://github.com/kaifcoder/codevibe.git
cd codevibe
npm install
npx prisma migrate dev

Environment Variables

# RequiredDATABASE_URL=postgresql://...E2B_API_KEY=...NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=...CLERK_SECRET_KEY=...LLM_PROXY_URL=http://0.0.0.0:3030# or your hosted proxyLLM_PROXY_API_KEY=...# OptionalNEXT_PUBLIC_APP_URL=https://your-domain# canonical site URL for SEO/share linksNEXT_PUBLIC_WS_URL=ws://localhost:1234# Yjs serverNEXT_PUBLIC_LANGGRAPH_URL=http://localhost:2024N8N_PROXY_URL=http://localhost:1235# only if using n8n templateGITHUB_CLIENT_ID=...# only if enabling GitHub push/importGITHUB_CLIENT_SECRET=...

Run (3 terminals)

npm run dev # Next.js → localhost:3000
npm run agent # LangGraph → localhost:2024
npm run yjs # Collaboration → localhost:1234

Other Commands

npm run build # Production build
npm run lint # ESLint
npx prisma studio # Database GUI (localhost:5555)
npx prisma migrate dev --name <name># New migration

Project Structure

src/
├── app/ # Next.js App Router
│ ├── chat/[id]/page.tsx # Main editor interface
│ ├── api/sync-filesystem/ # E2B → Frontend file sync
│ ├── api/write-to-sandbox/ # Editor → E2B write
│ ├── api/session/[token]/ # Session CRUD
│ ├── api/n8n-proxy/register/ # Multi-tenant n8n iframe routing
│ ├── api/warmup/ # Server-side fan-out keep-alive
│ ├── opengraph-image.tsx # Programmatic OG image (edge runtime)
│ ├── sitemap.ts / robots.ts # SEO metadata
│ └── layout.tsx # Metadata, JSON-LD, theme provider
├── lib/
│ ├── agent.ts # LangGraph agent (model + middleware)
│ ├── e2b-tools.ts # Sandbox tools (6 tools)
│ ├── nextjs-agent-prompt.ts # Next.js builder system prompt
│ ├── n8n-agent-prompt.ts # n8n workflow builder system prompt
│ ├── dispatcher-agent-prompt.ts # Template-classification prompt
│ ├── sandbox-registry.ts # Thread-scoped sandbox + template state
│ ├── mcp-client.ts # MCP tool integration (Playwright, n8n, docs)
│ ├── site-url.ts # Canonical URL resolver (NEXT_PUBLIC_APP_URL → Vercel envs)
│ └── collaboration/ # Yjs + Hocuspocus setup
├── contexts/chat-context.tsx # Per-session client state (replaces former Zustand store)
├── hooks/
│ ├── use-agent-stream.ts # useStream + custom event handling
│ └── use-collaboration.ts # Yjs session per file
├── components/ # React UI components (incl. NamePromptDialog, GithubButton, DeployButton)
└── trpc/ # tRPC routers and client
# Top-level servers (run separately)
yjs-server.js # Hocuspocus WebSocket server
n8n-proxy.ts # Multi-tenant n8n reverse proxy

Agent Toolbelt

Tool	What it does
set_template	Classify the request (Next.js vs. n8n) — gated behind one-tap user approval
e2b_write_file	Create/overwrite files (streams progressively to editor)
e2b_read_file	Read file contents from sandbox
e2b_run_command	Execute shell commands (npm install, etc.)
e2b_list_files	List directory contents
e2b_list_files_recursive	Full project tree with filtering
e2b_delete_file	Remove files/directories
Playwright MCP	Browser automation and testing
n8n MCP	Workflow node lookup, validation, and execution helpers
Next.js Docs MCP	Official documentation lookup

Contributing

Contributions welcome! Fork the repo, check open issues, and submit a PR.

License

MIT

---

Built by @kaifcoder

Star this repo if you find it useful!