Vercel Academy

https://vercel.com/academy
Admin
Vercel Academy provides linear courses to learn Vercel, Next.js, Turborepo, AI SDK, and modern web...
Tokens:249,822
Snippets:1,934
Trust Score:10
Update:9 months ago
Show doc for...
Tokens:
Raw
### Complete components.json Example

Source: https://vercel.com/academy/shadcn-ui/components-json

A comprehensive example of a `components.json` file, illustrating all major configuration options including schema, style, RSC, TSX, Tailwind CSS settings, and path aliases. This file is central to shadcn/ui setup, controlling file placement, import structuring, and styling choices.

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}
```

--------------------------------

### Adding All shadcn/ui Components via CLI

Source: https://vercel.com/academy/shadcn-ui/adding-your-first-component

This command-line instruction allows for the installation of all shadcn/ui components and their associated dependencies simultaneously. It simplifies the process of setting up a project with the entire component library. No prior setup is required beyond having Node.js and npm/yarn installed.

```bash
npx shadcn@latest add --all
```

--------------------------------

### Troubleshooting shadcn/ui Initialization

Source: https://vercel.com/academy/ai-summary-app-with-nextjs/modern-nextjs-setup

This example shows the correct command and directory to run `npx shadcn@latest init` to avoid the "Could not find a configuration file" error. Ensure you are in the project root where `package.json` is located.

```bash
cd ai-review-summary
npx shadcn@latest init

```

--------------------------------

### Git Commit for AI Gateway Setup

Source: https://vercel.com/academy/ai-summary-app-with-nextjs/ai-gateway-setup

Demonstrates the Git commands necessary to stage and commit changes related to setting up the AI Gateway and installing the AI SDK. This includes adding configuration files, lock files, and package manifests.

```bash
git add .env.local.example .gitignore package.json pnpm-lock.yaml
git commit -m "chore: set up AI Gateway and install AI SDK"
git push
```

--------------------------------

### Install AI SDK Elements

Source: https://vercel.com/academy/ai-sdk/ai-elements

Installs the latest version of AI SDK Elements using pnpm. This command-line tool will guide you through the installation process, including confirming the installation path and overwriting existing components if necessary.

```bash
pnpm dlx ai-elements@latest
```

--------------------------------

### Install and Initialize shadcn/ui

Source: https://vercel.com/academy/ai-summary-app-with-nextjs/modern-nextjs-setup

Integrates shadcn/ui into an existing Next.js project. This command initializes shadcn/ui, sets up necessary configurations like Tailwind CSS and import aliases, and prompts for base color selection.

```bash
npx shadcn@latest init

# Configuration prompts:
# ✔ Preflight checks.
# ✔ Verifying framework. Found Next.js.
# ✔ Validating Tailwind CSS.
# ✔ Validating import alias.
# ✔ Which color would you like to use as the base color? › Neutral
```

--------------------------------

### Clone and Run next-forge Locally

Source: https://vercel.com/academy/production-monorepos/next-forge-patterns

This snippet demonstrates how to clone the next-forge repository from GitHub, install its dependencies using pnpm, and start the development server. It assumes you have Git and pnpm installed on your system.

```shell
# Clone and explore next-forge
git clone https://github.com/haydenbleasel/next-forge.git
cd next-forge
pnpm install
pnpm dev
```

--------------------------------

### Vercel CLI Deployment Output Example

Source: https://vercel.com/academy/slack-agents/deploy-to-vercel

Example output from the Vercel CLI during a production deployment. Shows project linking, settings confirmation, and the final production URL.

```bash
Vercel CLI 28.5.5
? Set up and deploy "<PATH_TO_YOUR_REPO>"? [Y/n] y
? Which scope do you want to deploy to? Your Team
# If you already created a project via the Deploy with Vercel button, choose that existing project here.
# Otherwise, create a new project for this repo.
? What's your project's name? slack-bot-prod
? In which directory is your code located? ./
Auto-detected Project Settings (Nitro):
- Build Command: npm run build
- Output Directory: .output
- Development Command: npm run dev
? Want to override the settings? [y/N] n
🔗 Linked to yourteam/slack-bot-prod (created .vercel)
🔍 Inspect: https://vercel.com/yourteam/slack-bot-prod/abc123
✅ Production: https://slack-bot-prod.vercel.app [21s]

```

--------------------------------

### Install Changesets CLI

Source: https://vercel.com/academy/production-monorepos/changesets-versioning

Installs the Changesets command-line interface as a development dependency in your project using pnpm. This is the first step to start using Changesets for versioning.

```bash
pnpm add -D @changesets/cli
```

--------------------------------

### AI SDK Playground: Few-Shot Prompting Practice

Source: https://vercel.com/academy/ai-sdk/prompting-fundamentals

Provides a prompt example for practicing Few-Shot learning in the AI SDK Playground. This involves giving the AI several examples of feedback categorization (category, sentiment, urgency) to guide its classification of new feedback.

```plaintext
Categorize user feedback based on these examples:

Example 1:
Feedback: "Love the new design! So much easier to navigate."
Category: praise, Sentiment: positive, Urgency: low

Example 2:
Feedback: "Need a dark mode option for night work."
Category: feature, Sentiment: neutral, Urgency: medium

Example 3:
Feedback: "Login page won't load, can't access my account!"
Category: bug, Sentiment: negative, Urgency: high

Now categorize this feedback:
"The app keeps crashing when I try to upload files. This is really frustrating!"

```

--------------------------------

### Access Product Page Example (HTTP)

Source: https://vercel.com/academy/ai-summary-app-with-nextjs/first-ai-summary

Example URL to access a specific product page in the running development server. Replace 'mower' with other product identifiers to test different pages.

```bash
http://localhost:3000/mower
```

--------------------------------

### Start Development Server (Shell)

Source: https://vercel.com/academy/ai-sdk/tool-use

Command to start the local development server using pnpm. This allows you to test changes and view the application in your browser.

```shell
pnpm dev

```

--------------------------------

### Log Example: Assistant Thread Started

Source: https://vercel.com/academy/slack-agents/assistant-thread-context-changed

This is an example log entry showing the details of an 'assistant_thread_started' event. It includes correlation information, user ID, channel ID, and thread timestamp, which are crucial for debugging and monitoring.

```log
[INFO] bolt-app {
  event_id: '...',
  user_id: 'U09D6B53WP4',
  channel_id: 'D09EFQZUW6P',
  thread_ts: '...'
} Assistant thread started

```

--------------------------------

### Create Vitest Test Setup File

Source: https://vercel.com/academy/production-monorepos/set-up-vitest

Creates a setup file ('packages/ui/src/test/setup.ts') for Vitest. This file is executed before test runs and is used here to import '@testing-library/jest-dom', which extends Jest's expect to include useful DOM-specific matchers for testing React components.

```typescript
import '@testing-library/jest-dom'
```

--------------------------------

### Initialize shadcn/ui in Project

Source: https://vercel.com/academy/shadcn-ui/installing-shadcn-ui

Command to initialize shadcn/ui in an existing Next.js project. This command guides the user through configuration options such as base color and installs necessary dependencies.

```bash
npx shadcn@latest init
```

--------------------------------

### jsdom Environment Example

Source: https://vercel.com/academy/production-monorepos/set-up-vitest

Illustrates the difference between using the jsdom environment and the node environment for testing React components. jsdom provides the necessary browser APIs (window, document) for React rendering, while node does not.

```javascript
// jsdom environment (default for our config)
render(<Button>Test</Button>)
expect(screen.getByRole('button')).toBeInTheDocument()
// ✅ Works - jsdom provides window, document, etc.

// node environment
render(<Button>Test</Button>)
// ❌ Fails - no DOM, React can't render
```

--------------------------------

### Installing Registry Items via CLI

Source: https://vercel.com/academy/shadcn-ui/creating-a-shadcn-registry-file

Demonstrates the command-line interface command to add a registry item to your project. This command handles dependency installation and file creation.

```bash
npx shadcn-ui@latest add <your-registry-url>
```

--------------------------------

### Create Next.js App with TypeScript and Tailwind

Source: https://vercel.com/academy/ai-summary-app-with-nextjs/modern-nextjs-setup

Initializes a new Next.js 16 application with TypeScript and Tailwind CSS using the create-next-app CLI. It guides through default configuration prompts and sets up the App Router.

```bash
npx create-next-app@latest ai-review-summary

# Configuration prompts:
#   ✔ Would you like to use the recommended Next.js defaults? … Yes

cd ai-review-summary
```

--------------------------------

### Weak Prompt Example for v0

Source: https://vercel.com/academy/ai-sdk/ui-with-v0

An example of a basic, weak prompt for Vercel v0, which is likely to produce generic results. It highlights the importance of providing more specific details for better UI generation.

```text
Create an appointment card.

