Next.js DevToolsvf.sr

listing.by · home.legend.verified

Query a running Next.js dev server for runtime errors, routes and logs, and find version-matched docs from your coding agent.

state.local.long (state.local.title)listing.badge.runs_with

listing.install

listing.local.explain

npx -y next-devtools-mcp@latest

listing.local.needs listing.local.note

act.add_to a11y.new_tabact.add_to a11y.new_tab

listing.share.h

listing.share.p_local

mcp.tc/i/nextjs-devtools

listing.about

Connects coding agents such as Claude Code and Cursor to a running Next.js 16+ dev server. It discovers local dev servers, proxies their built-in MCP endpoint (/_next/mcp) and returns live build and runtime errors, routes, page metadata, project config and dev logs. Two gateway tools point the agent at the docs bundled in node_modules/next/dist/docs and at the agent-browser CLI for browser automation.

Runs locally over stdio with npx -y next-devtools-mcp@latest. Requires Node.js 20.19 or newer and, for the runtime tools, a Next.js 16+ dev server started with npm run dev. No sign-in or API key is needed.

listing.can

  • Discover running Next.js dev servers and list their runtime tools
  • Read current build, runtime and type errors
  • Inspect routes, pages and project metadata
  • Find the dev server log file
  • Resolve a Server Action ID to its source file
  • Locate version-accurate Next.js docs in the installed package
  • Get setup steps for the agent-browser CLI

listing.tools

listing.notools.local

listing.prompts

  • What errors are in my Next.js application right now?

  • Show me the structure of my routes in the running dev server.

  • What's in the Next.js development server logs?

  • Where are the docs for the Next.js version installed in this project?

listing.setup.h

listing.setup.local

Claude Code

  1. Run this in a terminal, in your project folder:
claude mcp add --transport stdio nextjs-devtools -- npx -y next-devtools-mcp@latest
  1. Start Claude Code and type /mcp. nextjs-devtools should show as connected.

Add --scope user to make it available in every project.

Claude Desktop

  1. Open Settings → Developer → Edit Config. It opens claude_desktop_config.json. Add:
claude_desktop_config.json
{
  "mcpServers": {
    "nextjs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "next-devtools-mcp@latest"
      ]
    }
  }
}
  1. Save the file and restart Claude Desktop.

Needs Node.js on your computer. The file lives in ~/Library/Application Support/Claude/ on macOS and %APPDATA%\Claude\ on Windows.

Cursor

Add to Cursor a11y.new_tab

Or add it by hand to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project):

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

Needs Node.js on your computer.

VS Code

Install in VS Code a11y.new_tab

Or from a terminal:

code --add-mcp '{"name":"nextjs-devtools","type":"stdio","command":"npx","args":["-y","next-devtools-mcp@latest"]}'

Or commit it to the repo in .vscode/mcp.json:

.vscode/mcp.json
{
  "servers": {
    "nextjs-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "next-devtools-mcp@latest"
      ]
    }
  }
}

Needs Node.js on your computer.

Devin Desktop

  1. Add it to ~/.config/devin/mcp_config.json (macOS and Linux) or %APPDATA%\devin\mcp_config.json (Windows):
mcp_config.json
{
  "mcpServers": {
    "nextjs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "next-devtools-mcp@latest"
      ]
    }
  }
}
  1. Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf.

Codex

codex mcp add nextjs-devtools -- npx -y next-devtools-mcp@latest

Or edit ~/.codex/config.toml directly:

config.toml
[mcp_servers.nextjs-devtools]
command = "npx"
args = ["-y", "next-devtools-mcp@latest"]

Needs Node.js on your computer.

Gemini CLI

gemini mcp add nextjs-devtools npx -- -y next-devtools-mcp@latest

This adds it to the current project. Add -s user to use it everywhere.

Any client

Most clients that start local servers accept this shape:

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

Zed puts servers under context_servers in its settings, with the same command, args and env fields.

Needs Node.js on your computer.

listing.faq

Can I paste mcp.tc/i/nextjs-devtools into my MCP client?

No. Next.js DevTools runs on your own computer, started by your client, so it has no web address to connect to. The quick link is the page to share; the install command is npx -y next-devtools-mcp@latest.

Does Next.js DevTools need an API key?

No. It doesn't declare any keys or environment variables. It runs with your user account's permissions, so check what its tools can reach.

Is Next.js DevTools a remote or a local server?

Local. Your client starts it as a process on your computer with npx -y next-devtools-mcp@latest, which needs Node.js.

What can Next.js DevTools do?

You can discover running Next.js dev servers and list their runtime tools, read current build, runtime and type errors and inspect routes, pages and project metadata.

Which clients can use it?

Any client that starts local servers: Claude Code, Claude Desktop, Cursor, VS Code, Devin Desktop, Codex, Gemini CLI, Zed and others. claude.ai and ChatGPT only connect to remote servers.

Who wrote this page?

mcp.tc's robot read Next.js DevTools's public metadata (its package and repository pages), and an AI model drafted the text from it. A person reviews anything the checks can't confirm. The text can still be wrong, so if you spot a mistake, use Report this listing on this page.

listing.em.h

listing.em.lead_local listing.em.how

listing.em.badge

em.prev_lightem.prev_dark
Markdown
[![Next.js DevTools on mcp.tc](https://mcp.tc/i/nextjs-devtools/badge.svg)](https://mcp.tc/i/nextjs-devtools)
HTML
<a href="https://mcp.tc/i/nextjs-devtools"><img src="https://mcp.tc/i/nextjs-devtools/badge.svg" alt="Next.js DevTools on mcp.tc" height="20"></a>

listing.em.badge_note

listing.em.widget

HTML
<script src="https://mcp.tc/w/nextjs-devtools.js" async></script>

listing.em.widget_note

iframe

HTML
<iframe src="https://mcp.tc/embed/nextjs-devtools" title="Next.js DevTools on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

listing.em.iframe_note

JSON

listing.em.json_local

https://mcp.tc/i/nextjs-devtools.json

listing.em.fields

listing.related

listing.more_in

  • Grep by Vercelvf.sr

    Vercel

    state.ok.label (state.ok.title)

    Search real code across a million public GitHub repositories with literal and regex patterns.

    mcp.tc/i/grep

  • Vercelvf.sr

    Cloud & DevOps

    state.auth.label (state.auth.title)

    Manage Vercel teams, projects and deployments, search Vercel docs and query Web Analytics from your AI assistant.

    mcp.tc/i/vercel

  • Laravel Boost

    Laravel

    state.local.label (state.local.title)

    Give AI agents Laravel-aware context and version-specific docs search while working on a local Laravel app.

    mcp.tc/i/laravel-boost

  • shadcn/ui

    shadcn

    state.local.label (state.local.title)

    Browse, search and install shadcn/ui components and other registry components into your project from your assistant.

    mcp.tc/i/shadcn

  • Spec Workflow MCP

    Pimzino

    state.local.label (state.local.title)

    Run a spec-driven development workflow (requirements, design, tasks) with approvals and a live web dashboard.

    mcp.tc/i/spec-workflow

  • Angular CLIvf.sr

    Google (Angular)

    state.local.label (state.local.title)

    Get Angular best practices, documentation search and workspace-aware tools from the Angular CLI inside your assistant.

    mcp.tc/i/angular-cli

listing.disclaimer_checked