Reading · Trevor I. Lasn, Building 0xinsider

The Next.js DevTools MCP connects Claude and Cursor to your running dev server. I use it every day.

Trevor I. Lasn ·

Nov 2, 2025 · 2 min read

Building 0xinsider.com, the intelligence layer for prediction markets. Discover what's moving, see who's behind it, and find the edge before the crowd.

The Next.js DevTools MCP solves a specific problem: coding assistants can read your files, but they can’t see if your app is actually running or what errors you’re getting.

Next.js 16+ includes a built-in MCP endpoint at /_next/mcp. The next-devtools-mcp package discovers this endpoint and exposes live build errors, runtime errors, TypeScript type errors, application routes, page metadata, Server Action definitions, dev server logs, and project configuration.

Installation

Claude Code:

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

OpenAI Codex:

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

Google Gemini:

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

Other editors (.mcp.json in project root):

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

Restart your dev server. The package auto-discovers the /_next/mcp endpoint.

Live Error Access

Before:

Error: Cannot read property 'map' of undefined
  at Page (app/posts/page.tsx:12)
# You copy/paste the error into Claude

After:

# Claude queries get_errors automatically and sees:
# - Full stack trace + error type
# - Your project structure (get_project_metadata)
# - The actual code in app/posts/page.tsx

Claude checks your project config, searches the docs, writes code, verifies no errors, tests it in the browser, and confirms it works.

The difference: Claude sees your running app instead of guessing from static files.

Available Tools

Tool	What It Does
`get_page_metadata`	Returns routes, components, and page structure
`get_project_metadata`	Exposes project configuration and dependencies
`get_server_action_by_id`	Queries specific Server Actions
`get_logs`	Access to dev server logs
`nextjs_docs`	Searches official Next.js docs for version-specific patterns
`upgrade_nextjs_16`	Runs codemods for Next.js 16 upgrades
`enable_cache_components`	Configures Cache Components with pre-flight checks
`browser_eval`	Playwright integration for browser testing

Next.js 16+ gets full support (errors, state, logs). Next.js 15 and below get partial support (upgrades, docs, browser testing).

This article was originally published on https://www.trevorlasn.com/blog/next-js-devtools-mcp. It was written by a human and polished using grammar tools for clarity.

Next.js DevTools MCP: Your Development Server Just Got Smarter