Imagine having a colleague sitting next to you who has read every documentation page, every Stack Overflow answer, and most open-source code ever written. You can ask them questions, have them write code for you, or review your work — instantly.
That's what AI-assisted development gives you. Instead of writing every line from scratch, you collaborate with an AI that understands code, context, and intent.
One thing to know upfront: AI is not deterministic. The same prompt can produce different results each time — your colleague might get a different answer than you. That's normal. The best way to get consistently good results is to write specific prompts that leave less room for the AI to guess wrong.
"Add search"
# AI doesn't know:
# - Search for what? Products? Users? Tasks?
# - Where? Which page?
# - Client-side filter or server-side?
# - What UI pattern?
# Result: Generic code you'll need to rewrite| Pattern | Example | Why It Helps |
|---|---|---|
| Reference a file | "Follow the pattern in src/app/page.tsx" | AI matches your existing conventions |
| Paste the error | "Fix this: TypeError: Cannot read property 'map' of undefined" | AI diagnoses the exact problem |
| Specify constraints | "Use Server Components, no 'use client'" | Prevents AI from taking wrong approach |
| Break it down | "First create the component, then add it to the page" | Smaller steps = more accurate output |
| Ask to explain | "Explain what this useEffect does before changing it" | Ensures AI understands before modifying |
Writing a great prompt every single time is exhausting. You find yourself adding the same instructions: "use Server Components", "use Tailwind", "don't use useEffect for data fetching". What if the AI already knew all of that?
Rules files are permanent prompts that live in your repo. The AI reads them automatically on every interaction — like onboarding docs for your AI pair programmer. You write them once in plain markdown, and every tool that supports them picks them up.
# AGENTS.md — works with most AI tools
## Tech Stack
- Next.js 16 with App Router
- TypeScript strict mode
- Tailwind CSS v4
## Conventions
- Use Server Components by default
- Only add 'use client' when interactivity is needed
- Data fetching happens in Server Components
- Use next/image for all images
- Use next/font for font loading
## Don'ts
- Never use useEffect for data fetching
- Never use client-side fetch in page components
- Never install packages without asking firstRules cover your conventions on every prompt. But two problems remain: you keep re-typing the same multi-step task (committing code, reviewing PRs, creating a page), and the AI simply doesn't know things that are specific to your project — your billing flow, an internal API, your design tokens.
Skills fill those gaps. A skill is a small markdown file with a name, a short description, and a body. The agent reads the description, decides if it applies, and pulls the body in only when it's relevant.
| Aspect | Rules | Skills |
|---|---|---|
| When loaded | Every prompt | On-demand, when relevant |
| Best for | Conventions you always want | Specific tasks or domain knowledge |
| Shape | One file for everything | Many small, focused files |
You don't have to write every skill from scratch. Many teams already publish high-quality skills for common stacks — Next.js best practices, React performance audits, Stripe integrations, design systems, and more.
skills.sh is a public registry, and the skills CLI installs skills into your project and wires them up for whichever AI tool you use.
# Install a skill into the current project
npx skills add vercel-labs/agent-skills
# Install only specific skills from a repo
npx skills add vercel-labs/agent-skills \
--skill vercel-react-best-practices
# Browse and manage
npx skills find nextjs # search the registry
npx skills list # what's installed
npx skills update # pull latest versions
npx skills remove <name> # remove a skillA custom skill is a markdown file in a folder your AI tool watches. Frontmatter at the top declares the name and description; the body holds either the steps to follow or the reference material the AI should rely on.
You can write skills by hand, but the fastest path is to install skill-creator from the registry. Describe what you want and the agent interviews you, then writes the SKILL.md in the right place — frontmatter, structure, and all.
# 1. Install the skill that creates other skills
npx skills add anthropics/skills@skill-creator
# 2. Describe what you want — the agent handles the rest
> "Create a skill for our pre-deploy checklist:
run pnpm build, verify env vars, tag the release"
# 3. skill-creator asks a few clarifying questions, then
# writes the file with proper frontmatter and steps:
.agents/skills/pre-deploy/SKILL.md
├── name + description (so the agent loads it on demand)
└── numbered workflow with the exact commands to runYou now know how to write great prompts, set up rules so you don't repeat yourself, and package workflows as skills. But who executes all of this? If you're using a simple chat, you do — copy the code, create the files, run the build, fix the errors. That's slow.
An AI agent changes this completely. Instead of just generating text, agents can call tools — functions that let the AI interact with your system. A tool might read a file, write code, run a terminal command, or search your codebase. The agent decides which tool to call, uses it, reads the result, and keeps going in a loop until the job is done.
| Chat Completion | AI Agent |
|---|---|
| Returns text (one response) | Takes actions (reads, writes, runs commands) |
| Can't see your project files | Reads your actual codebase |
| You create the files manually | Agent creates and edits files for you |
| Stops after one answer | Keeps going until the task is done |
| Can't verify its own work | Runs the build, sees errors, fixes them |
The key concept behind AI agents is the tool loop. The agent doesn't just generate one response — it continuously cycles through: thinking about what to do next, calling a tool to do it, observing the result, and deciding the next step. It keeps looping until the task is complete.
# You say: "Add a contact form with validation to /contact"
# LOOP 1 — Gather context
# Think: "I need to see how existing pages are built"
# Action: Read src/app/page.tsx
# Observe: It's a Server Component using Tailwind
# LOOP 2 — Create the page
# Think: "I'll follow the same pattern"
# Action: Create src/app/contact/page.tsx
# Observe: File created successfully
# LOOP 3 — Add validation logic
# Think: "Need a Server Action with zod validation"
# Action: Create src/app/contact/actions.ts
# Observe: File created
# LOOP 4 — Verify the work
# Think: "Let me check if it compiles"
# Action: Run pnpm build
# Observe: Type error on line 12!
# LOOP 5 — Self-correct
# Think: "I have a wrong import, let me fix it"
# Action: Edit src/app/contact/page.tsx line 12
# Action: Run pnpm build again
# Observe: Build succeeded ✓
# Agent exits the loop and shows you what it didAgents come with a set of built-in tools for common development tasks — reading files, writing code, running commands. But the tool set is not fixed. You can extend it by connecting MCP servers, adding custom tools, or configuring what the agent has access to.
Common built-in tools:
Tools you add yourself:
Agents are powerful — but that power can backfire. When you ask an agent to do something complex, it might immediately start writing code, creating files, and running commands. If it picked the wrong approach, you discover this after it's written 10 files.
Plan mode asks the AI to outline its approach before writing any code. You review the plan, suggest changes, and approve it. Only then does the agent start implementing.
> "Add authentication to this app"
# AI immediately starts writing code...
# Creates 8 files, picks JWT with custom middleware
# You wanted OAuth with NextAuth instead
# Now you need to undo everything and start over
# 15 minutes wastedThe concepts we covered — prompting, rules, agents, the tool loop, plan mode — apply to every AI development tool. The difference between tools is the interface and where the agent runs, not the underlying principles.
We have dedicated deep-dive slides for each tool. Click one to explore its specific features, setup, and workflows:
Now that you have a tool and understand the concepts, here are the pitfalls that trip up even experienced developers when they start using AI:
You've now mastered prompting, rules, skills, agents, and plan mode. There's one more level: fixing the AI's biggest weakness. AI models are frozen in time.
They were trained on a snapshot of the internet from a specific date. After that, they have no idea what changed. They don't know:
This is the #1 reason people get frustrated with AI tools — the model is smart, but it's working blind. The solution? Give it a way to look things up.
MCP is an open standard that lets AI tools connect to external systems through a unified protocol. Think of it like giving the AI a set of "plugins" — each one connects to a different service (your database, documentation site, deployment platform, etc.).
Instead of the model guessing, it can now fetch the real answer from the source of truth.
| Scenario | Without MCP | With MCP |
|---|---|---|
| Next.js API changed last week | Model uses old syntax it memorized | Model reads the current docs |
| Need your DB schema | You copy-paste table definitions | Model queries your database directly |
| Check if deploy succeeded | You open the Vercel dashboard | Model checks via the Vercel API |
| Use an internal company API | Model has never seen it, hallucination likely | Model reads the API spec via MCP |
MCP servers are small programs that your AI tool launches in the background. Each one exposes specific capabilities — reading docs, querying a database, fetching API data, etc. You configure them once, and the AI tool uses them automatically when it needs context.
// .mcp.json (at the root of your project)
{
"mcpServers": {
"next-devtools": {
"command": "npx",
"args": ["-y", "next-devtools-mcp@latest"]
}
}
}next-devtools-mcp connects your AI agent to your running Next.js dev server. It can read errors, inspect routes, query docs, and help with upgrades — all in real time. Works with any MCP-compatible tool.