nextjs-devtools skill
scriptsInspect routes, components, build information, and configuration settings for Next.js applications via MCP.
- GitHub stars
- 28
- Files
- 3
- Last commit
- Aug 12, 2026
- License
- —
- Allowed tools
- —
What does the nextjs-devtools skill do?
nextjs-devtools inspects routes, components, build information, and configuration settings for Next.js applications via MCP.
Summary generated from the skill's SKILL.md.
About the nextjs-devtools skill
Developers working on Next.js applications can use this tool to inspect application structures and debug routing issues directly through an MCP client. An agent should load this skill when it needs to examine the specific architecture of a Next.js project, such as identifying available routes or discovering React components within the app. It provides access to internal application data that helps clarify how a project is organized.
The skill offers specific tools like list-routes, get-route-info, and list-components to map out the application. It also allows for the inspection of build configurations via get-build-info and the retrieval of settings from next.config.js using get-config. Users can run the server on-demand using npx or start a persistent server with a shell script. Note that this is strictly for Next.js projects and requires the agent to be running from the project root to find routes successfully.
What an agent can do with it
- 1Mapping application routesAn AI agent can retrieve a complete list of all available routes within a Next.js application.
- 2Investigating specific route detailsYou can ask the agent to find detailed information regarding a specific path like an API endpoint.
- 3Auditing project configurationA developer can use the agent to check the settings defined in the next.config.js file.
- 4Discovering React componentsThe agent can scan the application to identify which React components are present.
Written from the skill's SKILL.md. Every use case is checked against a quote from it.
How to install the nextjs-devtools skill
Each command copies the skill folder into the client's skills directory. Restart the client or start a new session to load it.Install the nextjs-devtools skill in Claude Code
~/.claude/skills/nextjs-devtools/SKILL.md
$ npx degit mjunaidca/mjs-agent-skills/.claude/skills/nextjs-devtools ~/.claude/skills/nextjs-devtoolsInstall the nextjs-devtools skill in Claude Code (project)
.claude/skills/nextjs-devtools/SKILL.md
$ npx degit mjunaidca/mjs-agent-skills/.claude/skills/nextjs-devtools .claude/skills/nextjs-devtoolsInstall the nextjs-devtools skill in Codex
~/.agents/skills/nextjs-devtools/SKILL.md
$ npx degit mjunaidca/mjs-agent-skills/.claude/skills/nextjs-devtools ~/.agents/skills/nextjs-devtoolsInstall the nextjs-devtools skill in Gemini CLI
~/.gemini/skills/nextjs-devtools/SKILL.md
$ npx degit mjunaidca/mjs-agent-skills/.claude/skills/nextjs-devtools ~/.gemini/skills/nextjs-devtoolsInstall the nextjs-devtools skill in Claude.ai
npx degit mjunaidca/mjs-agent-skills/.claude/skills/nextjs-devtools nextjs-devtools && zip -r nextjs-devtools.zip nextjs-devtools # claude.ai → Customize → Skills → + → Create skill → Upload a skill → nextjs-devtools.zip
SKILL.md
View on GitHubNext.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 |
Files in this skill
3nextjs-devtools skill questions
How do I install the nextjs-devtools skill in Claude Code?
Run npx degit mjunaidca/mjs-agent-skills/.claude/skills/nextjs-devtools ~/.claude/skills/nextjs-devtools. Claude Code loads skills from ~/.claude/skills (all projects) or .claude/skills (one project) and uses a skill when its description matches the task.
Which clients can use the nextjs-devtools skill?
Any client that reads the Agent Skills format: Claude Code, Codex, Gemini CLI and claude.ai (upload as a ZIP). Scripts in the skill run only where the client allows code execution.
What should I do if no routes are found?
Make sure you are running the tool from the root directory of your Next.js project.
Why is my build information empty?
You need to run the next build command before checking the build information.