Chat Interface
Master the AI editor interface to build landing pages efficiently with real-time visual feedback.
The Firebuzz editor combines a familiar chat interface with a powerful preview environment. You can interact with the AI while seeing exactly how your landing page looks at every step.
Interface Layout
The editor is divided into three main areas:
Chat Panel
Located on the left. This is where you converse with the AI, view actions, and see the conversation history.
Preview Area
The central/right visualization. Shows your live landing page as it updates in real-time.
Code/Logs
Available via toggles. You can view the actual code files or the preview logs if needed.
The Message Stream
The chat stream shows more than just text messages. It displays the AI's thought process and actions:
AI Actions
When the AI works, you'll see it performing specific actions. These appear as collapsible status blocks:
- Run Command: "Running
pnpm add framer-motion..." - Write File: "Updating
src/components/Hero.tsx..." - Generate Image: "Creating hero image..."
- Form Schema: "Adding email field to form..."
You can click on any action to expand it and see the technical details if you're curious about what happened.
Rich Responses
The AI provides rich feedback directly in the chat:
- Generated Images: Displayed inline with options to accept or refine.
- Code Snippets: Syntax-highlighted blocks showing what changed.
- Error Logs: If something goes wrong, the AI shows the error it encountered.
Input Controls
The input area at the bottom of the chat panel is your command center:
- Text Area: Optimized for longer, detailed prompts with better scrolling behavior
- Attachment (): Upload reference images or text files
- Stop Generation (): Cancel a running operation
Quick Access Buttons
Common tasks are just one click away with quick access buttons:
- Fix issues: Quickly ask the AI to fix problems on your page
- Edit content: Make text and content changes
- Update styles: Modify colors, fonts, and layouts
- Add components: Insert new sections and elements
Quick access buttons help you start common tasks faster. Click one to pre-fill your prompt, then add any additional details.
Multi-line Input
Press Shift + Enter to add a new line for longer, more detailed prompts. The input area expands to accommodate your content.
Preview Status
The editor uses a preview environment to show your landing page in real-time:
- Preview Environment: Indicates if the preview is running, starting, or stopped.
- Preview Logs: You can ask the AI to "Show me the logs" if something isn't working correctly.
Chat History & Persistence
Automatic Saving
Your chat history is automatically saved and restored:
- Session persistence: Your conversation is preserved when you close the browser
- Continue seamlessly: Return to your landing page and pick up where you left off
- Improved scrolling: Long conversations scroll smoothly with optimized performance
Clearing the Chat
If you want to start fresh, click the Clear button in the chat panel. This resets the AI's memory of the chat, but preserves your code and files.
Clearing the chat only affects the conversation history. Your landing page content and all saved versions remain intact.
Version History
Use the History tab (top of the left panel) to view checkpoints. Every AI edit is tracked automatically, allowing you to restore any previous version with one click.
Best Practices
One Request Per Message
While the AI can handle complex tasks, keeping requests focused (e.g., "Style the header" then "Fix the mobile layout") helps prevent context overload.
Check the Action Output
If the AI says "I updated the file" but nothing changed, check the action block. It might show an error or issue that explains what happened.
Use Attachments for Design
Don't just describe a design—upload a screenshot. The AI can analyze the image structure and recreate it much more accurately than from text alone.