Summary  
This chapter shows how to import a code repository into a deployment service, configure environment variables for secure API key management, and trigger an automated build-and-publish process.

General domain of usage  
Web application hosting

Vercel takes your code from GitHub and publishes it as a live website. Every time you push an update to GitHub, Vercel automatically redeploys it. You do not need to do anything manually after the first setup.

Definition

Your code is on GitHub. This chapter gets it live on the internet with a real URL you can share with anyone.

### The steps

Go to [vercel.com](https://vercel.com) and sign up. Connect your GitHub account when prompted. This is what allows Vercel to see your repositories.

1. Create a Vercel account

Once you are on the Vercel dashboard, click **Add New** and select **Project**. You should see your GitHub repository listed. Click **Import**.

2. Import your project

This is the most important step. Your API key is not on GitHub because it was excluded by `.gitignore`. That means Vercel does not have it either. You need to give it to Vercel directly.

On the project setup page, open the **Environment Variables** section. You need to add your API key here before deploying.

| Field | What to enter |
|-------|--------------|
| Key   | `ANTHROPIC_API_KEY` |
| Value | Your actual API key from `.env.local` |

You can also click **Import .env** and select your `.env.local` file directly. Vercel will read the key and value from it automatically. This is the easiest option.

3. Add your environment variables

Once the environment variable is added, click **Deploy**. Vercel will pull all your code files from GitHub and publish them. This takes two to five minutes.

4. Click Deploy

When you see the congratulations screen, your app is live! Vercel gives you a URL you can open in any browser and share with anyone.

5. Done

### Why the environment variable step matters

Your app will build and appear to work without the API key. But the moment someone submits an idea, it will fail because the app has no way to call the AI. Adding the key to Vercel is what makes the core feature actually work in production.

Local `.env.local` file stays on your computer. Vercel environment variables are your `.env.local` for the live web version.


Note

What must you do to ensure your deployed app can access the AI API?

Build and launch a real app in just one weekend using modern AI tools and a simple, practical workflow, using Claude Code to plan, generate, and refine your code, managing your project with GitHub, and deploying your finished app online with Vercel. You’ll start with an idea and quickly turn it into a clear project plan, then move step by step into building a working application, focusing on core features, simple architecture, and fast iteration instead of unnecessary complexity, while learning how to work effectively with AI by writing better prompts, fixing errors, and improving features, ending with a live app, a clean GitHub project, and a repeatable system for turning future ideas into real products faster.

Understand the basics of AI-assisted development, set up your environment, and get familiar with Claude Code before starting your first app.

Turn your idea into a clear, simple plan and define the smallest version of your app that delivers real value.

Go from zero to a running app by generating code with AI, setting up the project, and understanding what was created.

Improve your app by adding features, refining the design, and learning how to fix issues effectively.

Publish your project, make it accessible online, and ensure everything works using GitHub and Vercel.

Field	What to enter
Key	`ANTHROPIC_API_KEY`
Value	Your actual API key from `.env.local`

Deploying with Vercel

The steps

Why the environment variable step matters