skills.rest
92Bilal26
92Bilal26COMMUNITY
Explore all skills by this author →
GitHub

nextjs-devtools

Inspect Next.js routes, components, and build information via MCP.

Updated Dec 7, 2025
Search Tags:#debugging#next.js#mcp#devtools#mcp-client#route inspection
One-click install
npx skills add https://github.com/92Bilal26/TaskPilotAI --skill nextjs-devtools-92bilal26
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-devtools
Source: https://github.com/92Bilal26/TaskPilotAI/tree/main/.claude/skills/nextjs-devtools
Command: npx skills add https://github.com/92Bilal26/TaskPilotAI --skill nextjs-devtools-92bilal26

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill provides MCP-based tooling to inspect Next.js routes, components, and build information, enabling faster debugging and app discovery.

Core Features & Use Cases

  • Inspect routes, components, and build info for Next.js applications.
  • Debug and explore Next.js projects within an MCP-enabled workflow.
  • Not applicable to general React or non-Next.js projects.
  • On-demand access to MCP tools via the included mcp-client and start-server.sh scripts, enabling quick, repeatable tasks.

Quick Start

Start the MCP server with bash scripts/start-server.sh (default port 8809), or run commands directly with the mcp-client. Examples:

  • List available tools: python3 scripts/mcp-client.py list --url http://localhost:8809
  • List routes: python3 scripts/mcp-client.py call -s "npx next-devtools-mcp@latest" -t list-routes
  • Get route info: python3 scripts/mcp-client.py call -s "npx next-devtools-mcp@latest" -t get-route-info -p '{"route":"/api/auth"}'

Frequently Asked Questions about nextjs-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I inspect Next.js routes and components using an MCP workflow?▼

You can inspect Next.js routes and components via MCP by starting a local server and using the mcp-client to call tools like list-routes and get-route-info. This exposes app structure, routing, and build info for debugging within an MCP-enabled workflow.

Can I use Next.js MCP DevTools to debug general React applications?▼

No, this debugging tool is specifically designed for Next.js projects and is not applicable to general React or non-Next.js projects. It focuses on Next.js routing, components, and build information within an MCP-enabled workflow.

What do I need to run an MCP server for Next.js debugging?▼

To run the MCP server for Next.js debugging, you need Node.js for npx and Python 3 to execute the mcp-client tooling. The server is started via the included scripts/start-server.sh file, defaulting to port 8809.

How do I get route information for a specific Next.js API endpoint via MCP?▼

To get Next.js route information via MCP, use the mcp-client to call the get-route-info tool with the npx next-devtools-mcp package. You pass the target route as a parameter, such as /api/auth, to inspect its configuration.

How do I list available MCP tools for a Next.js project?▼

To list available MCP tools for a Next.js project, run the mcp-client.py script with the list argument and the server URL. This queries the local MCP server, defaulting to port 8809, to expose all supported Next.js debugging commands.

What is the best way to explore Next.js build information during a debugging session?▼

The best way to explore Next.js build information is by using an MCP-enabled workflow with the next-devtools-mcp package. This approach exposes build info and app structure directly through repeatable Python and bash script commands.

Related Skills

Explore More Software Engineering Skills→
thisismynewfmail-uithisismynewfmail-ui

mcporter

List and interact with MCP servers and tools from the terminal.

Community
Intermediate
92Bilal2692Bilal26

nextjs-devtools

Inspect Next.js routes, components, and build information via MCP.

Community
Intermediate
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
AbdullahMalik17AbdullahMalik17
9

nextjs-devtools

Inspect Next.js routes, components, and build info via MCP server.

Community
Intermediate