```

--------------------------------

### Install shadcn/ui Components and lucide-react

Source: https://vercel.com/academy/ai-sdk/ui-with-v0

Commands to install necessary dependencies for v0-generated components. It includes installing common shadcn/ui components like `Card` and `Badge`, and the `lucide-react` icon library using pnpm.

```bash
# Common components you might need (overwrite existing if prompted)
pnpm dlx shadcn@latest add card
pnpm dlx shadcn@latest add badge

# Install lucide-react
pnpm add lucide-react
```

--------------------------------

### Installing Turborepo Globally

Source: https://vercel.com/academy/production-monorepos/understanding-monorepos

Command to install Turborepo globally, recommended for consistent usage across projects and to ensure the latest version is utilized.

```bash
pnpm add turbo --global
```

--------------------------------

### Commit Vitest Setup

Source: https://vercel.com/academy/production-monorepos/set-up-vitest

Standard git command to stage all changes and commit them with a descriptive message. This message follows conventional commit standards for clarity and automation.

```bash
git add .
git commit -m "test(ui): setup Vitest with React Testing Library"
```

--------------------------------

### Compare Build Logs (Shell)

Source: https://vercel.com/academy/production-monorepos/deploy-both-apps

These are example build log outputs for two different applications ('apps/web' and 'apps/snippet-manager') within a monorepo. They illustrate how Turborepo builds shared packages like 'packages/ui' before the applications themselves.

```shell
• Packages in scope: @geniusgarage/web, @geniusgarage/ui
• Tasks:    2 successful
✓ Built packages/ui
✓ Built apps/web

```

```shell
• Packages in scope: @geniusgarage/snippet-manager, @geniusgarage/ui
• Tasks:    2 successful
✓ Built packages/ui
✓ Built apps/snippet-manager

```

--------------------------------

### Caching Node.js Dependencies in GitHub Actions

Source: https://vercel.com/academy/production-monorepos/github-actions

Shows how to configure the `actions/setup-node` action to cache npm or pnpm dependencies, significantly speeding up subsequent CI runs by avoiding redundant installs. The 'good' example enables caching, while the 'bad' example omits it.

```yaml
# ✅ good - cache node_modules
- uses: actions/setup-node@v4
  with:
    cache: 'pnpm'
 
# ❌ bad - no cache, slow installs
- uses: actions/setup-node@v4
```

--------------------------------

### Check Turborepo Version

Source: https://vercel.com/academy/production-monorepos/turborepo-basics

Command to verify the installed version of Turborepo. This is useful for ensuring compatibility and checking against expected version numbers during setup or troubleshooting.

```shell
turbo --version
```

--------------------------------

### Comparing Error Handling: Before and After Boot Checks (Shell)

Source: https://vercel.com/academy/slack-agents/boot-checks-and-health

Illustrates the difference in error reporting for missing Slack API tokens before and after implementing boot checks. The 'Before boot checks' example shows a cryptic `UnhandledPromiseRejectionWarning`, while the 'After boot checks' example provides a clear, structured error message indicating the specific missing environment variable.

```shell
# ❌ Before boot checks (confusing):
$ slack run
[ERROR] UnhandledPromiseRejectionWarning: Error: An API error occurred: not_authed
    at validateToken (node_modules/@slack/web-api/dist/WebClient.js:789:23)
 
# ✅ After boot checks (explicit):
$ slack run
Invalid environment configuration: [{
  "path": ["SLACK_BOT_TOKEN"],
  "message": "SLACK_BOT_TOKEN is required"
}]
Error: Environment validation failed
```

--------------------------------

### Install Vitest Dependencies in UI Package

Source: https://vercel.com/academy/production-monorepos/set-up-vitest

Installs Vitest and necessary testing libraries for React component testing within the 'packages/ui' directory. Includes Vitest for the test runner, React Testing Library for rendering components, Jest DOM for custom matchers, and jsdom for simulating a browser environment.

```bash
pnpm add -D vitest @testing-library/react @testing-library/jest-dom jsdom --filter @geniusgarage/ui
```

--------------------------------

### Log Model Switching due to Budget (Example)

Source: https://vercel.com/academy/slack-agents/ai-gateway

This snippet shows the log output when the system switches to a cheaper AI model (e.g., gpt-3.5-turbo) because a budget threshold has been met or a specific environment variable is set. This is useful for testing budget-aware model selection.

```log
[WARN] Budget threshold triggered - using cheap model {
  reason: 'FORCE_CHEAP_MODEL environment variable set',
  selectedModel: 'gpt-3.5-turbo',
  normalModel: 'gpt-4o-mini'
}
```

--------------------------------

### Commit Configuration Changes (Shell)

Source: https://vercel.com/academy/production-monorepos/remote-caching

Example Git commands for committing changes related to remote caching configuration. It emphasizes not committing the `.turbo/config.json` file and adding the CI workflow and `.gitignore` files.

```shell
# Don't commit .turbo/config.json - it's in .gitignore
git add .github/workflows/ci.yml .gitignore
git commit -m "feat: enable remote caching with Vercel"
```

--------------------------------

### Simulate First Build on New Machine

Source: https://vercel.com/academy/production-monorepos/remote-caching

Clears the local Turbo cache and runs the build command again. This simulates a scenario where a new machine or a teammate clones the repository, demonstrating the effectiveness of remote cache hits.

```bash
rm -rf node_modules/.cache/turbo
turbo build
```

--------------------------------

### Implement Next.js Documentation Home Page

Source: https://vercel.com/academy/production-monorepos/add-docs-app

Renders the main documentation page, showcasing components like Button and Card. It fetches application name from environment variables and displays a grid of cards, each detailing a component's functionality and example usage. This page serves as the entry point for exploring the UI library.

```typescript
import { Button } from '@geniusgarage/ui/button'
import { Card } from '@geniusgarage/ui/card'
import { env } from '../env'
 
export default function Home() {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-4">{env.NEXT_PUBLIC_APP_NAME}</h1>
      <p className="text-gray-600 mb-8">
        Component library documentation and examples
      </p>
 
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <Card>
          <h2 className="text-2xl font-bold mb-4">Button</h2>
          <p className="mb-4">Interactive button component with variants</p>
          <div className="space-y-2">
            <Button>Primary Button</Button>
            <Button variant="secondary">Secondary Button</Button>
          </div>
        </Card>
 
        <Card>
          <h2 className="text-2xl font-bold mb-4">Card</h2>
          <p className="mb-4">Container component with shadow and padding</p>
          <p className="text-sm text-gray-600">You're looking at one!</p>
        </Card>
 
        <Card>
          <h2 className="text-2xl font-bold mb-4">CodeBlock</h2>
          <p className="mb-4">Syntax-highlighted code display</p>
          <p className="text-sm text-gray-600">
            Used in snippet manager app for displaying code
          </p>
        </Card>
      </div>
    </div>
  )
}
```

--------------------------------

### Documentation App Environment Variables (.env.example)

Source: https://vercel.com/academy/production-monorepos/add-docs-app

This .env.example file defines the environment variables expected by the documentation app. It includes a public app name, which is useful for branding and identification within the application or for external services.

```env
# Public app name
NEXT_PUBLIC_APP_NAME="GeniusGarage Docs"
```

--------------------------------

### Intentionally Break a Test

Source: https://vercel.com/academy/production-monorepos/set-up-vitest

Example of modifying the Button component's primary variant style to intentionally break a test. This demonstrates how Vitest in watch mode immediately reports test failures, highlighting the feedback loop.

```tsx
export function Button({ children, variant = 'primary', onClick }: ButtonProps) {
  const baseStyles = 'px-4 py-2 rounded-md font-semibold transition-colors'
  const variants = {
    primary: 'bg-red-500 text-white hover:bg-blue-600',  // Changed blue to red
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
  }
}
```

--------------------------------

### Fetching Components with shadcn/ui CLI

Source: https://vercel.com/academy/shadcn-ui/what-is-a-component-registry

Demonstrates how to use the shadcn/ui command-line interface to add components from both the official shadcn/ui registry and custom registries. This highlights the flexibility of the CLI in interacting with different component sources.

```bash
# Official shadcn/ui registry
npx shadcn@latest add button

# Custom registry components e.g. Kibo UI
npx shadcn@latest add https://kibo-ui.com/registry/gantt.json
```

--------------------------------

### Turborepo Build Output - Initial Run

Source: https://vercel.com/academy/production-monorepos/turborepo-basics

Example output of the first `turbo build` command, indicating a full build with no cached artifacts and a baseline execution time. This is used to establish a performance benchmark.

```text
 Tasks:    1 successful, 1 total
 Cached:   0 cached, 1 total
   Time:   5.123s

