Skip to content

README.md

Latest commit

 

History

History
204 lines (146 loc) · 7.05 KB

README.md

File metadata and controls

204 lines (146 loc) · 7.05 KB

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.

WebDev Code License PHP

✨ 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

image

📋 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)

📄 License

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