Welcome to Frontend AI
Frontend AI is a full-stack AI development environment for building websites, landing pages, Shopify storefronts, and conversational agents. Describe what you want and Frontend generates a production-ready Next.js application with Tailwind CSS and shadcn/ui, giving you complete control over the interface, application logic, data, integrations, and deployment.
What is Frontend?
Section titled “What is Frontend?”Frontend puts frontier AI models to work so you can go from an idea to a live web experience without touching boilerplate or configuration. Build marketing sites, campaign landing pages, product launches, custom commerce experiences, and AI agents by describing what you need and refining it through conversation.
Unlike traditional page builders or agent platforms, Frontend runs the entire Next.js application in a browser-based development environment. You can prompt, preview, edit visually, inspect the code, connect databases and APIs, and publish from one workspace while retaining control over the full stack.
For Shopify storefronts, products, collections, variants, carts, and checkout come directly from the Shopify GraphQL Storefront API. You own the customer experience while Shopify continues to power catalog, inventory, orders, and secure checkout.
What You Can Build
Section titled “What You Can Build”- Websites — marketing sites, portfolios, company sites, and content-rich web experiences
- Landing pages — focused pages for campaigns, product launches, events, lead generation, and conversion
- Shopify storefronts — custom stores with collection pages, product detail pages, search, filtering, carts, and checkout
- Conversational agents — chatbots, shopping assistants, sales agents, and support experiences with custom interfaces and tools
Some of our core features include:
- AI code generation
- React Editor — visual, drag-and-drop page editing on top of your own components
- AI image generation
- Media Library
- Serverless Functions
- Integrated Development Environment (IDE)
- Web Analytics
- Integrations with Shopify, Supabase, Stripe, GitHub, and Figma
Getting Started
Section titled “Getting Started”When creating a project, choose whether you are building a Website or a Storefront. Website projects start from a general-purpose Next.js template, while Storefront projects include Shopify commerce foundations. If you do not have a store yet, a Storefront project can use mock.shop, Shopify’s public demo storefront, until you connect your own shop.
The quickest way to begin is by describing what you want to build:
“Build a conversion-focused landing page for my AI startup with product benefits, customer testimonials, pricing, and a clear call to action”
Start Creating with AI Prompts
Section titled “Start Creating with AI Prompts”Explore our guide to effective prompting →
Publish Your Project
Section titled “Publish Your Project”Learn how to publish your website or storefront →
Advanced Features
Section titled “Advanced Features”As you become more familiar with Frontend, you can explore our advanced features:
- AI-powered development tools
- Media library and image generation
- Database and backend integration
- Team collaboration
- Version history
Integrations
Section titled “Integrations”Enhance your projects by connecting Frontend AI to other tools: