Next.js DevTools MCP — Enabling MCP Server for Coding Agents

I didn’t wake up one day thinking, “Let’s add an AI protocol to my app.”

I was just tired of this loop:

• I ask my coding agent: “Why is my page breaking?”
• It answers confidently… but it’s guessing
• Then I paste logs, explain my folder structure, share routes
• And somehow I’m doing more work talking about the bug than fixing it

Now imagine if your agent actually analyzes routes, caching, logs, and stack traces — and tells you what’s wrong instead of guessing.

MCP (Model Context Protocol) is basically a standard way for tools (like coding agents) to talk to your running app. And in Next.js 16+, there’s built-in support for it — so your agent can look at what’s happening right now in your dev server instead of guessing.

What You Need (Super Simple)

Just one thing:

• Next.js 16 or newer

Go to the root of your Next.js project and add a file called .mcp.json

Note: In case you are using cursor/ copilot, goto settings > direclty click on Add New MCP Server CTA and it will open .mcp.json file for you in that you can update the below code.

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

Start Your Dev Server Like Normal

When your dev server starts, next-devtools-mcp automatically finds it and connects to it in the background. You don’t have to manually wire up endpoints or ports most of the time.

npm run dev

Note: In case if it doesn’t loads the tools or connects to mcp server. Reload the code editor/ restart the server if already running.

Once its configured successfully, You will see something like below.

What Changes After This?

Your coding agent can now ask your running Next.js app questions like:

• “What errors are happening right now?”
• “What routes exist in this project?”
• “What components are used for this page?”
• “Where is this Server Action defined?”

The Handy Tools We Get

Once MCP is connected, your agent can use tools like:

• get_errors: shows build/runtime/type errors from the dev server
• get_logs: points to the dev logs (server + browser console output)
• get_routes: lists your routes (App Router + Pages Router), including dynamic routes like [id]
• get_page_metadata: gives page-level info (route + rendering details + components)
• get_project_metadata: basic project + config + dev server URL
• get_server_action_by_id: traces a Server Action back to the exact file/function

Note: You can click on tools inorder to enable or disable them.

In Action

After configuring, I asked my coding agent if its able to access nextjs mcp tools or not:

Before we wrap one more thing I wanted to highlight that, If you have noticed we saw something like 17 resources enabled in above snap.

Which means it does not only exposes tools for us to utilise but also exposes certain resources which adds more context to our AI agent.

Before You Go…

If this guide helped you level up, don’t let the learning stop here.

• Stay ahead of the curve — Follow me on medium to receive the deep dives directly into your inbox for fresh, and practical insights.
• Let’s connect on LinkedIn.

If you like the technical and insight full discussions/deep dives make sure to subscribe my YouTube channel for more amazing stuff.