Project Setup Beginner

In this lesson, you will create a new Next.js project, install the Vercel AI SDK, configure an AI provider, and verify everything works by making your first AI call.

Step 1: Create a Next.js Project

Use the official Next.js CLI to scaffold a new project with the App Router:

Bash

# Create a new Next.js project with TypeScript
npx create-next-app@latest my-ai-app --typescript --tailwind --app --src-dir

# Navigate into the project
cd my-ai-app

Step 2: Install the AI SDK

Install the core AI SDK and at least one provider package:

Bash

# Core SDK + OpenAI provider
npm install ai @ai-sdk/openai

# Or use Anthropic (Claude)
npm install ai @ai-sdk/anthropic

# Or use Google (Gemini)
npm install ai @ai-sdk/google

Step 3: Configure Environment Variables

Create a .env.local file in your project root with your API key:

.env.local

# Choose the provider you installed
OPENAI_API_KEY=sk-your-openai-key-here

# Or for Anthropic
ANTHROPIC_API_KEY=sk-ant-your-key-here

# Or for Google
GOOGLE_GENERATIVE_AI_API_KEY=your-google-key-here

Security Note: Never commit your .env.local file to version control. Next.js automatically adds it to .gitignore, but always double-check. API keys should only be accessed server-side.

Step 4: Create Your First Route Handler

Create a route handler that streams AI responses:

TypeScript - app/api/chat/route.ts

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: openai('gpt-4o'),
    messages,
  });

  return result.toDataStreamResponse();
}

Step 5: Verify the Setup

Start your development server and test the endpoint:

Bash

# Start the dev server
npm run dev

# Test the API endpoint with curl
curl -X POST http://localhost:3000/api/chat \
  -H "Content-Type: application/json" \
  -d '{"messages": [{"role": "user", "content": "Hello!"}]}'

You should see a streaming response from the AI model. If you get an error, check that your API key is set correctly in .env.local.

Project Structure

After setup, your project should look like this:

Text

my-ai-app/
  src/
    app/
      api/
        chat/
          route.ts        # AI route handler
      page.tsx             # Main page (will add chat UI)
      layout.tsx           # Root layout
  .env.local               # API keys (not committed)
  package.json
  tsconfig.json

Ready to Build a Chat Interface?

Your project is set up and the AI endpoint is working. In the next lesson, you will build a complete chat UI using the useChat hook.

Next: AI Chat →

← Introduction AI Chat →