A full-stack AI coding platform. You describe what you want to build through a chat interface, and an AI agent generates the code, runs it inside a cloud sandbox, and gives you a live preview — all in one workflow.
Note
Not deployed publicly — running the app requires AI and sandbox API credits. Works fully locally with the right env vars.
Home Page — Landing page with project creation
Code View — Chat with the AI agent + browse generated source files
App Preview — Live preview of the running app inside the sandbox
You type what you want in plain English. An AI agent picks it up, writes the code, installs dependencies, starts a dev server inside a cloud sandbox, and gives you a live preview URL — all within a single chat interaction.
Send follow-up messages to iterate. The agent keeps context from previous messages and can modify what's already been built.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, React 19) |
| Language | TypeScript |
| Auth | Clerk |
| API | tRPC v11 (end-to-end typesafe) |
| Database | PostgreSQL + Prisma ORM |
| AI Orchestration | Inngest Agent Kit |
| AI Model | Configurable (currently Google Gemini) |
| Sandbox | E2B Cloud Environments |
| State | TanStack React Query |
| UI | Radix UI / Shadcn + Tailwind CSS |
User prompt → tRPC mutation → Inngest event
→ AI agent (LLM + tool calls)
→ E2B sandbox (write files, run terminal, start dev server)
→ Save result (Message + Fragment in Postgres)
→ Return sandbox URL + generated files
- Chat-based coding — describe features in natural language across multiple messages
- Sandboxed execution — all code runs in isolated E2B cloud containers
- Live preview — see the running app in an embedded iframe
- Code view — browse generated files with syntax highlighting and a file tree
- Agent tooling — the AI can create/read files and run terminal commands
- Project dashboard — create, list, and revisit projects
- Auth & scoping — Clerk auth, users only see their own projects
- Rate limiting — server-side credit tracking
- End-to-end type safety — tRPC from client to server
src/
├── app/ # Next.js App Router pages & layouts
│ ├── (auth)/ # Clerk sign-in / sign-up
│ ├── (home)/ # Landing page & project list
│ ├── projects/[id]/ # Project view (chat + preview)
│ └── api/ # tRPC & Inngest routes
├── components/ # Shared UI (file explorer, tree view, sidebar, etc.)
├── modules/
│ ├── home/ # Home page components
│ ├── projects/ # Project view, messages, fragments
│ ├── messages/ # Message server procedures
│ └── usage/ # Credit tracking
├── inngest/
│ ├── functions.ts # AI agent network + tool definitions
│ └── utils.ts # Sandbox helpers
├── trpc/ # tRPC config & React client
├── prompt.ts # System prompts
└── lib/ # Prisma client, utils
prisma/
└── schema.prisma # DB schema
- Node.js 18+
- PostgreSQL
- API keys: Clerk, E2B, and an LLM provider (Gemini, OpenAI, etc.)
git clone https://github.com/AdnanElAssadi56/vibe.git
cd vibe
npm install
cp .env.example .env
# Fill in your API keys (see .env.example for all required vars)
npx prisma generate
npx prisma migrate deploy
npm run devRuns at http://localhost:3000.
Four Prisma models:
- Project — a user's coding project
- Message — chat messages (
USER/ASSISTANT), ordered by timestamp - Fragment — code output attached to assistant messages (files as JSON + sandbox URL)
- Usage — per-user credit tracking with expiring points
The agent runs as an Inngest function using Agent Kit:
- Code Agent — receives the prompt and has three tools:
terminal— run shell commands in the sandboxcreateOrUpdateFiles— write/update filesreadFiles— read file contents
- Title Generator — creates a short title for each code fragment
- Response Generator — writes a summary of what was built
Max 10 iterations per run. File state is tracked across tool calls and persisted as a Fragment when done.