How to Deploy an AI-Built Dashboard to Vercel Using Claude Code or Codex

From Local Build to Live URL in Minutes

You asked an AI to build you a dashboard. Maybe you used Claude Code to generate a React analytics panel, or Codex to scaffold a data visualization app. The code works locally. Now you want an actual URL you can share with your team or clients.

That’s what this guide covers: how to take an AI-generated dashboard — built with Claude Code or OpenAI Codex — push it to GitHub, and deploy it on Vercel so it’s live on the web. The whole process takes under 30 minutes, even if you’ve never deployed a web app before.

---

What You Actually Get from Claude Code and Codex

Before touching deployment, it helps to understand what these tools typically produce.

Claude Code is Anthropic’s agentic coding tool that runs in your terminal. Give it a prompt like “build me a sales dashboard with charts and a sidebar,” and it will scaffold a full project — creating files, installing dependencies, and iterating on the code autonomously. It typically outputs React or Next.js apps, though it can work in plain HTML/JS or other frameworks.

OpenAI Codex (via the Codex CLI or through ChatGPT with code execution) works similarly. Describe what you want, and it generates the file structure and writes the code. Depending on your prompt, you might get a Vite + React app, a Next.js project, or something simpler.

In both cases, what you end up with is a folder on your local machine containing:

• A package.json with dependencies
• A source directory (usually src/ or app/)
• Configuration files (like vite.config.js, next.config.js, or tailwind.config.js)
• A README.md if you asked for one

Vercel can deploy all of these frameworks automatically. It detects the framework, installs dependencies, runs the build command, and serves the output. That’s what makes it a natural fit for AI-generated projects — you don’t need to configure much.

---

Prerequisites

Check these off before starting:

• Node.js installed locally — Version 18 or higher. Run node -v to check.
• A working local build — Your dashboard runs without errors when you do npm run dev (or the equivalent).
• Git installed — Run git --version to confirm.
• A GitHub account — Free at github.com.
• A Vercel account — Free at vercel.com. Sign up with your GitHub account to make the connection easier.

If your AI-built dashboard throws errors locally, fix those first. Vercel will run the same build process — broken local builds will also break on Vercel.

---

Step 1: Clean Up the Project Before Pushing

AI-generated code is usually functional but sometimes messy. Spend five minutes on this before touching GitHub.

Remove sensitive values from the code

Claude Code and Codex sometimes hardcode API keys, database URLs, or secrets directly in source files if you included them in your prompt. Check your files for anything like:

const API_KEY = "sk-abc123..."
const DB_URL = "postgres://user:password@host/db"

Move these to environment variables. Create a .env.local file (for Next.js) or .env file (for Vite) and reference them as process.env.VARIABLE_NAME in your code. You’ll add these values in Vercel’s dashboard later.

Create a .gitignore file

If your project doesn’t already have one, create a .gitignore at the root:

node_modules/
.env
.env.local
.env*.local
dist/
.next/

This prevents uploading your node_modules folder (which can be hundreds of megabytes) and your local environment files to GitHub.

Run a final local test

Before pushing anything:

npm install
npm run build
npm run preview  # or npm start for Next.js

If the build completes without errors, you’re ready to push.

---

Step 2: Initialize Git and Push to GitHub

If Claude Code or Codex already initialized a git repo in your project folder, skip the git init step and go straight to creating the remote.

Initialize the repository

From your project folder:

git init
git add .
git commit -m "Initial commit: AI-generated dashboard"

Create a GitHub repository

1. Go to github.com and click New repository.
2. Name it something like sales-dashboard or analytics-panel.
3. Leave it public or private — Vercel works with both.
4. Do not check “Initialize this repository with a README” — you already have a local repo.
5. Click Create repository.

GitHub will show you a set of commands. You want the ones under “push an existing repository”:

git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
git branch -M main
git push -u origin main

Run those in your terminal. When you refresh GitHub, your dashboard code should be there.

---

Step 3: Connect GitHub to Vercel

This is where deployment actually starts.

Import your project

1. Log into vercel.com and click Add New → Project.
2. Under “Import Git Repository,” you’ll see your GitHub repos listed. Find the one you just pushed and click Import.

