DevAgent Studio 🚀

DevAgent Studio is a modern, full-featured AI-powered Agentic IDE and desktop development studio. Built with React 19, TypeScript, Express, and modern LLM integrations (Groq, OpenAI, Google Gemini), DevAgent Studio seamlessly blends code editing, automated architecture planning, interactive chat, code auditing, and full terminal control into a single unified workspace.

---

🌟 Key Features

• 🤖 AI Agent Assistant: Interactive context-aware AI chat sidebar to generate, refactor, debug, and execute desktop development workflows.
• 📋 Automated Architecture Planner: Instant /plan generation mode to create detailed implementation plans before executing code changes.
• 🛡️ Instant Code Review & Audit: Run automated /review scans to calculate codebase health scores, identify vulnerabilities, and receive actionable refactoring recommendations.
• 💻 Monaco Code Editor: Premium multi-tab editor interface with syntax highlighting, dynamic tab management, and real-time auto-saving.
• ⚡ Domain-Driven Backend: Clean, layered Express architecture with decoupled domain models, repos repositories, and usecases.
• 🔑 Flexible LLM Provider Configuration: Out-of-the-box support for Groq (Fast Llama 3.3), Google Gemini, and OpenAI API keys via .env and the built-in UI Settings Modal.
• ⚙️ Integrated Terminal & Command Palette: Interactive terminal output viewer and keyboard-accessible Command Palette (Cmd+Shift+P / Ctrl+Shift+P).

---

📁 Repository Structure

devagent-studio/
├── app.js                   # Node.js / Express backend entry point
├── package.json             # Root dependencies & server scripts
├── .env                     # Environment variables configuration (LLM keys, port, etc.)
├── domain/                  # Enterprise domain models & data repositories
│   ├── models/              # User and Project data schemas
│   └── repos/               # UserRepository and ProjectRepository implementations
├── usecases/                # Core business logic (UserUseCases, ProjectUseCases)
├── infrastructure/          # Infrastructure services (Database connections)
├── database/                # SQL / Schema migration definitions
└── frontend/                # React 19 + TypeScript + Vite frontend application
    ├── src/
    │   ├── components/      # UI Components (Editor, ChatSidebar, CommandPalette, etc.)
    │   ├── hooks/           # Custom React hooks (useSocket)
    │   ├── pages/           # Studio main pages
    │   └── App.tsx          # Application shell & state manager
    └── vite.config.ts       # Vite build configuration

---

🚀 Getting Started

Prerequisites

• Node.js: v18.0.0 or higher
• npm: v9.0.0 or higher
• (Optional) MongoDB: Running on port 27017 (The app safely runs in decoupled mode if local Mongo is offline)

Installation

1. Clone the Repository:

   git clone https://github.com/rohanranjan0902/devagent-studio.git
   cd devagent-studio

2. Install Backend Dependencies:

   npm install

3. Install Frontend Dependencies:

   cd frontend
   npm install
   cd ..

---

⚙️ Environment Configuration

1. Copy .env.example to .env:

   cp .env.example .env

2. Add your Google Gemini API Key in .env:

   GEMINI_API_KEY=your_gemini_api_key_here

---

🖥️ Running the Application

Option A: One-Command Start (Recommended)

Run both the Express Backend (Port 3000) and Vite Frontend (Port 5173) concurrently:

npm run dev

Option B: Separate Terminal Processes

Backend Server:

npm start

Frontend Client:

cd frontend
npm run dev

---

🧪 Tech Stack

• Frontend: React 19, TypeScript, Vite, Monaco Editor (@monaco-editor/react), TailwindCSS, Lucide Icons, Axios, Socket.io-client, XTerm.js
• Backend: Node.js, Express, Cors, Dotenv, Mongoose, PostgreSQL Driver (pg), BullMQ, Dockerode
• LLM Integrations: Groq (Llama 3.3), Google Gemini, OpenAI

---

📄 License

This project is open source and available under the MIT License.