Build applications with AI-powered code generation. Describe what you want, and VibeCoder writes the code.
VibeCoder is an open-source AI coding agent that transforms natural language descriptions into production-ready code. Similar to platforms like Bolt.new, Lovable, and v0.dev, VibeCoder provides a complete in-browser development environment where you can:
- 💬 Chat with AI to describe what you want to build
- 📁 Generate complete file structures automatically
- ✏️ Edit code with a Monaco-powered editor
- 🔄 Iterate quickly with AI-assisted modifications
- 📦 Export projects as ZIP files
- Two-Phase Processing: Thinking phase for understanding, then coding phase for execution
- Agentic Loop: Separate LLM calls for each tool execution (read, create, update, delete)
- Context-Aware: AI understands your entire project structure
- Tool Execution: AI can read existing files before modifying them
- Monaco Editor: VS Code-like editing experience
- Syntax Highlighting: Support for 20+ languages
- Multi-Tab Support: Work on multiple files simultaneously
- Real-Time Updates: See AI changes as they happen
- In-Browser Storage: No server needed for file management
- Folder Structure: Organize files in directories
- File Operations: Create, read, update operations (delete by AI only)
- Export to ZIP: Download your entire project
Connect to 12+ AI providers with your own API keys:
| Provider | Models |
|---|---|
| OpenRouter | Access to 100+ models |
| OpenAI | GPT-4, GPT-4o, GPT-3.5 |
| Anthropic | Claude 3.5, Claude 3 |
| Gemini Pro, Gemini Flash | |
| Groq | Llama 3, Mixtral (fast inference) |
| Mistral | Mistral Large, Medium, Small |
| DeepSeek | DeepSeek Coder, Chat |
| Cohere | Command R+, Command R |
| Fireworks | Various open models |
| Cerebras | Fast inference models |
| Hugging Face | Open source models |
| Together AI | Open source models |
┌─────────────────────────────────────────────────────────────────────┐
│ VIBECODER ARCHITECTURE │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────────┐ │
│ │ AI Panel │ │ Explorer │ │ Code Editor │ │
│ │ │ │ │ │ (Monaco) │ │
│ │ - Chat UI │ │ - File Tree │ │ │ │
│ │ - Thinking │ │ - Folders │ │ - Syntax Highlight │ │
│ │ - Status │ │ - Files │ │ - Multi-tab │ │
│ └──────┬───────┘ └──────┬───────┘ └──────────┬───────────┘ │
│ │ │ │ │
│ └───────────────────┼───────────────────────┘ │
│ │ │
│ ┌────────▼────────┐ │
│ │ Zustand Store │ │
│ │ │ │
│ │ - chatStore │ │
│ │ - fileSystem │ │
│ │ - editorStore │ │
│ │ - agentStore │ │
│ │ - settings │ │
│ └────────┬────────┘ │
│ │ │
│ ┌───────────────────┼───────────────────┐ │
│ │ │ │ │
│ ┌──────▼──────┐ ┌───────▼───────┐ ┌──────▼──────┐ │
│ │ /api/think │ │ /api/agent │ │ /api/chat │ │
│ │ │ │ │ │ │ │
│ │ Reasoning │ │ Agent Loop │ │ Streaming │ │
│ │ Phase │ │ + Tools │ │ Response │ │
│ └─────────────┘ └───────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
User Message
│
▼
┌─────────────┐
│ LLM Call #1 │ ──► Contains tool calls?
└─────────────┘
│
├── NO ──► Done (final response)
│
├── YES ──► Execute tools (read_file, create, update, delete)
│ │
│ ▼
│ Tool Results
│ │
│ ▼
│ ┌─────────────┐
└► │ LLM Call #2 │ ──► More tool calls? (loop continues)
└─────────────┘
│
└── Until no more tool calls (max 10 iterations)
- Node.js 18+ or Bun
- API key from any supported provider
-
Clone the repository
git clone https://github.com/beeweed/vibecoder.git cd vibecoder -
Install dependencies
npm install # or bun install -
Start the development server
npm run dev # or bun dev -
Open your browser
http://localhost:3000 -
Add your API key
- Click the ⚙️ settings icon
- Select your preferred provider
- Enter your API key
- Start coding!
vibecoder/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/
│ │ │ ├── agent/ # Agentic loop endpoint
│ │ │ ├── chat/ # Streaming chat endpoint
│ │ │ ├── think/ # Reasoning phase endpoint
│ │ │ ├── models/ # Provider-specific endpoints
│ │ │ └── tools/ # Tool execution endpoints
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ └── globals.css
│ │
│ ├── components/
│ │ ├── ai-panel/ # Chat interface
│ │ │ ├── AIPanel.tsx
│ │ │ └── ToolCallIndicator.tsx
│ │ ├── editor/ # Monaco code editor
│ │ │ └── EditorPanel.tsx
│ │ ├── file-explorer/ # File tree
│ │ │ └── FileExplorer.tsx
│ │ ├── layout/ # Header, navigation
│ │ │ ├── Header.tsx
│ │ │ ├── MobileNav.tsx
│ │ │ └── ModelSelector.tsx
│ │ ├── modals/ # Settings modal
│ │ │ └── SettingsModal.tsx
│ │ └── ui/ # shadcn/ui components
│ │
│ ├── stores/ # Zustand state management
│ │ ├── agentStore.ts # Agent status, activity log
│ │ ├── chatStore.ts # Messages, generation state
│ │ ├── editorStore.ts # Tabs, cursor position
│ │ ├── fileSystemStore.ts # Virtual file system
│ │ └── settingsStore.ts # API keys, preferences
│ │
│ ├── lib/
│ │ ├── fileIcons.ts # File type icons
│ │ ├── parser.ts # AI response parser
│ │ ├── systemPrompt.ts # AI system prompts
│ │ └── utils.ts # Utility functions
│ │
│ └── types/
│ ├── agent.ts # Agent types
│ ├── chat.ts # Chat types
│ ├── files.ts # File system types
│ ├── openrouter.ts # API types
│ └── tools.ts # Tool types
│
├── public/
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── README.md
| Category | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript 5 |
| Styling | TailwindCSS 3.4 |
| UI Components | Radix UI (shadcn/ui) |
| State Management | Zustand |
| Code Editor | Monaco Editor |
| Animations | Framer Motion |
| Icons | Lucide React |
| Notifications | Sonner |
| Linting | Biome |
Create a .env.local file for default settings:
# App URL (for OpenRouter referrer)
NEXT_PUBLIC_APP_URL=http://localhost:3000VibeCoder supports syntax highlighting for:
- Web:
.js,.jsx,.ts,.tsx,.html,.css,.scss - Data:
.json,.yaml,.yml,.xml,.toml - Docs:
.md,.mdx,.txt - Backend:
.py,.go,.rs,.java,.rb,.php - Database:
.sql,.prisma,.graphql - Config:
.env,.gitignore,Dockerfile - And many more...
VibeCoder uses special markers to parse AI responses:
<<<FILE_CREATE: src/components/Button.tsx>>>
// Your code here
<<<FILE_END>>>
<<<FILE_UPDATE: src/components/Button.tsx>>>
// Updated code here
<<<FILE_END>>>
<<<FILE_DELETE: src/old-file.tsx>>>
<<<TOOL_CALL: read_file>>>
{"path": "src/components/Button.tsx"}
<<<TOOL_END>>>
- E2B Sandbox - Live code preview in sandboxed environment
- Web Search - AI can search the web for documentation
- Git Integration - Push/pull from GitHub repositories
- Deploy - One-click deploy to Vercel/Netlify
- File Upload - Upload images and files with prompts
- Project Templates - Start with Next.js, Python, etc.
- Sub-Agents - Specialized agents for different tasks
- Collaboration - Real-time multiplayer editing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with ii-agent assistance
- Inspired by Bolt.new, v0.dev, and Lovable
- UI components from shadcn/ui
⭐ Star this repo if you find it useful!
Made with ❤️ by beeweed