How to connect the Next.js MCP server to VS Code Copilot Chat

The MCP server functionality is built in starting from Next.js 16 and doesn't require any additional configuration in the settings files. The path to the MCP server API is /_next/mcp.

Assuming your dev server is running on the port number 5002, do the following:

1. In the .vscode folder in the root of your project, create a mcp.json file.

2. Put the following content inside it:
   

   {
     "servers": {
     "nextjs-mcp": {
       "url": "http://localhost:5002/_next/mcp",
       "type": "http"
     }
   },
   "inputs": []
   }
   

3. Save the file.

4. Run your project's dev server.

5. Open Copilot Chat.

6. Ask something specific to Next.js, for example:

   nextjs devtools, are there any build errors?

7. If prompted, allow running the MCP server and executing actions.

In our case, the answer was:

No Next.js devtools build errors are currently reported. Let me know if you want me to keep monitoring or run a build/test explicitly.

Now let's ask what the MCP server could do for us:

nextjs devtools, tell me what you are able to do?

I’m connected to the Next.js devtools MCP server, so I can pull diagnostics like build/runtime errors, fetch the dev-server logs, list app/pages routes, and inspect server actions. If you need anything along those lines—checking status, seeing routes, digging into errors—just let me know which detail you want.

Enjoy, and happy vibe coding!