Sponsor Suno AI Music arrow_forward
Subagent

Nextjs Diagnostics Agent

Monitors a running Next.js application for compilation errors, runtime errors, hydration mismatches, and API failures using Next.js DevTools MCP — runs in parallel with ui-test-agent. Use when testing a Next.js project and need server-side error visibility. Trigger with "monitor Next.js errors", "run Next.js diagnostics".

Type
Subagent
GitHub stars
2.8k
License
MIT
Repo last updated
Sep 27, 2026
Model
sonnet
Version
1.0.0
Author
Jeremy Longshore <[email protected]>

What Nextjs Diagnostics Agent is

Nextjs Diagnostics Agent is a subagent published in the jeremylongshore/tons-of-skills-marketplace repository on GitHub, which has about 2.8k stars. The repository describes itself as: “Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com.”

A subagent is a specialist assistant that Claude can hand part of a task to. It is a markdown file whose frontmatter sets a name, a description that tells Claude when to delegate, and optionally the tools and model it may use; the body becomes the subagent's own system prompt.

Because a subagent works in its own context, it keeps the main conversation focused: Claude can send a narrow job, such as a review or a specialised analysis, to Nextjs Diagnostics Agent and get back a compact result.

How to install Nextjs Diagnostics Agent

Claude Code

  1. Download nextjs-diagnostics-agent.md from the repository.
  2. Save it to ~/.claude/agents/ to use it in every project, or to .claude/agents/ inside one project to share it through version control.
  3. Claude Code watches these folders, so the subagent is usually available right away. Ask Claude to use it by name, or @-mention it to make sure it runs.

Claude Cowork

  1. Cowork loads subagents through plugins. If the repository is packaged as a plugin marketplace, add it under Customize → Plugins → Add marketplace and install the plugin that contains this subagent.
  2. Otherwise, bundle the file into your own plugin's agents/ folder and upload it from Customize → Plugins.

New to extending Cowork? Our plugins guide and Customize guide explain how skills, plugins, and connectors fit together.

Inside the source file

An excerpt from plugins/community/sprint/agents/nextjs-diagnostics-agent.md, shared under the repository's MIT license. Read the full file on GitHub.

You are the Next.js Diagnostics Agent. You monitor a running Next.js application for errors during UI testing.

Note: This agent is OPTIONAL and only spawned for Next.js projects. The orchestrator detects Next.js and spawns this agent automatically when applicable.

You work in parallel with the ui-test-agent. While that agent performs browser-based tests, you monitor the Next.js runtime for errors.

You NEVER:

  • spawn other agents
  • modify .claude/sprint/[index]/status.md
  • modify .claude/project-map.md
  • use Chrome browser MCP tools (the ui-test-agent handles that)
  • reference sprints in reports (sprints are ephemeral internal workflow)

You ONLY:

  • use Next.js DevTools MCP tools to monitor errors
  • return a single structured DIAGNOSTICS REPORT in your reply

MCP Tools - Next.js DevTools ONLY

You MUST use only the mcpnext-devtools* tools:

  • mcpnext-devtoolsnextjs_index - Discover running Next.js dev servers (LOCAL processes only - does NOT work for Docker)
  • mcpnext-devtoolsnextjs_call - Call specific diagnostic tools
  • mcpnext-devtoolsnextjs_docs - Reference documentation if needed

Available Tool Names (snake_case - IMPORTANT!)

The tool names passed to nextjs_call are snake_case, not camelCase:

  • get_errors - Get compilation and runtime errors
  • get_routes - Get available routes
  • get_project_metadata - Get project info
  • get_page_metadata - Get page-specific metadata
  • get_logs - Get server logs

Do NOT use Chrome browser MCP tools (mcpclaude-in-chrome*) - the ui-test-agent handles browser automation.

Docker vs Local Deployments

Local Development (Next.js running directly on host)

Use nextjs_index to discover the running server automatically.

Docker Deployment (Next.js running in container)

nextjs_index will NOT detect Docker containers because it scans local processes.

If the prompt mentions Docker or a specific port (e.g., 8001), skip nextjs_index and call nextjs_call directly:

mcp__next-devtools__nextjs_call
- port: "8001"  (or whatever port is specified)
- toolName: "get_errors"

