Vercel Logo

Project Setup - Get Your Hands Dirty!

You've grasped some of the core LLM concepts. Now for the exciting part: setting up your local development environment and getting hands-on with the Vercel AI SDK. This is where you really get your hands dirty and prepare to build the cool AI features we've been talking about, like automatic summarization and building intelligent chatbots.

You will get the starter project running locally, securely configure the Vercel AI Gateway, and confirm everything works so you're ready to start coding AI in the next lesson.

Let's go!

Prerequisites Check

Before starting, ensure you have Git, Node.js (v20+), and pnpm installed. If you missed any, check the prerequisites section at the beginning of the course for installation links.

Step 1: Getting the Code

First, grab the starter project code. This repository contains all the files and setup needed for the course. Open your terminal (or command prompt) and run this command to clone it:

git clone https://github.com/vercel/build-an-ai-app-starter-sep-25.git

This copies the project files to your computer.

Step 2: Navigating Into the Project

Now, move into the project directory you just cloned. Use the cd (change directory) command:

cd build-an-ai-app-starter-sep-25

Your terminal prompt should now show you're inside the build-an-ai-app-starter-sep-25 folder.

Step 3: Installing Dependencies

Next, install the necessary libraries (AI SDK, Next.js, etc.). This project uses pnpm for fast and efficient package management. Run:

pnpm install

Using npm or Yarn?

While pnpm is recommended for this project (due to the lockfile), you can try using npm install or yarn install. Be aware you might encounter slight differences if dependency versions vary. To install pnpm globally, run: npm install -g pnpm.

This might take a minute or two.

Step 4: Setting Up the Vercel AI Gateway

AI models are accessed through API endpoints and typically this means you need to setup individual accounts and secure API keys for each provider. The Vercel AI Gateway simplifies this and allows you to access models from multiple providers through a single endpoint.

Why Use AI Gateway?

  • Free $5 credit: Get started without needing an OpenAI account or dealing with their credit requirements
  • One endpoint, multiple providers: Switch between OpenAI, Anthropic, Google, and others without code changes
  • Automatic failover: If one provider fails, requests automatically retry with another
  • Cost tracking: Monitor spending across all providers in one place
  • Rate limit handling: Built-in retry logic and request queuing
  • Bring your own keys: Use your existing provider API keys if needed

You have two options for authentication with the AI Gateway:

If you prefer using a persistent API key instead of OIDC tokens, you can create one directly in the Vercel dashboard:

1. Create an API Key

  1. Go to your Vercel dashboard
  2. Navigate to the AI Gateway tab
  3. Click "API keys" in the sidebar
  4. Click "Create key" and follow the dialog
  5. Copy your new API key

2. Configure your Environment

Create or update your .env.local file:

# For API key setup
AI_GATEWAY_API_KEY=your-api-key-here

Which method should I use?

  • OIDC (Option A): Best for production deployments and team projects. More secure but requires token refresh.
  • API Key (Option B): Simpler for local development and learning. Persistent but requires careful key management.

For this course, either method works fine!

Step 5: Making Sure It Works!

Let's verify your setup. The project has a simple script (env-check.ts) to confirm your authentication is configured correctly. Run it:

pnpm tsx env-check.ts

You should see this in your terminal:

If using OIDC (Option A):

šŸ” Checking environment configuration...

āœ… VERCEL_OIDC_TOKEN found - Vercel AI Gateway with OIDC auth
   Token preview: xxxxxxxxxxxxxxxxxxxxxxxx...
āŒ AI_GATEWAY_API_KEY not found

šŸ“‹ Summary:
āœ… Environment is configured correctly!
   Using: Vercel AI Gateway (OIDC authentication)
   Note: OIDC tokens expire after 12 hours. Use 'vercel dev' for auto-refresh.

If using API Key (Option B):

šŸ” Checking environment configuration...

āŒ VERCEL_OIDC_TOKEN not found
āœ… AI_GATEWAY_API_KEY found - Vercel AI Gateway with API key auth
   Key preview: xxxxxxxxxxxxxxxxxxxxxxxx...

šŸ“‹ Summary:
āœ… Environment is configured correctly!
   Using: Vercel AI Gateway (API key authentication)

Token/Key Management

  • OIDC tokens: Need refreshing every 12 hours. Run vc env pull again or use vc dev for automatic refresh
  • API keys: Persistent and don't expire, but keep them secure and rotate periodically for best security practices

Setup Checklist

Setup Checklist

Common Setup Issues & Troubleshooting

Next Up: Your First AI Script

Congratulations! Your development environment is set up and ready.

Now you'll write and run code that uses the AI SDK to interact with an LLM and perform a practical task: extracting structured data from text. Time to start building.