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

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.

• nextjs16://knowledge/overview - Overview and critical errors AI agents make
• nextjs16://knowledge/core-mechanics - Fundamental paradigm shift and how cacheComponents works
• nextjs16://knowledge/public-caches - Public cache mechanics with 'use cache'
• nextjs16://knowledge/private-caches - Private cache patterns with 'use cache: private'
• nextjs16://knowledge/runtime-prefetching - Runtime prefetch configuration and patterns
• nextjs16://knowledge/request-apis - Async params, searchParams, cookies, headers APIs
• nextjs16://knowledge/cache-invalidation - updateTag, revalidateTag, and refresh patterns
• nextjs16://knowledge/advanced-patterns - cacheLife, cacheTag, draft mode, and more
• nextjs16://knowledge/build-behavior - Prerendering, resume data cache, and metadata
• nextjs16://knowledge/error-patterns - Common errors and how to fix them
• nextjs16://knowledge/test-patterns - E2E patterns from 125+ test fixtures
• nextjs16://knowledge/reference - API reference, checklists, and comprehensive nuances

• init - Initialize context for Next.js development with MCP tools and documentation requirements
• upgrade-nextjs-16 - Guide for upgrading to Next.js 16
• enable-cache-components - Enable caching for React components

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_runtime tool instead of browser console log forwarding. Only use browser_eval's console_messages action as a fallback when nextjs_runtime 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

Connect to your running Next.js dev server's built-in MCP endpoint to access live application state, runtime diagnostics, and internal information.

What this tool does:

This tool acts as a bridge between your coding agent and Next.js 16's built-in MCP endpoint at /_next/mcp. It provides three key actions:

1. discover_servers: Find all running Next.js dev servers on your machine
2. list_tools: See what runtime diagnostic tools are available from Next.js
3. call_tool: Execute a specific Next.js runtime tool (e.g., get errors, query routes, fetch logs)

Available Next.js Runtime Tools (accessed via call_tool):

Once connected to a Next.js 16+ dev server, you can access these built-in tools:

• 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)

Typical workflow:

// Step 1: Discover running servers (optional - auto-discovery works in most cases)
{
  "action": "discover_servers"
}

// Step 2: List available runtime tools
{
  "action": "list_tools",
  "port": 3000  // optional if only one server is running
}

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

Input Parameters:

• action (required) - discover_servers, list_tools, or call_tool
• port (optional) - Dev server port (auto-discovers if not provided)
• toolName (required for call_tool) - Name of the Next.js tool to invoke
• args (optional) - Arguments object for the tool (only if required by that tool)
• includeUnverified (optional) - For discover_servers: include servers even if MCP verification fails

Output:

• JSON with discovered servers, available tools list, or 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 and enablement for Next.js 16 with automated error detection and fixing.

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"
  }
}