# Vercel Academy

> Learn to build with Vercel, Next.js, AI SDK, and more through hands-on courses.

## Machine-readable exports

- [Full content export](/academy/llms-full.txt)
- [Sitemap](/academy/sitemap.md)

## Courses

### Launch a Subscription Store with Vercel and Stripe

- [Course overview](/academy/subscription-store): Build a production-ready subscription storefront with Next.js 16, React 19, Supabase Auth, and Stripe. Learn authentication, payments, and access control.
  - [Deploy Your Starter](/academy/subscription-store/deploy-your-starter): Deploy the pre-configured starter repo to Vercel with one click, clone it locally, and explore the Next.js 16 project structure with Tailwind CSS and shadcn/ui.
  - [Supabase Project Setup](/academy/subscription-store/supabase-project-setup): Create a new Supabase project, locate your API keys, and configure environment variables for authentication in your Next.js 16 app.
  - [Supabase Client Utilities](/academy/subscription-store/supabase-client-utilities): Create browser and server Supabase clients using @supabase/ssr for SSR-compatible authentication in Next.js 16.
  - [Sign Up and Sign In Pages](/academy/subscription-store/sign-up-and-sign-in-pages): Build sign-up and sign-in pages using route groups, Server Actions, and proper error handling with Supabase Auth.
  - [Proxy and Protected Routes](/academy/subscription-store/proxy-and-protected-routes): Create a proxy for session management and route protection using Next.js 16's new proxy.ts pattern, replacing the legacy middleware approach.
  - [Stripe SDK Setup](/academy/subscription-store/stripe-sdk-setup): Configure the Stripe SDK for server and client-side usage, connecting to your Stripe account for payment processing.
  - [Pricing Page with Plans](/academy/subscription-store/pricing-page-with-plans): Build a pricing page that fetches subscription tiers from Supabase and displays them with pricing cards.
  - [Stripe Checkout Flow](/academy/subscription-store/stripe-checkout-flow): Implement the Stripe Checkout flow for new subscriptions using a Server Action and redirect to Stripe's hosted checkout page.
  - [Subscription Management](/academy/subscription-store/subscription-management-page): Build a subscription management page that displays active subscriptions with plan details, pricing, and status indicators.
  - [Subscription Actions](/academy/subscription-store/subscription-actions): Implement subscription management actions by redirecting users to Stripe's Customer Portal for billing self-service.
  - [Understanding Access Control](/academy/subscription-store/understanding-access-control): Understand how to gate features based on subscription status using Supabase queries and the patterns for checking access.
  - [Server-Side Checks](/academy/subscription-store/server-side-subscription-checks): Check subscription status in Server Components to conditionally render premium content or show upgrade prompts for users without access.
  - [Client-Side Checks](/academy/subscription-store/client-side-subscription-checks): Build interactive premium features in Client Components, with UI states that respond to user actions while relying on server-side security.
  - [Protected API Routes](/academy/subscription-store/protected-api-routes): Protect API routes with subscription checks, returning appropriate errors for unauthorized access and completing the access control system.
  - [Error Handling & Loading](/academy/subscription-store/error-handling-and-loading-states): Add loading.tsx files for Suspense boundaries, handle auth errors gracefully, and create consistent error patterns throughout the application.
  - [Header and Navigation](/academy/subscription-store/header-and-navigation): Complete the header component with auth state awareness, sign-out functionality, and build the protected area sidebar navigation.
  - [Deploy to Production](/academy/subscription-store/deploy-to-production): Deploy your complete subscription storefront to production with proper environment configuration and end-to-end verification.

### Building Agents with eve

- [Course overview](/academy/building-agents-with-eve): Build a production bike shop dispatcher agent with eve, from its first typed tool to a deployed app behind Slack, a web dashboard, real auth, and human approval.
  - [Scaffold the Dispatcher](/academy/building-agents-with-eve/scaffold-the-dispatcher): Scaffold the dispatcher with npx eve init, watch the generic skeleton fall flat on a bike question, then pin a model in agent.ts and write the front-desk persona in instructions.md until it answers in character in the dev TUI.
  - [Your First Tool](/academy/building-agents-with-eve/your-first-tool): Add the lookup_service tool with defineTool and a Zod schema so the dispatcher quotes from the real catalog instead of guessing, and watch the tool loop run.
  - [Drive It Over HTTP](/academy/building-agents-with-eve/drive-it-over-http): Talk to the dispatcher over eve's stable HTTP session API: start a durable session, stream the NDJSON event log, and resume with a continuation token.
  - [Find Real Openings](/academy/building-agents-with-eve/find-real-openings): Add the check_availability tool, a second typed tool with no input, so the dispatcher offers real open repair slots instead of inventing times.
  - [Remember the Bikes](/academy/building-agents-with-eve/remember-the-bikes): Use defineState to give the dispatcher a durable garage that survives across turns, then build remember_bike and recall_bikes tools to write and read it.
  - [A Playbook Per Tier](/academy/building-agents-with-eve/a-playbook-per-tier): Use defineDynamic and defineSkill to load a different shop playbook per membership tier, resolved from the caller's authenticated identity at session start.
  - [Book a Repair](/academy/building-agents-with-eve/book-a-repair): Add the book_repair tool so the dispatcher can commit a booking, then watch it cheerfully book a $180 overhaul with no human in the loop. The problem we fix next.
  - [Pause for a Sign-off](/academy/building-agents-with-eve/pause-for-a-signoff): Add an approval gate to book_repair so expensive bookings park for a human yes, then resume from the exact step. The durable pause/resume you saw streaming in 1.3.
  - [A Web Dashboard](/academy/building-agents-with-eve/a-web-dashboard): Run the dispatcher behind a browser dashboard. Understand how withEve mounts the agent same-origin and how useEveAgent drives it, then theme it for the shop.
  - [Add Slack](/academy/building-agents-with-eve/add-slack): Put the dispatcher in Slack with slackChannel and Vercel Connect, no SLACK_BOT_TOKEN, no tool changes. One more front door on the same agent.
  - [Stamp Identity at the Door](/academy/building-agents-with-eve/stamp-identity): Replace the throwaway header door from 2.3 with a real ordered auth walk that derives the caller's identity, and tier, from a session, then feeds the per-tier playbook.
  - [Lock the Doors](/academy/building-agents-with-eve/lock-the-doors): Make the dispatcher production-safe: understand the fail-closed auth guarantee, keep the model credential and secrets in env, and confirm an unknown caller gets shut out.
  - [Deploy to Vercel](/academy/building-agents-with-eve/deploy-agent-to-vercel): Build and deploy the dispatcher to Vercel, set the sandbox backend, smoke-test the live routes with curl and eve dev, and find your runs in the dashboard.
  - [Where to Go Next](/academy/building-agents-with-eve/where-to-go-next): Recap the dispatcher you built across the 'agent is a directory' steps, and the three eve directories you didn't need yet: connections, subagents, and schedules.

### Workflow Foundations

- [Course overview](/academy/workflow-foundations): Learn the foundations of the Workflow SDK by building a pizza order tracker. Durable, resumable code with two directives and no state machines.
  - [Set up the tracker](/academy/workflow-foundations/set-up-the-pizza-tracker): Clone the starter, install the workflow package, wrap next.config.ts with withWorkflow, and boot the pizza tracker locally.
  - [Send a confirmation](/academy/workflow-foundations/send-a-confirmation-email): Write the sendOrderConfirmation step with the "use step" directive, learn what the directive promises, and wire it into the orders Route Handler.
  - [Wrap in a workflow](/academy/workflow-foundations/wrap-it-in-a-workflow): Write the processOrder workflow with "use workflow", trigger it from the orders Route Handler using start(), and tour the local Workflow dashboard.
  - [Deploy to Vercel](/academy/workflow-foundations/deploy-to-vercel): Push the tracker to Vercel, add the Resend env var, deploy, place a production order, and tour the managed Workflows dashboard.
  - [Add the kitchen step](/academy/workflow-foundations/add-the-kitchen-step): Write the acknowledgeKitchen step and call it from processOrder so the workflow has two steps in sequence.
  - [Pause with sleep()](/academy/workflow-foundations/pause-between-steps-with-sleep): Add sleep() between the kitchen step and the rest of the workflow. Deploy a code change mid-sleep and watch the workflow survive untouched.
  - [Complete the path](/academy/workflow-foundations/complete-the-happy-path): Add dispatchDelivery, confirmDelivery, and sendReviewRequest steps with sleeps in between so the workflow walks an order from confirmation to review.
  - [Wait on a hook](/academy/workflow-foundations/pause-until-the-kitchen-pings-us): Replace the fake cook-time sleep with createHook(). Build a Route Handler that uses resumeHook() to wake the workflow when the kitchen marks an order ready.
  - [Hook the driver](/academy/workflow-foundations/hook-the-driver-into-the-flow): Replace the remaining sleep with two hooks (pickup, delivered) and build the corresponding Route Handlers so the driver UI drives the workflow.
  - [When nobody pings](/academy/workflow-foundations/what-if-the-kitchen-never-responds): Use Promise.race with sleep to add a timeout to the kitchen hook, escalating with an email when the kitchen ghosts the workflow.
  - [Retries for free](/academy/workflow-foundations/the-kitchen-is-flaky): Introduce flakiness to acknowledgeKitchen, customize maxRetries, and observe automatic retries with backoff in the dashboard.
  - [Final failures](/academy/workflow-foundations/some-failures-are-final): Introduce a chargeCard step at the front of the workflow that throws FatalError on a declined card, stopping retries cleanly.
  - [Observe everything](/academy/workflow-foundations/observe-everything): Tour the Vercel Workflows dashboard, inspect every step's inputs and outputs, deploy a breaking change mid-workflow, and walk through how to debug production failures.

### Creating an AI Summary App with Next.js

- [Course overview](/academy/ai-summary-app-with-nextjs): Build an AI-powered summary application using Next.js App Router and the Vercel AI SDK. You'll implement text summarization, structured output, caching, and production-ready patterns.
  - [Modern Next.js Setup](/academy/ai-summary-app-with-nextjs/modern-nextjs-setup): Create a modern Next.js 16 application from scratch with TypeScript, Tailwind CSS, and shadcn/ui components. Set up the project structure for building a product review application.
  - [Type-Safe Data Layer](/academy/ai-summary-app-with-nextjs/type-safe-data-layer): Build a robust data layer using Zod for runtime validation and type inference. Define Product and Review schemas, create sample data, and implement type-safe data access functions.
  - [Review Display Components](/academy/ai-summary-app-with-nextjs/review-display-components): Create reusable React components for displaying product reviews. Build a five-star rating component, format timestamps as relative time, and display reviewer avatars with fallbacks.
  - [Dynamic Routes & Static Generation](/academy/ai-summary-app-with-nextjs/dynamic-routes-static-generation): Use Next.js App Router dynamic routes to create individual product pages. Implement generateStaticParams for static generation at build time, ensuring fast page loads.
  - [Deploy the App](/academy/ai-summary-app-with-nextjs/deploy-the-app): Deploy your Next.js app to Vercel with automatic builds and preview deployments. Connect your GitHub repository for continuous deployment and see your statically generated pages live on a global CDN.
  - [AI Gateway Setup](/academy/ai-summary-app-with-nextjs/ai-gateway-setup): Set up Vercel AI Gateway for production-ready AI access. Create an API key, configure environment variables, and install the AI SDK to prepare for generating review summaries.
  - [First AI Summary](/academy/ai-summary-app-with-nextjs/first-ai-summary): Build your first AI feature using the Vercel AI SDK's generateText function. Create a summarizeReviews function that uses Claude to generate concise review summaries.
  - [Prompt Engineering](/academy/ai-summary-app-with-nextjs/prompt-engineering): Improve AI summaries with prompt engineering techniques. Learn few-shot prompting, tone guidance, and output formatting to make summaries production-ready with consistent quality.
  - [Streaming Summaries](/academy/ai-summary-app-with-nextjs/streaming-summaries): Replace blocking generateText with streamText for real-time AI responses. Users see content appear word-by-word instead of waiting for the full response.
  - [Structured Output](/academy/ai-summary-app-with-nextjs/structured-output): Use the AI SDK's generateObject function to extract structured data from reviews. Define Zod schemas for type-safe structured output and display pros, cons, and key themes alongside summaries.
  - [Smart Caching](/academy/ai-summary-app-with-nextjs/smart-caching): Add Next.js caching to AI functions to eliminate redundant API calls. Use the "use cache" directive with cacheLife and cacheTag to serve instant responses while keeping content fresh.
  - [When AI Goes Wrong](/academy/ai-summary-app-with-nextjs/when-ai-goes-wrong): Build resilient AI features that handle failures gracefully. Use AI Gateway fallbacks to swap models automatically, show users helpful error states, and understand your costs before they surprise you.
  - [Observability and Monitoring](/academy/ai-summary-app-with-nextjs/observability-monitoring): Set up observability for AI features in production. Use AI Gateway analytics to track usage and costs, add structured logging for debugging, and configure alerts before problems become incidents.
  - [Course Complete](/academy/ai-summary-app-with-nextjs/complete): Wrap up the course with a review of what you've built. See your complete AI-powered review summarization app and explore ideas for extending it further.

### Python on Vercel

- [Course overview](/academy/python-on-vercel): Keep your Python stack and ship it with your frontend. Build a FastAPI + Next.js furniture app deployed as one Vercel project.
  - [Install the Vercel CLI](/academy/python-on-vercel/install-vercel-cli): Install the Vercel CLI, authenticate with your Vercel account, and confirm everything is working before touching either app.
  - [Tour the FastAPI Starter](/academy/python-on-vercel/explore-fastapi-starter): Get the FastAPI starter running locally, explore the /api/items endpoint, and understand how Vercel's Python runtime finds and serves your app from the api/ folder.
  - [Tour the Next.js Starter](/academy/python-on-vercel/explore-nextjs-starter): Get the Next.js 16 starter running locally, tour the page component, and locate the mock data array that will be replaced by a real FastAPI fetch in the next section.
  - [Run with vercel dev](/academy/python-on-vercel/run-with-vercel-dev): Replace the two-terminal dev workflow with a single command that serves the Next.js frontend and FastAPI backend from the same origin. This is the setup that mirrors how Vercel runs both in production.
  - [Wire Next.js to FastAPI](/academy/python-on-vercel/wire-nextjs-to-fastapi): Convert the Next.js page component from a synchronous mock-data render to an async server component that fetches from the FastAPI API on the same origin, using Vercel's auto-injected VERCEL_URL so the code works locally and in production without any manual env vars.
  - [Deploy to Production](/academy/python-on-vercel/deploy-to-prod): Run vercel deploy at the project root and watch both the Next.js frontend and the FastAPI backend ship together under one domain. No extra config, no second project, no manual env vars.

### Builders Guide to the AI SDK

- [Course overview](/academy/ai-sdk): Build production-ready AI features with the AI SDK & Next.js. Learn LLMs, prompting, extraction, streaming, & more.
  - [Introduction to LLMs](/academy/ai-sdk/introduction-to-llms): Learn why treating LLMs like familiar web APIs (input/output, state) accelerates development and how the AI SDK simplifies this builder mindset.
  - [Prompting Fundamentals](/academy/ai-sdk/prompting-fundamentals): Learn core prompting techniques (Zero-Shot, Few-Shot, Chain-of-Thought) to instruct LLMs. Use the Vercel AI SDK Playground for iteration.
  - [AI SDK Dev Setup](/academy/ai-sdk/ai-sdk-dev-setup): Set up your local dev environment for the Vercel AI SDK: clone repo, install dependencies (pnpm), configure OpenAI API key (.env), and verify setup.
  - [Data Extraction](/academy/ai-sdk/data-extraction)
  - [Model Types and Performance](/academy/ai-sdk/model-types-and-performance): Learn about different model types in the AI SDK: fast models for immediate responses vs reasoning models for complex problem-solving. Understand when to use each type for optimal user experience.
  - [Introduction to Invisible AI](/academy/ai-sdk/introduction-to-invisible-ai): Section Intro: Explore 'Invisible AI' - features like summarization & classification that improve UX without being the main focus. Prep for building them.
  - [Text Classification](/academy/ai-sdk/text-classification): Use `generateText` with `Output.array()` and Zod schemas for reliable text classification. Build a tool to automatically categorize user feedback or content.
  - [Automatic Summarization](/academy/ai-sdk/automatic-summarization): Implement one-click summarization using `generateText` with `Output.object()`. Create concise summaries on demand with structured outputs.
  - [Structured Data Extraction](/academy/ai-sdk/structured-data-extraction): Build structured data extraction using Vercel AI SDK `generateText` with `Output.object()` & Zod. Create features like intelligent forms or data normalization from free text.
  - [UI with v0](/academy/ai-sdk/ui-with-v0): Learn how Vercel v0 accelerates UI development for AI features. Generate React components (using Shadcn UI & Tailwind) directly from text prompts.
  - [Basic Chatbot](/academy/ai-sdk/basic-chatbot): Use the AI SDK `useChat` hook to build a streaming chatbot interface in Next.js. Experience the complexity of custom UI before discovering a better way.
  - [AI Elements](/academy/ai-sdk/ai-elements): Transform your chatbot with professional AI components
  - [System Prompts](/academy/ai-sdk/system-prompts): Customize your AI chatbot's behavior and personality using system prompts. Learn to shape responses with persistent instructions.
  - [Tool Use](/academy/ai-sdk/tool-use): Enable your chatbot to interact with external APIs and functions using AI SDK Tools. Define tools, handle function calls, and return results to the LLM.
  - [Multi-Step & Generative UI](/academy/ai-sdk/multi-step-and-generative-ui): Build chatbots that perform complex tasks requiring multiple tool calls. Manage conversation state and render dynamic Generative UI components based on tool results.
  - [Conclusion](/academy/ai-sdk/conclusion): You've completed the Vercel AI SDK course! Review key learnings (LLMs, prompting, SDK features) and find resources for continued exploration in AI engineering.

### Build Visual Workflow Plugins on Vercel

