Skip to main content

4. The AI Generator (Main Product)

This guide explains the core AI generator experience: how the generator works, its lifecycle, and how to interact with it effectively.

4.1 The Generator Workspace​

The generator workspace is the main interface where projects are created and refined. It consists of several integrated panels:

┌─────────────────────────────────────────────────────────┐
│  Header: Project Title, Model Selector, Actions Menu    │
├──────────┬──────────────────────────┬───────────────────┤
│          │                          │                   │
│ History  │   Code Editor            │   Live Preview    │
│ Sidebar  │   (Tab bar + Editor)     │   (iframe)        │
│          │                          │                   │
│          ├──────────────────────────┤                   │
│          │   Chat Input             │                   │
│          │   (Prompt + Controls)    │                   │
└──────────┴──────────────────────────┴───────────────────┘

Key Components​

  • Chat Input — Here you write instructions to generate or modify projects.

  • Code Editor — Displays and allows you to edit the generated files.

  • Live Preview — Shows your rendered project in real time.

  • History Sidebar — Access to your previous projects.

  • File Tree — Displays all the files in the current project.

4.2 Generation Lifecycle​

Each generation goes through a series of states:

1. Idle​

The generator is ready and waiting for input. You can write an instruction, select a model, and configure the options.

2. Loading​

You have sent an instruction. The AI is initializing and preparing to generate. You will see the status message "Thinking...".

3. Streaming​

The AI is generating code and streaming it in real time. You will see:

  • Files appear one by one in the file tree.

  • Code appears in the editor as each file is received.

  • The preview updates as files are added or modified.

  • Progress indicator showing the generation progress.

4. Complete​

All files have been generated. The project is ready to:

  • Review — Examine the generated code.

  • Edit — Make manual changes.

  • Refine — Request modifications from the AI.

  • Export — Download or share.

5. Error​

Something went wrong during generation. Common errors include:

  • Model unavailable — The selected model is temporarily unavailable.

  • Insufficient credits — You do not have enough credits for premium models.

  • Request too long — Your request exceeds the maximum length.

  • Request limit — Too many requests in a short period of time.

  • Service unavailable — The AI service is temporarily unavailable.

tip

Most errors can be resolved by retrying. If an error occurs, wait a moment and try again.

4.3 Streaming vs. Non-Streamling​

DivZone supports two generation delivery modes:

Streaming (Default)​

The AI sends the results as they are generated. Advantages:

  • Perceived faster: Results are displayed immediately.

  • Progressive updates: Files appear one by one.

  • Real-time preview: The preview updates as files arrive.

  • Early feedback: You can see the direction and adjust accordingly.

No Streaming​

The AI sends the complete result all at once. Advantages:

  • Simpler Management: Everything arrives in a single response.

  • Consistent State: No partial updates.

  • Best for Simple Projects: Less overhead.

tip

Live streaming is enabled by default and is recommended for most use cases. The no-streaming option is useful for generating single, simple files.

4.4 Chat Interface​

Chat is the primary way to interact with the AI.

Input Functions​

  • Text Input: Type your message (supports multiple lines).

  • Model Selector: Choose the AI model you want to use.

  • "Send" Button: Send your message.

  • "Cancel" Button: Stops the current generation.

Message History​

The chat keeps a history of your messages and AI responses during the current session. You can:

  • Scroll through previous exchanges.

  • Forward a previous message.

  • Edit and forward a previous message.

4.5 Model Selection​

You can choose the AI model you want to use for generation. Each model has different advantages:

  • Gemini | Free | Quick prototypes, simple pages

  • DeepSeek Flash | Free | Quick generation, basic designs

  • DeepSeek Pro | Premium | Advanced projects with DeepSeek

  • GPT | Premium | Complex projects with production quality

  • Claude Sonnet | Premium | Well-structured projects with multiple files

  • Claude Opus | Premium | Complex Applications with Many Features

tip

Start with a free model (Gemini or DeepSeek Flash) to experiment. Upgrade to premium models when you need higher quality or more complex projects.

4.6 The Code Editor​

The code editor allows you to view and modify the generated files.

