The Three Builder Modes Explained

The Three Modes

Spawned has three different ways to work with the AI builder. Each is designed for different situations.

Chat Mode

Best for: New projects, exploring ideas, when you're not sure exactly what you want

In Chat mode, the AI asks clarifying questions before building. You describe your idea, and it might ask:

• "What's the main purpose of this app?"
• "Do you want user accounts?"
• "What color scheme fits your brand?"

After the conversation, you'll see a plan. Review it and click "Build this" to generate the code.

When to use it: Starting from scratch. The questions help you think through requirements you might not have considered.

Agent Mode

Best for: Quick builds, clear requirements, making changes

Agent mode builds immediately. Type your prompt, hit enter, and watch your app appear. No questions, no plan review - just results.

When to use it: You know exactly what you want. "Add a contact form with name, email, and message fields" doesn't need clarification.

Visual Mode

Best for: Fine-tuning design, adjusting specific elements

Visual mode lets you click directly on elements in the preview. Click a button, and a panel appears where you can change its text, color, size, and more.

When to use it: You like the overall structure but want to tweak details. Changing "Submit" to "Send Message" is faster by clicking than typing.

Switching Between Modes

You can switch modes anytime using the toggle in the header. Your work is preserved.

A common workflow:

1. Chat mode - Explore the idea and build the initial version
2. Agent mode - Add features and make structural changes
3. Visual mode - Polish the design and fix small details

The Preview Panel

On the right side, you'll see your app running live. You can:

• Switch views - Toggle between desktop, tablet, and mobile
• Fullscreen - Focus on just the preview
• Refresh - Reload if something looks stuck

The Code Panel

Click "Code" to see the actual source code. You can:

• Browse all files in the file tree
• Edit code directly (changes apply immediately)
• Copy code to use elsewhere