Skip to content
Frontend

Getting Started

Welcome to Frontend, a full-stack AI development environment for building websites, landing pages, Shopify storefronts, and conversational agents. Describe your idea and Frontend turns it into a production-ready Next.js application with a customizable interface, application logic, data, integrations, and deployment.

Unlike traditional page builders and agent platforms, Frontend runs the complete application in a browser-based development environment. You can prompt, preview, edit visually, inspect the code, connect APIs and databases, and publish from one workspace.

What You Can Build

Section titled “What You Can Build”
  • Websites: Marketing sites, portfolios, company websites, and custom web experiences
  • Landing Pages: Focused pages for campaigns, product launches, events, and lead generation
  • Shopify Storefronts: Custom commerce experiences with products, collections, carts, and Shopify checkout
  • Shopify Shopping Assistants: Conversational agents that help customers browse, discover, and purchase products from your Shopify store
  • Sales Agents: AI-powered agents that qualify leads, answer product questions, and guide customers through the buying process
  • Support Agents: Intelligent agents that handle customer inquiries, troubleshoot issues, and provide real-time assistance
  • Custom Agent Designs: Fully customizable agent interfaces tailored to your brand and use case
  • And many more: Browse our template library for inspiration

Choose a Project Type

Section titled “Choose a Project Type”

When creating a project, choose Website or Storefront. Website projects are designed for general websites, landing pages, and custom applications. Storefront projects include Shopify commerce foundations and let you select a connected shop.

Connect a Shopify Store

Section titled “Connect a Shopify Store”

Stores belong to your workspace, so you can connect a shop once and use it across Storefront projects.

If you don’t have a store yet, your workspace starts on mock.shop, Shopify’s public demo storefront. It serves real Storefront API data — products, collections, carts, checkout URLs — with no access token, so you can build a complete storefront straight away and point it at your own store later without changing any code.

To connect your own store, install the official Frontend app from the Shopify App Store to generate Storefront API access tokens for your shop, then add the store from Team settings → Integrations.

Ways to Get Started

Section titled “Ways to Get Started”

There are several ways to begin building with Frontend:

1. Start with a Prompt

Section titled “1. Start with a Prompt”

The quickest way to get started is by writing a prompt on the homepage. Describe the website, landing page, storefront, or agent you want and Frontend AI will generate it for you:

“Build a conversion-focused landing page for my AI startup with product benefits, customer testimonials, pricing, and a clear call to action”

2. Choose a Template

Section titled “2. Choose a Template”

You never start from an empty project. Frontend provides two starter templates based on the project type you select.

Website Template

Section titled “Website Template”

The Website Template is a flexible starting point for marketing sites, landing pages, portfolios, and custom web applications. It includes:

  • Next.js — the App Router, with server rendering and server actions
  • Tailwind CSS — utility-first styling
  • shadcn/ui — accessible, ready-to-restyle components
  • React Editor — visual drag-and-drop page editing on top of your own components

Shopify Hydrogen Template

Section titled “Shopify Hydrogen Template”

The Shopify Hydrogen Template is a working headless storefront wired to the shop selected for your project. It includes:

  • Shopify Hydrogen — Shopify’s storefront framework and components, backed by the GraphQL Storefront API
  • Next.js — the App Router, with server rendering and server actions
  • Tailwind CSS — utility-first styling
  • shadcn/ui — accessible, ready-to-restyle components
  • React Editor — the visual drag-and-drop composer built for Next.js, so you (or your merchandising team) can edit pages without touching code

The template ships with the pages a real store needs, already wired to the Storefront API:

  • Shop All — a shoppable grid of your full catalog, paginated and ready to merchandise
  • Search — full-text product search with results that update as the customer types
  • Collection — collection pages with filtering and sorting, driven by the collections in your store
  • PDP — product detail pages with an image gallery, variant selection, quantity, and add to cart
  • Authentication — customer sign-in and registration backed by Shopify Customer Accounts
  • Customer Accounts — a logged-in area where customers view order history, addresses, and profile details
  • AI Shopping Assistant — a conversational assistant that searches your catalog, recommends products, and adds them to the cart

From there, prompt your way to whatever you need: build a complete website, launch a focused landing page, extend a full catalog storefront, or add a conversational agent.

Technology Stack

Section titled “Technology Stack”

Frontend projects are built using modern, industry-standard technologies:

  • Next.js: React framework with the App Router, server rendering, and server actions
  • Tailwind CSS: Utility-first CSS framework for rapid styling
  • shadcn/ui: Beautiful, accessible component library
  • React Editor: The visual drag-and-drop composer built for Next.js
  • Shopify Hydrogen: Shopify’s framework for headless custom storefronts
  • Shopify Storefront API: GraphQL access to products, collections, carts, and checkout for Storefront projects
  • Vercel: Where your project is deployed when you publish

This stack ensures your project is fast, maintainable, and built with best practices in mind.

Next Steps

Section titled “Next Steps”

Once you’ve created your first project, you can: