GenSiteHub Documentation

1. Getting Started

GenSiteHub is a 100% free, browser-based, AI-powered IDE. Because everything runs entirely in your browser, there is no need to make an account or log in to use the tool. Your data is saved locally on your device via IndexedDB.

Model Configuration

Before generating code, you may need to ensure your AI configuration is set. We utilize the OpenRouter API to fetch the best models available (such as Claude 3.5 Sonnet, Google Gemini Pro, deepseek, and free models).

• Click the Settings icon in the navigation menu.
• If you have an OpenRouter API key, you can enter it securely. (We do not store this key on our servers; it is stored solely in your local browser storage).
• Select your preferred AI model from the dropdown. You can choose from both free models or premium models.

2. Plan Mode vs. Act Mode

GenSiteHub uniquely splits the development lifecycle into two distinct modes. This split ensures high-quality generation by allowing the AI to structure a proper architecture before rushing into coding.

3. Creating & Managing Projects

Starting Fresh

On the homepage, click "Create a Project". You will be taken immediately into the workspace. By default, new workspaces begin in Plan Mode.

Writing Effective Prompts

To get the best results:

1. Be Specific: Instead of "Make a blog", try "Make a dark-themed tech blog with a 3-column masonry layout, a sticky header, and a footer featuring a newsletter signup."
2. Specify Design Wants: GenSiteHub excels at generating beautiful, 100% Vanilla HTML, CSS, and JS applications. Be descriptive with your layouts and styles.
3. Use Plan Mode First: Always discuss your idea in Plan Mode. Once the AI understands the architecture, switch to Act Mode and say "Implement the plan we just discussed."

Using the Split View

The workspace provides a three-pane layout:

• Left Sidebar: Chat interface to communicate with the AI. Includes the Plan/Act mode toggle.
• Middle Editor: Review the raw HTML, CSS, JS, or TSX code generated by the AI. You can select different files from the top tabs.
• Right Preview: A real-time iframe rendering the exact application output. Every time the code updates, the preview hot-reloads instantly.

4. Exporting & Running Locally

Currently, GenSiteHub is intended primarily for generating standard HTML, CSS, and JS web components. Because you maintain 100% ownership over your code, you can easily take your project into a local environment.

1. Download Source: You can click the "Download" or "Export" buttons in the navigation bar to download a `.zip` file of all the files inside your Web IDE.
2. Running locally: Extract the .zip file.
   
   If it is a modern 100% Vanilla HTML, CSS, and JS project, you can simply un-zip the package and open index.html in your browser to run it locally without any installation or build tools.