Next.js DevTools MCP

Domain

Vercel MCP server giving coding agents Next.js runtime diagnostics, docs search, codemod upgrades, and browser eval.

by Vercelvercel/next-devtools-mcp

Stars832

Forks66

Watchers1

Open issues15

Licensen/a

Last push1 month ago

Install

install

$ claude mcp add next-devtools npx next-devtools-mcp@latest

Update

update

$ claude mcp add next-devtools npx next-devtools-mcp@latest

This is an npx-launched MCP server, not a marketplace plugin: the @latest tag means re-running the add (or just restarting the client) fetches the newest version. Use npx add-mcp next-devtools-mcp@latest to update across all detected agents.

When to use it

Debugging a running Next.js 16+ app where you need live runtime errors, route info, logs, and Server Action diagnostics surfaced to the agent
Upgrading a project to Next.js 16 using the official codemods via the upgrade_nextjs_16 tool
Looking up authoritative Next.js documentation (including Cache Components) from inside the agent instead of guessing APIs
Running Playwright-based browser checks against a Next.js dev server through browser_eval

Commands & flags

npx add-mcp next-devtools-mcp@latest: Register/configure the server across all detected agents.
init: Set up Next.js context; README recommends calling it at the start of every session.
nextjs_docs: Search authoritative Next.js docs (including Cache Components) from inside the agent.
nextjs_index / nextjs_call: Surface live runtime diagnostics (errors, routes, logs, Server Actions) from a Next.js 16+ dev server.
browser_eval: Run Playwright-based browser checks against the dev server.
upgrade_nextjs_16: Apply the official codemods to upgrade a project to Next.js 16.
enable_cache_components: Turn on and configure Cache Components for the project.

How to use it

This is an MCP server, not a Claude Code skill or plugin. You register it once with your client, then the agent gains a set of next-devtools tools.

claude mcp add next-devtools npx next-devtools-mcp@latest

Or configure manually / across all detected agents:

npx add-mcp next-devtools-mcp@latest

Once connected, the agent can call init (context setup), nextjs_docs (official docs search), nextjs_index / nextjs_call (diagnostics on a live dev server), browser_eval (Playwright), upgrade_nextjs_16, and enable_cache_components. Runtime diagnostics require Next.js 16+. The README recommends calling init at the start of every Next.js session.

Why it earns its place

Built and maintained by Vercel (makers of Next.js), so its docs lookups, codemods, and Cache Components guidance reflect current, authoritative behavior rather than stale training data. The runtime diagnostics let the agent see real errors, routes, logs, and Server Action failures from a running dev server, tightening the debug loop for Next.js 16+ projects. Works across many clients (Claude Code, Cursor, Codex, VS Code/Copilot, Gemini, and more).

Try it

claude

> Add the next-devtools MCP, then diagnose the runtime errors in my running Next.js 16 dev server and upgrade the project.