Design components with AI

Design with AI opens the Advanced editor on the look of the components. You describe the look in the editor's chat, and Faustine reads your app's code and sets the values. Use it when you can say what you want faster than you can set each value.

Describe the look

1. In the portal, go to Web Agents and select your agent.
2. Select the Generative UI tab.
3. Select Customize look, then Design with AI. The Advanced editor opens with components selected under Look. It shows every component with the look the agent has.
4. In the editor's chat, describe the change. For example: Square the corners of the cards and make the primary button an outline.
5. Wait for the turn to end. The components redraw with the new look, and the line above them describes it.

Each turn runs on your model provider and costs tokens.

A change is saved to the draft when the turn ends. Your users get it when you publish a version and deploy it.

To set a value yourself after the editor changed the look, see Match the look of your app.

Next steps

• The Advanced editor: what else the editor reads and changes.
• Match the look of your app: read the look from your code in one run, or set it by hand.
• Generative UI: the components the look applies to.