vercel/next-devtools-mcp

Next.js Development for Coding Agent

What it solves

Coding agents (like Claude and Cursor) often lack real-time visibility into the state of a running application. next-devtools-mcp provides a bridge between these agents and a Next.js development server, allowing AI agents to see live runtime errors, logs, and route structures directly within their chat interface.

How it works

It acts as a thin connector using the Model Context Protocol (MCP). It automatically discovers running Next.js 16+ dev servers and proxies requests to the server's built-in MCP endpoint (/_next/mcp). It also provides "gateways" that direct agents to version-accurate documentation bundled within the project's node_modules or to the agent-browser CLI for browser automation.

Who it’s for

Developers using Next.js 16+ and AI-powered coding agents (such as Claude Code, Cursor, Gemini, or VS Code Copilot) who want their agents to have runtime context of their application.

Highlights

  • Live Runtime Access: Accesses current build, runtime, and type errors, as well as development server logs.
  • Automatic Discovery: Automatically scans common ports to find and connect to running Next.js dev servers.
  • Version-Accurate Docs: Points agents to the exact documentation matching the installed Next.js version found in node_modules.
  • Browser Automation Gateway: Facilitates the integration of the agent-browser CLI for automated browser testing.
  • Broad Agent Compatibility: Supports a wide range of MCP clients including Claude, Cursor, Codex, Gemini, and Warp.

Related

  • Project
  • Project
  • Project
  • Project