Build a Web Based AI IDE | Nextjs 15 , React , WebContainers , Prisma , Ollama | Stackblitz Clone
Автор: Suraj Jha
Загружено: 2025-07-22
Просмотров: 21568
Описание:
🧑🏻💻 source-code - https://github.com/Aestheticsuraj234/...
Try Ollama - https://ollama.com/library/codellama
Try WebContainers - https://webcontainers.io/
Try CodeRabbit - https://app.coderabbit.ai
Try Monaco Editor- https://microsoft.github.io/monaco-ed...
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.
Built with Next.js 15, React 19, Tailwind v4, and a fully modern AI-first toolchain.
🚀 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.
TimeStamps
00:00 Intro & Demo
10:46 01. Setup
20:42 02. Database
36:42 03. Authentication
1:52:55 04. Landing Page
2:20:01 05. Dashboard UI (Part 1)
3:09:07 05. Dashboard UI (Part 2)
3:46:42 06. Template Selecting (Part 1)
4:38:36 06. Template Selecting (Part 2)
4:43:48 07. Playground Functionalities
5:08:51 08. File Explorer (Part 1)
6:02:38 08. File Explorer (Part 2)
7:05:53 09. Monaco Editor (Part 1)
7:31:21 09. Monaco Editor (Part 2)
7:55:56 10. WebContainers (Part 1)
9:05:29 10. WebContainers (Part 2)
9:40:23 11. Ollama Installation
9:48:11 12. AI Module (Part 1)
12:09:56 12. AI Module (Part 2)
Повторяем попытку...
Доступные форматы для скачивания:
Скачать видео
-
Информация по загрузке: