Os-WebDev

A futuristic, AI-powered client-side IDE with Ux and Ui in mind as an aesthetic.

Project Page

About

Os-WebDev is a browser-based Integrated Development Environment (IDE) that acts as an Operating System for web development. Unlike standard code editors, it features a deeply integrated Agentic AI Team (powered by Google Gemini) that lives alongside your code.

The environment runs entirely client-side using a Virtual File System (VFS), allowing for instant previews, secure sandboxing, and zero-latency editing. It is wrapped in a distinct Claymorphism design language—utilizing soft, 3D shadows and depth to create a tactile user interface.

---

Application Gallery

A detailed look at the various components and modals within Os-WebDev.

The Agentic Workspace

The interface of a modern, dark-themed AI-integrated development environment (IDE) designed for an agentic coding workflow. The layout is divided into three distinct panels:

1. Left Sidebar (Project Management): Shows a clean file explorer under "Project Files," listing the virtual structure.
2. Center Panel (Active Editor): Displays the syntax-highlighted source code with a custom "Transparent Layer" editing engine.
3. Right Panel (AI Agent Interface): Features a conversational interface with "Lead Dev AI." The chat log shows a user prompt requesting a "stylized darkmode". The AI agent responds with a context-aware plan and an interactive "Apply Updates" widget to execute multi-file changes instantly.

Live Preview & Emulation

The "Preview" workspace demonstrating the immediate visual output of the code changes.

• Center Panel (Live Preview): The canvas displays the fully rendered web application. It showcases the newly implemented "Blackout Mode" with claymorphism-style depth effects.
• Top Bar (Responsive Controls): A toolbar offers device emulation toggles (mobile, tablet, desktop) for responsive design testing.
• Contextual Chat: The agent interface remains visible, displaying the history that led to this specific visual result.

Collaborative Ideation

An advanced stage of the development cycle where the user and AI collaborate on complex functionality.

• Enhanced UI: The preview shows "Search archives" inputs and pill buttons, maintaining the dark aesthetic.
• Creative Partner: The chat log demonstrates the AI's role as a creative partner. Following the user's prompt to "add even more features," the "Lead Dev AI" proactively suggests immersive mechanics like a "Dynamic Redaction System" and a "War Progress Bar" to deepen the narrative.

Token Optimization & Context

The "Context Control" modal—a "Pipeline Optimizer" feature overlaying the blurred environment.

• Global Toggles: Switches to include or exclude "Chat History" and "Project Files" from the prompt to save tokens.
• Active File Selection: A detailed list enabling the developer to selectively share only the files relevant to the current task (e.g., index.html, styles.css), ensuring the AI focuses exactly where needed without noise.

Theming (Light & Dark)

The interface supports comprehensive theming, switching the entire Claymorphic variable set (--clay-bg, --shadow-out) instantly.

---

Key Features

• Agentic Team: Toggles between a single "Fast" model or a coordinated team (Planner Agent + Developer Agent) for complex tasks.
• Shadow Output Protocol: The AI writes code via XML tags (<file>, <edit>) which are parsed invisibly by the frontend, allowing for surgical code updates without breaking the chat flow.
• Time Travel: Every keystroke and AI generation is versioned, allowing full Undo/Redo capabilities on the Virtual File System.
• DevTools Suite:
  • Library Injector: One-click CDN injection for Tailwind, React, Vue, Three.js, etc.
  • Blueprints: Pre-styled Claymorphism UI blocks.
  • Asset Generator: Create placeholder images and color palettes on the fly.
• Secure Sandbox: Code runs in a controlled iframe environment with console log interception bridging back to the main UI.

Tech Stack

• Framework: React 19
• Build: Vite
• AI: Google GenAI SDK (Gemini 2.5 Flash & Gemini 3 Pro)
• Styling: Tailwind CSS + CSS Variables (Claymorphism)
• Editor: Custom implementation using PrismJS overlay + Transparent Textarea

Getting Started

1. Clone the repository

   git clone https://github.com/dovvnloading/Os-WebDev.git
   cd Os-WebDev

2. Install Dependencies

   npm install

3. Configure Environment Create a .env.local file in the root directory and add your Gemini API Key:

   GEMINI_API_KEY=your_api_key_here

4. Run Locally

   npm run dev

License & Credits

Developer / UX Designer: Matthew Robert Wesney
License: Apache 2.0
Year: 2025

---

_weeeeee~~~~~