Using Amp CLI:

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

Or configure manually:

Follow Amp's MCP documentation and apply the standard configuration shown above.

Use the Claude Code CLI to add the Next.js DevTools MCP server:

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.

Using Codex CLI:

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:

env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

Click the button to install:

Install in Cursor

Or install manually:

Go to Cursor Settings → MCP → New MCP Server. Use the config provided above.

Using Gemini CLI:

Project-wide installation:

gemini mcp add next-devtools npx next-devtools-mcp@latest

Global installation:

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

Configure in MCP config file:

Add this to your Antigravity MCP config file: .gemini/antigravity/mcp_config.json

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

See Antigravity MCP docs for more info.

Using VS Code CLI:

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.

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

Add to ~/.claude/CLAUDE.md (global) or ./.claude/CLAUDE.md (project-specific):

**When starting work on a Next.js project, ALWAYS call the `init` tool from
next-devtools-mcp FIRST to set up proper context and establish documentation
requirements. Do this automatically without being asked.**

Add to .cursorrules in your project root or global Cursor settings:

When working with Next.js, always call the init tool from next-devtools-mcp
at the start of the session to establish proper context and documentation requirements.

Add to your agent's configuration file (e.g., .codex/instructions.md, agent.md, or similar):

**Next.js Initialization**: When starting work on a Next.js project, automatically
call the `init` tool from the next-devtools-mcp server FIRST. This establishes
proper context and ensures all Next.js queries use official documentation.

• Cache Components (12 sections):

  • cache-components://overview
  • cache-components://core-mechanics
  • cache-components://public-caches
  • cache-components://private-caches
  • cache-components://runtime-prefetching
  • cache-components://request-apis
  • cache-components://cache-invalidation
  • cache-components://advanced-patterns
  • cache-components://build-behavior
  • cache-components://error-patterns
  • cache-components://test-patterns
  • cache-components://reference

• Next.js 16 migration:

  • nextjs16://migration/beta-to-stable
  • nextjs16://migration/examples

• Next.js fundamentals:

  • nextjs-fundamentals://use-client

• upgrade-nextjs-16 - Guide for upgrading to Next.js 16
• enable-cache-components - Migrate and enable Cache Components mode for Next.js 16

Initialize Next.js DevTools MCP context and establish documentation requirements.

Capabilities:

• Sets up proper context for AI assistants working with Next.js
• Establishes requirement to use nextjs_docs for ALL Next.js-related queries
• Documents all available MCP tools and their use cases
• Provides best practices for Next.js development with MCP
• Includes example workflows and quick start checklist

When to use:

• At the beginning of a Next.js development session
• To understand available tools and establish proper context
• To ensure documentation-first approach for Next.js development

Input:

• project_path (optional) - Path to Next.js project (defaults to current directory)

Output:

• Comprehensive initialization context and guidance for Next.js development with MCP tools

Search and retrieve Next.js official documentation and knowledge base.

Capabilities:

• Two-step process: 1) Search for docs by keyword to get paths, 2) Fetch full markdown content by path
• Uses official Next.js documentation search API
• Provides access to comprehensive Next.js guides, API references, and best practices
• Supports filtering by router type (App Router, Pages Router, or both)

Input:

• action (required) - Action to perform: search to find docs, get to fetch full content
• query (optional) - Required for search. Keyword search query (e.g., 'metadata', 'generateStaticParams', 'middleware')
• path (optional) - Required for get. Doc path from search results (e.g., '/docs/app/api-reference/functions/refresh')
• anchor (optional) - Optional for get. Anchor/section from search results (e.g., 'usage')
• routerType (optional) - For search only. Filter by: app, pages, or all (default: all)

Output:

• Search results with doc titles, paths, content snippets, sections, and anchors
• Full markdown content for specific documentation pages

Automate and test web applications using Playwright browser automation.

When to use:

• Verifying pages in Next.js projects (especially during upgrades or testing)
• Testing user interactions and flows
• Taking screenshots for visual verification
• Detecting runtime errors, hydration issues, and client-side problems
• Capturing browser console errors and warnings

Important: For Next.js projects, prioritize using the nextjs_index and nextjs_call tools instead of browser console log forwarding. Only use browser_eval's console_messages action as a fallback when these tools are not available.

