Skip to main content

​
Takeaways

By the end of this section, you will be ready to start using the starter repository by:
  • Cloning the repository and reviewing the project structure
  • Installing dependencies
  • Setting up environment variables and API keys

​
What’s included

Pre-built Components: Chat interface, database schema, API routes, and basic RAG functionality
Development Tools: TypeScript, ESLint, Prettier, and development utilities
Deployment Ready: Configured for Vercel deployment with environment variables

​
Get started

To set up the repository on your local machine, follow these steps:
1

Clone the Repository

  • Open your terminal and navigate to where you want to create the project
Terminal
cd ~/{your-development-directory}
  • Clone the repository
Terminal
git clone https://github.com/vercel/ai-sdk-rag-starter.git
  • Navigate into the project directory
Terminal
cd ai-sdk-rag-starter
2

Install dependencies

Install Node.js dependencies and check for any errors in the console:
npm install
Package Manager: The project uses npm by default, but you can use yarn or pnpm if preferred

​
Key dependencies

{
  "next": "^14.0.0",
  "react": "^18.0.0",
  "ai": "^2.0.0",
  "openai": "^4.0.0",
  "drizzle-orm": "^0.29.0",
  "postgres": "^3.0.0"
}
3

Verify your setup

  1. Ensure you’re using Node.js 18 or higher
Terminal
node --version  # Should be 18.0.0 or higher
  1. Verify dependencies
Terminal
npm list --depth=0
  1. Test build process
npm run build
Terminal
  ▲ Next.js 14.2.4

   Creating an optimized production build ...
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (5/5)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    138 B          87.1 kB
└ ○ /_not-found                          870 B          87.9 kB
+ First Load JS shared by all            87 kB
  ├ chunks/221-412c466386c2d029.js       31.5 kB
  ├ chunks/67cfe1a8-964e1781a2edea35.js  53.6 kB
  └ other shared chunks (total)          1.86 kB

​
Understand the project structure

Let’s explore the key directories and files in the starter project:

​
Key Directories

app/

Next.js App Router:
  • app/page.tsx: Main application page
  • app/layout.tsx: Root layout component
  • app/globals.css: Global styles

components/

React Components
  • components/ui/: Reusable UI components

lib/

Utility functions:
  • lib/db/index.ts: Database configuration
  • actions/resources.ts: Server action to add resources to the database
  • utils.ts: Helper functions

lib/db/

Database Schema
  • lib/db/schema/: Table definitions
  • lib/db/migrations/: Database migrations

​
References

​
Key Files

{
  "name": "ai-sdk-rag-starter",
  "version": "0.1.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "db:generate": "drizzle-kit generate",
    "db:migrate": "drizzle-kit migrate",
    "db:studio": "drizzle-kit studio"
  }
}

​
Troubleshooting common issues

Use npm install --legacy-peer-deps or check your Node.js version
Ensure you have the correct TypeScript version and all type definitions
Restart your development server after adding environment variables

​
Activity: Explore the Codebase with Cursor

Now that you have the repository set up, let’s explore the codebase using Cursor’s AI-powered features to understand the project structure and purpose.
1

Open the repository in Cursor

You can open the repository in Cursor in two ways:Option 1: Using the command line
Terminal
cd ai-sdk-rag-starter
cursor .
Option 2: Using the file menu
  1. Open Cursor
  2. Go to File → Open Folder
  3. Navigate to and select the ai-sdk-rag-starter folder
  4. Click Open
2

Add the repository to Cursor Chat

  1. In the file explorer (left sidebar), right-click on the root folder ai-sdk-rag-starter
  2. Select Add to Cursor Chat from the context menu
  3. This will add the entire repository to your chat context
3

Add the README to Cursor Chat

  1. In the file explorer, find and right-click on the README.md file
  2. Select Add to Cursor Chat from the context menu
  3. This will add the README documentation to your chat context
4

Ask Cursor to analyze the codebase

In the Cursor Chat panel, ask the following prompt:
Review the code in this repository and explain its purpose and how the code is structured
What to expect: Cursor will analyze the entire codebase and provide you:
  • An overview of the project’s purpose
  • Explanation of the main components and their relationships
  • Code structure and architecture patterns
  • Key files and their roles in the application
5

Explore further (optional)

Once you have the initial analysis, you can ask follow-up questions like:
  • How does the RAG functionality work in this codebase?
  • What database schema is being used?
  • What are the main React components and their purposes?
6

Save the analysis

  1. In the Cursor Chat panel, click the Export chat button
  2. Save the analysis to a file named codebase-analysis.md
  3. Paste the results in a slack message to the course channel
Learning Tip: This activity helps you understand the codebase from an AI perspective, which can reveal patterns and relationships you might miss when reading the code manually. Use this as a foundation for the hands-on development work in the upcoming modules.
⌘I