Quickstart: from prompt to a live store

Tutorial: a complete first run from a blank account to a deployed store.

By the end of this page you will have a generated commerce site running at a real mashop-yourslug.netlify.app URL, hosted on your own Netlify, GitHub, and Supabase accounts. You will do six things in order: create an account, start a project, send your first prompt, watch the AI build, open the preview, and publish.

Set aside about fifteen minutes. You need an email address and accounts on GitHub and Supabase (both free, and you can create them during step 2). Netlify is optional until you publish.

Before you start

MaShop generates the code, then pushes it to your infrastructure. Your prompts and generated code are not sent to OpenAI or Anthropic. You own the generated code and deploy it to your own accounts. MaShop hosts the builder, not your storefront or your customer data.

• GitHub stores the source code in a private repository under your account.
• Supabase is the PostgreSQL database, auth, and storage for your store, created under your account.
• Netlify builds and serves the deployed site on a global CDN with automatic SSL.

Step 1: Create your account

Go to the sign-up page and fill the form. Enter a first name, a valid email, and a password of at least 8 characters. The strength meter rewards 12 or more characters with an uppercase letter and a digit. Accept the Terms checkbox, then click Create my account.

You can also use the Google or GitHub buttons at the top of the form to sign up with one click, or use Continue with a magic link on the sign-in page if you prefer no password.

Email confirmation is required. After you submit, MaShop sends an activation email and routes you to the verify-email screen. Open the email, click the link, and you land back signed in. Until you click that link you cannot sign in.

On a confirmed login you arrive at /projects, your projects list. This is home base.

Step 2: Start a project and connect your services

From the projects list, open the Créer un projet (Create a project) dialog. Fill these fields:

• Nom du projet (Project name) is required. The minimum is 2 characters. A URL-safe slug is generated from the name and stays editable.
• Description and Type de projet (Project type) are optional. You can describe the business in the prompt later instead.

Under Services à connecter (Services to connect), connect your accounts through OAuth pop-ups:

Service	Required to create	Role
GitHub	Yes	Private repository for your source code
Supabase	Yes	PostgreSQL database, Auth, and Storage
Netlify	No (needed only to deploy)	One-click hosting with CDN and SSL

The Créer (Create) button stays disabled until the name is set and both GitHub and Supabase show as connected. Click it. You are routed straight into the workspace at /projects/your-project-id.

Step 3: Write your first prompt

The workspace opens with the AI chat on the left. When the conversation is empty, the composer cycles through example prompts such as "Créer un site pour vendre mes t-shirts" and "Billetterie pour mon prochain evenement" so you can see the AI's range. There is no fixed list of business types; describe any transactional business in plain language.

Type what you want to sell, then press the Envoyer (Send) send button. A clear, specific prompt produces a better first build. For example:

Build a store to sell single-origin coffee beans.
Each product needs a grind option (whole bean, espresso, filter)
and a weight option (250g, 1kg). Add a cart, a checkout page,
and an order-confirmation email. Keep the look warm and minimal.

You stay in control of which model handles the request. The model picker in the composer lists the available models with their context size and a relative cost multiplier. Leave it on the default unless you have a reason to change it.

Step 4: Watch the generation

The request streams to /api/ai/chat as a live server-sent stream. You watch the assistant respond in real time and write files into your project as it works. The send button turns into an Interrompre (Interrupt) control while a generation is running, so you can stop a turn that is heading the wrong way.

When a turn finishes, MaShop prints the run's accounting under the message: the credits charged and the input plus output tokens used. That line is your meter; it is how you see exactly what each build cost.

If something looks off, do not start over. Reply in the same chat with a follow-up such as "make the hero image full-width" or "add a wishlist". The AI edits the existing project rather than regenerating from scratch. See building/prompting for how to phrase changes.

Step 5: Open the preview

Switch the middle column to the Preview surface. Before your project is deployed, the preview shows an honest empty-state placeholder rather than a broken frame: the generated pages are Next.js Server Components that read your own Supabase, so they cannot run inside the browser.

The real preview is the deployed site itself. Once you publish (next step), the Preview panel loads your live site in an iframe, with a "Chargement de l'apercu" loading spinner until it is ready. So the natural order is generate, publish, then preview the live result. You can resize the preview to phone or tablet dimensions to check the responsive layout.

Step 6: Publish to a live URL

The first go-live provisions everything from nothing, so it is a dedicated flow, not the same as a later redeploy. Click the Publier (Publish) button in the workspace nav. If a required service is not connected yet, the deploy dialog opens its checklist first; a "Premiere mise en ligne" (First publish) banner links you into the publish flow.

The publish modal runs a resumable state machine and shows each stage as it completes, polling every 3 seconds:

1. Creation de votre projet Supabase creates a new mashop-yourslug Supabase project in your organization.
2. Demarrage de Supabase waits for that project to reach ACTIVE_HEALTHY.
3. Application du schema applies 12 database migrations to it.
4. Creation de votre depot GitHub creates a private mashop-yourslug repository.
5. Envoi du code dans votre depot pushes the project code into that repository.
6. Premier deploiement Netlify triggers the first Netlify build.

This takes a few minutes. When it finishes, the modal turns its primary button into Ouvrir votre site ou app (Open your site or app). Click it to open your store at its live URL.

The artifact you now have

You have a deployed commerce site at a URL like https://mashop-yourslug.netlify.app, served by Netlify with automatic SSL, its code in a private GitHub repository, and its data in a Supabase project. All three live under your own accounts. MaShop never sits between your store and your customers.

To make changes after this, keep talking to the AI in the chat, then redeploy. After the first publish the nav button changes from Publier to Mettre a jour (Update). When every service is connected and the project has shipped once, clicking it redeploys silently through /api/deploy-netlify and shows a toast with a "Voir le site" (View site) link. Netlify is the deployment target.

Next steps

• Learn how the build engine works in building/how-it-works.
• Write better prompts and follow-up edits with building/prompting.
• Restore an earlier version of your project from building/versions.
• Attach your own domain in deploy/custom-domain.
• Read what is in the code you own in your-code/overview.