Sandbox
@vercel/next-devtools-mcp

MCP connector for Next.js dev servers

This server lets an agent inspect a running Next.js app through MCP. It finds the dev server, calls its runtime tools for errors, routes, logs, and Server Actions, and points the agent to bundled docs or browser tooling when needed.

819 stars64 forksTypeScriptUpdated 7d ago
Who it's for

Builders who want their agent to inspect a live Next.js app, read the right docs, and use browser automation without leaving the coding flow.

What it delivers

You can ask your agent about the real state of a running Next.js app instead of re-explaining the project or copying logs by hand.

What it does

Discover running Next.js dev servers

`nextjs_index` scans common ports, finds Next.js 16+ dev servers, and lists the runtime tools each one exposes.

Call runtime tools on a server

`nextjs_call` runs tools like errors, logs, route metadata, and Server Action lookup on a discovered server.

Point agents to version-accurate docs

`nextjs_docs` checks the installed Next.js package for bundled docs and returns the right reading path or upgrade guidance.

Hand off browser automation to agent-browser

`browser_eval` tells the agent how to install or run `agent-browser` so browser work happens directly in the CLI.

Install across common MCP clients

The README includes setup commands and config examples for Claude Code, Codex, Cursor, Gemini, VS Code/Copilot, Warp, Amp, and manual MCP clients.

How to get it

  1. 1Install for all your coding agents with add-mcp
    npx add-mcp next-devtools-mcp@latest
  2. 2Run
    amp mcp add next-devtools -- npx next-devtools-mcp@latest
  3. 3Or follow Amp's MCP docs with the config above.
    claude mcp add next-devtools npx next-devtools-mcp@latest
  4. 4Or edit your MCP settings file with the config above.
    codex mcp add next-devtools -- npx next-devtools-mcp@latest
  5. 5Or 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
  6. 6See the Antigravity MCP docs.
    code --add-mcp '{"name":"next-devtools","command":"npx","args":["-y","next-devtools-mcp@latest"]}'

README

Next.js DevTools MCP

npm next-devtools-mcp package

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@latest keeps your client on the latest version.

Client-specific setup

Amp
amp mcp add next-devtools -- npx next-devtools-mcp@latest

Or follow Amp's MCP docs with the config above.

Claude Code
claude mcp add next-devtools npx next-devtools-mcp@latest

Or edit your MCP settings file with the config above.

Codex
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
Cursor

Install in Cursor

Or go to Cursor SettingsMCPNew MCP Server and use the config above.

Gemini
# Project
gemini mcp add next-devtools npx next-devtools-mcp@latest

# Global
gemini mcp add -s user next-devtools npx next-devtools-mcp@latest
Google Antigravity

Add to .gemini/antigravity/mcp_config.json:

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

See the Antigravity MCP docs.

VS Code / Copilot
code --add-mcp '{"name":"next-devtools","command":"npx","args":["-y","next-devtools-mcp@latest"]}'

Or follow the official VS Code MCP setup guide.

Warp

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

ToolWhat it does
nextjs_indexDiscover running Next.js dev servers and list each one's runtime MCP tools.
nextjs_callCall a runtime tool on a discovered server (errors, routes, logs, Server Actions).
nextjs_docsGateway. Point the agent at version-accurate docs in node_modules/next/dist/docs/.
browser_evalGateway. 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).

nextjs_index — discover servers

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 errors
  • get_logs — path to the dev log file (browser console + server output)
  • get_page_metadata — routes, pages, component metadata
  • get_project_metadata — project structure, config, dev server URL
  • get_server_action_by_id — resolve a Server Action ID to its source file

Output: JSON listing discovered servers (port, PID, URL) and their tools.

nextjs_call — run a runtime tool

Calls one runtime tool on a discovered server. Run nextjs_index first to find the port and tool name.

Input:

  • port (required) — dev server port
  • toolName (required) — runtime tool to invoke
  • args (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.

nextjs_docs — find version-accurate docs

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.

browser_eval — set up browser automation

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_docs no longer fetches docs over the network. It points the agent at the docs Next.js bundles at node_modules/next/dist/docs/ (or recommends upgrading). The nextjs-docs://llms-index resource is removed.

Removed:

  • init tool — it only enforced the old docs-fetch workflow.
  • upgrade_nextjs_16 and enable_cache_components tools and their prompts — now distributed as agent skills.
  • All cache-components://, nextjs16://, and nextjs-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 foundnextjs_index / nextjs_call need a running Next.js 16+ dev server:

  1. Start it: npm run dev
  2. Confirm Next.js 16+ (the /_next/mcp endpoint only exists there)
  3. 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

Files in the repo

Repository payload18 top-level entries
  • .changeset
  • .claude
  • .cursor
  • .github
  • src
  • test
  • .gitignore
  • .mcp.json
  • .npmrc
  • .prettierignore
  • .prettierrc
  • CLAUDE.md
  • package.json
  • pnpm-lock.yaml
  • README.md
  • server.json
  • tsconfig.json
  • vitest.config.ts

Discussion (0)

Ask about usage, or say what you built with it

Sign in to join the discussion.

No comments yet. Be the first to say what this is good for.

More connectors

High-performance code intelligence MCP server. Indexes codebases into a persistent knowledge graph — average repo in milliseconds. 158 languages, sub-ms queries, 99% fewer tokens. Single static binary, zero dependencies.

43k

Universal provider proxy for OpenAI Codex & Claude Code — use any LLM (Claude, Gemini, Grok, DeepSeek, Ollama…) with Codex CLI, App, SDK, and Claude Code

14k
okf-memory/
okf-agent-memory

Git-native persistent memory for AI coding agents. Implements Google OKF v0.2 with sub-300µs in-memory BM25 search, embedded MCP server, and progressive disclosure. Slashes token bloat by 80% with zero external databases or dependencies. Built in pure Go.

547
tirth8205/
code-review-graph

Local-first code intelligence graph for MCP and CLI. Builds a persistent map of your codebase so AI coding tools read only what matters, with benchmarked context reductions on reviews and large-repo workflows.

31k
2akouwu/
reverify

Stop your AI from making things up — it proposes, deterministic tools decide, every claim checked against ground truth with evidence. Grounded facts and context survive resets. Reverse engineering is the proving ground. MCP server + CLI.

1.1k
t8y2/dbxConnectors

20 MB lightweight cross-platform database client for 90+ databases, including MySQL, PostgreSQL, SQLite, Redis, MongoDB, DuckDB, SQL Server, and Dameng. Built-in AI, MCP Server, CLI, desktop and Docker. | 轻量级跨平台数据库管理工具,支持 MySQL、PostgreSQL、SQLite、Redis、MongoDB、达梦等 90+ 数据库,提供桌面端、Docker、CLI、内置 AI 助手和 MCP Server。

19k