Your browser. Your AI. Your IDE. Zero Setup Friction.
DevAIde is an advanced, offline-first, browser-based Integrated Development Environment (IDE) powered by a local Large Language Model (LLM). It is engineered to bring a desktop-grade coding experience directly into the web browser, requiring no backend execution servers, no Docker containers, and no API keys.
Everything—from Python compilation to AI code generation—runs locally within the client's machine using WebAssembly and WebGPU.
- 100% Client-Side Execution: Code is executed securely in isolated Web Workers without ever leaving your machine.
- Integrated Local AI (WebLLM): A built-in AI assistant running purely on your GPU via WebGPU. No API keys required. Total privacy.
- Virtual File System: A robust, persistent file structure built on top of IndexedDB.
- Simulated ZSH Terminal: A reactive, simulated terminal for manipulating the virtual file system.
Building a full-fledged IDE in the browser requires overcoming significant architectural hurdles. Below is the system topology mapping out how the UI, execution thread, and AI engine interact without blocking the main event loop.
graph TD
User([👨💻 User]) --> |Types Code| UI[React UI & Monaco Editor]
User --> |Chats| Chat[AI Chat Panel]
subgraph Browser Context
UI <--> |Reads/Writes| VFS[Virtual File System]
VFS <--> |Persists| IDB[(IndexedDB Storage)]
UI --> |Executes Code| Worker[⚙️ Web Worker Sandbox]
Worker --> |Loads WASM| Pyodide[🐍 Pyodide Runtime]
Worker -.-> |Yields stdout/stderr| UI
Chat --> |Generates AST Context| LLM[🧠 WebLLM Engine]
LLM <--> |Hardware Acceleration| WebGPU[🎮 Local WebGPU API]
end
style User fill:#f9f,stroke:#333,stroke-width:2px
style Worker fill:#f1f1f1,stroke:#666,stroke-width:2px,stroke-dasharray: 5 5
style WebGPU fill:#d4f1f4,stroke:#000
| Architectural Pillar | Traditional Cloud IDEs | DevAIde Architecture | Engineering Advantage |
|---|---|---|---|
| Execution Environment | Remote Docker Containers | Local Web Workers (WASM) | No infrastructure scaling costs. |
| AI Inference | OpenAI / Anthropic API (Paid) | Local WebGPU + MLC LLM | 100% Free, infinite usage, total privacy. |
| Data Privacy | Code sent to 3rd party servers | IndexedDB VFS | Code never leaves the user's machine. |
| Compilation Latency | Network bound (50-300ms) | Zero-latency (0ms) | Instant code evaluation directly in the tab. |
Running languages like Python or arbitrary JavaScript directly in the browser traditionally blocks the main UI thread, leading to a frozen UI. DevAIde circumvents this by utilizing Dedicated Web Workers.
- Python Execution: Powered by Pyodide, a CPython port to WebAssembly. The Python runtime is instantiated inside a Web Worker. Standard output (
sys.stdoutandsys.stderr) is intercepted, batched, and asynchronously messaged back to the React UI layer.
Instead of relying on costly API calls, DevAIde ships with an AI context engine that leverages WebLLM.
- It downloads model weights directly to the browser cache and executes inference using the WebGPU API.
- Context Injection: When you chat with the AI, the IDE dynamically constructs an AST-like context map of your active file, your highlighted code, and your virtual directory structure, injecting it into the LLM's system prompt.
Browser storage constraints are mitigated by a custom Virtual File System wrapper over idb-keyval (IndexedDB).
- The IDE's Explorer parses flat paths (e.g.,
src/utils/math.js) into a dynamic tree data structure on the fly (O(N) complexity), allowing for intuitive folder collapsing and recursive directory deletions (rm -rf).
- Frontend Framework: React 18 (Vite)
- Styling: Tailwind CSS + PostCSS
- Code Editor:
@monaco-editor/react - AI Engine:
@mlc-ai/web-llm - Python Runtime:
Pyodide(WebAssembly) - Storage:
idb-keyval(IndexedDB)
- Clone the repository:
git clone https://github.com/DevAIde/DevAIde.github.io.git cd DevAIde.github.io - Install dependencies:
npm install
- Start the Vite development server:
npm run dev
"Development, made intelligent."