rembrembdocs

Enabling Next.js MCP Server for Coding Agents

Last updated April 23, 2026

The Model Context Protocol (MCP) is an open standard that allows AI agents and coding assistants to interact with your applications through a standardized interface.

Next.js 16+ includes MCP support that enables coding agents to access your application's internals in real-time. To use this functionality, install the next-devtools-mcp package.

Getting started

Requirements: Next.js 16 or above

Add next-devtools-mcp to the .mcp.json file at the root of your project:

.mcp.json

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

That's it! When you start your development server, next-devtools-mcp will automatically discover and connect to your running Next.js instance.

For more configuration options, see the next-devtools-mcp repository.

Capabilities

next-devtools-mcp provides coding agents with a growing set of capabilities:

Application Runtime Access

Development Tools

Note: The Next.js team is actively expanding these capabilities. New tools and features are added regularly to improve the agent development experience.

Development workflow

  1. Start your Next.js development server:

pnpm

pnpm

npm

npm

yarn

yarn

bun

bun

Terminal

pnpm dev
  1. Your Coding Agent will automatically connect to the running Next.js instance via next-devtools-mcp

  2. Open your application in the browser to view pages

  3. Query your agent for insights and diagnostics (see examples below)

Available tools

Through next-devtools-mcp, agents can use the following tools:

Using with agents

MCP-compatible Coding Agents can automatically discover and connect to your Next.js development server, providing them with rich context about your project.

Benefits for agent-assisted development

Agents can:

Examples

Error detection and diagnosis

Ask your agent about errors in real-time:

User: "What errors are currently in my application?"

The agent will:

Agent response (click to expand)

> fix errors on the page
 
⏺ I'll help you fix the errors on the page. Let me first check what errors exist by looking at the
  current state of the project.
 
⏺ next-devtools - nextjs_runtime (MCP)(action: "discover_servers")
⏺ next-devtools - nextjs_runtime (MCP)(action: "call_tool", toolName: "get_errors")
 
⏺ I found a hydration error on the /about page. The error shows that the server is rendering
  "server" but the client is rendering "client", causing a mismatch. Let me create a todo list and fix
   this issue.
 
⏺ Perfect! Now let me check for errors on the page.           01:14 PM  claude-sonnet-4-5-20250929
 
⏺ next-devtools - nextjs_runtime (MCP)(action: "call_tool", toolName: "get_errors")
  ⎿ {
      "success": true,
      "port": 3000,
      "toolName": "get_errors",
      "result": {
        "content": [
          {
            "type": "text",
            "text": "# Found errors in 1 browser session(s)\n\n## Session: /about\n\n**1 error(s)
     found**\n\n### Runtime Errors\n\n#### Error 1 (Type: recoverable)\n\n**Error**: Hydration failed

Upgrading and best practices

Get help with Next.js concepts and migrations:

User: "Help me upgrade my Next.js app to version 16"

The agent will analyze your current version, guide you through automated migrations with codemods, and provide step-by-step instructions for handling breaking changes.

Ask conceptual questions:

User: "When should I use 'use client' in App Router?"

The agent will query the Next.js knowledge base and provide documentation-backed explanations with examples from your codebase.

How it works

Next.js 16+ includes a built-in MCP endpoint at /_next/mcp that runs within your development server. The next-devtools-mcp package automatically discovers and communicates with these endpoints, allowing it to:

This architecture decouples the agent interface from the internal implementation, enabling next-devtools-mcp to work seamlessly across different Next.js projects.

Troubleshooting

MCP server not connecting

Was this helpful?