Local Setup

From your idea to a running app, live in Claude's preview 🚀

In the previous lesson you set up Claude Code and Git and opened your project folder. Now it's time to turn that empty folder into a running Next.js app – and give Claude the skills to build it with you.

Your development environment is your workshop. A good setup makes everything easier, while a poor setup creates friction that slows you down and kills motivation.

1. Understanding the Vibe Stack

This stack lets you build, style, and deploy a modern web app with minimal friction. You'll use AI to write code, automate setup, and deploy live in minutes.

  • Claude Code – Anthropic's AI coding agent (you set this up in the last lesson). It's powered by skills, which is why we build the whole Codex around it.
  • Next.js – The modern React framework for building fast, scalable web apps.
  • Tailwind CSS + shadcn/ui – Utility-first CSS and UI component libraries for rapid styling.
  • GitHub – Version control and collaboration platform for your code.
  • Vercel – Cloud platform for deploying and hosting your web apps.
I understand what the Vibe Stack is

2. Give Claude its Skills

This is what makes the modern process different. Instead of pasting walls of instructions into every prompt, you install skills once and the agent loads the right one automatically whenever it's relevant.

A skill is a reusable expert playbook – how to set up Next.js correctly, how to wire Clerk auth, how to take a Stripe payment. The official Vercel plugin bundles the skills for our whole stack (Next.js, shadcn/ui, deployment, and more).

Install it right inside the Claude desktop app – no terminal needed:

  1. Click the + next to the prompt box and choose Plugins.
  2. Open Add plugin, find the Vercel plugin, and install it.
Restart Claude to activate a new plugin

The desktop app has no reload command – after installing a plugin, quit and reopen Claude so its skills become active. (Skills and connectors you add in later lessons activate when you start a new chat.) We'll remind you each time you install something.

  • You don't need to memorize which skill does what. When you ask Claude to "set up a Next.js project," it recognizes the task and pulls in the Next.js skill on its own.
  • You'll add more skills as you go (auth, payments) in later lessons – same one-time install, same automatic loading.
  • Browse everything available anytime via the + → Plugins menu, or at claude.com/plugins.
I installed the Vercel plugin so Claude has skills for my stack

3. Set up a new Next.js project

Next.js is a framework for building web apps with React. Think of it as the standard toolkit that gets you a fast, modern site with routing, styling, and great developer tools out of the box.

Now let Claude do the setup. After restarting Claude (above), open your project folder and just paste the prompt below into the chat – Claude runs everything itself. Because the Next.js skill is installed, you don't need to spell out every flag; it already knows the current best-practice defaults. The goal here is simply to get the Next.js starter template running – no features yet, we build those in later lessons.

Setup Prompt for Claude
Set up a new Next.js app for me using the Next.js skill's recommended defaults. Do as much as you can on your own – the only thing I want you to ask me is the project name.
1.Ask me what to call the project (a clean, lowercase, hyphenated name), and use it for the app.
2.Scaffold into THIS current folder – do not create a new subfolder for the project. Use a 'src/' directory.
3.Create a docs/ folder in the project root for project documentation.
4.Set up a CLAUDE.md for this project following best practices, and note in it that future project docs go in the docs/ folder.
5.Install anything I'm missing (like Node.js) as you go.
6.Start the dev server and show me the running starter template in the preview, fixing any errors until it runs cleanly.
Don't build any features yet – I just want the Next.js starter template up and running. Go ahead without asking me anything else.
  • When it finishes, you'll have your project set up with its name, a docs/ folder and CLAUDE.md in place, and the Next.js starter template running in Claude's Preview pane.
  • If you hit an error, just tell Claude what you see (or let it read the logs). It can search the web and fix issues without you leaving the chat.
I created a Next.js app and it runs locally

4. See Your App in the Preview

In the desktop app, Claude runs the dev server for you and your app appears in the built-in Preview pane, right next to the chat – no browser tab or terminal needed.

  • If the preview isn't showing, just ask Claude: "start the dev server and show me the app in the preview."
  • Claude can also screenshot the app, click around, and read the logs to debug – all from the chat, while you watch it update live.
I see my app running in Claude's preview

Helpful Resources