- [Course overview](/academy/visual-workflow-builder-on-vercel): Deploy a visual workflow builder on Vercel and extend it with plugins for the APIs you actually use. Learn Vercel Workflow fundamentals along the way.
  - [Hello Workflow](/academy/visual-workflow-builder-on-vercel/hello-workflow): Learn Vercel Workflow by deploying a visual workflow builder. Run your first durable workflow and see how APIs return instantly while background work continues.
  - [Webhook Workflow](/academy/visual-workflow-builder-on-vercel/webhook-workflow): Build a webhook-triggered workflow that accepts HTTP POST requests and processes them durably. Your first step toward handling external events.
  - [Build Your First Plugin](/academy/visual-workflow-builder-on-vercel/first-plugin): Build a simple plugin to learn how plugins work before adding API complexity. Understand the plugin folder pattern.
  - [Build an Email Plugin](/academy/visual-workflow-builder-on-vercel/resend-plugin): Build an email plugin using the pattern you learned. Add real API calls, credential management, and send actual emails through your workflow.
  - [Break It, Fix It](/academy/visual-workflow-builder-on-vercel/error-handling): Master Vercel Workflow error handling by breaking things on purpose. Learn when to use RetryableError for transient failures and FatalError for permanent failures.
  - [Build Your Own Plugin](/academy/visual-workflow-builder-on-vercel/build-your-plugin): Build a custom Vercel Workflow plugin for Slack, Stripe, GitHub, or any API you use. Apply everything you've learned to create a production-ready integration.

### Vercel Sandbox

- [Course overview](/academy/vercel-sandbox): Learn how to safely execute untrusted code using Vercel Sandbox. Build a CLI code review agent that clones repositories, runs tests, and uses AI to analyze code for security and quality issues, all in an isolated environment.
  - [Your First Sandbox](/academy/vercel-sandbox/your-first-sandbox): Install the Sandbox SDK, create your first Sandbox, run a single command inside the microVM, and stop it. The simplest possible round-trip before we add anything to it.
  - [Clone a Repo](/academy/vercel-sandbox/clone-a-repo): Echoing strings is fine, but the whole point is to inspect real code. In this lesson, we run `git clone` inside the Sandbox, verify the exit code, and confirm the repo actually landed where we expected it.
  - [Read Files](/academy/vercel-sandbox/read-files): We've cloned the repo, but we haven't looked inside. In this lesson, we list the cloned directory with `ls`, read the README out of the Sandbox, and handle the case where the file isn't there.
  - [Wrap the Lifecycle](/academy/vercel-sandbox/wrap-the-lifecycle): Turn the script we've been growing into a proper reusable function. Accept a repo URL as input, wrap the body in try/finally so the Sandbox always stops, and return a structured result that the rest of the course can consume.
  - [Scaffold the CLI](/academy/vercel-sandbox/scaffold-the-cli): Set up commander, register a `review <repoUrl>` command, and parse the argument so we have somewhere to wire the Sandbox lifecycle in the next lessons. Just the skeleton, no Sandbox calls yet.
  - [Validate GitHub URLs](/academy/vercel-sandbox/validate-github-urls): Add input validation to the CLI so we never spin up a Sandbox for a URL that isn't a real GitHub repo. A small regex check upfront saves a lot of confused failures downstream.
  - [Wire the Sandbox Workflow](/academy/vercel-sandbox/wire-the-sandbox-workflow): Replace the "would review" placeholder with the real thing. Import `runSandboxLifecycle` from Chapter 1, call it after the URL passes validation, and print the structured result.
  - [Predictable Exit Codes](/academy/vercel-sandbox/predictable-exit-codes): Wrap the lifecycle call in `try/catch`, set `process.exitCode` for each failure mode, and standardize on 0 / 1 / 2 so CI jobs can fail on the right things and pass on the right things.
  - [The Naive Prompt](/academy/vercel-sandbox/the-naive-prompt): Start with the obvious "review this code and tell me what's wrong" prompt and run it against a real file. We're going to feel the problem before we fix it, because that's how the schema-driven version earns its keep in lesson 3.3.
  - [Design the Review Schema](/academy/vercel-sandbox/design-the-review-schema): A schema is a contract the model has to keep. In this lesson, we define Zod schemas for a single finding (severity, category, file, summary, recommendation) and for the overall review (risk level + findings array) so the next lesson can demand exactly that shape from the model.
  - [Generate Structured Reviews](/academy/vercel-sandbox/generate-structured-reviews): Swap `generateText` for `generateObject`, pass the schema we built in 3.2, and watch the model return a typed object instead of a wall of advice. Same model, same source, dramatically more useful output.
  - [Connect Analysis to the CLI](/academy/vercel-sandbox/connect-analysis-to-the-cli): Extend the lifecycle to collect a curated set of files from the cloned repo, pass them to `analyzeRepository`, and print the resulting findings. This is where the two halves of the course finally talk to each other.
  - [Run Tests Inside the Sandbox](/academy/vercel-sandbox/run-tests-inside-the-sandbox): Static AI analysis only tells you what the model thinks. In this lesson, we actually run the repo's test suite inside the Sandbox, capture stdout and stderr, and keep the result around so we can parse it in the next lesson.
  - [Parse Test Failures](/academy/vercel-sandbox/parse-test-failures): Test runner output is a wall of text. Useful for humans, useless for merging with structured AI findings. In this lesson, we write a small parser that pulls failure lines out of stdout/stderr and shapes them into typed `TestFinding` records.
  - [Handle Package Manager Variants](/academy/vercel-sandbox/handle-package-manager-variants): Not every repo uses pnpm. In this lesson, we detect the lockfile inside the cloned repo, pick `pnpm`/`npm`/`yarn` accordingly, and stop hardcoding the tool name.
  - [Merge AI and Test Findings](/academy/vercel-sandbox/merge-ai-and-test-findings): In the CLI, parse the test output from the lifecycle, turn failures into structured findings, and merge them with the AI review. Recalculate overall risk so a failing test bumps the report's severity even if the AI thought everything was fine.
  - [Benchmark the Pipeline](/academy/vercel-sandbox/benchmark-the-pipeline): Wrap each pipeline stage with a stopwatch and log the durations. The numbers are boring, but they're the only way to know whether the next lesson's snapshot work actually does anything.
  - [Sandbox Snapshots for Speed](/academy/vercel-sandbox/sandbox-snapshots-for-speed): The pipeline's slowest step is installing dependencies. Sandbox snapshots let us bake in `pnpm` / `npm` / `yarn` and skip a chunk of that work. We add snapshot support to the lifecycle with a graceful fallback for when the snapshot doesn't exist.
  - [Resilient Error Handling](/academy/vercel-sandbox/resilient-error-handling): Right now, a failure anywhere in the pipeline aborts the whole review. In this lesson, we wrap each stage so a broken test runner doesn't hide the AI findings (and a failed AI call doesn't hide the test results).
  - [Formatted Reports](/academy/vercel-sandbox/formatted-reports): Move the print logic out of the CLI into a small reporter module. Sort findings by severity, group AI vs test results, and skip ANSI colors when running in CI so the logs stay clean.

### Agent-Friendly APIs

- [Course overview](/academy/agent-friendly-apis): Build a feedback API, then build a Claude Code skill that generates the documentation agents actually need to use it well.
  - [Project Setup](/academy/agent-friendly-apis/setup-project): Deploy the starter project, review the Feedback type and seed data, and implement the data utility functions that the API routes will use.
  - [Feedback Endpoint](/academy/agent-friendly-apis/feedback-endpoint): Create the main feedback API route that lists all entries with GET and accepts new submissions with POST, including validation for required fields and rating range.
  - [Filtering and Details](/academy/agent-friendly-apis/filtering-and-details): Extend the feedback API with query parameter filtering on the list endpoint and a dynamic route segment for fetching individual entries by ID.
  - [Summary Endpoint](/academy/agent-friendly-apis/summary-endpoint): Create a summary route that calculates total entries, average rating, rating distribution, and per-course breakdowns from the feedback data.
  - [Agent-Friendly Docs](/academy/agent-friendly-apis/agent-friendly-docs): Learn why traditional API docs fail for AI agents and discover the specific patterns (endpoint signatures, parameter tables, realistic examples, error cases, and schemas) that make docs machine-parseable without sacrificing human readability.
  - [Add llms.txt](/academy/agent-friendly-apis/add-llms-txt): Implement the llms.txt standard for the feedback API, add llms-full.txt for single-request access, and add markdown docs so agents can discover and read your API documentation in machine-readable formats.
  - [Deploy to Vercel](/academy/agent-friendly-apis/deploy-your-docs): Push your changes to redeploy the feedback API so the llms.txt and markdown docs endpoints are live at your public URL.
  - [Explore Real Skills](/academy/agent-friendly-apis/explore-real-skills): Browse skills.sh to see how production skills structure their documentation, instructions, and reference files. Identify patterns you'll use when building your own skill in Section 3.
  - [Anatomy of a Skill](/academy/agent-friendly-apis/anatomy-of-a-skill): Learn the structure of a Claude Code skill including the SKILL.md file, YAML frontmatter, the progressive disclosure system, and folder conventions for references and scripts.
  - [Build the Generator](/academy/agent-friendly-apis/build-the-generator): Create the complete skill by writing step-by-step instructions in SKILL.md and the documentation formatting patterns in the references folder.
  - [Run and Evaluate](/academy/agent-friendly-apis/run-and-evaluate): Run the API docs generator skill for the first time in Claude Code. Watch it discover routes, generate markdown docs, and create the /api/docs endpoint. Then evaluate the output against the quality checklist and test the generated curl examples.
  - [Iterate and Ship](/academy/agent-friendly-apis/iterate-and-ship): Update the skill instructions based on what you found during evaluation. Re-run the skill, compare output, and repeat until the generated docs pass the quality checklist. Verify the final /api/docs endpoint works end-to-end.

