How do I install the Nextjs Devtools skill?

Run npx get-skill add tomevault-io/nextjs-devtools in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Nextjs Devtools safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Nextjs Devtools?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Nextjs Devtools free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Nextjs Devtools?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Nextjs Devtools by tomevault-io — Agent Skill

Name: Nextjs Devtools
Author: tomevault-io

File contents

name: nextjs-devtools description: | Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps. Use when working on Next.js applications, debugging routing, or inspecting app structure. NOT for general React or non-Next.js projects.

Next.js DevTools

Inspect and debug Next.js applications via MCP server.

Quick Start

# Start server (spawns on-demand)
bash scripts/start-server.sh

# Or use directly via mcp-client
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t list-routes

Available Tools

Tool	Description
`list-routes`	Get all app routes
`get-route-info`	Details for specific route
`list-components`	React components in app
`get-build-info`	Build configuration
`get-config`	next.config.js settings

Workflow Patterns

Pattern 1: Route Inspection

# List all routes
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t list-routes

# Get specific route details
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t get-route-info \
  -p '{"route": "/api/auth"}'

Pattern 2: Debug Build Issues

# Check build config
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t get-build-info

# Check next.config.js
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t get-config

Pattern 3: Component Discovery

python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t list-components

Scripts

start-server.sh

For persistent server (multiple calls):

bash scripts/start-server.sh
# Server runs on default port
# Use mcp-client.py with -u flag instead of -s

On-Demand (Recommended)

For single calls, use -s flag which spawns server per-call:

python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t <tool-name>

Troubleshooting

Issue	Solution
Server not starting	Check `npx next-devtools-mcp@latest` works manually
No routes found	Ensure running from Next.js project root
Build info empty	Run `next build` first

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: nextjs-devtoolsdescription: Use when working on Next.js applications, debugging routing, or inspecting app structure.------name: nextjs-devtoolsdescription: | Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps. Use when working on Next.js applications, debugging routing, or inspecting app structure. NOT for general React or non-Next.js projects.---# Next.js DevToolsInspect and debug Next.js applications via MCP server.## Quick Start```bash# Start server (spawns on-demand)bash scripts/start-server.sh# Or use directly via mcp-clientpython3 scripts/mcp-client.py call \ -s "npx next-devtools-mcp@latest" \ -t list-routes```## Available Tools| Tool | Description ||------|-------------|| `list-routes` | Get all app routes || `get-route-info` | Details for specific route || `list-components` | React components in app || `get-build-info` | Build configuration || `get-config` | next.config.js settings |## Workflow Patterns### Pattern 1: Route Inspection```bash# List all routespython3 scripts/mcp-client.py call \ -s "npx next-devtools-mcp@latest" \ -t list-routes# Get specific route detailspython3 scripts/mcp-client.py call \ -s "npx next-devtools-mcp@latest" \ -t get-route-info \ -p '{"route": "/api/auth"}'```### Pattern 2: Debug Build Issues```bash# Check build configpython3 scripts/mcp-client.py call \ -s "npx next-devtools-mcp@latest" \ -t get-build-info# Check next.config.jspython3 scripts/mcp-client.py call \ -s "npx next-devtools-mcp@latest" \ -t get-config```### Pattern 3: Component Discovery```bashpython3 scripts/mcp-client.py call \ -s "npx next-devtools-mcp@latest" \ -t list-components```## Scripts### start-server.shFor persistent server (multiple calls):```bashbash scripts/start-server.sh# Server runs on default port# Use mcp-client.py with -u flag instead of -s```### On-Demand (Recommended)For single calls, use `-s` flag which spawns server per-call:```bashpython3 scripts/mcp-client.py call \ -s "npx next-devtools-mcp@latest" \ -t <tool-name>```## Troubleshooting| Issue | Solution ||-------|----------|| Server not starting | Check `npx next-devtools-mcp@latest` works manually || No routes found | Ensure running from Next.js project root || Build info empty | Run `next build` first |---> Converted and distributed by [TomeVault](https://tomevault.io/claim/muhammadwaheedairi) — claim your Tome and manage your conversions.

Frequently asked questions

Nextjs Devtools