How do I use the built-in MCP server in Next.js 16 and configure next-devtools-mcp? [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 28 days ago.

Improve this question

I'm exploring the new MCP (Model Context Protocol) server introduced in Next.js 16, and I’d like to understand how to properly enable and use it in a development environment.

What I’ve done so far:

Installed Next.js 16 via create-next-app
Added experimental.mcp: true to next.config.js
Started the dev server, but I'm not sure where or how to access the MCP endpoint

My questions:

Where is the built-in MCP server exposed?
Is it available at a default route like /mcp, or do I need to define a custom route handler?
How do I use or query the MCP server manually or via an agent?
Is there a way to inspect component trees, Server Actions, or logs directly?
How do I configure next-devtools-mcp?
I’ve seen references to this package but couldn’t find clear setup instructions. ◦ What does it add on top of the built-in MCP server? ⁠◦ How do I install and integrate it into my Next.js app?

Any guidance, examples, or links to documentation would be greatly appreciated!

Unless you want to know how it works instead of how to use it for some reason, just follow the docs github.com/vercel/… — Estus Flask
– Estus Flask, Commented Oct 23 at 13:51

Titouan Verhille · Accepted Answer · 2025-10-24 14:28:51Z

1

I agree the documentation from the Next Team does not explain at all how to access the built-in MCP for now.

I managed to access it by putting

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  experimental:{
    mcpServer:true
  }
};

export default nextConfig;

and then adding this config to Cursor (or other MCP clients)

{
  "mcpServers": {
    "nextjs-mcp-builtin": {
      "url": "http://localhost:3000/_next/mcp"
    }
  }
}

You can then see the result in the Cursor MCP

answered Oct 24 at 14:28

Titouan Verhille

111 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I use the built-in MCP server in Next.js 16 and configure next-devtools-mcp? [closed]

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related