Back
Desarrollo Web

From AI-Generated App to Production in 10 Minutes: Deploy It Free on Vercel

You built it with AI. Now ship it.

You asked ChatGPT (or Claude, or Cursor) to build you an app. It runs on localhost:3000. It looks good. It even works.

And then you hit the usual wall: “How do I put this online?”

Most people get stuck here. Deployment sounds scary. Servers. DevOps. CI/CD. It’s not.

If your app is a frontend project (Next.js, Vite, React, Astro, Svelte, whatever), Vercel is the easiest path to production I’ve used. Free. No credit card. No server setup.

This is the exact process I recommend to anyone building with AI.

Step 1 — Make sure your app runs locally

Before deploying, check one thing:

npm install
npm run build
npm run dev

If it builds without errors, you’re good.

If it crashes during npm run build, fix that first. Vercel runs the same build step in the cloud. If it fails locally, it will fail there.

If your project doesn’t even have a package.json, the AI probably generated something incomplete. Before starting from scratch, have a conversation with the AI and explain what you actually want to build: type of project, whether you need a backend, static vs SSR, expected traffic, what kind of domain you want, etc. Let it recommend the stack that fits your case (Vite, Next.js, Astro, whatever) instead of locking yourself into a random technology. A simple landing page is not the same as an app with auth and a database — the AI can help you decide before generating a single line of code.

Most AI-generated apps end up using:

  • Next.js
  • Vite + React
  • Astro
  • Plain HTML/CSS/JS

All of these work perfectly on Vercel.

Step 2 — Put your code on GitHub

Vercel deploys directly from GitHub. So you need your project there.

If you don’t have a repo yet:

Initialize Git

First, make sure you have Git installed on your machine. If you don’t, download it from git-scm.com and install it. To check whether it’s installed:

git --version

If it returns a version number, you’re set.

Inside your project folder:

git init
git add .
git commit -m "Initial commit"

Now create a new repository on GitHub.

Then connect it:

git remote add origin https://github.com/your-username/your-repo.git
git branch -M main
git push -u origin main

Done. Your AI-generated project is now in the cloud.

If Git feels scary, remember: it’s just version control. You only need these commands to deploy.

Step 3 — Import the project into Vercel

Go to:

https://vercel.com

Sign up using your GitHub account. That’s it. No forms. No nonsense.

Then:

  1. Click “Add New Project”
  2. Select your repository
  3. Click Deploy

That’s it.

I’m not skipping steps. That’s literally it.

Vercel auto-detects the framework in most cases.

For example:

FrameworkAuto-detected?
Next.js✅ Yes
Vite✅ Yes
Astro✅ Yes
Create React App✅ Yes

If it doesn’t detect it correctly, you can manually configure:

  • Build command → npm run build
  • Output directory:
    • dist (Vite)
    • .next (Next.js)
    • dist (Astro)

But 90% of the time, you won’t touch this.

Step 4 — You’re live

After ~1 minute, you’ll get a URL like:

https://your-project-name.vercel.app

That’s production.

Not staging. Not preview. Production.

Anyone can access it.

You just shipped your AI-built app to the internet.

What if your AI app uses environment variables?

This is where beginners usually break things.

If your app uses something like:

process.env.OPENAI_API_KEY;

It won’t work unless you add it to Vercel.

Go to:

Project → Settings → Environment Variables

Add:

  • Name: OPENAI_API_KEY
  • Value: your real key
  • Environment: Production

Then redeploy.

That’s it.

Critical: never commit your keys to the repository. If you have a .env file with secrets, add it to your .gitignore before your first commit:

# .gitignore
.env
.env.local
.env.*.local
node_modules

If you accidentally pushed a commit with a key inside, treat it as compromised: rotate it in the corresponding service and clean the history. A key pushed to a public repo gets scanned and leaked within minutes.

Never commit secrets to GitHub. Ever.

What about backend logic?

If your AI app includes API routes (like in Next.js), Vercel handles that automatically.

Example:

/app/api/chat/route.ts

Vercel turns this into a serverless function.

You don’t manage servers. You don’t manage Docker. You don’t manage scaling.

Free plan includes serverless execution.

If you’re building simple AI wrappers, dashboards, landing pages, MVPs — it’s more than enough.

Bonus — Deploy without GitHub (even faster)

If you don’t want to use GitHub, you can deploy using the Vercel CLI.

Install it:

npm install -g vercel

Inside your project:

vercel

Answer a few questions:

  • Link to existing project? → No
  • Project name? → whatever
  • Framework? → auto-detect

Then it deploys.

First deployment creates a preview. Run:

vercel --prod

Now it’s production.

I use this when testing AI-generated prototypes fast. No repo. No ceremony.

Common beginner mistakes

I see the same issues every time.

1. Build works locally but fails on Vercel

Usually caused by:

  • Case-sensitive imports (Button.tsx vs button.tsx)
  • Missing dependencies not saved in package.json
  • Using node APIs in frontend-only projects

Fix locally. Redeploy.

2. Environment variables not working

On Vite apps, variables must start with:

VITE_

Example:

VITE_API_URL=https://api.example.com

In Next.js (frontend), variables must start with:

NEXT_PUBLIC_

If you forget this, it works locally and breaks in production.

3. Using a database incorrectly

If your AI app uses SQLite locally, it won’t work in serverless.

Use:

  • Supabase
  • PlanetScale
  • Neon
  • Firebase

All have free tiers.

Serverless + local file DB = pain.

What you get for free

On the free Vercel plan:

  • Custom .vercel.app domain
  • HTTPS included
  • Global CDN
  • Automatic deployments on every GitHub push
  • Preview deployments for branches
  • Serverless functions

For AI experiments and MVPs, this is perfect.

I’ve launched multiple prototypes this way.

When NOT to use Vercel

If you need:

  • Long-running background jobs
  • Heavy backend processing
  • WebSockets with persistent connections
  • Custom server infrastructure

Then look at Railway, Fly.io, or a VPS.

But if you built something with AI and want it live today, Vercel wins.

The real shift: from idea to live in minutes

The crazy part isn’t Vercel.

The crazy part is this:

  1. Ask AI to build an app.
  2. Fix it locally.
  3. Push to GitHub.
  4. Deploy to Vercel.
  5. Share the link.

That loop can take under 30 minutes.

Five years ago this required:

  • Manual server setup
  • SSH
  • Nginx
  • CI pipelines

Now it’s a button click.

If you’re building with AI and not deploying, you’re missing the point.

Shipping beats perfect.

Deploy it. Break it. Improve it. Repeat.