Connects coding agents to a running Next.js dev server for live errors, routes, logs, and Server Actions.
Also known as vercel/next-devtools-mcp
- Stars
- 836
- Tools
- 12
- Downloads, 30 days
- —
- Latest version
- 0.3.6
- Last commit
- Sep 15, 2026
- License
- —
What is Next.js DevTools MCP?
Next.js DevTools connects coding agents to a running Next.js dev server for live errors, routes, logs, and Server Actions. It exposes 12 tools, such as nextjs_index, nextjs_call, nextjs_docs.
Summary generated from the project's README
About Next.js DevTools MCP server
Connecting coding agents to a running Next.js development server is what this tool enables for developers using Claude, Cursor, or other MCP-compatible clients. It acts as a thin connector that automatically discovers Next.js 16+ dev servers by scanning for their built-in MCP endpoints. This allows an AI agent to interact directly with your local runtime environment to inspect live state.
Users can utilize the nextjs_index tool to find active servers and the nextjs_call tool to query specific runtime data like build errors, server logs, application routes, and Server Actions. The server also provides gateways to help agents access version-accurate documentation located within your node_modules or to set up browser automation via the agent-browser CLI. It requires Node.js v20.19 or newer and a running Next.js 16+ development server to function.
What you can do with it
- 1Debug live runtime errorsAsk your AI agent to identify and explain current build or runtime errors in your Next.js application.
- 2Inspect application routingHave an agent retrieve the structure of your routes and page metadata from the active dev server.
- 3Access version-specific documentationDirect an agent to the documentation bundled with your specific installed version of Next.js to ensure accuracy.
Written from the project's README. Every use case is checked against a quote from it.
How to install Next.js DevTools MCP
Formats verified 10 Nov 2026Add to CursorAdd to GooseInstall Next.js DevTools MCP in Claude Code
$ claude mcp add next-devtools-mcp -- npx -y next-devtools-mcpInstall Next.js DevTools MCP in Cursor
~/.cursor/mcp.json
{
"mcpServers": {
"next-devtools-mcp": {
"command": "npx",
"args": [
"-y",
"next-devtools-mcp"
]
}
}
}Install Next.js DevTools MCP in VS Code
.vscode/mcp.json
{
"servers": {
"next-devtools-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"next-devtools-mcp"
]
}
}
}Install Next.js DevTools MCP in VS Code CLI
$ code --add-mcp '{"name":"next-devtools-mcp","type":"stdio","command":"npx","args":["-y","next-devtools-mcp"]}'Install Next.js DevTools MCP in Claude Desktop
claude_desktop_config.json
{
"mcpServers": {
"next-devtools-mcp": {
"command": "npx",
"args": [
"-y",
"next-devtools-mcp"
]
}
}
}Install Next.js DevTools MCP in Codex
$ codex mcp add next-devtools-mcp -- npx -y next-devtools-mcpInstall Next.js DevTools MCP in Codex config.toml
~/.codex/config.toml
[mcp_servers.next-devtools-mcp] command = "npx" args = ["-y", "next-devtools-mcp"]
Install Next.js DevTools MCP in Gemini CLI
$ gemini mcp add -s user next-devtools-mcp npx -- -y next-devtools-mcpInstall Next.js DevTools MCP in Gemini settings.json
~/.gemini/settings.json
{
"mcpServers": {
"next-devtools-mcp": {
"command": "npx",
"args": [
"-y",
"next-devtools-mcp"
]
}
}
}Next.js DevTools MCP tools 12
Detected from the READMEnextjs_indexnextjs_callnextjs_docsbrowser_evalget_errorsget_logsget_page_metadataget_project_metadataget_server_action_by_idporttoolNameargs
| nextjs_index | — | |
| nextjs_call | — | |
| nextjs_docs | — | |
| browser_eval | — | |
| get_errors | — | |
| get_logs | — | |
| get_page_metadata | — | |
| get_project_metadata | — | |
| get_server_action_by_id | — | |
| port | — | |
| toolName | — | |
| args | — |
Configuration
NEXT_TELEMETRY_DISABLED
| Name | Description | |
|---|---|---|
| NEXT_TELEMETRY_DISABLED | — |
Automated checks
Ran Nov 12, 2026Full report →Passed our automated checks. That is not a security audit: read the code and give the server the narrowest access it needs. How checks work · What to fix for more points
- Source repository linked and reachablePass
- Open source license (OSI)No licenseFinding
- Commit or release in the last yearPass
- Package name not close to a popular packagePass
- Remote endpoint uses HTTPSNot checked
- Destructive tools are labelledPass
- No hidden instructions to the modelPass
- No critical advisory in the package or its dependenciesPass
README
View on GitHubNext.js DevTools MCP
next-devtools-mcp is a Model Context Protocol (MCP) server that connects coding agents like Claude and Cursor to your running Next.js dev server.
It is a thin connector. It discovers running Next.js 16+ dev servers and proxies their built-in MCP endpoint (/_next/mcp) so agents get live runtime errors, routes, and logs. It also ships two gateways that point agents at tools they run directly: version-accurate docs and the agent-browser CLI.
[!NOTE] Docs and migration workflows no longer live in this server. Next.js bundles its own docs at
node_modules/next/dist/docs/, and upgrade / Cache Components workflows are distributed as agent skills. See Migrating from 0.3.x.
Requirements
- Node.js v20.19 or a newer LTS version
- npm or pnpm
- Next.js 16+ with a running dev server (for
nextjs_index/nextjs_call)
Install
Install for all your coding agents with add-mcp:
npx add-mcp next-devtools-mcp@latest
Add -y to skip the prompt and install to all detected agents. Add -g to install globally across all projects.
Or add the config to your MCP client manually:
{
"mcpServers": {
"next-devtools": {
"command": "npx",
"args": ["-y", "next-devtools-mcp@latest"]
}
}
}
[!NOTE]
next-devtools-mcp@latestkeeps your client on the latest version.
Client-specific setup
amp mcp add next-devtools -- npx next-devtools-mcp@latest
Or follow Amp's MCP docs with the config above.
claude mcp add next-devtools npx next-devtools-mcp@latest
Or edit your MCP settings file with the config above.
codex mcp add next-devtools -- npx next-devtools-mcp@latest
Windows 11: add environment variables and a longer startup timeout to .codex/config.toml:
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000
Or go to Cursor Settings → MCP → New MCP Server and use the config above.
# Project
gemini mcp add next-devtools npx next-devtools-mcp@latest
# Global
gemini mcp add -s user next-devtools npx next-devtools-mcp@latest
Add to .gemini/antigravity/mcp_config.json:
{
"mcpServers": {
"next-devtools": {
"command": "npx",
"args": ["-y", "next-devtools-mcp@latest"]
}
}
}
See the Antigravity MCP docs.
code --add-mcp '{"name":"next-devtools","command":"npx","args":["-y","next-devtools-mcp@latest"]}'
Or follow the official VS Code MCP setup guide.
Settings | AI | Manage MCP Servers → + Add:
- Name:
next-devtools - Command:
npx - Arguments:
-y, next-devtools-mcp@latest
Quick Start
Start your Next.js dev server:
npm run dev
Next.js 16+ enables its MCP endpoint by default at http://localhost:3000/_next/mcp. next-devtools-mcp discovers and connects to it automatically — no config needed.
Then ask your agent about the running app:
Next Devtools, what errors are in my Next.js application?
Next Devtools, show me the structure of my routes
Next Devtools, what's in the development server logs?
The agent calls nextjs_index to discover servers, then nextjs_call to query their real state.
Tools
| Tool | What it does |
|---|---|
nextjs_index |
Discover running Next.js dev servers and list each one's runtime MCP tools. |
nextjs_call |
Call a runtime tool on a discovered server (errors, routes, logs, Server Actions). |
nextjs_docs |
Gateway. Point the agent at version-accurate docs in node_modules/next/dist/docs/. |
browser_eval |
Gateway. Point the agent at the agent-browser CLI for browser automation. |
The gateways do not do the work themselves — they tell the agent where the docs are or how to install/run the CLI, and the agent runs it directly (faster than proxying through MCP).
Scans common ports for running Next.js 16+ dev servers and lists each server's built-in runtime tools at /_next/mcp. No parameters.
Runtime tools exposed by Next.js (varies by version):
get_errors— current build, runtime, and type errorsget_logs— path to the dev log file (browser console + server output)get_page_metadata— routes, pages, component metadataget_project_metadata— project structure, config, dev server URLget_server_action_by_id— resolve a Server Action ID to its source file
Output: JSON listing discovered servers (port, PID, URL) and their tools.
Calls one runtime tool on a discovered server. Run nextjs_index first to find the port and tool name.
Input:
port(required) — dev server porttoolName(required) — runtime tool to invokeargs(optional) — arguments object, only if the tool requires them
{ "port": 3000, "toolName": "get_errors" }
Output: JSON with the tool's result. Upstream requests, including response-body reads, have a 60-second deadline. Cancelling an MCP request aborts its upstream network work; discovery also releases response bodies used only to detect the protocol.
Does not fetch docs. Recent Next.js releases bundle their docs (markdown, matching your installed version) at node_modules/next/dist/docs/. This tool checks for those files before returning reading instructions. If an installed release has no bundled docs (including early 16.x releases), it offers https://nextjs.org/docs as a fallback and asks the agent to verify APIs against the installed version. Missing dependencies receive installation guidance instead. On Next.js below 16, it recommends npx @next/codemod@latest upgrade latest.
Input: topic (optional), project_path (optional, defaults to cwd). The tool resolves next/package.json from that project, including hoisted workspace dependencies, and returns an absolute docsPath for the installed package.
Does not drive the browser. It detects whether agent-browser is installed and returns either the entry point (agent-browser skills get core --full) or the install steps (npm install -g agent-browser, then agent-browser install), so the agent runs the CLI directly.
Input: task (optional) — used only to tailor the guidance.
Migrating from 0.3.x
Starting in 0.4.0, next-devtools-mcp is a thin connector.
Changed:
nextjs_docsno longer fetches docs over the network. It points the agent at the docs Next.js bundles atnode_modules/next/dist/docs/(or recommends upgrading). Thenextjs-docs://llms-indexresource is removed.
Removed:
inittool — it only enforced the old docs-fetch workflow.upgrade_nextjs_16andenable_cache_componentstools and their prompts — now distributed as agent skills.- All
cache-components://,nextjs16://, andnextjs-fundamentals://resources — superseded by the bundled docs.
What remains: nextjs_index, nextjs_call, nextjs_docs, and browser_eval.
Privacy & Telemetry
next-devtools-mcp collects anonymous usage telemetry to improve the tool:
- Tool usage — which MCP tools are invoked (e.g.
nextjs_index,nextjs_call) - Error events — anonymous error messages when tools fail
- Session metadata — session ID, timestamps, basic environment (OS, Node.js version)
Not collected: your code, file contents or paths, personal data, credentials, or tool arguments (only tool names).
Local files live under ~/.next-devtools-mcp/ (anonymous telemetry-id, telemetry-salt, and a debug log mcp.log).
Opt out by setting the environment variable (add it to ~/.zshrc / ~/.bashrc to persist):
export NEXT_TELEMETRY_DISABLED=1
Delete local telemetry data anytime:
rm -rf ~/.next-devtools-mcp
Troubleshooting
ERR_MODULE_NOT_FOUND referencing next-devtools-mcp/dist — clear your npx cache and restart your MCP client. The server reinstalls fresh.
[error] No server info found — nextjs_index / nextjs_call need a running Next.js 16+ dev server:
- Start it:
npm run dev - Confirm Next.js 16+ (the
/_next/mcpendpoint only exists there) - Verify it started without errors
browser_eval and nextjs_docs work without a dev server.
Local Development
git clone https://github.com/vercel/next-devtools-mcp.git
cd next-devtools-mcp
pnpm install
pnpm build
Point your MCP client at the local build:
{
"mcpServers": {
"next-devtools": {
"command": "node",
"args": ["/absolute/path/to/next-devtools-mcp/dist/index.js"]
}
}
}
Or with Codex:
codex mcp add next-devtools-local -- node dist/index.js
See the Next.js MCP documentation for how MCP works with Next.js and coding agents.
License
MIT
Next.js DevTools MCP questions
How do I add Next.js DevTools MCP to Claude Code?
Run claude mcp add next-devtools-mcp -- npx -y next-devtools-mcp in your terminal. Add --scope user to make it available in every project.
How do I add Next.js DevTools MCP to Cursor?
Open ~/.cursor/mcp.json and add the server under mcpServers, using the Cursor config shown in the install section above.
What tools does Next.js DevTools MCP provide?
It exposes 12 tools, including nextjs_index, nextjs_call, nextjs_docs, browser_eval, get_errors.
What does next-devtools-mcp do?
It discovers running Next.js 16+ dev servers and proxies their built-in MCP endpoint so agents get live runtime errors, routes, and logs.
What are the requirements for next-devtools-mcp?
You need Node.js v20.19 or newer plus Next.js 16+ with a running dev server for the runtime tools.
How do I install next-devtools-mcp?
Run npx add-mcp next-devtools-mcp@latest, or add it to your MCP client config using npx -y next-devtools-mcp@latest as the command.
Which tools does next-devtools-mcp expose?
It exposes nextjs_index, nextjs_call, nextjs_docs, and browser_eval.
Does next-devtools-mcp collect telemetry?
Yes, it collects anonymous tool-usage and error telemetry, which you can disable with NEXT_TELEMETRY_DISABLED=1.