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 -->|Claude Sonnet 4| 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

AI Agent Flow

sequenceDiagram
    participant U as User
    participant F as Frontend
    participant A as LangGraph Agent
    participant C as Claude Sonnet 4.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

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

Features

Feature	Description
AI Code Generation	Claude Sonnet 4.5 with extended thinking 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[Claude Sonnet 4.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

Getting Started

Prerequisites

Node.js 21+
PostgreSQL
API keys: E2B_API_KEY, CLERK_SECRET_KEY, Anthropic (via LangGraph)

Setup

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

Environment Variables

# Required
DATABASE_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 proxy
LLM_PROXY_API_KEY=...

# Optional
NEXT_PUBLIC_APP_URL=https://your-domain    # canonical site URL for SEO/share links
NEXT_PUBLIC_WS_URL=ws://localhost:1234     # Yjs server
NEXT_PUBLIC_LANGGRAPH_URL=http://localhost:2024
N8N_PROXY_URL=http://localhost:1235        # only if using n8n template
GITHUB_CLIENT_ID=...                       # only if enabling GitHub push/import
GITHUB_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!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CodeVibe

Describe it. Watch it build. Ship it.

The Idea

How It Works

Architecture

System Overview

AI Agent Flow

Real-Time Collaboration

Features

Tech Stack

Getting Started

Prerequisites

Setup

Environment Variables

Run (3 terminals)

Other Commands

Project Structure

Agent Toolbelt

Contributing

License

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

CodeVibe

Describe it. Watch it build. Ship it.

The Idea

How It Works

Architecture

System Overview

AI Agent Flow

Real-Time Collaboration

Features

Tech Stack

Getting Started

Prerequisites

Setup

Environment Variables

Run (3 terminals)

Other Commands

Project Structure

Agent Toolbelt

Contributing

License