Name: WebCode Studio
Author: WebCode Studio

folder Explorer

smart_toy Assistant

EXPLORER

Welcome to WebCode Studio!

Click **Open Folder** above to start editing your local files.

⚠️ **Requires File System Access API.**

0 files selected

chat Chat

construction Build

Hello! I'm your Hermes AI Code Assistant. Ask me to explain code, refactor it with `/refactor`, or upload an image to generate a component from it.

Memory: 0 messages

psychology

attachment

add_photo_alternate

Drop Images or GIFs

or click to browse

Prompt / Concept

Build Type

Output

No File Open PLAINTEXT

LIVE PREVIEW

Hermes is thinking...

Editor Settings

Editor Font Size (px)

Google Gemini API Key (For Vision)

Your API key is stored in your browser's local storage and is only sent to Google's API.

Get your Gemini Vision API Key from Google AI Studio →

Screenshot Machine API Key (Optional)

Provides a highly reliable "URL to Code" experience by taking a screenshot instead of fetching HTML.

Get a free key from Screenshot Machine →

Tailwind Color Palette

Base Color:

Features Guide

Generate Code from URL

Enter a public URL. The AI will analyze its structure and style to generate a high-fidelity clone or a component library.

Website URL

Generation Mode

web Full Page

splitscreen Components

Clone linked pages (multi-page) (Experimental)

Modifications (Optional)

For educational/personal use only. Respect copyright and terms of service of the source website.

AI Activity Logs

Download Media Assets

0 selected

Select the media assets you want to download into your local project folder. The AI will use the local paths for any assets you download.

Select All

Merge Files with AI

Review the selected files and provide instructions for the AI to merge them into a single, coherent file.

Files to Merge:

Instructions (Optional)

Visual Reference (Optional)

add_photo_alternate

Drop an image or click to upload

AI Task for Selection

Enter a prompt for the AI to perform on the selected code.