Skip to content
Frontend

AI Development

AI development is the core of Frontend. Rather than writing code by hand, you describe the storefront you want and Frontend’s AI generates, edits, and wires it up in real time — with a live preview that reflects every change the moment it’s made.

How It Works

Section titled “How It Works”

You interact with the AI through a chat interface. Describe a merchandising rule, request a layout change, or ask for a new collection page — the AI reads your entire project context (files, structure, connected store, active integrations) and writes the code directly into your project. Changes appear instantly in the live preview without a manual build or refresh step.

The AI handles the full development surface:

  • File authoring — creates and edits any file in your project, from product cards and cart drawers to server actions and Storefront API queries
  • Catalog access — queries your connected Shopify store for real products and collections while it builds
  • Web search — looks up current documentation, APIs, and packages to inform its output
  • Image generation — produces AI-generated lifestyle and campaign imagery and drops it directly into your project
  • Image understanding — accepts screenshots, mockups, or reference images as input and uses them to guide implementation
  • Integration access — reads and writes to your connected services including Supabase, GitHub, Figma, Stripe, and more

Live Preview

Section titled “Live Preview”

Every prompt result is reflected immediately in the embedded preview, rendering against your real catalog. You can iterate quickly — refine a product grid, adjust copy, change cart behavior — without leaving the editor or waiting on a build pipeline.

Working with Integrations

Section titled “Working with Integrations”

The AI is aware of your connected store and active integrations and can use them as part of development. Ask it to feature a specific collection, store customer reviews in a Supabase table, create a GitHub commit, or pull design tokens from Figma — it handles the integration logic so you stay focused on what you’re building.

For guidance on getting the most out of the AI, see the Guide to Prompting.