### Svelte on Vercel

- [Course overview](/academy/svelte-on-vercel): Build production-ready SvelteKit applications on Vercel. Learn deployment, AI integration, workflows, and performance optimization.
  - [Deploy to Vercel](/academy/svelte-on-vercel/deploy-svelte-to-vercel): Configure and deploy a SvelteKit application to Vercel with the correct adapter settings and build configuration.
  - [Environment Variables](/academy/svelte-on-vercel/environment-variables): Manage environment variables across development, preview, and production scopes using the Vercel dashboard and vercel env pull.
  - [Preview Deployments](/academy/svelte-on-vercel/preview-deployments): Use preview deployments to test changes before production and collaborate with your team on pull requests.
  - [Runtime Selection](/academy/svelte-on-vercel/runtime-selection): Configure runtime settings for your SvelteKit server functions on Vercel, including Node.js version, region selection, and experimental Bun support.
  - [Streaming Chat](/academy/svelte-on-vercel/streaming-chat): Build a streaming chat interface using AI SDK v6 with SvelteKit server endpoints and reactive UI updates.
  - [Tools and Agents](/academy/svelte-on-vercel/tools-and-agents): Create tools that extend AI capabilities and build multi-step agents that can chain operations together.
  - [Structured Output](/academy/svelte-on-vercel/svelte-structured-output): Extract structured, type-safe data from AI responses using Valibot schemas for reliable data extraction.
  - [Fallbacks and Tracking](/academy/svelte-on-vercel/fallbacks-and-tracking): Configure model fallbacks for reliability and track token usage for cost management in production AI applications.
  - [Your First Workflow](/academy/svelte-on-vercel/durable-tasks): Install the Workflow DevKit, create a durable workflow with steps, and trigger it from a SvelteKit route handler.
  - [Parallel Steps](/academy/svelte-on-vercel/multi-step-workflows): Refactor the workflow to process resorts as independent parallel steps and use sleep to schedule delayed re-evaluation.
  - [Error Handling](/academy/svelte-on-vercel/workflow-error-handling): Handle errors in workflows using FatalError for permanent failures, RetryableError with retryAfter for transient failures, and getStepMetadata for attempt-aware backoff.
  - [ISR](/academy/svelte-on-vercel/isr): Configure Incremental Static Regeneration (ISR) to serve cached pages while revalidating content in the background.
  - [Observability](/academy/svelte-on-vercel/svelte-observability): Implement observability and logging to monitor your SvelteKit application in production and debug issues effectively.
  - [Performance](/academy/svelte-on-vercel/performance): Optimize your SvelteKit application's performance with caching strategies, bundle optimization, and runtime improvements.
  - [What You Built](/academy/svelte-on-vercel/svelte-conclusion): A recap of the ski-alerts app and the Vercel platform features you integrated throughout the course.

### Nuxt on Vercel

- [Course overview](/academy/nuxt-on-vercel): Translate your React and Next.js skills to Nuxt. Build a hot springs finder app using idiomatic Nuxt patterns, from reactivity to auth to deployment.
  - [Project Setup](/academy/nuxt-on-vercel/nuxt-project-setup): Clone the starter repo, install dependencies, and tour the Nuxt 4 project structure with a side-by-side comparison to Next.js conventions.
  - [Pages & Routing](/academy/nuxt-on-vercel/pages-and-routing): Create page files for the Hot Springs Finder, learn how Nuxt's file-based routing compares to Next.js, and navigate between pages with NuxtLink.
  - [Components & Reactivity](/academy/nuxt-on-vercel/components-and-reactivity): Create a reusable SpringCard component with props, computed values, and template bindings. Compare Vue's reactivity model to React's useState and useEffect patterns.
  - [Layouts & Navigation](/academy/nuxt-on-vercel/layouts-and-navigation): Build the default layout with a navigation bar and footer, learn how Nuxt layouts differ from Next.js layout files, and wire up NuxtLink for client-side navigation.
  - [Server Routes](/academy/nuxt-on-vercel/server-routes): Create server API routes using Nuxt's Nitro engine, read from a JSON data file, and compare the approach to Next.js Route Handlers.
  - [Data Fetching](/academy/nuxt-on-vercel/data-fetching): Fetch data from the server route using Nuxt's useFetch composable, handle loading states, and compare the approach to React Server Components and client-side fetching.
  - [Dynamic Routes](/academy/nuxt-on-vercel/dynamic-routes): Create a dynamic detail page using route parameters, fetch individual spring data with useFetch, and handle 404 errors for missing springs.
  - [Search & Filtering](/academy/nuxt-on-vercel/search-and-filtering): Add query parameter support to the springs API, build reactive filters on the browse page, and learn how useFetch automatically refetches when query parameters change.
  - [Auth Setup](/academy/nuxt-on-vercel/auth-setup): Install the nuxt-auth-utils module, register a GitHub OAuth app, configure environment variables, and create the OAuth callback handler.
  - [Login Flow](/academy/nuxt-on-vercel/login-flow): Build a login page, wire up logout, and update the navigation layout to conditionally show auth-related links using useUserSession.
  - [Route Protection](/academy/nuxt-on-vercel/route-protection): Create a route middleware that redirects unauthenticated users, apply it to protected pages, and compare the pattern to Next.js middleware.
  - [Saving Favorites](/academy/nuxt-on-vercel/saving-favorites): Build server routes for saving and removing favorites, create a user data storage utility, and wire up the favorites page and toggle button on the detail page.
  - [Visited Tracking](/academy/nuxt-on-vercel/visited-tracking): Build the visited tracking feature with server routes, a toggle button on the detail page, and a stats dashboard on the visited page.
  - [Reviews](/academy/nuxt-on-vercel/reviews): Build a review system with server routes for submitting and fetching reviews, a review form on the detail page, and a review list that aggregates across users.
  - [Debugging Tools](/academy/nuxt-on-vercel/debugging-tools): Enable Nuxt DevTools, inspect the component tree, explore auto-imports, debug server routes, and compare the tooling to React DevTools.
  - [Rendering Modes](/academy/nuxt-on-vercel/rendering-modes): Compare Nuxt's rendering modes to Next.js, learn when each mode makes sense, and configure per-route rendering rules for the hot springs app.
  - [Optimization](/academy/nuxt-on-vercel/optimization): Optimize the hot springs app with lazy-loaded components, server route caching, and payload reduction techniques.
  - [Deploy to Vercel](/academy/nuxt-on-vercel/deploy-nuxt-to-vercel): Deploy the completed Hot Springs Finder to Vercel, configure environment variables, and update the GitHub OAuth callback URL for production.

### Production Monorepos with Turborepo

