next-devtools-mcp
starsforks
How to install next-devtools-mcp?
vercel/next-devtools-mcp
$git clone https://github.com/vercel/next-devtools-mcpnext-devtools-mcp is a Model Context Protocol (MCP) server that connects coding agents like Claude and Cursor to your running Next.js dev server.
README.md
| 1 | # Next.js DevTools MCP |
| 2 | |
| 3 | [](https://npmjs.org/package/next-devtools-mcp) |
| 4 | |
| 5 | `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. |
| 6 | |
| 7 | 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`](https://github.com/vercel-labs/agent-browser) CLI. |
| 8 | |
| 9 | > [!NOTE] |
| 10 | > 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](#migrating-from-03x). |
| 11 | |
| 12 | ## Requirements |
| 13 | |
| 14 | - [Node.js](https://nodejs.org/) v20.19 or a newer [LTS](https://github.com/nodejs/Release#release-schedule) version |
| 15 | - [npm](https://www.npmjs.com/) or [pnpm](https://pnpm.io/) |
| 16 | - Next.js 16+ with a running dev server (for `nextjs_index` / `nextjs_call`) |
| 17 | |
| 18 | ## Install |
| 19 | |
| 20 | Install for all your coding agents with [`add-mcp`](https://www.npmjs.com/package/add-mcp): |
| 21 | |
| 22 | ```bash |
| 23 | npx add-mcp next-devtools-mcp@latest |
| 24 | ``` |
| 25 | |
| 26 | Add `-y` to skip the prompt and install to all detected agents. Add `-g` to install globally across all projects. |
| 27 | |
| 28 | Or add the config to your MCP client manually: |
| 29 | |
| 30 | ```json |
| 31 | { |
| 32 | "mcpServers": { |
| 33 | "next-devtools": { |
| 34 | "command": "npx", |
| 35 | "args": ["-y", "next-devtools-mcp@latest"] |
| 36 | } |
| 37 | } |
| 38 | } |
| 39 | ``` |
| 40 | |
| 41 | > [!NOTE] |
| 42 | > `next-devtools-mcp@latest` keeps your client on the latest version. |
| 43 | |
| 44 | ### Client-specific setup |
| 45 | |
| 46 | <details> |
| 47 | <summary>Amp</summary> |
| 48 | |
| 49 | ```bash |
| 50 | amp mcp add next-devtools -- npx next-devtools-mcp@latest |
| 51 | ``` |
| 52 | |
| 53 | Or follow [Amp's MCP docs](https://ampcode.com/manual#mcp) with the config above. |
| 54 | |
| 55 | </details> |
| 56 | |
| 57 | <details> |
| 58 | <summary>Claude Code</summary> |
| 59 | |
| 60 | ```bash |
| 61 | claude mcp add next-devtools npx next-devtools-mcp@latest |
| 62 | ``` |
| 63 | |
| 64 | Or edit your MCP settings file with the config above. |
| 65 | |
| 66 | </details> |
| 67 | |
| 68 | <details> |
| 69 | <summary>Codex</summary> |
| 70 | |
| 71 | ```bash |
| 72 | codex mcp add next-devtools -- npx next-devtools-mcp@latest |
| 73 | ``` |
| 74 | |
| 75 | **Windows 11:** add environment variables and a longer startup timeout to `.codex/config.toml`: |
| 76 | |
| 77 | ```toml |
| 78 | env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" } |
| 79 | startup_timeout_ms = 20_000 |
| 80 | ``` |
| 81 | |
| 82 | </details> |
| 83 | |
| 84 | <details> |
| 85 | <summary>Cursor</summary> |
| 86 | |
| 87 | [Install in Cursor](https://cursor.com/en/install-mcp?name=next-devtools&config=eyJjb21tYW5kIjoibnB4IC15IG5leHQtZGV2dG9vbHMtbWNwQGxhdGVzdCJ9) |
| 88 | |
| 89 | Or go to `Cursor Settings` → `MCP` → `New MCP Server` and use the config above. |
| 90 | |
| 91 | </details> |
| 92 | |
| 93 | <details> |
| 94 | <summary>Gemini</summary> |
| 95 | |
| 96 | ```bash |
| 97 | # Project |
| 98 | gemini mcp add next-devtools npx next-devtools-mcp@latest |
| 99 | |
| 100 | # Global |
| 101 | gemini mcp add -s user next-devtools npx next-devtools-mcp@latest |
| 102 | ``` |
| 103 | |
| 104 | </details> |
| 105 | |
| 106 | <details> |
| 107 | <summary>Google Antigravity</summary> |
| 108 | |
| 109 | Add to `.gemini/antigravity/mcp_config.json`: |
| 110 | |
| 111 | ```json |
| 112 | { |
| 113 | "mcpServers": { |
| 114 | "next-devtools": { |
| 115 | "command": "npx", |
| 116 | "args": ["-y", "next-devtools-mcp@latest"] |
| 117 | } |
| 118 | } |
| 119 | } |
| 120 | ``` |
| 121 | |
| 122 | See the [Antigravity MCP docs](https://antigravity.google/docs/mcp). |
| 123 | |
| 124 | </details> |
| 125 | |
| 126 | <details> |
| 127 | <summary>VS Code / Copilot</summary> |
| 128 | |
| 129 | ```bash |
| 130 | code --add-mcp '{"name":"next-devtools","command":"npx","args":["-y","next-devtools-mcp@latest"]}' |
| 131 | ``` |
| 132 | |
| 133 | Or follow the official VS Code MCP setup guide. |
| 134 | |
| 135 | </details> |
| 136 | |
| 137 | <details> |
| 138 | <summary>Warp</summary> |
| 139 | |
| 140 | `Settings | AI | Manage MCP Servers` → `+ Add`: |
| 141 | - Name: `next-devtools` |
| 142 | - Command: `npx` |
| 143 | - Arguments: `-y, next-devtools-mcp@latest` |
| 144 | |
| 145 | </details> |
| 146 | |
| 147 | ## Quick Start |
| 148 | |
| 149 | Start your Next.js dev server: |
| 150 | |
| 151 | ```bash |
| 152 | npm run dev |
| 153 | ``` |
| 154 | |
| 155 | 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. |
| 156 | |
| 157 | Then ask your agent about the running app: |
| 158 | |
| 159 | ``` |
| 160 | Next Devtools, what errors are in my N |
People who liked this also viewed
6 picksType
- fastapi_mcpExpose your FastAPI endpoints as Model Context Protocol (MCP) tools, with Auth!MCP ServersNov 2025
- lean-lsp-mcpLean Theorem Prover MCPMCP ServersJul 2026
- rulesyncA Utility CLI for AI Coding AgentsMCP ServersJul 2026
- FunASROpen-source speech recognition toolkit for training, inference, streaming ASR, VAD, punctuation, speaker diarization pipelines, and OpenAI-compatible/MCP serving.MCP ServersJul 2026
- repomix📦 Repomix is a powerful tool that packs your entire repository into a single, AI-friendly file. Perfect for when you need to feed your codebase to Large Language Models (LLMs) or other AI tools like Claude, ChatGPT, DeepSeek, Perplexity, Gemini, Gemma, Llama, Grok, and more.MCP ServersJul 2026
- mcp-serverMCP server for AI-assisted development of CAP applicationsMCP ServersJul 2026
