Next.js Essentials
Five tools purpose-built for Next.js development: GitHub for source, Vercel for deploys, the Next.js DevTools MCP for live dev server introspection, Context7 for current docs, and agent-browser to verify UI changes in a real Chrome.
Use case: Wire an agent to the Next.js-specific toolset — read repos, introspect the running dev server, manage Vercel deployments, fetch fresh docs for any library, and click through the UI it just changed.
“Next.js DevTools MCP connects an agent to a running Next.js 16+ dev server, exposing live route structure, runtime errors, server logs, and version-accurate documentation for migrations and new APIs. — vercel/next-devtools-mcp README”
What's in the stack
MCP servers and CLI tools that make up this stack, and how each one runs.
| Tool | Primary use | Kind | Stars | GitHub |
|---|---|---|---|---|
| GitHub MCP Server connects an agent to GitHub: read repos and code, manage issues and PRs, query workflow runs, review Dependabot and security findings, and interact with discussions and notifications.. | MCP | 29,550 | repo | |
| Vercel MCP Server gives an agent access to Vercel projects: inspect deployments, manage domains, view build and runtime logs, and interact with project configuration.. | MCP | 7 | repo | |
| Next.js DevTools MCP connects an agent to a running Next.js 16+ dev server, exposing live route structure, runtime errors, server logs, and version-accurate documentation for migrations and new APIs.. | MCP | 740 | repo | |
| Context7 fetches up-to-date documentation and code examples from official sources for over 4,000 libraries, so generated code matches the version actually installed.. | MCP | 54,604 | repo | |
 agent-browser | Browser automation CLI for AI agents. | CLI | 32,056 | repo |
Install the MCP servers
Pick the client you use. Each tab installs all 4 servers.
claude mcp add --transport http io-github-github-github-mcp-server https://api.githubcopilot.com/mcp/
claude mcp add --transport http com-vercel-vercel-mcp https://mcp.vercel.com
claude mcp add io-github-vercel-next-devtools-mcp -- npx -y next-devtools-mcp
claude mcp add io-github-upstash-context7 -- npx -y @upstash/context7-mcpInstall the CLI tools
These run as plain shell commands the agent invokes — not MCP servers. Run once to install, then they're available on your PATH.
agent-browser
npm install -g agent-browser && agent-browser installAdd to your CLAUDE.md / AGENTS.md
Paste this into your project's CLAUDE.md or AGENTS.md so the agent knows when and how to use each tool in the stack.
## Tools
- **GitHub MCP** — Use for any operation against this repo's remote: reading code, branches, PRs, issues, workflow runs. Prefer this over shelling out to `gh`. Confirm before pushing or merging.
- **Vercel MCP** — Inspect deployments, build logs, runtime logs, and domains. After a deploy, check runtime logs here before reporting "shipped".
- **Next Dev Tools MCP** — While working in this Next.js app, query the running dev server: live route structure, runtime errors, server logs, and version-accurate Next.js docs. Read it before guessing why a route 404s or a build is failing.
- **Context7 MCP** — Before writing code against a third-party library, fetch its current docs via Context7. Trust Context7 over training data — APIs you remember may have changed.
- **agent-browser** (CLI, not MCP) — After a UI change, verify it in a real browser before reporting the task done. Workflow: `agent-browser open <url>` → `agent-browser snapshot` (returns refs `@e1`, `@e2`, …) → interact via refs (`agent-browser click @e2`, `agent-browser fill @e3 "..."`). Prefer snapshots over screenshots; only use `screenshot --annotate` when the agent genuinely needs to see the page.Why each tool is in this stack
A short rationale per tool, plus its individual install.
GitHub's own MCP (29,550 stars). Read code, manage issues and PRs, query workflow runs — the highest-leverage server for any code task.
claude mcp add --transport http io-github-github-github-mcp-server https://api.githubcopilot.com/mcp/Vercel's own MCP. Inspect deployments, manage domains, view build and runtime logs — closes the loop on shipping.
claude mcp add --transport http com-vercel-vercel-mcp https://mcp.vercel.comby vercel · ★ 740 · MCP
Vercel's Next Dev Tools MCP (740 stars). Connects directly to a running Next.js 16+ dev server: live route map, runtime errors, server logs, and version-accurate migration docs.
claude mcp add io-github-vercel-next-devtools-mcp -- npx -y next-devtools-mcpUpstash's Context7 (54,604 stars) indexes over 4,000 libraries from official sources. Catches the 'this API changed two versions ago' class of agent failures.
claude mcp add io-github-upstash-context7 -- npx -y @upstash/context7-mcpagent-browser
by Vercel Labs · ★ 32,056 · CLI
Vercel Labs' agent-browser (32,056 stars). Not an MCP — a CLI the agent shells out to. Numbered accessibility refs and built-in waits make verifying UI changes far cheaper than screenshot-only loops.
npm install -g agent-browser && agent-browser install
Last reviewed · Curated by stax.sh