Landing PagesAI Editor

AI Editor Overview

Learn how the AI-powered editor helps you create and modify landing pages using natural language.

The AI editor is the primary way you create and modify landing pages in Firebuzz. Instead of dragging and dropping elements or writing code, you describe what you want in plain language, and the AI makes it happen.

The Editor Interface

When you open a landing page, you see a split-screen interface:

Chat Panel

The left side where you type messages to the AI and see its responses.

Preview Panel

The center showing a live preview of your landing page that updates in real-time.

Code Panel

The right side where you can browse and edit component source code directly.

How It Works

  1. You describe a change in the chat, like "Make the hero section background blue"
  2. The AI processes your request and modifies the code
  3. The preview updates to show your changes instantly
  4. The code editor shows changes in real-time as the AI works
  5. The AI explains what it did and can make further adjustments

The AI maintains context of your conversation, so you can reference previous changes like "Actually, make it darker" or "Add a button below that section."

Intelligent Context Understanding

The AI agent automatically understands your landing page's current state. It receives relevant context about:

  • Page structure: Components, sections, and layout
  • Forms: Field configurations and validation rules
  • Styles: Current theme, colors, and typography
  • Metadata: SEO settings and page configuration

You don't need to explain everything from scratch. The AI already knows what's on your page, so you can simply say "change the button color" without specifying which button or what the current color is.

Web Search for References

The AI can search the web to find references, examples, and context for your requests:

  • Ask for specific design inspiration: "Look up modern SaaS pricing page designs"
  • Reference external content: "Make the hero similar to Stripe's landing page"
  • Get current information: "Add the latest product features from our website"

Types of Changes You Can Request

Content Changes

  • "Change the headline to 'Transform Your Business Today'"
  • "Update the feature descriptions to focus on speed and reliability"
  • "Replace the testimonial with one about customer service"

Design Changes

  • "Make the background a gradient from blue to purple"
  • "Add more padding around the features section"
  • "Center-align all the text in the hero"

Structural Changes

  • "Add a new FAQ section at the bottom"
  • "Remove the pricing table"
  • "Move the testimonials above the features"

Component Changes

  • "Add a video embed in the hero section"
  • "Replace the bullet points with icons"
  • "Add a countdown timer to create urgency"

Live Preview

The preview panel shows your landing page exactly as it will appear to visitors. As the AI makes changes, you see them reflected immediately.

Preview Features

  • Responsive sizing: Switch between desktop, tablet, and mobile views
  • Static preview: Loads instantly while the live preview environment initializes
  • Live preview: Full interactive preview once the preview environment is ready

Preview States

StateWhat It Means
InitializingThe preview environment is starting up
LiveFull interactive preview is ready
StaticShowing a snapshot while live preview loads

Chat History

Your conversation with the AI is saved automatically and persists across sessions:

  • Automatic saving: Chat history is saved as you work
  • Session persistence: Return to your conversation after closing the browser
  • Continue where you left off: Pick up right where you stopped
  • Clear when needed: Use the clear button to start fresh

Use the History tab to see version snapshots and restore previous states if needed. Every AI edit is tracked automatically.

Session Management

The AI works in a preview environment that has a session time limit. If your session expires:

  1. You'll see a message that the session has expired
  2. Click Renew Session to start a new session
  3. Your landing page content is preserved—only the preview environment resets

FAQ