title	emoji	colorFrom	colorTo	sdk	app_file	app_port
ErAI Coder ⚡	💻	purple	pink	static	index.html	80

ErAI Coder: AI Text-to-Code with Live Preview (Streaming & Multi-Provider)

This Hugging Face Space hosts ErAI Coder, an AI-powered text-to-code generation tool supporting multiple AI providers (including Gemini 2.x) with real-time streaming output, a dynamic centered layout, and a fully scrollable live preview.

Features

• New Name & Design: Renamed to ErAI Coder with a more dynamic, centered interface using a gradient background and improved component spacing.
• Scrollable Live Preview: The live preview panel now correctly allows scrolling to view the entire generated webpage, regardless of its length.
• Multi-Provider Support: Choose between Google Gemini (including 1.5, 2.0, and 2.5 models), OpenRouter (accessing various models like GPT-4o, Claude 3.5, Llama 3.1, etc.), or a basic Simulation mode.
• Streaming Output: Code generation results are streamed in real-time directly into the editor.
• Long Code Generation: Optimized to handle and display very long code outputs smoothly.
• Responsive & Centered Layout: The user interface adapts to various screen sizes and the main components are centered for better visual balance.
• Natural Language Prompts: Describe UI elements or functionality in plain English.
• AI Code Generation: Generates HTML, CSS, and JavaScript using your selected AI provider and model.
• API Key Management: Securely enter and validate your API keys for Gemini and OpenRouter directly in the browser (session-only storage).
• Model Selection: Choose from available models for the selected provider.
• Integrated Code Editor: View the generated code with syntax highlighting (Monaco Editor). Read-only during generation.
• Live Preview: See the rendered output update in real-time (debounced) as the AI generates it.
• Iterative Refinement: Use follow-up prompts to modify the existing code.
• Copy/Download: Easily copy the generated code or download it as an HTML file.

How to Use

1. Select AI Provider: Use the dropdown to choose "Google Gemini", "OpenRouter", or "Simulation".
2. Enter & Validate API Key (if needed): Enter your key and click the validation button (✓).
3. Select Model: Choose a specific model from the dropdown.
4. Enter a Prompt: Type your request in the text area at the bottom.
5. Generate/Modify: Click the "Generate" button. Watch the code stream into the editor.
6. View Stream & Preview: The code appears in the editor, and the preview updates. Scroll the preview panel if needed to see the full output.
7. Edit Manually (After Generation): Modify the code directly in the editor once generation finishes.
8. Iterate: Provide more prompts to refine the code.
9. Export: Use the "Copy" or "Download" buttons.

Implementation Details

• Framework: React (Vite)
• UI Components: shadcn/ui, Lucide Icons, React Resizable Panels
• Layout: Centered max-w-7xl container, Flexbox, Tailwind CSS, Gradient Background.
• Code Editor: Monaco Editor
• AI Backend Integration: Client-side fetch to Google Gemini API (streamGenerateContent) and OpenRouter API (stream: true).
• Streaming: Server-Sent Events (SSE) processing.
• API Key Handling: Client-side validation and in-memory storage.
• Preview: iframe with srcDoc, scrolling enabled.

This is the final version incorporating all user feedback, including the name change, dynamic centered design, and scrollable preview.