Deploy a React app built with Vite from your AI agent, over MCP

Prerequisites

• A React app built with Vite, and its package.json.
• An AI agent that works in a terminal: Claude Code, Codex, Cursor or Gemini CLI.

Step 1: Give your agent these instructions

Open your agent in your app’s folder and paste these instructions into it:

Connect to while with my account (while.sh/agents), then deploy my app.

Without an account, your agent deploys your app as a trial, in one request. To keep it, open the link it gives you and create your account.

With your account, your agent adds while’s MCP server itself. If it asks you to, restart it. On the first call to while, a page opens in your browser. In Claude Code, if it doesn’t open, type /mcp, choose while, then Authenticate. On that page, choose your app, or “A new app”, then click Authorize.

Step 2: Open your app

Your agent gives you your app’s address, for example https://mon-appli.while.cloud, over HTTPS.

What your agent does

It writes while.yaml at the root of your app:

apiVersion: while/v1
project: mon-appli
services:
  - name: web
    type: static
    root: dist

Your app is built with npm run build at every deployment¹, then the dist folder is served, with an HTTP cache. A path like /dashboard, opened from a link or reloaded, returns your app, and React Router shows the right page.

Pass your API’s address at build time

Your agent adds the address to the service, in while.yaml:

    build:
      args:
        VITE_API_URL: https://api.acme.com

Vite writes it into your app at build time, and your code reads it from import.meta.env.VITE_API_URL². Anyone can read these values in the browser, so a secret key stays on your API’s side.

Add an API and its database

Your agent adds a service to while.yaml, next to your app, with its PostgreSQL database backed up every day. The details are in the guide for a Node.js API and its PostgreSQL database.

Restrict your app to your colleagues

Your agent adds two lines to the service:

    access: internal
    email_domains: [acme.com]

Once your Google Workspace or Microsoft 365 is connected to while, on the Pro plan, your colleagues open it with their usual account, with no sign-in page to write.

Share with a customer, protected by a password

Your agent makes the app private. Then, on the app’s page in while, you create a link that lasts 1, 7 or 30 days, with a password your agent will never see.

Move to your own domain

Your agent declares the domain, you add the DNS records it gives you, and the HTTPS certificate follows.

See a new version before you deploy it

Your agent opens a preview, at its own address, with its own data. You look at it, then your agent puts it into production.

Go back to the previous version

In the 30 minutes after a deployment, the previous version comes back in a second. After that, it takes a few seconds. Once the previous version is back, your agent reads what broke in while’s logs, fixes it and deploys again.

In the docs: Static site, Internal access, Custom domain, Previews, Versions and rollback and Variables and secrets.

Next steps

• Deploy a Node.js API and its PostgreSQL database
• Deploy a static site
• Compare the Vercel alternatives