AI FeaturesChat Interface

Using the Chat Interface

Learn how to interact with AI through the chat interface to build and edit landing pages.

The chat interface is your primary way to communicate with AI in Firebuzz. It appears alongside your landing page preview, allowing you to describe changes and see them happen in real-time.

Sending Messages

Basic Interaction

  1. Click in the chat input field at the bottom of the panel
  2. Type your message describing what you want
  3. Press Enter to send (or Shift+Enter for a new line)
  4. Watch as AI processes your request and updates the preview

Messages stream in real-time, so you can see the AI's response as it's being generated. You don't need to wait for the full response before reading.

Message Queuing

You can send follow-up messages while AI is still responding:

  1. Type your next message while AI is working
  2. Press Enter to queue it
  3. A "Message added to queue" confirmation appears
  4. Queued messages process automatically in order

This lets you plan ahead without waiting for each response to complete.

Understanding AI Responses

AI responses contain different types of content:

Text Responses

Direct answers, explanations, and confirmations appear as regular text. The AI explains what it's doing and why.

Reasoning Blocks

Some responses include collapsible reasoning sections showing the AI's thought process:

  • Click to expand and see how AI analyzed your request
  • Useful for understanding complex decisions
  • Can be collapsed to focus on the main response

Tool Invocations

When AI takes actions (editing files, generating images, building the page), you'll see tool blocks:

  • File operations — Reading, writing, or editing code
  • Build status — Compilation results and any errors
  • Image generation — Creating or editing images
  • Form changes — Modifying form schemas
  • Knowledge search — Querying your documents

Each tool shows its inputs and outputs so you can see exactly what changed.

Error Handling

When something goes wrong, the AI helps you understand and fix it:

Build Errors

If the landing page fails to build:

  1. Error details appear in the chat with context
  2. AI automatically analyzes the problem
  3. A suggested fix is often provided
  4. You can ask AI to implement the fix

Response Errors

If the AI encounters an issue:

  • A clear error message explains what happened
  • You can retry the same request
  • Try rephrasing if the error persists

If you're seeing repeated errors, try using the /clear command to start a fresh conversation. Sometimes accumulated context causes issues.

Chat Controls

Stop Generation

While AI is responding, you can stop it:

  1. Look for the button (replaces send button during streaming)
  2. Click it to stop the current response
  3. The response stops where it is
  4. You can send a new message to continue

Model Selection

Change which AI model processes your messages:

  1. Click the model selector button (e.g., Auto)
  2. Search or browse available models
  3. Click a model to select — the new model is used for your next message

Context Usage

A percentage indicator shows how much of the model's context window you're using:

  • Low percentage — plenty of room for more conversation
  • High percentage — consider summarizing or clearing

Session Status

The chat interface shows your current session state:

Active Session

  • Normal chat input available
  • Preview updates in real-time
  • All features functional

Session Completed

  • Chat input disabled
  • You can still view the conversation
  • Start a new session to continue editing

Sandbox Status

The preview sandbox can be:

  • Running — Normal operation
  • Starting — Initializing (wait a moment)
  • Stopped — Needs restart
  • Failed — Error occurred

If the sandbox stops or fails, a notification appears with options to restart.

Best Practices

Be Specific

Clear, detailed requests get better results. Include colors, sizes, and specific element names.

One Change at a Time

For complex modifications, break them into steps. This makes it easier to catch issues early.

Use Design Mode

When referencing specific elements, use Design Mode to select them precisely.

Review Before Continuing

Check the preview after each change before requesting more modifications.

FAQ