- [Course overview](/academy/production-monorepos): Build a production monorepo from idea to enterprise scale with Turborepo and Next.js.
  - [Understanding Monorepos](/academy/production-monorepos/understanding-monorepos): Deploy GeniusGarage to Vercel with one click, see your production monorepo live, explore the deployed structure, and optionally clone your fork for local development.
  - [Monorepos vs Polyrepos](/academy/production-monorepos/monorepos-vs-polyrepos): Experience the polyrepo coordination overhead, see atomic monorepo changes in action, and understand when each approach makes sense.
  - [Turborepo Basics](/academy/production-monorepos/turborepo-basics): Run builds twice and see 17x speedup from caching, modify code and see selective rebuilding, explore turbo.json configuration hands-on.
  - [Add Features Page](/academy/production-monorepos/add-features-page): Create a /features route with navigation, feature cards, and inline Button/Card components. This sets up the duplication problem that shared packages solve.
  - [Create UI Package Structure](/academy/production-monorepos/create-ui-package): Create packages/ui directory, configure package.json with named exports pattern, add TypeScript config, and link the workspace - ready to add components.
  - [Extract Card Component](/academy/production-monorepos/extract-card): Create Card component in packages/ui, add it to exports, update features page to import from shared package, and experience instant workspace updates.
  - [Extract Button Component](/academy/production-monorepos/extract-button-component): Extract the Button component from the home page into the shared UI package and add support for multiple style variants.
  - [Deploy Web App](/academy/production-monorepos/deploy-web-app): Deploy the web app to Vercel, configure Turborepo for production builds, and see remote caching in action during deployment.
  - [Create Snippet Manager App](/academy/production-monorepos/create-snippet-app): Create the apps/snippet-manager directory, configure it to run on port 3001, add dependency on packages/ui, and create a basic home page.
  - [Build Snippet List Page](/academy/production-monorepos/snippet-list-page): Import Button and Card from packages/ui, display mock snippet data, and verify that shared components work perfectly across both apps.
  - [Add CodeBlock and SnippetCard](/academy/production-monorepos/add-codeblock-snippetcard): Create CodeBlock component for syntax highlighting, create SnippetCard component that composes Card and CodeBlock, and use them in the snippet manager.
  - [Add Snippet Creation Modal](/academy/production-monorepos/snippet-creation-modal): Add useState for state management, create a modal UI for adding snippets, handle form inputs, and dynamically create new snippets.
  - [Deploy Both Apps](/academy/production-monorepos/deploy-both-apps): Deploy the snippet manager to Vercel, configure independent deployments for both apps, and verify shared packages work in production.
  - [Extract Shared Configs](/academy/production-monorepos/extract-shared-configs): Create packages/typescript-config and packages/eslint-config, move shared configurations, and configure apps to extend from shared config packages.
  - [Add Shared Utils](/academy/production-monorepos/add-shared-utils): Create packages/utils with formatDate, slugify, and truncate functions, then import and use them in the snippet manager.
  - [Update Turborepo Pipeline](/academy/production-monorepos/update-turborepo-pipeline): Configure task dependencies with ^build and ^lint, understand the dependency graph, run turbo run build, and see parallel execution.
  - [Set up Vitest in UI Package](/academy/production-monorepos/set-up-vitest): Install vitest and testing-library, create vitest.config.ts, configure jsdom environment, and add test script.
  - [Write Component Tests](/academy/production-monorepos/write-component-tests): Create button.test.tsx, card.test.tsx, and code-block.test.tsx, test rendering and variants, and test click handlers.
  - [Configure Turborepo for Tests](/academy/production-monorepos/configure-turborepo-tests): Add test task to turbo.json, configure dependencies, configure outputs, and run turbo run test.
  - [Test Caching in Action](/academy/production-monorepos/test-caching): Run tests twice, see cache hits, modify components to trigger cache miss, and understand test caching benefits.
  - [Add GitHub Actions](/academy/production-monorepos/github-actions): Create .github/workflows/ci.yml, configure pnpm and Node.js, run build/lint/test, and see CI pipeline work.
  - [Filtering and Git-Based Filtering](/academy/production-monorepos/filtering-git-based): Run tasks for specific apps with --filter, build with dependencies, filter by path, use git-based filtering for changed code, and optimize CI.
  - [Remote Caching Setup](/academy/production-monorepos/remote-caching): Configure Vercel remote cache with turbo login and turbo link, share cache across team and CI, see cache hits from other machines.
  - [Add Docs App](/academy/production-monorepos/add-docs-app): Create apps/docs with Next.js, build API documentation page, use ui package components, and configure port 3002.
  - [Deploy All Apps](/academy/production-monorepos/deploy-all-apps): Configure Vercel projects for each app, set environment variables per app, deploy all apps, and verify independent deploys.
  - [Multi-App Development](/academy/production-monorepos/multi-app-development): Run pnpm dev for all apps, test individually, use filtering for specific apps, configure cross-app linking, and verify all apps work.
  - [Turborepo Generators](/academy/production-monorepos/turborepo-generators): Create turbo/generators/config.ts, define component and package generators, create templates, and run turbo gen.
  - [Changesets for Versioning](/academy/production-monorepos/changesets-versioning): Install @changesets/cli, configure changesets, create version bumps, generate changelogs, and publish packages.
  - [Code Governance](/academy/production-monorepos/code-governance): Create CODEOWNERS file, assign teams to packages and apps, configure GitHub branch protection, and ensure proper code review workflows.
  - [Production Patterns with next-forge](/academy/production-monorepos/next-forge-patterns): Explore next-forge, Vercel's production-ready Turborepo starter, to see how all the patterns you've learned come together in a real enterprise monorepo.

### Optimize Your Vercel Account

- [Course overview](/academy/optimize-your-vercel-account): Audit and tune your Vercel account for security, cost, and operations.
  - [Deploy Saturday](/academy/optimize-your-vercel-account/deploy-saturday): Deploy the Saturday starter to your own Vercel account with one click, then confirm it's live. This is the deployment that every other lesson in the course configures.
  - [Tour the Dashboard](/academy/optimize-your-vercel-account/tour-the-dashboard): Identify the four locations in the Vercel dashboard where every setting in this course lives. Build a mental map before you start changing things.
  - [Read the Usage Page](/academy/optimize-your-vercel-account/read-the-usage-page): Learn the three-move diagnostic method behind every optimization in this course: find the driver in the team Usage tab, match the signal in Observability, and validate before changing anything.
  - [Sensitive Env Vars](/academy/optimize-your-vercel-account/sensitive-env-vars): Convert Saturday's drop-launch webhook secret from a regular environment variable to a sensitive one, then enforce sensitive-by-default for new variables on the team.
  - [Deployment Protection](/academy/optimize-your-vercel-account/deployment-protection): Turn on Deployment Protection for Saturday's preview deployments so unannounced drops can't be accessed by anyone outside the team.
  - [Firewall Rules](/academy/optimize-your-vercel-account/firewall-rules): Add a custom Vercel Firewall rule that rate-limits requests to Saturday's stock-check endpoint. The lesson where sneaker bots get told to slow down.
  - [Bots and Activity Log](/academy/optimize-your-vercel-account/bots-and-activity-log): Turn on Bot Protection in log-only mode to see how much of Saturday's traffic is automated, then review the Activity Log to confirm nothing surprising has happened on the team recently.
  - [Fluid Compute](/academy/optimize-your-vercel-account/fluid-compute): Enable Fluid Compute on Saturday so functions are billed for the time they spend computing, not for the time they spend waiting.
  - [Runtime Cache](/academy/optimize-your-vercel-account/runtime-cache): Wrap Saturday's stock-check warehouse call with Next.js 16's 'use cache' directive so repeat lookups for the same SKU and size hit the Runtime Cache instead of invoking the function path that talks to the warehouse.
  - [ISR Writes](/academy/optimize-your-vercel-account/isr-writes): Move Saturday's drop schedule from interval revalidation to tag-based on-demand revalidation, triggered by the drop-launch webhook.
  - [Image Optimization](/academy/optimize-your-vercel-account/image-optimization): Tune image quality, formats, and cache duration so Saturday's product photos are served efficiently without burning Image Optimization usage on every visit.
  - [CDN Requests](/academy/optimize-your-vercel-account/edge-requests): Disable prefetching on Saturday's product grid and drops rows so the browser only fetches route bundles for products visitors actually open.
  - [Build Minutes](/academy/optimize-your-vercel-account/build-minutes): Add an Ignored Build Step script to Saturday so commits that only touch documentation files skip the build entirely.
  - [Observability Sampling](/academy/optimize-your-vercel-account/observability-sampling): Wire up Web Analytics and Speed Insights on Saturday with sensible sampling rates and a beforeSend filter so observability data is useful without being exhaustive.
  - [Automate the Audit](/academy/optimize-your-vercel-account/automate-the-audit): Install the vercel-optimize agent skill, run it against a real Vercel project, and map its production-driven recommendations back to the levers you tuned by hand on Saturday.
  - [2FA Enforcement](/academy/optimize-your-vercel-account/two-factor-enforcement): Turn on team-wide 2FA enforcement for Saturday's Vercel team and review the Members page to confirm everyone is covered.
  - [RBAC and Groups](/academy/optimize-your-vercel-account/rbac-and-groups): Configure project-level roles and Access Groups for Saturday so each team member has exactly the permissions their job needs and no more.
  - [Retention Policies](/academy/optimize-your-vercel-account/retention-policies): Set deployment retention policies on Saturday so canceled, errored, and preview deployments don't outlive their usefulness.
  - [SAML and SSO](/academy/optimize-your-vercel-account/saml-and-sso): Configure SAML SSO and Directory Sync for Saturday's team so sign-in, provisioning, and offboarding happen through your identity provider.
  - [Audit Logs](/academy/optimize-your-vercel-account/audit-logs): Enable Audit Log streaming to your SIEM (Datadog, Splunk, S3, etc.) and review the last 30 days for unexpected activity on Saturday's team.
  - [Preview Lockdown](/academy/optimize-your-vercel-account/preview-lockdown): Layer Trusted IPs and Password Protection on top of Vercel Authentication for previews where a leak would cost you a deal.
  - [Backend Egress](/academy/optimize-your-vercel-account/backend-egress): Compare Static IPs, Secure Compute, and PrivateLink. Pick the right model for Saturday and configure it.
  - [Managed Rules](/academy/optimize-your-vercel-account/managed-rules): Enable Vercel's managed firewall rulesets for OWASP-style protections, then walk through the audit checklist for every other project you own.

### Microfrontends on Vercel

