Modifying AI Components

After generating a component with AI, you can refine it through conversation. Here's how to get exactly what you want.

Using the AI Chat

Opening the Chat

Click on an AI-generated component to select it

Look for the chat icon in the component toolbar

Click to open the AI chat panel

Making Changes

Type your modification requests in natural language:

• "Change the background color to blue"
• "Make the text larger"
• "Add a third column"
• "Remove the border"
• "Center the content"

Iterative Refinement

You can have a conversation with the AI:

Request a change

See the result

Request another change

Continue until satisfied

Effective Modification Requests

Colors

• "Use my site's primary color for the buttons"
• "Make the background darker"
• "Change the text to white"

Layout

• "Add more padding around the content"
• "Make this a 2-column layout instead of 3"
• "Center everything vertically"
• "Add space between the items"

Content

• "Change the headline to 'Our Services'"
• "Add a description paragraph below the title"
• "Include a 'Learn More' link"

Style

• "Make the corners rounded"
• "Add a subtle shadow"
• "Make it look more modern"
• "Use a gradient background"

Fixing Issues

"Fix this component"

If something looks broken or isn't displaying correctly, you can ask AI to fix it:

Open the AI chat

Type "Fix this component" or describe the specific issue

AI will attempt to resolve the problem

Common Fixes

• "The image isn't showing correctly"
• "The layout breaks on mobile"
• "The colors don't match my theme"

Undo Changes

Made a change you don't like?

• Use Ctrl+Z (or Cmd+Z on Mac) to undo
• Or ask AI: "Undo that last change"

Best Practices

Make one change at a time for better control

Be specific about what you want changed

Reference existing elements - "make the header like the footer"

Save versions you like before making major changes

Making Properties Editable

Instead of asking AI to change a value every time, ask it to make properties editable:

• "Make the padding adjustable from settings"
• "Let me toggle the shadow on/off"
• "Make the accent color editable"

This gives you a settings panel where you can adjust values instantly without chatting with AI again. Perfect for fine-tuning designs!

Learn more: Making AI Components Editable