MCP server · Developer tools · official

Next.js DevTools MCP server

by vercel · official

Lets your AI look inside your running Next.js app: errors, routes, and dev server logs.

Developer tools Coding For it and development Developer Tools

This is a small helper that connects your AI coding assistant to a Next.js app you are running on your own computer. Once it is set up, you can just ask your assistant what is broken, what pages exist, or what the server is printing, instead of digging through browser tabs and terminal windows. It is handy for anyone building or fixing a Next.js website with an AI assistant.

What is an MCP server? The 30-second version

On its own, your AI can only chat with you. An MCP server is a small helper program that gives your AI a new skill or a connection to another program. This one connects your AI to your running Next.js development server, so the AI can look up real errors, routes, and logs from the app you are working on. You ask a question in plain words, and the AI uses this helper to go get the answer.

What this MCP server does

You start your Next.js app like you normally do, and this helper finds it running on your machine. When you ask your AI something about the app, the AI asks this helper, and the helper passes the question along to the app's own built-in tools. The app sends back the real state of things, like current errors or the list of routes, and the helper hands that to your AI. Your AI then explains it to you in the chat. Two extra tools in this helper point your AI at the right version of the Next.js docs and at a separate browser tool, but they do not do that work themselves.

Flow diagram: you ask your AI “What errors are in my Next.js app right now?”, on your own computer the Next.js DevTools MCP server works with your Next.js app, and you get back answers in plain language.

Click to zoom

What you can do with it

See the current build, runtime, and type errors in your app
List the routes and pages your app has
Read the development server logs
Look up project structure and config details
Trace a Server Action ID back to the file it lives in
Find the docs that match your installed Next.js version

Try asking your AI

“What errors are in my Next.js application right now?”
“Show me the structure of my routes”
“What is in the development server logs?”
“Where is the docs folder for the Next.js version I have installed?”

What it gives back to you

You get answers in the chat, written by your AI in normal language. Behind the scenes it receives lists of errors, routes, project details, and log file locations, and then summarises them for you. If you ask about a specific Server Action, it can tell you which file it comes from. It does not change your code for you.

Before you start

What you need

Node.js version 20.19 or newer (a program that runs other programs; the Node.js site gives you a free installer)
npm or pnpm (these come with Node.js or install alongside it)
A Next.js 16 or newer project with its development server running (for the error, route, and log tools)

Good to know

This helper reads information from your running app and sends anonymous usage information by default, so set NEXT_TELEMETRY_DISABLED=1 if you would rather it did not.

Install it with your AI

Add Next.js DevTools MCP server to your AI, no technical skills needed

You don't install anything by hand. You copy one prompt, paste it into an AI that can work on your computer, and it checks, installs and connects the server for you, asking you when it needs something.

Sign in to get the install prompt

Members get a ready-made prompt that lets the Claude desktop app check Next.js DevTools MCP server, install it and connect it for them, step by step. You don't need any technical skills: you copy, paste and answer a few questions. Your connected AI can also find and install any of the 4,066 MCP servers here for you.