LLM-Web-Dev

AI-Powered Web Development Prototyping Tool

LLM-Web-Dev is a browser-based web development environment that combines the power of AI assistance with a live code editor. Build and prototype web pages interactively by chatting with an LLM that can generate, modify, and refine your HTML, CSS, and JavaScript code in real-time. Preview the code and save it all out to a single combined HTML file.

🌟 Features

AI-Assisted Coding

• Real-time Streaming Chat: Interact with OpenAI-compatible LLM APIs with token-by-token streaming responses
• Context-Aware AI: Optionally share your current code with the AI for intelligent modifications and suggestions
• One-Click Code Application: Apply AI-generated code snippets directly to your editor with a single click
• Auto-Apply Mode: Automatically apply AI suggestions as they're generated for rapid prototyping

Powerful Code Editor

• Three-Tab Interface: Separate editors for HTML, CSS, and JavaScript
• Syntax Highlighting: Powered by CodeMirror with Dracula theme
• Undo/Redo Support: Full history management with keyboard shortcuts (Ctrl+Z / Ctrl+Shift+Z)
• Per-Tab History: Independent undo/redo stacks for each code type

Live Preview & Export

• Instant Preview: Render your web page in a live preview modal
• Download HTML: Export your complete project as a single, self-contained HTML file
• Smart Naming: Downloaded files automatically named based on your page title

Flexible Configuration

• API Compatibility: Works with OpenAI, Anthropic, or any OpenAI-compatible API endpoint
• Model Selection: Choose your preferred AI model
• Customizable Settings: Toggle code context sharing and auto-apply behavior
• Local Storage: API configuration persists across sessions

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, or Edge)
• An API key from OpenAI, Anthropic, or a compatible LLM provider

Installation

1. Clone this repository:

git clone https://github.com/dmeldrum6/LLM-Web-Dev.git
cd LLM-Web-Dev

2. Open LLM-Web-Dev.html in your web browser:

# On macOS
open LLM-Web-Dev.html

# On Linux
xdg-open LLM-Web-Dev.html

# On Windows
start LLM-Web-Dev.html

That's it! No build process, no dependencies to install, no server required.

📖 Usage

Initial Setup

1. Click the Configure API button in the top-right corner
2. Enter your API endpoint (e.g., https://api.openai.com/v1/chat/completions)
3. Enter your API key
4. Select your preferred model (e.g., gpt-4, claude-3-5-sonnet-20241022)
5. Click Save Configuration

Creating Your First Project

1. Chat with the AI: Type a request like "Create a landing page with a hero section"
2. Apply Code: Click the "Apply to Editor" buttons on code blocks, or enable auto-apply
3. Preview: Click "Render Preview" to see your page live
4. Iterate: Continue chatting to refine and improve your project
5. Download: Click "Download HTML" when you're satisfied with the result

Advanced Features

Code Context: Enable "Include Code Context" in settings to let the AI see and modify your current code:

You: "Make the button larger and change it to blue"
AI: *Sees your current CSS and updates only the button styles*

New Chat: Click "New Chat" to start fresh while keeping your code

Undo/Redo: Use Ctrl+Z to undo and Ctrl+Shift+Z (or Ctrl+Y) to redo changes in any editor

🛠️ Tech Stack

• HTML5, CSS3, Vanilla JavaScript - Pure web technologies, no frameworks
• CodeMirror 5.65.13 - Professional code editing experience
• OpenAI Chat Completions API - Streaming LLM responses
• LocalStorage - Configuration persistence

📁 Project Structure

LLM-Web-Dev/
├── LLM-Web-Dev.html    # Main HTML file
├── script.js           # Application logic (908 lines)
├── style.css           # Dark theme styling (524 lines)
├── README.md           # This file
└── LICENSE             # MIT License

⚙️ Configuration Options

API Endpoints

OpenAI:

Endpoint: https://api.openai.com/v1/chat/completions
Model: gpt-4, gpt-3.5-turbo, etc.

Anthropic:

Endpoint: https://api.anthropic.com/v1/messages
Model: claude-3-5-sonnet-20241022, claude-3-opus-20240229, etc.

Local/Custom APIs: Any OpenAI-compatible endpoint

Settings Explained

• API Endpoint: The URL of the chat completions API
• API Key: Your authentication key (stored locally in browser)
• Model: The specific model to use for generation
• Include Code Context: When enabled, sends current HTML/CSS/JS to AI for context-aware responses
• Auto-apply Code: When enabled, automatically applies AI-generated code without clicking "Apply"

🎯 Use Cases

• Rapid Prototyping: Quickly build UI mockups and prototypes
• Learning Web Development: See how AI approaches different design challenges
• Code Generation: Generate boilerplate code and common patterns
• Experimentation: Try out new ideas without setting up a full development environment
• Design Iteration: Rapidly iterate on designs with AI assistance

🔒 Security & Privacy

• Local-First: Everything runs in your browser; no data sent to our servers
• API Keys: Stored only in your browser's localStorage
• Open Source: Full transparency - review the code yourself
• No Tracking: No analytics, no telemetry, no tracking

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• CodeMirror - Excellent code editing component
• Dracula Theme - Beautiful dark color scheme
• OpenAI/Anthropic - Powerful language models

📧 Support

For issues, questions, or suggestions, please open an issue on GitHub.

---