```

--------------------------------

### Generate Unstructured Text with LLM API

Source: https://vercel.com/academy/ai-sdk/introduction-to-llms

This snippet shows a conceptual example of using the 'generateText' function to get a human-readable text response from an LLM based on a given prompt. It is useful for simple text completion but requires further parsing for structured data.

```javascript
const { text } = await generateText({
  model: 'openai/gpt-4.1',
  prompt: 'Analyze this feedback: "The app crashes when uploading files"',
});

// Result: "This appears to be a bug report about file upload functionality..."
// Problem: How do you extract the category? Sentiment? Priority?

```

--------------------------------

### Define Ownership with CODEOWNERS Syntax

Source: https://vercel.com/academy/production-monorepos/code-governance

This CODEOWNERS file syntax example demonstrates how to define ownership for different parts of a monorepo. It allows for phased implementation, starting with high-level ownership and progressing to team-specific or component-level granularity. This helps enforce reviews and clear accountability.

```plaintext
# Phase 1: High-level ownership
/apps/ @geniusgarage/snippet-manager-team
/packages/ @geniusgarage/platform-team

# Phase 2: Team-specific ownership
/apps/web/ @geniusgarage/marketing-team
/apps/snippet-manager/ @geniusgarage/product-team

# Phase 3: Component-level ownership
/packages/ui/src/button.tsx @geniusgarage/design-system-lead
```

--------------------------------

### Few-Shot Prompting with generateText (JavaScript)

Source: https://vercel.com/academy/ai-sdk/prompting-fundamentals

Illustrates few-shot prompting using `generateText` in JavaScript, where examples are provided within the prompt to guide the model's output format. This technique significantly enhances reliability for specific formats and complex instructions by showing the model the desired pattern.

```javascript
// Guiding generateText with a few-shot example
const { text } = await generateText({
  model: 'openai/gpt-4.1',
  prompt: `
    Classify the following items based on the examples.
 
    Item: Apple
    Category: A
    Reason: It's a fruit.
 
    Item: ${userItem}
    Category:`,
});
```

--------------------------------

### Slack CLI Hooks Configuration (`.slack/hooks.json`)

Source: https://vercel.com/academy/slack-agents/tunnel-orchestration

This JSON file defines the hooks for the Slack CLI, specifying commands for getting hooks, starting the development server with a tunnel, and deploying the application. It indicates how `slack run` is configured to initiate the development tunnel.

```json
{
  "hooks": {
    "get-hooks": "npx -q --no-install -p @slack/cli-hooks slack-cli-get-hooks",
    "start": "pnpm --silent dev:tunnel",
    "deploy": "vercel deploy --prod"
  }
}
```

--------------------------------

### Team Member Cloning and Building

Source: https://vercel.com/academy/production-monorepos/remote-caching

Simulates a new team member cloning the repository and running the initial build. The output demonstrates fast build times due to leveraging the remote cache populated by other team members or CI.

```bash
git clone <repo>
cd production-monorepos
pnpm install
turbo build
```

--------------------------------

### Polyrepo Update Workflow: Dependent App (Bash)

Source: https://vercel.com/academy/production-monorepos/monorepos-vs-polyrepos

Demonstrates updating a dependent application in a polyrepo setup after a shared UI package has been updated. This includes changing the package.json to reference the new version, installing dependencies, fixing any breaking changes, committing, and creating a pull request.

```bash
cd ../company-web
git checkout -b deps/update-ui-components
# Edit package.json: "@company/ui": "^2.1.0"
npm install
# Fix breaking changes in components using button...
git commit -m "deps: update @company/ui to 2.1.0"
git push
# Create PR, wait for review and CI...
```

--------------------------------

### Log AI Request Cost Tracking (Example)

Source: https://vercel.com/academy/slack-agents/ai-gateway

This snippet demonstrates the expected log output for AI requests, showing both pre-flight cost estimations and post-request actual costs. It helps verify that cost tracking mechanisms are functioning correctly.

```log
[INFO] Pre-flight cost check {
  inputTokens: 2341,
  estimatedOutputTokens: 500,
  estimatedCost: 0.0007,
  model: 'gpt-4o-mini',
  status: 'approved'
}

[INFO] AI request completed {
  model: 'gpt-4o-mini',
  usage: {
    promptTokens: 2341,
    completionTokens: 487,
    totalTokens: 2828
  },
  actualCost: 0.0006436,
  estimatedCost: 0.0007,
  estimationAccuracy: '92%'
}
```
Tokens:
Raw