next-devtools-mcp

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_index' and 'nextjs_call' tools 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 these Next.js 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_index/nextjs_call tools 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.

Migrate Next.js applications to Cache Components mode and complete setup for Next.js 16. Use this tool when you need to: - Migrate to Cache Components mode - Migrate to cache components - Enable Cache Components - Set up Cache Components - Convert to Cache Components This tool handles ALL steps for migrating and enabling Cache Components: - Configuration: Updates cacheComponents flag (experimental in 16.0.0, stable in canary > 16), removes incompatible flags - Dev Server: Starts dev server (MCP is enabled by default in Next.js 16+) - Error Detection: Loads all routes via browser automation, collects errors using Next.js MCP - Automated Fixing: Adds Suspense boundaries, "use cache" directives, generateStaticParams, cacheLife profiles, cache tags - Verification: Validates all routes work with zero errors Key Features: - One-time dev server start (no restarts needed) - Automated error detection using Next.js MCP tools - Browser-based testing with browser automation - Fast Refresh applies fixes instantly - Comprehensive fix strategies for all error types - Support for "use cache", "use cache: private", Suspense boundaries - Cache invalidation with cacheTag() and cacheLife() configuration Requires: - Next.js 16.0.0+ (stable or canary only - beta versions are NOT supported) - Clean working directory preferred - Browser automation installed (auto-installed if needed) This tool embeds complete knowledge base for: - Cache Components mechanics - Error patterns and solutions - Caching strategies (static vs dynamic) - Advanced patterns (cacheLife, cacheTag, draft mode) - Build behavior and prefetching - Test-driven patterns from 125+ fixtures

⚠️ CALL THIS FIRST - Initialize Next.js DevTools MCP context and establish MANDATORY documentation requirements. **IMPORTANT: This tool MUST be called at the START of every Next.js development session.** This tool fetches the latest Next.js documentation and establishes ABSOLUTE requirements for using the nextjs_docs tool for ALL Next.js-related queries. Key Points: - Fetches latest Next.js LLM documentation from nextjs.org - Establishes MANDATORY requirement to use nextjs_docs for ALL Next.js concepts - Instructs AI to forget any prior Next.js knowledge and always query docs - Documents all available MCP tools (nextjs_docs, nextjs_index, nextjs_call, browser_eval, upgrade_nextjs_16, enable_cache_components) Use this tool at the beginning of a Next.js session to: - Reset AI's Next.js knowledge baseline - Ensure 100% documentation-first approach with no exceptions - Understand available tools and their use cases - Follow best practices for Next.js development

Call a specific MCP tool on a running Next.js development server. REQUIREMENTS: - Port number of the target Next.js dev server - Tool name to execute - Optional arguments object (if the tool requires parameters) Use 'nextjs_index' first to discover available servers, tools, and their input schemas. If 'nextjs_index' auto-discovery fails, ask the user for the port and call 'nextjs_index' again with the 'port' parameter. 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 'nextjs_index' to see what arguments are required Common Next.js MCP tools include: - Error diagnostics (get compilation/runtime errors) - Route information (list all routes) - Build status (check compilation state) - Cache management (clear caches) - And more (varies by Next.js version) Example usage: 1. Call 'nextjs_index' to see servers and tools 2. Call 'nextjs_call' with port=3000, toolName="get_errors" to get errors from server on port 3000

Search and retrieve Next.js official documentation. Three actions: 1) 'get' - Fetch full docs with a path (preferred after init). 2) 'search' - Find docs by keyword (redirects to use llms.txt index if init was called). 3) 'force-search' - Bypass init check and force API search (escape hatch only). After calling init, prefer using 'get' directly with paths from the llms.txt index.

Discover all running Next.js development servers and list their available MCP tools. 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. 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 16+ exposes an MCP (Model Context Protocol) endpoint at /_next/mcp automatically when the dev server starts. No configuration needed - MCP is enabled by default in Next.js 16 and later. This tool discovers all running Next.js servers and returns: - Server port, PID, and URL - Complete list of available MCP tools for each server - Tool descriptions and input schemas After calling this tool, use 'nextjs_call' to execute specific tools. [IMPORTANT] If auto-discovery returns no servers: 1. Ask the user which port their Next.js dev server is running on 2. Call this tool again with the 'port' parameter set to the user-provided port If the MCP endpoint is not available: 1. Ensure you're running Next.js 16 or later (use the 'upgrade-nextjs-16' prompt to upgrade) 2. Verify the dev server is running (npm run dev) 3. Check that the dev server started successfully without errors

Guide through upgrading Next.js to version 16. CRITICAL: Runs the official codemod FIRST (requires clean git state) for automatic upgrades and fixes, then handles remaining issues manually. The codemod upgrades Next.js, React, and React DOM automatically. Covers: - Next.js version upgrade to 16 - Async API changes (params, searchParams, cookies, headers) - Config migration (next.config changes) - Image defaults and optimization - Parallel routes and dynamic segments - Deprecated API removals - React 19 compatibility The codemod requires: - Clean git working directory (commit or stash changes first) - Node.js 18+ - npm/pnpm/yarn/bun installed After codemod runs, provides manual guidance for any remaining issues not covered by the codemod.