Next.js DevTools

next-devtools-mcp is a Model Context Protocol (MCP) server that provides Next.js development tools and utilities for AI coding assistants.

50K+

5 Tools

Packaged by

Add to Docker Desktop

Version 4.43 or later needs to be installed to add the server automatically

Overview Tools (5)

Docker Hub⁠Github repository⁠

Tools

Name Description

browser_eval Automate and test web applications using Playwright browser automation. This tool connects to playwright-mcp server and provides access to all Playwright capabilities. CRITICAL FOR PAGE VERIFICATION: When verifying pages in Next.js projects (especially during upgrades or testing), you MUST use browser automation to load pages in a real browser instead of curl or simple HTTP requests. This is because: - Browser automation actually renders the page and executes JavaScript (curl only fetches HTML) - Detects runtime errors, hydration issues, and client-side problems that curl cannot catch - Verifies the full user experience, not just HTTP status codes - Captures browser console errors and warnings via console_messages action IMPORTANT FOR NEXT.JS PROJECTS: If working with a Next.js application, PRIORITIZE using the 'nextjs_runtime' tool instead of browser console log forwarding. Next.js has built-in MCP integration that provides superior error reporting, build diagnostics, and runtime information directly from the Next.js dev server. Only use browser_eval's console_messages action as a fallback when nextjs_runtime tools are not available or when you specifically need to test client-side browser behavior that Next.js runtime cannot capture. Available actions: - start: Start browser automation (automatically installs if needed). Verbose logging is always enabled. - 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 (for Next.js, prefer nextjs_runtime tool instead) - close: Close the browser - drag: Perform drag and drop - upload_file: Upload files - list_tools: List all available browser automation tools from the server Note: The playwright-mcp server will be automatically installed if not present.

nextjs_runtime Interact with a running Next.js development server's MCP endpoint to query runtime information, diagnostics, and internals. WHEN TO USE THIS TOOL - Use proactively in these scenarios: 1. **Before implementing ANY changes to the app**: When asked to add, modify, or fix anything in the application: - "Add a loading state" → Check current component structure and routes first - "Fix the navigation" → Inspect existing routes and components - "Update the API endpoint" → Query current routes and data flows - "Add error handling" → Check runtime errors and component hierarchy - "Refactor the auth logic" → Inspect current auth implementation and routes - "Optimize performance" → Check runtime diagnostics and component tree Use this to understand where changes should be made and what currently exists. 2. **For diagnostic and investigation questions**: - "What's happening?" / "What's going on?" / "Why isn't this working?" - "Check the errors" / "See what's wrong" - "What routes are available?" / "Show me the routes" - "Clear the cache" / "Reset everything" - Questions about build status, compilation errors, or runtime diagnostics 3. **For agentic codebase search**: Use this as FIRST CHOICE for searching the currently running app. If not found, fallback to static codebase search tools. KEY PRINCIPLE: If the request involves the running Next.js application (whether to investigate OR modify it), query the runtime FIRST to understand current state before proceeding. Start by calling action='list_tools' to discover what runtime information is available, then use those tools to gather context. REQUIREMENTS: - Next.js 16 or later (MCP support was added in v16) - If you're on Next.js 15 or earlier, use the 'upgrade-nextjs-16' MCP prompt to upgrade first Next.js exposes an MCP (Model Context Protocol) endpoint at /_next/mcp when started with: - For Next.js < 16: experimental.mcpServer: true in next.config.js, OR __NEXT_EXPERIMENTAL_MCP_SERVER=true environment variable - For Next.js >= 16: MCP is enabled by default (no configuration needed) This tool allows you to: 1. Discover running Next.js dev servers and their ports 2. List available MCP tools/functions exposed by the Next.js runtime 3. Call those tools to interact with Next.js internals (e.g., get errors,get route info, get logs, runtime diagnostics, etc.) Typical workflow: 1. Use action='discover_servers' to find running Next.js servers (optional - auto-discovery will be attempted) 2. Use action='list_tools' with the discovered port to see available tools and their input schemas 3. Use action='call_tool' with port, toolName, and args (as an object, only if required) to invoke a specific tool IMPORTANT: When calling tools: - The 'args' parameter MUST be an object (e.g., {key: "value"}), NOT a string - If a tool doesn't require arguments, OMIT the 'args' parameter entirely - do NOT pass {} or "{}" - Check the tool's inputSchema from 'list_tools' to see what arguments are required If the MCP endpoint is not available: 1. Check if you're running Next.js 16+ (if not, use the 'upgrade-nextjs-16' prompt) 2. For Next.js < 16: Ensure the dev server is started with __NEXT_EXPERIMENTAL_MCP_SERVER=true or experimental.mcpServer: true 3. For Next.js >= 16: MCP should be enabled by default - check if the dev server is running

