next-devtools-mcp

# Next.js DevTools MCP [](https://npmjs.org/package/next-devtools-mcp) `next-devtools-mcp` is a Model Context Protocol (MCP) server that provides Next.js development tools and utilities for coding agents like Claude and Cursor. ## Getting Started ### Requirements - [Node.js](https://nodejs.org/) v20.19 or a newer [latest maintenance LTS](https://github.com/nodejs/Release#release-schedule) version - [npm](https://www.npmjs.com/) or [pnpm](https://pnpm.io/) Add the following config to your MCP client: ```json { "mcpServers": { "next-devtools": { "command": "npx", "args": ["-y", "next-devtools-mcp@latest"] } } } ``` > [!NOTE] > Using `next-devtools-mcp@latest` ensures that your MCP client will always use the latest version of the Next.js DevTools MCP server. ### MCP Client Configuration <details> <summary>Amp</summary> **Using Amp CLI:** ```bash amp mcp add next-devtools -- npx next-devtools-mcp@latest ``` **Or configure manually:** Follow [Amp's MCP documentation](https://ampcode.com/manual#mcp) and apply the standard configuration shown above. </details> <details> <summary>Claude Code</summary> Use the Claude Code CLI to add the Next.js DevTools MCP server: ```bash claude mcp add next-devtools npx next-devtools-mcp@latest ``` Alternatively, manually configure Claude by editing your MCP settings file and adding the configuration shown above. </details> <details> <summary>Codex</summary> **Using Codex CLI:** ```bash codex mcp add next-devtools -- npx next-devtools-mcp@latest ``` **Or configure manually:** Follow the MCP setup guide with the standard configuration format: - Command: `npx` - Arguments: `-y, next-devtools-mcp@latest` **Windows 11 Special Configuration:** Update `.codex/config.toml` with environment variables and increased startup timeout: ```toml env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" } startup_timeout_ms = 20_000 ``` </details> <details> <summary>Cursor</summary> **Click the button to install:** [Install in Cursor](https://cursor.com/en/install-mcp?name=next-devtools&config=eyJjb21tYW5kIjoibnB4IC15IG5leHQtZGV2dG9vbHMtbWNwQGxhdGVzdCJ9) **Or install manually:** Go to `Cursor Settings` → `MCP` → `New MCP Server`. Use the config provided above. </details> <details> <summary>Gemini</summary> **Using Gemini CLI:** Project-wide installation: ```bash gemini mcp add next-devtools npx next-devtools-mcp@latest ``` Global installation: ```bash gemini mcp add -s user next-devtools npx next-devtools-mcp@latest ``` **Or configure manually:** Follow the MCP setup guide with these parameters: - Command: `npx` - Arguments: `-y, next-devtools-mcp@latest` </details> <details> <summary>VS Code / Copilot</summary> **Using VS Code CLI:** ```bash code --add-mcp '{"name":"next-devtools","command":"npx","args":["-y","next-devtools-mcp@latest"]}' ``` **Or configure manually:** Follow the official VS Code MCP server setup guide and add the Next.js DevTools server through VS Code settings. </details> <details> <summary>Warp</summary> **Using Warp UI:** Navigate to `Settings | AI | Manage MCP Servers` and select `+ Add` to register a new MCP server with the following configuration: - Name: `next-devtools` - Command: `npx` - Arguments: `-y, next-devtools-mcp@latest` </details> ## Quick Start ### For Next.js 16+ Projects (Recommended) To unlock the full power of runtime diagnostics, start your Next.js dev server: ```bash npm run dev ``` Next.js 16+ has MCP enabled by default at `http://localhost:3000/_next/mcp` (or whichever port your dev server uses). The `next-devtools-mcp` server will automatically discover and connect to it. **⚠️ IMPORTANT: Start every Next.js session by calling the `init` tool to set up proper context:** ``` Use the init tool to set up Next.js DevTools context ``` This initializes the MCP context and ensures the AI assistant uses official Next.js documentation for all queries. **After initialization, try these prompts to explore runtime diagnostics:** ``` 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? ``` Your coding agent will use the `nextjs_index` and `nextjs_call` tools to query your running application's actual state. ### For All Next.js Projects You can use the development automation and documentation tools regardless of Next.js version: ``` Next Devtools, help me upgrade my Next.js app to version 16 ``` ``` Next Devtools, enable Cache Components in my Next.js app ``` ``` Next Devtools, search Next.js docs for generateMetadata ``` ### 💡 Pro Tip: Auto-Initialize on Every Session To make your AI assistant **automatically call the `init` tool** at the start of every Next.js session without being asked, add this instruction to your agent's configuration file: <detail