`bash
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.

`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.

`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
`

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

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

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

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

See Antigravity MCP docs for more info.

`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.

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

`markdown
**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):

`markdown
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

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

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

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

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"

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:

`javascript
// 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"

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

Output:
- Structured JSON with step-by-step upgrade guidance

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:
`json
{
"tool": "enable_cache_components",
"args": {
"project_path": "/path/to/project"
}
}
`