Available actions:

• start - Start browser automation (automatically installs if needed)
• navigate - Navigate to a URL
• click - Click on an element
• type - Type text into an element
• fill_form - Fill multiple form fields at once
• evaluate - Execute JavaScript in browser context
• screenshot - Take a screenshot of the page
• console_messages - Get browser console messages
• close - Close the browser
• drag - Perform drag and drop
• upload_file - Upload files
• list_tools - List all available browser automation tools from the server

Input:

• action (required) - The action to perform
• browser (optional) - Browser to use: chrome, firefox, webkit, msedge (default: chrome)
• headless (optional) - Run browser in headless mode (default: true)
• Action-specific parameters (see tool description for details)

Output:

• JSON with action result, screenshots (base64), console messages, or error information

Discover all running Next.js dev servers and list their available MCP tools.

What this tool does:

Automatically discovers all running Next.js 16+ dev servers on your machine and lists the runtime diagnostic tools available from each server's built-in MCP endpoint at /_next/mcp.

No parameters required - Just call the tool and it will scan for servers.

Available Next.js Runtime Tools (varies by Next.js version):

• get_errors - Get current build, runtime, and type errors
• get_logs - Get path to development log file (browser console + server output)
• get_page_metadata - Query application routes, pages, and component metadata
• get_project_metadata - Get project structure, config, and dev server URL
• get_server_action_by_id - Look up Server Actions by ID to find source files

Requirements:

• Next.js 16+ (MCP enabled by default)
• Running dev server (npm run dev)

Output:

• JSON with list of discovered servers, each containing:
  • Port, PID, URL
  • Available tools with descriptions and input schemas

Example prompts:

• "Next Devtools, what servers are running?"
• "Next Devtools, show me available diagnostic tools"

Execute a specific MCP tool on a running Next.js dev server.

What this tool does:

Calls a specific runtime diagnostic tool on a Next.js 16+ dev server's built-in MCP endpoint at /_next/mcp.

Input Parameters:

• port (required) - Dev server port (use nextjs_index first to discover)
• toolName (required) - Name of the Next.js tool to invoke
• args (optional) - Arguments object for the tool (only if required by that tool)

Requirements:

• Next.js 16+ (MCP enabled by default)
• Running dev server (npm run dev)
• Use nextjs_index first to discover available servers and tools

Typical workflow:

// Step 1: Discover servers and tools
// (call nextjs_index first)

// Step 2: Call a specific tool
{
  "port": 3000,
  "toolName": "get_errors"
  // args is optional and only needed if the tool requires parameters
}

Output:

• JSON with tool execution results

Example prompts that use this tool:

• "Next Devtools, what errors are in my Next.js app?"
• "Next Devtools, show me my application routes"
• "Next Devtools, what's in the dev server logs?"
• "Next Devtools, find the Server Action with ID xyz"

Guides through upgrading Next.js to version 16 with automated codemod execution.

Capabilities:

• Runs official Next.js codemod automatically (requires clean git state)
• Handles async API changes (params, searchParams, cookies, headers)
• Migrates configuration changes
• Updates image defaults and optimization
• Fixes parallel routes and dynamic segments
• Handles deprecated API removals
• Provides guidance for React 19 compatibility

Input:

• project_path (optional) - Path to Next.js project (defaults to current directory)

Output:

• Structured JSON with step-by-step upgrade guidance

Complete Cache Components setup, enablement, and migration for Next.js 16 with automated error detection and fixing. This tool is used for migrating Next.js applications to Cache Components mode.

Capabilities:

• Pre-flight checks (package manager, Next.js version, configuration)
• Enable Cache Components configuration
• Start dev server with MCP enabled
• Automated route verification and error detection
• Automated error fixing with intelligent boundary setup (Suspense, caching directives, static params)
• Final verification and build testing

Input:

• project_path (optional) - Path to Next.js project (defaults to current directory)

Output:

• Structured JSON with complete setup guidance and phase-by-phase instructions

Example Usage:

With Claude Code:

Next Devtools, help me enable Cache Components in my Next.js 16 app

With other agents or programmatically:

{
  "tool": "enable_cache_components",
  "args": {
    "project_path": "/path/to/project"
  }
}