If you don’t see your repos, click Adjust GitHub App Permissions to grant Vercel access to your account or specific repositories.

Configure the project settings

Vercel auto-detects most frameworks. You’ll see something like “Framework Preset: Next.js” or “Framework Preset: Vite.” Verify it’s correct.

The default settings usually work:

Setting	Default	Notes
Build Command	npm run build	Change if your package.json uses something else
Output Directory	.next (Next.js) or dist (Vite)	Auto-detected
Install Command	npm install	Works for most projects

Add environment variables

If your dashboard uses API keys or external services, add them here before deploying. Click Environment Variables and enter each key-value pair.

These values stay private — they’re injected at build time and never exposed in your public repository.

Deploy

Click Deploy. Vercel will:

1. Clone your repository
2. Run npm install
3. Run your build command
4. Serve the output from its global edge network

The whole process usually takes 60–90 seconds for a standard React or Next.js app. When it finishes, you get a URL like your-project-name.vercel.app.

---

Step 4: Set Up Automatic Deploys

This is the part that makes the workflow feel complete. After the initial setup, every time you push to your main branch on GitHub, Vercel automatically rebuilds and redeploys your app.

That means you can continue iterating with Claude Code or Codex, push changes, and your live URL stays current — no manual deploy steps.

For pull requests, Vercel also creates preview deployments — separate URLs for each branch or PR. This lets you test changes before merging to main.

To push an update

# Make changes to your project (manually or with Claude Code/Codex)
git add .
git commit -m "Updated chart colors and added date filter"
git push

That’s it. Vercel picks up the push and deploys the new version automatically.

---

Step 5: Add a Custom Domain (Optional)

The .vercel.app URL works fine for internal tools or sharing with teammates. If you want a branded domain, Vercel’s free plan supports custom domains.

1. Go to your project in the Vercel dashboard.
2. Click Settings → Domains.
3. Enter your domain (e.g., dashboard.yourcompany.com).
4. Follow the DNS instructions — you’ll add a CNAME record pointing to Vercel’s servers through your domain registrar (Cloudflare, Namecheap, GoDaddy, etc.).

DNS changes propagate within a few minutes to an hour. After that, your dashboard runs at your own domain with HTTPS automatically provisioned.

---

Common Issues and How to Fix Them

Even clean AI-generated projects can hit snags during deployment. Here are the ones that come up most often.

Build fails with “Module not found”

This usually means Claude Code or Codex imported a package that wasn’t added to package.json. Check the error log in Vercel for the missing module name, then run:

npm install <missing-package-name>
git add package.json package-lock.json
git commit -m "Add missing dependency"
git push

Environment variables are undefined at runtime

If you’re using Next.js and need variables exposed to the browser (client-side), they must be prefixed with NEXT_PUBLIC_. Variables without this prefix are only available server-side.

For Vite, client-side variables need the VITE_ prefix.

Check that your variable names in Vercel’s dashboard match exactly what your code references — including the prefix.

App deploys but shows a blank page

This often happens with Vite apps that use client-side routing (React Router, for example). Vercel needs to know to redirect all routes to index.html.

Add a vercel.json file to your project root:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Commit and push this file. Vercel will pick it up on the next deploy.

Build times out

Vercel’s free plan has a 45-second build timeout. If your dashboard has a large dependency tree, consider:

• Moving to a paid Vercel plan (which extends the limit)
• Removing unused packages from package.json
• Switching to a lighter framework (Vite builds faster than Webpack-based setups)

CSS or fonts don’t load

Check that your public/ folder (or its equivalent) is correctly committed to GitHub. Claude Code sometimes generates references to local assets that aren’t tracked in git. Run git status to confirm all files are staged.

---

Where MindStudio Fits in This Workflow

Deploying a static dashboard to Vercel works well for visualization — you’re showing data. But most real dashboards also need to do things: send alerts, trigger workflows, pull live data from APIs, or update records in a CRM.

That’s where MindStudio becomes useful. MindStudio is a no-code platform for building AI agents and automated workflows. It connects to 1,000+ tools — Salesforce, HubSpot, Google Sheets, Slack, Airtable, and more — and lets you build the logic that sits behind a dashboard.

