AI Assistant

Overview

The AI Assistant is a powerful tool that helps you build pages faster by generating content from natural language prompts. Describe what you want to create, and the AI generates complete page sections with proper Tailwind CSS styling.

The AI Assistant supports multiple providers, giving you flexibility in choosing your preferred AI model:

• OpenAI – GPT-4o for high-quality generation and vision capabilities
• Anthropic – Claude Sonnet for nuanced, detailed responses
• Google – Gemini 2.0 Flash for fast, cost-effective generation

Chat Panel

The Chat Panel is your primary interface for interacting with the AI Assistant. Access it by clicking the AI button (sparkles icon) in the top toolbar.

The panel appears on the right side of the builder and includes:

• Conversation area – Shows your messages and AI responses with streaming text
• Input field – Type or paste your prompts here
• Provider selector – Choose which AI provider to use
• Context toggle – Include or exclude your current page structure
• Voice button – Speak your prompts instead of typing
• Image button – Upload design mockups for vision import

Generating Sections

Ask the AI to create any type of section by describing what you want. The AI understands common web design patterns and generates complete, styled elements.

Example prompts:

• "Create a hero section with a large headline, subtitle, and two CTA buttons"
• "Build a pricing table with three tiers: Basic, Pro, and Enterprise"
• "Make a testimonial section with three customer quotes in a grid"
• "Design a contact form with name, email, message fields and a submit button"

When the AI generates a section, you'll see a preview before inserting it. Click Insert to add the section to your canvas, or Cancel to discard it and try a different prompt.

Content and Style Assistance

Beyond generating sections, the AI can help with content and styling tasks:

• Text content – Ask for headline suggestions, body copy, or calls to action
• Style improvements – Request visual enhancements like better spacing or color choices
• Responsive adjustments – Get recommendations for mobile and tablet layouts
• Accessibility – Ask for improvements to make your page more accessible

Vision Import

Vision Import lets you convert design mockups directly into page elements. Upload an image of your design, and the AI analyzes the layout, colors, and typography to generate matching elements with Tailwind classes.

Supported formats:

• PNG, JPEG, and WebP images
• Maximum file size: 4MB
• Images are automatically resized to 2048px max dimension for optimal processing

Vision Import Workflow

1. Open the Chat Panel by clicking the AI button in the toolbar
2. Click the image icon next to the input field to open the file picker
3. Select your design mockup from your computer (PNG, JPG, or WebP)
4. Wait for analysis as the AI examines the design structure, colors, and layout
5. Review the preview showing extracted colors and element count
6. Click Insert to add the generated elements to your canvas, or Cancel to try a different image

Voice Input

Voice Input lets you speak your prompts instead of typing. Click the microphone icon to start recording, speak naturally, and the AI converts your speech to text.

While recording, you'll see:

• A pulsing indicator showing the AI is listening
• Your words appearing in real-time as you speak
• Click the microphone again or pause speaking to stop recording

Browser Support

Voice Input uses the Web Speech API, which has varying support across browsers:

Auto-Suggestions

When you select an element on the canvas, the AI can automatically analyze it and offer improvement suggestions. This feature helps you refine your designs without explicitly asking for feedback.

How auto-suggestions work:

• Select an element on the canvas
• After a brief delay (about 1.5 seconds), the AI analyzes the element
• If improvements are found, a suggestion card appears in the chat panel
• Click Accept to apply the suggestion, or Dismiss to ignore it

Suggestion types:

• Accessibility – Missing alt text, ARIA labels, or contrast issues
• Responsive – Mobile/tablet sizing and touch target adjustments
• Spacing – Padding and margin inconsistencies
• Typography – Font size, weight, and line height improvements

Auto-suggestions are rate-limited to prevent excessive API calls. The AI only suggests once per element per session, and respects the context toggle setting.

Tips for Better Results

Get the most out of the AI Assistant with these best practices:

• Be specific in your prompts – Instead of "make a hero", try "create a hero section with a dark background, white text, a headline, subtitle, and a blue CTA button"
• Mention Tailwind classes – If you know the exact classes you want, include them: "use bg-gradient-to-r from-blue-500 to-purple-600 for the background"
• Use context mode – Enable context to help the AI match your existing page style and avoid duplicating content
• Start simple, then refine – Generate a basic section first, then ask for specific changes
• For vision import – Use clean mockups with solid colors and clear hierarchy
• Review before inserting – Always check the preview to make sure the generated section matches your expectations

Next Steps

Now that you understand the AI Assistant, explore these related topics:

• Integrations – Configure your AI provider API keys
• Canvas – Learn about element selection and canvas navigation
• Inspector – Fine-tune element styles after generation