🧠 MoodStack – AI-Powered Web IDE

MoodStack is a browser-based IDE I built to experiment with AI-assisted coding workflows.
It runs fully in the browser using Next.js App Router, WebContainers, Monaco Editor, and local LLMs via Ollama.

The goal:
a fast, offline-friendly, developer-first IDE with real execution, an AI assistant, and multi-stack project support — without relying on cloud APIs.

---

🚀 What It Can Do

• 🔐 OAuth Login (NextAuth) – Google + GitHub auth.
• 🎨 Clean Modern UI – TailwindCSS + ShadCN UI.
• 🌗 Dark / Light Mode – Theme toggle built in.
• 🧱 Project Templates – React, Next.js, Express, Hono, Vue, Angular.
• 🗂️ Custom File Explorer – Create / rename / delete files & folders.
• 🖊️ Monaco Editor – Syntax highlighting, formatting, keybindings.
• 💡 AI Suggestions (Ollama)
  • Trigger with Ctrl + Space or double Enter
  • Accept with Tab
  • Runs locally (no API keys).
• ⚙️ WebContainers Runtime – Run frontend & backend apps directly in the browser.
• 💻 Embedded Terminal – Powered by xterm.js.
• 🤖 AI Chat Assistant – Share files with the model for help, refactors, or explanations.

---

🧱 Tech Stack

Layer	Tech Used
Framework	Next.js 15 (App Router)
Styling	TailwindCSS, ShadCN UI
Language	TypeScript
Auth	NextAuth (Google + GitHub OAuth)
Editor	Monaco Editor
AI Engine	Ollama (local LLMs via Docker)
Runtime	WebContainers
Terminal	xterm.js
Database	MongoDB

---

🛠️ Setup (Local Dev)

1. Clone the Repo

git clone https://github.com/your-username/moodstack.git
cd moodstack

---

🛠️ Setup (Local Development)

2. Install Dependencies

npm install

3. Set Up Environment Variables

Create a .env.local file using the template:

cp .env.example .env.local

Then, fill in your credentials:

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 and Docker are installed, then run:

ollama run codellama

Or use your preferred model that supports code generation.

5. Run the Development Server

npm run dev

Open in Browser

http://localhost:3000

---

🎯 Keyboard Shortcuts

Action	Shortcut
Trigger AI Suggestion	Ctrl + Space / Double Enter
Accept Suggestion	Tab
Command Palette	/ (if enabled)

---

🧠 Why I Built This

I wanted a local-first AI coding environment where:

• AI runs offline
• Code executes in-browser
• I control the entire stack
• No vendor lock-in or paid APIs

MoodStack is my playground for experimenting with:

• AI-assisted dev UX
• In-browser runtimes
• IDE-level product design

---

🙏 Credits

• Monaco Editor
• Ollama – for offline LLMs
• WebContainers
• xterm.js
• NextAuth.js

⚠️ Notes

• This is still an evolving project.
• Expect breaking changes.
• Contributions & feedback are welcome.

---