- [Course overview](/academy/microfrontends-on-vercel): Build scalable, independent frontend applications with Vercel's microfrontends platform.
  - [When Microfrontends](/academy/microfrontends-on-vercel/when-microfrontends): Learn the two primary use cases for microfrontends and the warning signs that your monolith needs splitting.
  - [Architecture Patterns](/academy/microfrontends-on-vercel/architecture-patterns): Learn the difference between vertical (multi-zone) and horizontal (remote components) microfrontends.
  - [Monorepo Setup](/academy/microfrontends-on-vercel/monorepo-setup): Initialize a Turborepo monorepo ready for multiple applications and shared packages.
  - [Project Structure](/academy/microfrontends-on-vercel/project-structure): Create the Next.js applications and shared packages that will become your microfrontends.
  - [Configuration Basics](/academy/microfrontends-on-vercel/configuration-basics): Write the microfrontends.json configuration file and wrap each Next.js config with withMicrofrontends.
  - [Path Routing Deep Dive](/academy/microfrontends-on-vercel/path-routing): Understand how Vercel routes requests to microfrontends and why middleware behavior changes.
  - [MFE Local Development](/academy/microfrontends-on-vercel/mfe-local-development): Run multiple microfrontends locally through the development proxy at localhost:3024.
  - [Shared Packages](/academy/microfrontends-on-vercel/shared-packages-introduction): Build shared UI components, utilities, and configuration packages used across all applications.
  - [Deployment Workflow](/academy/microfrontends-on-vercel/deployment-workflow): Deploy your microfrontends to Vercel, configure the group, and understand fallback behavior.
  - [Navigation Performance](/academy/microfrontends-on-vercel/navigation-performance): Optimize cross-app navigation with prefetching and prerendering using Speculation Rules.
  - [Testing Strategies](/academy/microfrontends-on-vercel/testing-strategies): Write tests that validate routing configuration and middleware behavior before deployment.
  - [Observability](/academy/microfrontends-on-vercel/observability): Monitor microfrontends routing with debug headers, Vercel Observability, and session tracing.
  - [Security and Firewall](/academy/microfrontends-on-vercel/security-firewall): Configure deployment protection and Web Application Firewall rules across microfrontend applications.
  - [Feature Flag Routing](/academy/microfrontends-on-vercel/feature-flag-routing): Route requests to different microfrontends based on feature flags for gradual rollouts and A/B testing.
  - [Incremental Migration](/academy/microfrontends-on-vercel/incremental-migration): Apply the strangler fig pattern to migrate from legacy applications to microfrontends piece by piece.
  - [Remote Components Intro](/academy/microfrontends-on-vercel/remote-components-intro): Understand horizontal microfrontends (remote components) and when they make sense.
  - [Conclusion](/academy/microfrontends-on-vercel/microfrontends-conclusion): Review key learnings, decision frameworks, and resources for continuing your microfrontends journey.

### Next.js Foundations

- [Course overview](/academy/nextjs-foundations): Prepare for the self-paced Foundations workshop. Across four sections you'll build two production-ready apps (web + blog) using Next.js and Vercel. This page outlines what you'll build, how we teach, prerequisites, and the section-by-section roadmap.
  - [Project Setup](/academy/nextjs-foundations/project-setup): Deploy a working Next.js application to Vercel, clone it locally, and verify your development environment. Every lesson builds on this foundation.
  - [App Router Basics](/academy/nextjs-foundations/app-router-basics): Learn the App Router mental model: folders become routes, special files control behavior. Build a route tree with layouts, loading states, error boundaries (components that catch JavaScript errors and display fallback UI), and API routes.
  - [Server and Client Components](/academy/nextjs-foundations/server-and-client-components): Learn when components run on the server vs client, how environment variables differ between them, and how to compose Server Components inside Client wrappers.
  - [Dynamic Routing](/academy/nextjs-foundations/dynamic-routing): Build a blog post page with [slug] dynamic segments, generate static paths with generateStaticParams, and gracefully handle missing content with notFound().
  - [Environment and Security](/academy/nextjs-foundations/env-and-security): Learn how to protect sensitive data from client exposure using the server-only package, understand environment variable precedence, and implement security patterns that catch mistakes at build time.
  - [Errors and Not Found](/academy/nextjs-foundations/errors-and-not-found): Implement error.tsx for graceful error handling with reset functionality, customize not-found.tsx for 404s, and understand how error boundaries bubble through the route tree.
  - [Proxy Basics](/academy/nextjs-foundations/proxy-basics): Create a proxy.ts file to intercept requests before they reach your routes. Add security headers, implement authentication redirects, and understand the request lifecycle in Next.js 16.
  - [Client‑Server Component Boundaries](/academy/nextjs-foundations/client-server-boundaries): Apply a simple decision model to pick Server or Client Components based on interactivity, browser APIs, data needs, and bundle impact.
  - [Component Composition Patterns](/academy/nextjs-foundations/component-composition-patterns): Implement a small compound component (e.g., Dialog.*) pattern that composes cleanly with server/client boundaries.
  - [Not Found & Errors](/academy/nextjs-foundations/not-found-and-error-surfaces): Use `notFound()` and `not-found.tsx` for 404s and recenter error surfaces with `error.tsx` at the correct segment.
  - [Nested Layouts](/academy/nextjs-foundations/nested-layouts): Implement nested `layout.tsx` files to provide section-specific chrome while keeping routing clean.
  - [Data Fetching Without Waterfalls](/academy/nextjs-foundations/data-fetching-without-waterfalls): Replace sequential awaits with concurrent fetching patterns to reduce latency.
  - [Navigation](/academy/nextjs-foundations/navigation): Use `next/link` for client-side transitions that preserve app state and avoid full reloads.
  - [params vs searchParams](/academy/nextjs-foundations/params-vs-searchparams): Distinguish dynamic segments from query strings and access them appropriately in App Router.
  - [Server Actions for Forms](/academy/nextjs-foundations/server-actions-for-forms): Use Server Actions for secure mutations with type safety and built-in progressive enhancement.
  - [Connecting Apps with Rewrites](/academy/nextjs-foundations/multi-app-routing): Learn how to use Next.js rewrites to connect multiple applications into a seamless user experience. Configure multi-zone architecture for independent deployment with unified routing.
  - [Cache Components for Instant and Fresh Pages](/academy/nextjs-foundations/cache-components): Use Cache Components to prerender static shells instantly while serving fresh or cached dynamic data. Control revalidation with cacheLife() for time-based updates or cacheTag() for on-demand invalidation.
  - [Dynamic Metadata Done Right](/academy/nextjs-foundations/dynamic-metadata-done-right): Implement `generateMetadata` with direct data access or absolute URLs; avoid relative fetches on the server.
  - [Suspense and Streaming](/academy/nextjs-foundations/suspense-and-streaming): Use Suspense boundaries and streaming to improve perceived performance and unblock UI earlier.
  - [Images (next/image)](/academy/nextjs-foundations/images-next-image): Use `next/image` to reserve space, optimize formats, lazy-load, and prioritize the LCP image.
  - [Fonts (next/font)](/academy/nextjs-foundations/fonts-with-next-font): Use `next/font` to self-host, subset, and set display/fallback strategies that minimize CLS and improve LCP.
  - [Core Web Vitals + Measurement](/academy/nextjs-foundations/core-web-vitals-and-measurement): Instrument measurement for key vitals and use results to drive performance decisions.
  - [Security Review: APIs and Config](/academy/nextjs-foundations/security-review-apis-and-config): Harden API routes or Server Actions with validation, auth checks, and proper secret handling.
  - [Query Performance Patterns](/academy/nextjs-foundations/query-performance-patterns): Replace sequential queries with concurrency/batching strategies to cut latency and load.
  - [Third‑Party Scripts](/academy/nextjs-foundations/third-party-scripts): Use `next/script` with `strategy="afterInteractive"` (or appropriate) to defer non-critical scripts.
  - [Advanced Image Optimization](/academy/nextjs-foundations/advanced-image-optimization): Master advanced next/image patterns: blur placeholders (low-resolution previews shown while images load) for perceived performance, art direction (serving different images based on viewport) with getImageProps, and srcset customization (controlling which image sizes are generated) with deviceSizes/imageSizes.
  - [Glossary](/academy/nextjs-foundations/glossary): Reference guide for technical terms used throughout the Next.js Foundations course

### Build Your Own AI Coding Agent Harness

