Next DevTools

The quickest setup for Claude Code users is the single-line CLI command. This registers next-devtools-mcp as a user-scoped server available across all your projects.

claude mcp add next-devtools npx next-devtools-mcp@latest

For Claude Desktop or other clients, add the server to your MCP configuration file. Use npx -y to ensure the latest version is always used.

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

Runtime diagnostic tools require a running Next.js dev server. Start it in a separate terminal before asking the AI to inspect routes or errors.

npm run dev

At the start of any Next.js session, ask the AI to call the init tool. This sets up proper context about your project structure, router type, and documentation requirements.

Add an instruction to your Claude project file to automatically call init whenever work starts on a Next.js project.

# .claude/CLAUDE.md
When starting work on a Next.js project, automatically call the init tool
from next-devtools-mcp first to establish proper context.

If your organization disables telemetry, set the environment variable in the MCP config env block.

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"],
      "env": {
        "NEXT_TELEMETRY_DISABLED": "1"
      }
    }
  }
}