next-devtools-mcp

repository·main·Indexed 21 days ago

https://github.com/vercel/next-devtools-mcp

A Model Context Protocol (MCP) server that connects AI coding agents to a running Next.js 16+ development server. It provides tools to access live runtime errors, logs, routes, and version-accurate documentation via the /_next/mcp endpoint. Key tools include nextjs_index for server discovery, nextjs_call for executing runtime tools (e.g., get_errors, get_logs), nextjs_docs for local markdown documentation access, and browser_eval as a gateway to the agent-browser CLI for browser automation.

Tokens
4K
Snippets
11
Records
22
Agent score
68%

What's inside next-devtools-mcp

  1. Disable telemetry in next-devtools-mcp

    main

    The server collects anonymous usage telemetry (tool usage, error events, and session metadata). To opt out, set the NEXT_TELEMETRY_DISABLED environment variable to 1 in your shell configuration (e.g., ~/.zshrc or ~/.bashrc).

    To delete existing local telemetry data, remove the directory ~/.next-devtools-mcp/.

    export NEXT_TELEMETRY_DISABLED=1
  2. Client-specific setup instructions

    main

    Depending on your coding agent, use the following commands to add the next-devtools MCP server:

    • Amp: amp mcp add next-devtools -- npx next-devtools-mcp@latest
    • Claude Code: claude mcp add next-devtools npx next-devtools-mcp@latest
    • Codex: codex mcp add next-devtools -- npx next-devtools-mcp@latest (Note: Windows 11 users may need to add env and startup_timeout_ms to .codex/config.toml)
    • Cursor: Use the Cursor MCP installer or add a New MCP Server in settings.
    • Gemini (Project): gemini mcp add next-devtools npx next-devtools-mcp@latest
    • Gemini (Global): gemini mcp add -s user next-devtools npx next-devtools-mcp@latest
    • Google Antigravity: Add the config to .gemini/antigravity/mcp_config.json.
    • VS Code / Copilot: code --add-mcp '{"name":"next-devtools","command":"npx","args":["-y","next-devtools-mcp@latest"]}'
    • Warp: Add via Settings | AI | Manage MCP Servers with Name: next-devtools, Command: npx, and Arguments: -y, next-devtools-mcp@latest.
  3. Install next-devtools-mcp

    main

    You can install next-devtools-mcp for all your coding agents using the add-mcp utility. Use the -y flag to skip prompts and install to all detected agents, or the -g flag to install globally across all projects.

    Alternatively, you can manually add the configuration to your MCP client's settings file.

    npx add-mcp next-devtools-mcp@latest
  4. Quick Start with Next.js DevTools MCP

    main

    To use the MCP server, ensure you have a Next.js 16+ dev server running. The server automatically discovers the running instance via its /_next/mcp endpoint.

    1. Start your Next.js dev server:
      npm run dev
    2. Ask your agent questions about the running application, such as:
      • "Next Devtools, what errors are in my Next.js application?"
      • "Next Devtools, show me the structure of my routes"
      • "Next Devtools, what's in the development server logs?"
    npm run dev
  5. How next-devtools-mcp tools work

    main

    The server implements the Model Context Protocol (MCP) using StdioServerTransport. It exposes its capabilities through two primary request handlers:

    1. ListTools: Returns a list of available tools, including their name, description, and an inputSchema (converted from Zod to JSON Schema) that defines the expected arguments.
    2. CallTool: Executes a specific tool by name. The server validates the provided arguments against the tool's Zod schema. If valid, it invokes the tool's handler and returns the result as a text content block.

    If a tool is called, the server also tracks usage via internal telemetry (event queuing) before executing the logic.

  6. Use the nextjs_index tool to discover Next.js servers and tools

    main

    The nextjs_index tool is used to discover running Next.js development servers and list their available MCP tools. It should be used proactively before making any changes to an application to understand the current component structure, routes, and runtime state.

    When to use this tool:

    • Before implementing changes: To inspect existing routes, components, or API endpoints before adding or modifying them.
    • For diagnostics: To investigate errors, check build status, or query runtime diagnostics.
    • For codebase search: As the first choice for searching the currently running application (fallback to static search only if needed).

    Requirements:

    • Next.js 16 or later: MCP support is built-in and enabled by default at the /_next/mcp endpoint.
    • Upgrade path: If using Next.js 15 or earlier, upgrade using:
      npx @next/codemod@latest upgrade latest
    • Running server: Ensure the dev server is active (e.g., via npm run dev).

    Handling Discovery Failures:

    If the tool returns no servers (auto-discovery fails):

    1. Ask the user which port their Next.js dev server is running on.
    2. Call nextjs_index again providing the port parameter.

    After discovering tools, use nextjs_call to execute specific tools found in the index.

  7. Troubleshoot next-devtools-mcp errors

    main

    Common issues and solutions:

    • ERR_MODULE_NOT_FOUND referencing next-devtools-mcp/dist: Clear your npx cache and restart your MCP client to force a fresh installation.
    • [error] No server info found: This indicates nextjs_index or nextjs_call cannot find a running server. Ensure:
      1. A Next.js 16+ dev server is running (npm run dev).
      2. The server has the /_next/mcp endpoint enabled (default in Next.js 16+).
      3. The server started without errors.
  8. Use nextjs_docs to find version-accurate docs

    main

    The nextjs_docs tool helps agents find the correct documentation for the currently installed Next.js version. Instead of fetching docs over the network, it returns the local path to the markdown files bundled in node_modules/next/dist/docs/.

    Input Parameters:

    • topic (optional)
    • project_path (optional, defaults to current working directory)
  9. Use nextjs_call to run runtime tools

    main

    The nextjs_call tool invokes a specific runtime tool on a discovered server. You must run nextjs_index first to identify the correct port and toolName.

    Input Parameters:

    • port (required): The dev server port.
    • toolName (required): The name of the runtime tool to invoke.
    • args (optional): An arguments object required by specific tools.
    { "port": 3000, "toolName": "get_errors" }
  10. Use nextjs_index to discover servers

    main

    The nextjs_index tool scans common ports for running Next.js 16+ dev servers. It returns a JSON list of discovered servers including their port, PID, and URL, along with the runtime tools they expose at /_next/mcp.

    Exposed Runtime Tools (varies by version):

    • get_errors: current build, runtime, and type errors
    • get_logs: path to the dev log file
    • get_page_metadata: routes, pages, component metadata
    • get_project_metadata: project structure, config, dev server URL
    • get_server_action_by_id: resolve a Server Action ID to its source file
  11. Use browser_eval for browser automation

    main

    The browser_eval tool acts as a gateway to the agent-browser CLI. It does not drive the browser itself; instead, it detects if agent-browser is installed and returns the necessary entry point or installation steps so the agent can run the CLI directly.

    Input Parameters:

    • task (optional): Used to tailor the guidance provided.