For example: your Vercel-hosted dashboard might show sales numbers from a Google Sheet. With MindStudio, you could build an agent that:

• Monitors that Sheet on a schedule
• Runs an AI analysis on new rows
• Sends a Slack message when a metric crosses a threshold
• Updates a Notion doc with a weekly summary

None of this requires code. You build the agent visually, connect your tools, and it runs automatically.

If you’re a developer extending Claude Code or Codex projects with agent capabilities, MindStudio also offers an Agent Skills Plugin — an npm SDK that lets your AI agents call MindStudio’s 120+ typed capabilities (like agent.sendEmail(), agent.searchGoogle(), or agent.runWorkflow()) as simple method calls. It handles rate limiting, retries, and auth so you don’t have to.

The combination is practical: Vercel hosts your frontend, MindStudio runs the automation layer behind it. You can try MindStudio free at mindstudio.ai.

For more on building AI-powered workflows that connect to external tools, the MindStudio blog covers specific use cases across sales, marketing, and operations.

---

Frequently Asked Questions

Is Vercel free for AI-generated dashboards?

Yes. Vercel’s Hobby plan is free and covers personal projects and small apps. It includes unlimited deployments, automatic HTTPS, and a .vercel.app subdomain. The limits to watch are: 100GB bandwidth per month, 100 serverless function executions per day (relevant only if you use Vercel’s API routes or server functions), and a 45-second build timeout. Most AI-generated dashboards fall well within these limits.

Can I deploy a Next.js app built by Claude Code to Vercel?

Yes — Next.js is Vercel’s own framework, so it has first-class support. Claude Code frequently outputs Next.js apps, and Vercel auto-detects the framework, runs next build, and handles server-side rendering and API routes automatically. No special configuration is needed for a standard Next.js project.

What if my dashboard needs a backend or database?

Vercel can host backend logic through its serverless functions feature (API routes in Next.js, or Vercel Functions for other frameworks). For databases, Vercel has native integrations with Postgres (via Vercel Postgres or Neon), Redis (Upstash), and others. You can also connect to any external database by adding the connection string as an environment variable. If Claude Code or Codex generated API routes alongside your dashboard, they’ll deploy automatically as serverless functions.

How do I update the dashboard after deploying?

Just push to your main branch on GitHub. Vercel watches the branch and triggers a new build automatically. If you’re continuing to iterate with Claude Code or Codex locally, the workflow is: make changes → test locally → git push → Vercel redeploys. It usually takes 60–90 seconds for the new version to go live.

Do I need to know how to code to deploy to Vercel?

You don’t need deep coding knowledge, but you do need to be comfortable with a terminal. The steps in this guide — git init, git push, and reading a build log — are all command-line operations. If you’re generating code with Claude Code or Codex, you’re already working in the terminal, so this shouldn’t be a barrier. The Vercel side is mostly a web interface.

Can I use Codex-generated code that isn’t React or Next.js?

Yes. Vercel supports plain HTML/CSS/JS, Vue, Svelte, SvelteKit, Astro, Nuxt, Angular, and more. If Codex outputs a framework Vercel supports, it auto-detects it. For plain HTML projects with no build step, set the Framework Preset to “Other” and leave the build command blank — Vercel will just serve the files directly from the repository.

---

Key Takeaways

• AI-generated dashboards from Claude Code or Codex typically output standard frameworks (React, Next.js, Vite) that Vercel deploys without extra configuration.
• The core deployment flow is three steps: push to GitHub → import the repo in Vercel → click Deploy.
• Environment variables and a .gitignore file are the two things most likely to cause issues if skipped.
• Every push to main triggers an automatic redeploy — so you can keep iterating with AI tools locally and the live URL stays current.
• For dashboards that need automation behind them — scheduled data pulls, alerts, workflow triggers — MindStudio handles that layer without requiring additional code.

If you’ve been sitting on an AI-generated project that only works locally, this is the path from working code to a shareable URL. The setup is a one-time investment, and everything after that is just git push.