How to add Next.js DevTools MCP to Claude Desktop

Next.js development tools for coding agents: runtime diagnostics, upgrades, docs, and Cache Components migration. Paste the config into ~/Library/Application Support/Claude/claude_desktop_config.json and restart Claude Desktop.

Last updated June 14, 2026 · 768★ · stdio · no auth · official

Claude Desktop config for Next.js DevTools MCP

npx add-mcp next-devtools-mcp@latest

{
  "mcpServers": {
    "next-js-devtools-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "next-devtools-mcp@latest"
      ]
    }
  }
}

Setup steps

1Open Claude Desktop → Settings → Developer → Edit Config (this opens ~/Library/Application Support/Claude/claude_desktop_config.json).
2Paste the Next.js DevTools MCP config below under the top-level "mcpServers" key.
3Fill in any placeholder secrets (API keys, paths) in the snippet.
4Save the file, then fully quit and reopen Claude Desktop.
5Open a chat and confirm Next.js DevTools MCP's tools appear under the 🔌 tools menu.

Before you start

Node.js v20.19 or a newer latest maintenance LTS version
npm or pnpm
Next.js 16+ with a running dev server (npm run dev) for runtime diagnostics tools (nextjs_index, nextjs_call); other tools work without a running server

What Next.js DevTools MCP can do in Claude Desktop

init

Initialize Next.js DevTools MCP context, document available tools, and establish a documentation-first requirement (use nextjs_docs for all Next.js queries). Optional project_path input. Recommended at the start of every session.

nextjs_docs

Search and retrieve official Next.js documentation via a two-step process: 'search' for docs by keyword to get paths, then 'get' to fetch full markdown content by path. Supports filtering by router type (app, pages, all).

browser_eval

Automate and test web apps using Playwright. Actions include start, navigate, click, type, fill_form, evaluate, screenshot, console_messages, drag, upload_file, close, and list_tools. Supports chrome, firefox, webkit, msedge, headless mode.

nextjs_index

Discover all running Next.js 16+ dev servers on the machine and list the runtime diagnostic tools each exposes at its /_next/mcp endpoint (e.g. get_errors, get_logs, get_page_metadata, get_project_metadata, get_server_action_by_id). No parameters required.

nextjs_call

Execute a specific MCP tool on a running Next.js dev server's /_next/mcp endpoint. Requires port and toolName; optional args object. Use nextjs_index first to discover servers and tools.

upgrade_nextjs_16

Guide through upgrading Next.js to version 16 with automated codemod execution (requires clean git state). Handles async API changes, config migration, image defaults, parallel routes, deprecated API removals, and React 19 compatibility. Optional project_path input.

enable_cache_components

Complete Cache Components setup, enablement, and migration for Next.js 16 with automated error detection and fixing. Runs pre-flight checks, enables config, starts the dev server with MCP, verifies routes, sets up Suspense/caching boundaries, and runs final build testing. Optional project_path input.

Security

Collects anonymous usage telemetry (tool names invoked, anonymous error messages, session metadata like OS/Node version). Project code, file contents, file paths, credentials, and tool arguments are NOT collected. Local telemetry files are written under ~/.next-devtools-mcp/. Disable telemetry by setting NEXT_TELEMETRY_DISABLED=1.

Next.js DevTools MCP + Claude Desktop FAQ

Where is the Claude Desktop config file?

Claude Desktop reads MCP servers from ~/Library/Application Support/Claude/claude_desktop_config.json. Paste the Next.js DevTools MCP config there under the "mcpServers" key and restart the client.

Is Next.js DevTools MCP safe to use with Claude Desktop?

Do I need Next.js 16 to use this server?

No. The documentation, upgrade, Cache Components, and browser_eval tools work with any Next.js version. The runtime diagnostics tools (nextjs_index and nextjs_call) require Next.js 16+ with a running dev server, since MCP is enabled by default at /_next/mcp in Next.js 16+.

Should I call any tool first?

Yes. The README strongly recommends calling the init tool at the start of every Next.js session to establish proper context and a documentation-first approach. You can also configure your agent (e.g. via CLAUDE.md or .cursorrules) to call init automatically.

What data does it collect?

It collects anonymous telemetry: which tools are invoked, anonymous error messages, and session metadata (session ID, timestamps, OS, Node version). It does NOT collect your code, file contents, file paths, credentials, or tool arguments. Set NEXT_TELEMETRY_DISABLED=1 to opt out.

View repo Full Next.js DevTools MCP page