Next.js DevTools MCP
Connects an agent to a running Next.js 16+ dev server: errors, routes, logs and docs for your installed version
- 834 ★ on the repository
- Last commit
Extended access
Why this level
- Reads logs and metadata from the local dev server
- Sends anonymous telemetry
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/next-js-devtools-mcpDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Reads logs and metadata from the local dev server
- Sends anonymous telemetry
This is third-party code. Review the repository files before installing.
What it does
The server discovers running Next.js 16+ dev servers and proxies their built-in /_next/mcp endpoint. Through it the agent reads build and runtime errors, the route structure, project metadata, logs and the source of a Server Action by ID. The nextjs_docs tool points the agent to the docs bundled in node_modules with your installed Next.js version. The browser_eval tool tells the agent how to install and run the agent-browser CLI for in-browser checks.
Who it is for. For frontend developers who build Next.js apps together with an agent.
Good fit when
- The agent edits a Next.js app and should see real dev server errors
- You need a quick view of the project's routes
- The agent mixes up APIs from different Next.js versions
Not a fit when
- The project is on Next.js below 16: runtime tools do not work there
- The project does not use Next.js
Example request
What errors does my Next.js app have right now?MCP
- Transport
- stdio
- Authentication
- not required
Environment variables
NEXT_TELEMETRY_DISABLED- Set to 1 to turn off anonymous telemetry
Limitations
Requires Node.js 20.19+ and a running Next.js 16+ dev server, otherwise only the docs and browser guidance tools work. The server collects anonymous telemetry, which you can turn off with NEXT_TELEMETRY_DISABLED=1. No external keys or accounts are needed.
How to disable. Remove the next-devtools server from your MCP client config, for example claude mcp remove next-devtools.
FAQ
Where did the Next.js 16 upgrade tools go?
They were removed in 0.4.0; migration workflows now ship as agent skills.
Do I need to configure a port?
No, nextjs_index scans common ports and finds running servers itself.
Discussion
No questions or reviews yet.
Related
MCP serversConsole, network, screenshots and Lighthouse audits from your open Chrome session to the agent via a DevTools extension
An MCP server plus a Chrome extension: pick a DOM element by Option-click and the agent gets its text, styles and selector
Nuxt MCP Dev
nuxt-mcp-dev / vite-plugin-mcp
A Nuxt module and a Vite plugin start an MCP server on the dev server port so the agent sees config, pages, components, auto-imports and the module graph
21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent
A CLI that lets an agent inspect a running React app: component tree, props, state, hooks and render profiling
Annotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Next.js DevTools MCP (this entry) | yes | not required | 834 | |
| portless | yes | 12,764 | a Vercel Labs CLI | |
| vinext skill for migrating from Next.js | yes | 9,264 | the Cloudflare skill walks an agent through moving a Next.js project |
README in short
The README calls the server a thin connector to the MCP endpoint built into Next.js 16. It installs via npx add-mcp or a JSON config, with separate commands for Claude Code, Codex, Gemini, Amp and VS Code. It documents four tools, migration from 0.3 and opt-out telemetry. MIT licensed.