Name	Description
`browser_eval`	Automate and test web applications using Playwright browser automation. This tool connects to playwright-mcp server and provides access to all Playwright capabilities. CRITICAL FOR PAGE VERIFICATION: When verifying pages in Next.js projects (especially during upgrades or testing), you MUST use browser automation to load pages in a real browser instead of curl or simple HTTP requests. This is because: - Browser automation actually renders the page and executes JavaScript (curl only fetches HTML) - Detects runtime errors, hydration issues, and client-side problems that curl cannot catch - Verifies the full user experience, not just HTTP status codes - Captures browser console errors and warnings via console_messages action IMPORTANT FOR NEXT.JS PROJECTS: If working with a Next.js application, PRIORITIZE using the 'nextjs_runtime' tool instead of browser console log forwarding. Next.js has built-in MCP integration that provides superior error reporting, build diagnostics, and runtime information directly from the Next.js dev server. Only use browser_eval's console_messages action as a fallback when nextjs_runtime tools are not available or when you specifically need to test client-side browser behavior that Next.js runtime cannot capture. Available actions: - start: Start browser automation (automatically installs if needed). Verbose logging is always enabled. - 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 (for Next.js, prefer nextjs_runtime tool instead) - close: Close the browser - drag: Perform drag and drop - upload_file: Upload files - list_tools: List all available browser automation tools from the server Note: The playwright-mcp server will be automatically installed if not present.
`nextjs_runtime`	Interact with a running Next.js development server's MCP endpoint to query runtime information, diagnostics, and internals. WHEN TO USE THIS TOOL - Use proactively in these scenarios: 1. Before implementing ANY changes to the app: When asked to add, modify, or fix anything in the application: - "Add a loading state" → Check current component structure and routes first - "Fix the navigation" → Inspect existing routes and components - "Update the API endpoint" → Query current routes and data flows - "Add error handling" → Check runtime errors and component hierarchy - "Refactor the auth logic" → Inspect current auth implementation and routes - "Optimize performance" → Check runtime diagnostics and component tree Use this to understand where changes should be made and what currently exists. 2. For diagnostic and investigation questions: - "What's happening?" / "What's going on?" / "Why isn't this working?" - "Check the errors" / "See what's wrong" - "What routes are available?" / "Show me the routes" - "Clear the cache" / "Reset everything" - Questions about build status, compilation errors, or runtime diagnostics 3. For agentic codebase search: Use this as FIRST CHOICE for searching the currently running app. If not found, fallback to static codebase search tools. KEY PRINCIPLE: If the request involves the running Next.js application (whether to investigate OR modify it), query the runtime FIRST to understand current state before proceeding. Start by calling action='list_tools' to discover what runtime information is available, then use those tools to gather context. REQUIREMENTS: - Next.js 16 or later (MCP support was added in v16) - If you're on Next.js 15 or earlier, use the 'upgrade-nextjs-16' MCP prompt to upgrade first Next.js exposes an MCP (Model Context Protocol) endpoint at /_next/mcp when started with: - For Next.js < 16: experimental.mcpServer: true in next.config.js, OR __NEXT_EXPERIMENTAL_MCP_SERVER=true environment variable - For Next.js >= 16: MCP is enabled by default (no configuration needed) This tool allows you to: 1. Discover running Next.js dev servers and their ports 2. List available MCP tools/functions exposed by the Next.js runtime 3. Call those tools to interact with Next.js internals (e.g., get errors,get route info, get logs, runtime diagnostics, etc.) Typical workflow: 1. Use action='discover_servers' to find running Next.js servers (optional - auto-discovery will be attempted) 2. Use action='list_tools' with the discovered port to see available tools and their input schemas 3. Use action='call_tool' with port, toolName, and args (as an object, only if required) to invoke a specific tool IMPORTANT: When calling tools: - The 'args' parameter MUST be an object (e.g., {key: "value"}), NOT a string - If a tool doesn't require arguments, OMIT the 'args' parameter entirely - do NOT pass {} or "{}" - Check the tool's inputSchema from 'list_tools' to see what arguments are required If the MCP endpoint is not available: 1. Check if you're running Next.js 16+ (if not, use the 'upgrade-nextjs-16' prompt) 2. For Next.js < 16: Ensure the dev server is started with __NEXT_EXPERIMENTAL_MCP_SERVER=true or experimental.mcpServer: true 3. For Next.js >= 16: MCP should be enabled by default - check if the dev server is running