- [Course overview](/academy/build-ai-agent-harness): Build an AI coding agent harness from scratch using AI SDK, Vercel Sandbox, and just-bash. Covers the tool loop, tool design, system prompts, sandbox abstraction, context pruning, subagent delegation, lifecycle management, and extensibility.
  - [From Chat to Agent](/academy/build-ai-agent-harness/from-chat-to-agent): Build a ToolLoopAgent with zero tools, then add one and watch a chatbot become an agent.
  - [Your First Tools](/academy/build-ai-agent-harness/your-first-tools): Add grep and learn why tool descriptions are the model selection API, not documentation.
  - [Completing the Toolbox](/academy/build-ai-agent-harness/completing-the-toolbox): Add bash with safety gates, because an agent that can rm -rf needs a leash.
  - [Descriptions That Work](/academy/build-ai-agent-harness/descriptions-that-work): The evolution of tool descriptions from one-liners to structured contracts, and why every field matters.
  - [Shell Execution with Safety](/academy/build-ai-agent-harness/shell-execution-with-safety): Extract the tool factory pattern, separating what the model sees from how commands execute.
  - [Approval Gates](/academy/build-ai-agent-harness/approval-gates): Evolve approval from a boolean to a function to a configurable discriminated union.
  - [Structuring Agent Instructions](/academy/build-ai-agent-harness/structuring-agent-instructions): Add Agency and Guardrails sections to the system prompt, making tool-first behavior explicit and repeatable.
  - [Dynamic Prompt Construction](/academy/build-ai-agent-harness/dynamic-prompt-construction): Build a prompt composer that adapts to runtime context, making prompt policy easier to evolve safely.
  - [Verification Gates](/academy/build-ai-agent-harness/verification-gates): Add a verification contract so the agent scopes claims honestly and proves what it actually checked.
  - [Project Context](/academy/build-ai-agent-harness/project-context): Load project instructions from AGENTS.md so the same harness can pick up project-specific commands and constraints.
  - [Designing the Interface](/academy/build-ai-agent-harness/designing-the-interface): Define a Sandbox interface that tools call so execution can move without rewriting tool logic.
  - [Local Implementation](/academy/build-ai-agent-harness/local-implementation): Wrap Node.js fs and child_process in a local Sandbox implementation so the interface has a concrete baseline backend.
  - [In-Memory Implementation](/academy/build-ai-agent-harness/in-memory-implementation): Add a just-bash backend so the same Sandbox interface can run against an in-memory copy-on-write filesystem.
  - [Cloud Implementation](/academy/build-ai-agent-harness/cloud-implementation): What a cloud sandbox looks like, with remote VMs, real filesystems, latency, and cost.
  - [Lifecycle Hooks](/academy/build-ai-agent-harness/lifecycle-hooks): Sandboxes need setup and teardown. Add afterStart, beforeStop, and onTimeout hook points.
  - [The Problem](/academy/build-ai-agent-harness/the-problem): Add token logging and watch context grow linearly with every tool call.
  - [Pruning Old Results](/academy/build-ai-agent-harness/pruning-old-results): Use pruneMessages to remove old tool call/result pairs while keeping recent context.
  - [Tool Output Design](/academy/build-ai-agent-harness/tool-output-design): Prevention is better than cleanup. Design tools to produce bounded output from the start.
  - [Cache Control](/academy/build-ai-agent-harness/cache-control): Use provider-aware cache control to reduce repeated input costs when your stack supports it.
  - [Why Delegate](/academy/build-ai-agent-harness/why-delegate): Single-agent failure modes (context pollution, lost focus, over-broad capabilities) and the situations where delegation earns its keep.
  - [Explorer Subagent](/academy/build-ai-agent-harness/explorer-subagent): A read-only subagent with a cheap model. Perfect for research and exploration.
  - [Executor Subagent](/academy/build-ai-agent-harness/executor-subagent): A full-capability subagent for implementation. Delegated trust, stronger model, larger step budget.
  - [Task Tool](/academy/build-ai-agent-harness/task-tool): Route delegations through one task tool, with per-role models and the shape for spawn permissions.
  - [State Machine](/academy/build-ai-agent-harness/state-machine): Provisioning, active, hibernating, hibernated. Two timeouts and what counts as activity.
  - [Snapshot and Restore](/academy/build-ai-agent-harness/snapshot-and-restore): Freeze the filesystem, return an ID, restore later. Idempotency in three places.
  - [Durable Workflows](/academy/build-ai-agent-harness/durable-workflows): setTimeout dies when the function ends. Vercel Workflow survives deploys.
  - [Hard-Won Lessons](/academy/build-ai-agent-harness/hard-won-lessons): Production gotchas from real sandbox lifecycle implementations.
  - [Structured Questions](/academy/build-ai-agent-harness/structured-questions): askUser tool with multiple choice, and the system prompt scripting that forces the agent to actually use it.
  - [Approval Config](/academy/build-ai-agent-harness/approval-config): Two approval models. Config for operational modes, events for pluggable safety.
  - [Todo Tool](/academy/build-ai-agent-harness/todo-tool): Task decomposition with pending, in_progress, and completed state tracking, and a single-active-item constraint.
  - [Fast Context Understanding](/academy/build-ai-agent-harness/fast-context-understanding): grep first, read only what you'll change. Don't read 30 files to understand a codebase.
  - [Verification Contract](/academy/build-ai-agent-harness/verification-contract): Gate sequence (typecheck, lint, tests, build). The agent proves its work, not its claims.
  - [CLI Entry Point](/academy/build-ai-agent-harness/cli-entry-point): Parse arguments, create the sandbox, initialize the agent, and shut down cleanly.
  - [Streaming and Tool Rendering](/academy/build-ai-agent-harness/streaming-and-tool-rendering): Stream agent responses to the terminal. Render tool calls as they fire.
  - [Web Surface](/academy/build-ai-agent-harness/web-surface): The same agent serves a web chat UI. Persistence, resumable streams, tool results as components.
  - [Skills System](/academy/build-ai-agent-harness/skills-system): Progressive disclosure. Names and descriptions always in context, full content loaded on demand.
  - [Custom Tools](/academy/build-ai-agent-harness/custom-tools): Register tools without forking. Map every customization surface and treat tools as registrations, not built-ins.
  - [Extension Points](/academy/build-ai-agent-harness/extension-points): Lifecycle events for extensible behavior. Subscribe, block, modify, pass through.

### Slack Agents on Vercel with the AI SDK