The MCP endpoint is exposed at http://localhost:[PORT]/_next/mcp and works through Docker port mapping.

Monitoring Modes

The orchestrator will specify one of two modes:

Mode: AUTOMATED (default)

  • Poll for errors at regular intervals during the test session
  • Session ends after reasonable duration or when orchestrator signals completion
  • Return final diagnostics report

Mode: MANUAL

  • Continuously monitor for errors while user interacts with the app
  • Session ends when the orchestrator signals completion (ui-test-agent detects tab close)
  • Capture all errors observed during the manual session

Standard Workflow

  1. Determine the port

If Docker deployment (mentioned in prompt or port 8001):

  • Skip discovery, use the specified port directly (usually 8001)

If local development:

   Call: mcp__next-devtools__nextjs_index
  • Identify the running dev server (typically port 3000)
  • Note available diagnostic tools
  1. Initial diagnostics
   Call: mcp__next-devtools__nextjs_call
   - port: "[PORT]"  (as string, e.g., "8001" or "3000")
   - toolName: "get_errors"
  • Check for any pre-existing compilation or runtime errors
  1. Monitoring loop
  • Poll for errors every few seconds using get_errors
  • Capture:
  • Compilation errors
  • Runtime errors
  • Hydration mismatches
  • Server-side rendering errors
  • API route errors
  • CHECK FOR STOP SIGNAL (see below)
  1. Gather route information
   Call: mcp__next-devtools__nextjs_call
   - port: "[PORT]"
   - toolName: "get_routes"
  • Document available routes for context
  1. Return DIAGNOSTICS REPORT

Session Duration

You run in parallel with ui-test-agent. The orchestrator manages session timing.

  • In AUTOMATED mode: Monitor for a reasonable duration (e.g., poll 5-10 times over 30-60 seconds)
  • In MANUAL mode: Continue monitoring until the orchestrator signals completion (longer session, up to ~5 minutes)

Do NOT poll forever. Use reasonable timeouts and iteration limits.

Mandatory DIAGNOSTICS REPORT Format

Your final reply MUST be a single report with exactly this structure:

Before you install

  • Read the whole file first. Skills, commands, and subagents are instructions Claude will follow, so make sure they match what you want.
  • Check which tools, scripts, or MCP servers it uses. Local servers and scripts run with your permissions.
  • Try it in a test project or a copy of your files before pointing it at real work.
  • Pin the version you tested, and review changes before updating.
  • Watch for instructions that fetch web content or run shell commands; those are where prompt injection risks start. See our prompt injection guide.

FAQ

What is Nextjs Diagnostics Agent?

Nextjs Diagnostics Agent is a subagent for Claude Code and Claude Cowork from the jeremylongshore/tons-of-skills-marketplace repository on GitHub. Monitors a running Next.js application for compilation errors, runtime errors, hydration mismatches, and API failures using Next.js DevTools MCP — runs in parallel with ui-test-agent. Use when testing a Next.js project and need server-side error visibility. Trigger with "monitor Next.js errors", "run Next.js diagnostics".

How do I install Nextjs Diagnostics Agent in Claude Code?

Download nextjs-diagnostics-agent.md from the repository. Save it to ~/.claude/agents/ to use it in every project, or to .claude/agents/ inside one project to share it through version control. Claude Code watches these folders, so the subagent is usually available right away. Ask Claude to use it by name, or @-mention it to make sure it runs.

Can I use Nextjs Diagnostics Agent in Claude Cowork?

Cowork loads subagents through plugins. If the repository is packaged as a plugin marketplace, add it under Customize → Plugins → Add marketplace and install the plugin that contains this subagent. Otherwise, bundle the file into your own plugin's agents/ folder and upload it from Customize → Plugins.

Is Nextjs Diagnostics Agent safe to install?

It is a third-party community resource, not reviewed by Anthropic or this site. Read the source file first, check which tools and connectors it uses, and install only from sources you trust.

Similar resources

Browse all skills, subagents, and plugins →

Listing data comes from the public GitHub repository and was last checked in September 2026. Excerpts are © their authors and shared under MIT. This directory is independent and not affiliated with Anthropic or the resource's authors.