Next.js DevTools MCP

by Vercel

Vercel shipped the official Next.js DevTools MCP server — the first first-party MCP server from the framework itself. It gives any MCP-compatible AI coding agent structured access to Next.js build errors, route topology, and runtime telemetry.If you ship Next.js apps and you pair with Claude Code or Cursor, this is the MCP server you install first.What It Gives Your AgentBefore this server, your AI agent worked with Next.js the same way it works with any framework: read the source, guess at the runtime, hope the error messages are clear. That is why agents waste three turns debugging a hydration error that DevTools would answer in one glance.Next.js DevTools MCP fixes that. It exposes the same information the Next.js DevTools panel shows a human developer — but as structured MCP tools the agent can call directly.Build diagnostics. Real compile errors from Turbopack or webpack, type errors from the TypeScript plugin, and lint output — all as structured data, not stringified stack traces.Route inspection. One tool call returns the full app router + pages router topology, including HTTP methods, route handlers, middleware, and dynamic segments.Runtime telemetry. Server component render failures, edge runtime errors, and hydration mismatches stream to the agent as they happen during development.Bundle analysis. The agent can request bundle-size data to reason about regressions, tree-shaking failures, and heavy imports.Why It MattersNext.js is the most-used React framework on the planet, and AI coding agents write more Next.js code per day than any human team on earth. Until now, those agents were coding blind — they could read your source but could not see your build output. This MCP server closes that loop.The pattern is going to spread. Expect official MCP servers from every major framework (Nuxt, SvelteKit, Remix, Astro) within six months. Vercel shipped first because Vercel ships first on framework tooling. That is not a surprise. The surprise is how much the developer experience improves the moment your agent can see what the framework sees.Install and ConfigureClone the repo, point your MCP-compatible client (Claude Code, Cursor, Windsurf) at the local stdio binary, and the agent gets the new tools on the next session. The README covers the 5-minute setup. MCP v2.1 support means remote hosting is on the table too if you want to expose the tools to a team's shared agent.Who Should Install ItInstall Next.js DevTools MCP if you write Next.js code with an AI coding agent. That is the whole criterion. The improvement in debugging speed — the agent actually sees your hydration errors instead of guessing at them — is immediate.Skip it if you are not on Next.js. This server is framework-specific by design.Related ResourcesArticle: DeepSeek V4 launched — the frontier model that pairs with this MCP server for a cheap agentic Next.js stack.Tool: DeepSeek V4 — drop into your Claude Code or Cursor config alongside this MCP server.Repo: HKUDS Nanobot — wire this MCP server into Nanobot for a Next.js-aware personal agent.Skill: Anthropic Cybersecurity Skills — 754 security skills your Next.js agent can layer on top of DevTools MCP for production-grade review.