https://github.com/aestheticsuraj234/vibecode-playground
Vibecode Editor is a fullstack, web-based IDE built with Next.js and Monaco Editor. It features real-time code execution using WebContainers, AI-powered code suggestions via locally running Ollama models, multi-stack templates, an integrated terminal, and a developer-focused UI for seamless coding in the browser.
https://github.com/aestheticsuraj234/vibecode-playground
ai-autocomplete browser-ide code-editor developer-tools fullstack javascript-editor local-llm monaco-editor nextauth nextjs ollama shadcn-ui tailwindcss typescript web-ide webcontainers xtermjs
Last synced: about 1 month ago
JSON representation
Vibecode Editor is a fullstack, web-based IDE built with Next.js and Monaco Editor. It features real-time code execution using WebContainers, AI-powered code suggestions via locally running Ollama models, multi-stack templates, an integrated terminal, and a developer-focused UI for seamless coding in the browser.
- Host: GitHub
- URL: https://github.com/aestheticsuraj234/vibecode-playground
- Owner: Aestheticsuraj234
- Created: 2025-05-05T06:42:25.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2025-08-06T15:11:58.000Z (2 months ago)
- Last Synced: 2025-08-08T04:51:14.002Z (2 months ago)
- Topics: ai-autocomplete, browser-ide, code-editor, developer-tools, fullstack, javascript-editor, local-llm, monaco-editor, nextauth, nextjs, ollama, shadcn-ui, tailwindcss, typescript, web-ide, webcontainers, xtermjs
- Language: TypeScript
- Homepage:
- Size: 9.18 MB
- Stars: 37
- Watchers: 2
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🧠 Vibecode Editor – AI-Powered Web IDE
**Vibecode Editor** is a blazing-fast, AI-integrated web IDE built entirely in the browser using **Next.js App Router**, **WebContainers**, **Monaco Editor**, and **local LLMs via Ollama**. It offers real-time code execution, an AI-powered chat assistant, and support for multiple tech stacks — all wrapped in a stunning developer-first UI.
---
## 🚀 Features
- 🔐 **OAuth Login with NextAuth** – Supports Google & GitHub login.
- 🎨 **Modern UI** – Built with TailwindCSS & ShadCN UI.
- 🌗 **Dark/Light Mode** – Seamlessly toggle between themes.
- 🧱 **Project Templates** – Choose from React, Next.js, Express, Hono, Vue, or Angular.
- 🗂️ **Custom File Explorer** – Create, rename, delete, and manage files/folders easily.
- 🖊️ **Enhanced Monaco Editor** – Syntax highlighting, formatting, keybindings, and AI autocomplete.
- 💡 **AI Suggestions with Ollama** – Local models give you code completion on `Ctrl + Space` or double `Enter`. Accept with `Tab`.
- ⚙️ **WebContainers Integration** – Instantly run frontend/backend apps right in the browser.
- 💻 **Terminal with xterm.js** – Fully interactive embedded terminal experience.
- 🤖 **AI Chat Assistant** – Share files with the AI and get help, refactors, or explanations.
---
## 🧱 Tech Stack
| Layer | Technology |
|---------------|----------------------------------------------|
| Framework | Next.js 15 (App Router) |
| Styling | TailwindCSS, ShadCN UI |
| Language | TypeScript |
| Auth | NextAuth (Google + GitHub OAuth) |
| Editor | Monaco Editor |
| AI Suggestion | Ollama (LLMs running locally via Docker) |
| Runtime | WebContainers |
| Terminal | xterm.js |
| Database | MongoDB (via DATABASE_URL) |
---
## 🛠️ Getting Started
### 1. Clone the Repo
```bash
git clone https://github.com/your-username/vibecode-editor.git
cd vibecode-editor
````
### 2. Install Dependencies
```bash
npm install
```
### 3. Set Up Environment Variables
Create a `.env.local` file using the template:
```bash
cp .env.example .env.local
```
Then, fill in your credentials:
```env
AUTH_SECRET=your_auth_secret
AUTH_GOOGLE_ID=your_google_client_id
AUTH_GOOGLE_SECRET=your_google_secret
AUTH_GITHUB_ID=your_github_client_id
AUTH_GITHUB_SECRET=your_github_secret
DATABASE_URL=your_mongodb_connection_string
NEXTAUTH_URL=http://localhost:3000
```
### 4. Start Local Ollama Model
Make sure [Ollama](https://ollama.com/) and Docker are installed, then run:
```bash
ollama run codellama
```
Or use your preferred model that supports code generation.
### 5. Run the Development Server
```bash
npm run dev
```
Visit `http://localhost:3000` in your browser.
---
## 📁 Project Structure
```
.
├── app/ # App Router-based pages & routes
├── components/ # UI components
├── editor/ # Monaco, File Explorer, Terminal
├── lib/ # Utility functions
├── public/ # Static files (incl. thumbnail)
├── utils/ # AI helpers, WebContainer logic
├── .env.example # Example env vars
└── README.md
```
---
## 🎯 Keyboard Shortcuts
* `Ctrl + Space` or `Double Enter`: Trigger AI suggestions
* `Tab`: Accept AI suggestion
* `/`: Open Command Palette (if implemented)
---
## ✅ Roadmap
* [x] Google & GitHub Auth via NextAuth
* [x] Multiple stack templates
* [x] Monaco Editor + AI
* [x] WebContainers + terminal
* [x] AI chat for code assistance
* [ ] GitHub repo import/export
* [ ] Save/load playground from DB
* [ ] Real-time collaboration
* [ ] Plugin system for templates/tools
* [ ] One-click deploy via Vercel/Netlify
---
## 📄 License
This project is licensed under the [MIT License](LICENSE).
---
## 🙏 Acknowledgements
* [Monaco Editor](https://microsoft.github.io/monaco-editor/)
* [Ollama](https://ollama.com/) – for offline LLMs
* [WebContainers](https://webcontainers.io/)
* [xterm.js](https://xtermjs.org/)
* [NextAuth.js](https://next-auth.js.org/)
```