WebDev Code

A lightweight, browser-based code editor inspired by VS Code — with an integrated AI copilot, live preview, and file management. Built entirely with a single HTML file.

---

✨ Features

• VS Code-inspired UI — Activity bar, sidebar explorer, tab bar, status bar & menu bar
• Monaco Editor — The same editor that powers VS Code, with syntax highlighting, IntelliSense and minimap
• AI Copilot — Integrated chat assistant powered by Claude (Anthropic) or Gemini (Google)
  • Plan Mode — AI analyzes and plans without touching files
  • Act Mode — AI creates, reads, edits, deletes and renames files autonomously
  • YOLO Mode — AI executes all file operations automatically without asking for confirmation
• Live Preview — Full-screen browser preview for HTML files with automatic CSS/JS injection
• YOLO Live Preview — Side-by-side live preview panel that auto-refreshes on every change
• Browser Console Reader — AI can read the JS console output of the preview to detect and fix errors
• Version History — Automatic snapshots before every AI file modification with one-click restore
• ZIP Import / Export — Save your entire project as a .zip or load one from disk
• LocalStorage Persistence — All files are automatically saved in the browser
• Multiple AI Models — Choose between Claude Opus, Claude Sonnet, Gemini 2.5 Pro, Gemini 3 Flash and more
• Token & Cost Tracking — Real-time context usage (%) and estimated API cost display

---

🚀 Showcase

---

📋 Prerequisites

Requirement	Details
Modern Browser	Chrome, Edge or Firefox (for the editor & Gemini)
PHP 7.4+ with cURL	Only required for the Claude proxy backend

Gemini works directly in the browser — no backend needed. The PHP backend is only required for Claude due to CORS restrictions of the Anthropic API.

---

🚀 Getting Started

1. Clone or download this repository
2. Open index.html in any modern browser
3. Enter your Gemini API Key (AIza...) — works immediately, no backend needed
4. OR for Claude: Deploy backend.php on a PHP server with cURL enabled, update the endpoint URL in index.html, then enter your Claude API Key (sk-ant-...)
5. Start coding — or just type a request to the AI Copilot!

No build step, no npm, no complex setup. The frontend runs entirely in the browser.

---

🖥 Backend Setup (Claude only)

Claude's API does not support direct browser requests due to CORS restrictions. A lightweight PHP proxy is included to solve this.

backend.php

<?php
while (ob_get_level()) {
    ob_end_clean();
}

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, X-API-Key');
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');
header('X-Accel-Buffering: no');

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    exit(0);
}

$API_KEY = $_SERVER['HTTP_X_API_KEY'] ?? '';

if (empty($API_KEY)) {
    echo "data: " . json_encode(['error' => 'API-Key missing!']) . "\n\n";
    exit;
}

$input = file_get_contents('php://input');

$ch = curl_init('https://api.anthropic.com/v1/messages');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, false);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $input);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'x-api-key: ' . $API_KEY,
    'anthropic-version: 2023-06-01',
    'content-type: application/json'
]);

curl_setopt($ch, CURLOPT_WRITEFUNCTION, function($curl, $data) {
    echo $data;
    if (ob_get_level() > 0) ob_flush();
    flush();
    return strlen($data);
});

$result = curl_exec($ch);

if ($result === false) {
    $error_msg = curl_error($ch);
    echo "data: " . json_encode(['error' => 'CURL-Error: ' . $error_msg]) . "\n\n";
} else {
    $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    if ($http_code >= 400) {
        // ...
    }
}

curl_close($ch);
?>

Setup Steps

1. Upload backend.php to any PHP-enabled web server (e.g. Apache, Nginx, shared hosting)
2. Make sure cURL is enabled in your PHP installation
3. In index.html, find the following line and replace the URL with your server's URL:

   const response = await fetch("https://example.com/claude/backend.php", {

4. Done — enter your Claude API Key in the editor and start using Claude!

⚠️ The backend acts as a pure pass-through proxy. Your API key is sent from the browser directly to your own server via HTTPS and forwarded to Anthropic. It is never logged or stored by the proxy.

---

🤖 AI Copilot Usage

Plan Mode (default)

The AI analyzes your request and proposes a plan — without modifying any files. Switch to Act Mode when you're ready to implement.

Act Mode

The AI uses tools to directly create, edit, rename or delete files. Each action requires your confirmation (unless YOLO Mode is enabled).

YOLO Mode

Enable the YOLO toggle to let the AI execute all file operations automatically. A live preview panel opens on the left for instant visual feedback.

---

🛠 Supported File Types

Extension	Language
.html	HTML
.css	CSS
.js	JavaScript
.json	JSON
.md	Markdown
.txt	Plaintext

---

🔑 API Keys

Provider	Where to get	Runs without backend?
Claude	console.anthropic.com	❌ No (PHP proxy needed)
Gemini	aistudio.google.com	✅ Yes

API keys are stored locally in your browser's localStorage and are never sent anywhere except to your own backend (Claude) or directly to Google (Gemini).

💡 Pro Tip: You can also use Ollama, LM Studio or any other OpenAI-compatible provider — you just need to adjust the API call in the code.

---

📦 Project Structure

index.html    ← The entire frontend application (HTML + CSS + JS)
backend.php   ← Lightweight PHP proxy for the Claude API (CORS fix)

---

📋 Keyboard Shortcuts

Shortcut	Action
Enter	Send message to AI
Shift + Enter	New line in AI input
Escape	Close preview / modal

---

🧩 Dependencies (loaded via CDN)

• Monaco Editor v0.45.0
• Font Awesome v7.0.1
• JSZip v3.10.1

---

📄 License

MIT License — feel free to use, modify and distribute.