Features​

  • Syntax Highlighting — Color-coded for HTML, CSS, JS, and JSON
  • Tab Bar — Switch between open files
  • File Tree — Browse all files in the project
  • Inline Editing — Click and edit any file
  • Format Button — Automatically format code
  • Download Button — Download individual files

Tab Management​

  • Open Tabs — Files you have opened in the editor
  • Active Tab — The currently displayed file
  • Close Tab — Click the X on a tab
  • Modification Indicator — A dot on the tab indicates unsaved changes
tip

Double-click a file in the file tree to open it in a new tab. You can have multiple files open at once.

4.7 Live Preview​

Live Preview displays your rendered project in an iframe.

Features​

  • Real-time updates: The preview updates as files change.

  • Responsiveness testing: Resize the preview to test different screen sizes.

  • Isolated environment: Isolated from the main application for security reasons.

  • Automatic updates: Updates automatically when files are modified.

Limitations​

  • CORS restrictions: Calls to the external API are subject to the browser's CORS policies.

  • No forms: Form submissions may not work in the isolated iframe.

  • No pop-ups: Pop-ups are blocked.

  • No modals:alert(),confirm(),prompt()They are locked

tip

Use the preview to test the appearance and functionality of your project. For a full test, download the project and open it in your browser.

4.8 Clarification Mode​

Before generating code, the AI can enter clarification mode when the request is ambiguous or needs more information.

How it works​

  1. You send a request.

  2. The AI responds with clarification questions instead of generating code directly.

  3. You answer the questions in the chat.

  4. The AI generates the project with the complete context.

SSE Eventclarify​

When the AI enters clarification mode, the backend sends an event.clarify with:

{
  chatHistory: ChatMessage[],  // historial actualizado con las preguntas
  slug: string | null,
  remainingCredits?: number,
  creditsConsumed?: number,
}
tip

Clarification mode does not consume additional credits. You are only charged when code is generated.

4.9 Tier Promotion​

If the selected model cannot complete the generation (for example, by exceeding the token limit), the system can automatically promote it to a more powerful model.

How it works​

  1. You send a request with a specific model.

  2. The model reaches its context limit.

  3. The backend sends an eventtier-promotionwith the source and destination model.

  4. The frontend restarts streaming with the new model.

  5. Generation continues without visible interruptions.

SSE Eventtier-promotion​

{
  reason: "max_tokens",
  from: string,  // modelo original
  to: string,    // modelo más potente
}
tip

Tier promotion is automatic and transparent. If it occurs, you will see the updated model in the interface.

4.10 Enhance Prompt​

The Enhance function converts a short request into a detailed technical report before it is generated:

  1. Write a short request: "Coffee Shop Homepage"
  2. Click Enhance
  3. The AI will convert it into a detailed report (using/ai/enhance-prompt4. Review and edit the enhanced request.
  4. Click Generate to start the generation.
tip

The prompt enhancement also accepts abrandPresetIdto contextualize the brand style in the improvement.

4.11 Brand Presets in Generation​

You can apply a Brand Preset (brand kit) to your generations so that the AI uses your brand's colors, typography, and style.

How it Works​

  1. Select a Brand Preset in the chat input selector.

  2. ThebrandPresetIdIt is sent along with the prompt to the backend.

  3. The AI uses the brand context to generate code with your brand styles.

Key Points​

  • Generator Workspace: Integrated environment for creating and refining projects.

  • Generation Lifecycle: Idle → Loading → Streaming → Processing → Completed / Error

  • SSE Streaming: Real-time file generation and preview updates with chunk batching.

  • Clarification Mode: AI can ask questions before generating (eventclarify)

  • Tier Promotion: Automatic retry with a more powerful model if the context is exceeded.

  • Multiple AI Models: Free and Premium, dynamically obtained from the backend.

  • Code Editor: View, edit, and format generated files.

  • Live Preview: Real-time rendering in an isolated iframe.

  • Request Enhancement: Expand brief insights into detailed reports.

  • Brand Presets: Apply your brand's style to AI model generations.

Ready to learn about AI model tiers? Head to the next section:AI Model Tiers