- [Course overview](/academy/slack-agents): Step-by-step course to build, deploy, and run a real Slack bot on Vercel using the AI SDK, with logging, safeguards, and an ops runbook for your team’s workspace.
  - [Project Setup](/academy/slack-agents/sandbox-repo-setup-smoke-test): Create a Slack Developer Sandbox, initialize from the template, configure and install the app, run the tunnel, and validate end-to-end by DMing the bot and capturing a correlation-friendly log trace.
  - [Repository Overview](/academy/slack-agents/repository-flyover): Walk the call path across README, manifest, events endpoint, app bootstrap, listeners, AI orchestration, and streaming. Observe the verbose logs and streaming behavior.
  - [Boot Checks & Health](/academy/slack-agents/boot-checks-and-health): Create `server/env.ts` to validate required env vars.
  - [Local Development Tunnel](/academy/slack-agents/tunnel-orchestration): The tunnel script is magic until it breaks. Learn how it detects existing tunnels, rewrites manifests, and handles port conflicts. Master the developer experience patterns that make local development smooth.
  - [App Manifests](/academy/slack-agents/manifest-and-scopes): Explore manifest features (shortcuts, slash commands, assistant view), bot scopes, and event subscriptions. Add `reactions:read` and subscribe to reaction events, reinstall, and update your scope truth table.
  - [Bolt Middleware](/academy/slack-agents/bolt-nitro-middleware-and-logging): Document `createHandler(app, receiver)` and where `LogLevel` is set for both app and receiver. Add a small Bolt middleware that reads `event_id` and `ts/thread_ts` from the payload and exposes them as `context.correlation`. Listeners log from `context`. Propose a tiny logger wrapper that pulls correlation fields automatically.
  - [Ack & Latency](/academy/slack-agents/acknowledgment-and-latency): Slack requires `ack()` within 3 seconds. Target under 2 seconds. Move heavy work after `ack()`. Read `server/listeners/commands/sample-command.ts`, `server/listeners/shortcuts/sample-shortcut.ts`, `server/listeners/actions/sample-action.ts`, and `server/listeners/views/sample-view.ts`.
  - [Slash Commands](/academy/slack-agents/slash-commands): Create an `/echo` command that demonstrates argument parsing, input validation, and ephemeral responses. Learn the difference between public and private replies in Slack channels.
  - [Shortcuts and Modals](/academy/slack-agents/shortcuts-and-modals): Learn how shortcuts trigger modals from anywhere in Slack. Create a bug report shortcut that collects structured data and posts formatted messages to channels.
  - [Views and App Home](/academy/slack-agents/views-and-app-home): Learn how App Home provides a persistent UI for your bot. Create a dashboard with quick action buttons, dynamically update views based on user interaction, and handle modal submissions that post to multiple destinations.
  - [Assistant Context](/academy/slack-agents/assistant-thread-context-changed): Learn how Slack AI Assistants maintain context across conversations. Implement handlers for thread lifecycle events that track context changes, update suggested prompts, and ensure your assistant stays relevant as conversations evolve.
  - [System Prompts](/academy/slack-agents/system-prompts-shape-behavior): System prompts are your bot's DNA. Small changes create dramatically different behaviors. Learn to shape responses with structured formats, track costs with token monitoring, and understand what makes AI actually useful in Slack.
  - [AI Tools and Functions](/academy/slack-agents/ai-tools-and-functions): Learn how AI tools extend your bot's capabilities beyond text responses. Implement tools with Zod schemas that let AI react to messages, fetch summaries, and interact with Slack APIs based on user intent.
  - [Status Communication](/academy/slack-agents/status-communication): Learn to eliminate dead air with always-on status communication. Implement status updates that flow continuously during tool operations, context fetching, and AI processing. Never leave users wondering what's happening.
  - [Error Handling and Resilience](/academy/slack-agents/error-handling-and-resilience): Production AI bots face rate limits, model failures, and API timeouts. Learn to implement exponential backoff, handle Slack API rate limits, and build resilient systems that degrade gracefully rather than failing completely.
  - [AI Gateway](/academy/slack-agents/ai-gateway): Your bot works until you wake up to a $500 bill. Learn what AI Gateway actually provides (and what it doesn't), then implement production-grade cost controls. Reject expensive requests before they burn money.
  - [Deploy to Vercel](/academy/slack-agents/deploy-to-vercel): Deploy your Slack bot to Vercel, configure environment variables, handle the URL verification challenge, and update your manifest for production. This lesson takes your bot from local development to a live production environment.
  - [Scopes & Structured Logs](/academy/slack-agents/scopes-and-structured-logs): Create a scope truth table, remove unnecessary permissions, and implement structured logging with correlation IDs. This lesson teaches you to minimize security surface area while maximizing debuggability in production.
  - [Operations Runbook](/academy/slack-agents/operations-runbook): Build a comprehensive operations runbook covering deployment, monitoring, incident response, and rollback procedures. This lesson simulates real incidents and teaches you to operate a production bot with confidence.
  - [What's Next](/academy/slack-agents/whats-next): You've completed the Slack Agents production course. Review your accomplishments, get your certificate, and explore next steps for your bot development journey.

### Building Filesystem Agents

- [Course overview](/academy/filesystem-agents): Build a filesystem agent that uses bash tools and Vercel Sandbox to explore call transcripts and answer questions.
  - [Project Setup](/academy/filesystem-agents/filesystem-project-setup): Clone the starter repo, link it to Vercel, pull environment variables, and explore the pre-built UI and demo data you'll work with throughout the course.
  - [Agent Skeleton](/academy/filesystem-agents/agent-skeleton): Define the initial ToolLoopAgent in lib/agent.ts. Set the model, wire up empty tools and instructions, and export the agent so the API route can use it.
  - [Bash Tool](/academy/filesystem-agents/bash-tool): Build the bash tool in lib/tools.ts. Define a Zod schema for command and args, accept a Sandbox instance, and execute commands with runCommand.
  - [Wire Up the Sandbox](/academy/filesystem-agents/wire-up-sandbox): Initialize a Vercel Sandbox in lib/agent.ts, pass it to createBashTool, and give the agent its first working tool. The agent can now run bash commands.
  - [Files and Instructions](/academy/filesystem-agents/files-and-instructions): Load the call transcript files into the sandbox and write clear agent instructions. This completes lib/agent.ts so the agent can now explore files and answer questions about calls.
  - [Test and Extend](/academy/filesystem-agents/test-and-extend): Test the filesystem agent with a variety of questions, observe how it uses bash to explore files, and learn how to extend it with more tools, data sources, and UI features.

### Vercel Foundations

- [Course overview](/academy/vercel-foundations): A 1-hour video series covering the most important Vercel concepts. Nine short sessions to get you productive on the platform.
  - [The v0 Way](/academy/vercel-foundations/v0-way): Use v0 to generate a project, iterate with versions, deploy to Vercel, and extend the app with integrations, MCPs, and environment variables.
  - [Account Setup](/academy/vercel-foundations/vercel-account-setup): Connect your Git repository to Vercel, deploy your first project, configure function regions for low latency, and set up preview and custom environments.
  - [Vercel SKUs](/academy/vercel-foundations/skus): Follow a single request through Vercel's infrastructure to understand Edge Requests, Fluid Compute, Fast Data Transfer, Runtime Cache, and On-Demand Revalidation.
  - [Deployments](/academy/vercel-foundations/deployments): Go deeper with deployments: instant rollbacks to recover from mistakes, skew protection to prevent version mismatches, and deployment checks for quality gates.
  - [Vercel Toolbar](/academy/vercel-foundations/toolbar): Explore the Vercel toolbar's key features: feature flags for controlled rollouts, draft mode for previewing unpublished content, and comments for team collaboration.
  - [Settings](/academy/vercel-foundations/vercel-settings): Walk through the most important project and team settings in the Vercel dashboard: environment variables, custom domains, function failover regions, team roles, and access groups.
  - [Security](/academy/vercel-foundations/security): Configure deployment protection, access controls, and security features to keep your Vercel projects safe.
  - [Logs](/academy/vercel-foundations/logs): Navigate Vercel's logging tools to debug build failures, inspect runtime errors, and understand what's happening in your functions.
  - [Observability](/academy/vercel-foundations/platform-observability): Use Vercel's observability tools to monitor Edge Requests, analyze performance with Query, set up alerts, and investigate external API dependencies.

### v0 Foundations

- [Course overview](/academy/v0-foundations): Build, customize, and ship a real website with v0. No code required.
  - [Customize with Prompts](/academy/v0-foundations/customize-with-prompts): Use follow-up prompts to refine the design, structure, and copy of your v0 site. Toggle the mobile preview, rename navigation links, and let v0 act as a copywriter.
  - [Screenshots and Versions](/academy/v0-foundations/enhance-design-with-screenshots-and-versions): Use screenshots, photos of hand-drawn sketches, and v0's version history to push your design in the right direction without losing the work you already did.
  - [Publish to a Domain](/academy/v0-foundations/publish-and-customize-your-domain): Publish your v0 site to Vercel, then buy and connect a custom domain so visitors can find it at a real URL.
  - [Add a Supabase Database](/academy/v0-foundations/integrate-supabase-database): Hook up a Supabase database to the contact form so customer messages get stored. Learn how v0 walks you through integration installs and what happens when you skip optional steps.
  - [Email with Resend](/academy/v0-foundations/handling-email-with-resend): Connect Resend for email notifications, learn what an environment variable is, and redeploy so both the database and email integrations work together.
  - [GitHub and Next Steps](/academy/v0-foundations/github-integration-and-next-steps): Save your v0 project to GitHub so you have a real version-controlled backup, tour the integrations available for accepting payments, and look at where to grow the site from here.
  - [v0 Vibecoding Guide](/academy/v0-foundations/vibecoding-guide): A quick-reference guide for prompting v0. Patterns that work, anti-patterns to avoid, and copy-pasteable starter prompts for your next project.

### React UI with shadcn/ui + Radix + Tailwind

- [Course overview](/academy/shadcn-ui): Learn the fundamentals of modern UI development with shadcn/ui. Master component libraries, Radix primitives, and build production-ready interfaces.
  - [Evolution of Component Libraries](/academy/shadcn-ui/evolution-of-component-libraries): Explore how component libraries have evolved from early jQuery plugins to modern React ecosystems, and understand the problems that led to shadcn/ui's revolutionary approach.
  - [Why shadcn/ui is Different](/academy/shadcn-ui/why-shadcn-ui-is-different): Discover the fundamental principles that set shadcn/ui apart from traditional component libraries, and understand why this approach is transforming modern UI development.
  - [Core Concepts](/academy/shadcn-ui/core-concepts): Master the fundamental concepts that power shadcn/ui: primitives, variants, composition, and the design system approach that makes everything work together.
  - [Understanding components.json](/academy/shadcn-ui/components-json): Learn how the components.json file serves as the central configuration for your shadcn/ui setup, controlling everything from file paths to styling preferences.
  - [What are Radix Primitives?](/academy/shadcn-ui/what-are-radix-primitives): Discover how Radix UI primitives provide the foundational behavior for modern UI components, offering accessibility and interaction patterns without visual styling.
  - [Anatomy of a Primitive](/academy/shadcn-ui/anatomy-of-a-primitive): Break down the structure of Radix UI primitives to understand how they work together to create complex, accessible components.
  - [Installing shadcn/ui](/academy/shadcn-ui/installing-shadcn-ui): Add shadcn/ui to your existing Next.js project and configure it properly with TypeScript, Tailwind CSS, and all necessary dependencies.
  - [Adding Your First Component](/academy/shadcn-ui/adding-your-first-component): Walk through the complete process of adding your first shadcn/ui component, understanding what happens behind the scenes, and exploring how to use it effectively.
  - [Overriding Styles with Tailwind](/academy/shadcn-ui/overriding-styles-with-tailwind): Master the art of customizing shadcn/ui components using Tailwind CSS, from simple class additions to systematic design token modifications.
  - [Updating and Maintaining Components](/academy/shadcn-ui/updating-and-maintaining-components): Learn strategies for keeping your shadcn/ui components up-to-date, managing breaking changes, and maintaining a healthy component library over time.
  - [Exploring globals.css](/academy/shadcn-ui/exploring-globals-css): Deep dive into shadcn/ui's CSS variable architecture and understand how the semantic naming convention creates a flexible, maintainable theming system.
  - [What is a Component Registry?](/academy/shadcn-ui/what-is-a-component-registry): Understand the concept of component registries, how they work, and why they're revolutionizing how developers share and discover UI components.
  - [The Anatomy of shadcn/ui Components](/academy/shadcn-ui/extending-shadcn-ui-with-custom-components): Learn to build specialized components that integrate seamlessly with shadcn/ui's design system while providing unique functionality not covered by existing primitives.
  - [Creating a shadcn Registry File](/academy/shadcn-ui/creating-a-shadcn-registry-file): Learn how to package your custom shadcn/ui components as registry items for easy sharing and distribution across projects and teams.
  - [Publishing Your Components](/academy/shadcn-ui/publishing-your-components): Learn how to host and distribute your custom shadcn/ui registry items on the internet, making them installable via direct URLs and accessible to your team or the community.
  - [useControllableState](/academy/shadcn-ui/use-controllable-state): Learn how to install and use @radix-ui/react-use-controllable-state to build flexible shadcn components that work seamlessly in both controlled and uncontrolled modes.
  - [Compound Components and Advanced Composition](/academy/shadcn-ui/compound-components-and-advanced-composition): Master the compound component pattern to build flexible, powerful component APIs that scale with complex requirements while maintaining clean interfaces.