{"library":"next-devtools-mcp","title":"Next.js DevTools MCP","description":"Next.js DevTools MCP (Model Context Protocol) is a server-side component designed to extend Next.js development environments with AI agent capabilities. It provides a standardized interface for coding agents like Claude or Cursor to interact with and introspect running Next.js applications, enabling advanced features such as runtime diagnostics, code generation, and debugging assistance. The current stable version is `0.3.10`, with frequent patch releases indicating active development and a focus on stability, security, and incremental improvements. Key differentiators include its tight integration with the Next.js ecosystem, leveraging its internal mechanisms for deep introspection, and its adherence to the Model Context Protocol, making it compatible with a growing number of AI developer tools. It acts as a crucial bridge, allowing AI agents to understand the context of a Next.js project and provide highly relevant assistance, offering capabilities like automated upgrades, Cache Component setup, and access to documentation.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install next-devtools-mcp"],"cli":{"name":"next-devtools-mcp","version":null}},"imports":["npx -y next-devtools-mcp@latest","import { spawn } from 'child_process';\n\nconst mcpProcess = spawn('npx', ['-y', 'next-devtools-mcp@latest'], {\n  stdio: ['inherit', 'inherit', 'inherit'],\n  shell: true\n});\n\nmcpProcess.on('error', (err) => console.error('Failed to start MCP server:', err));\nmcpProcess.on('exit', (code) => console.log(`MCP server exited with code ${code}`));","{\n  \"mcpServers\": {\n    \"next-devtools\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"next-devtools-mcp@latest\"]\n    }\n  }\n}"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"{\n  \"name\": \"my-next-app\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"react\": \"^19.0.0\",\n    \"react-dom\": \"^19.0.0\",\n    \"next\": \"^16.0.7\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"^5\",\n    \"@types/node\": \"^20\",\n    \"@types/react\": \"^19\",\n    \"@types/react-dom\": \"^19\",\n    \"eslint\": \"^8\",\n    \"eslint-config-next\": \"16.0.7\"\n  }\n}\n\n// 1. Create a Next.js 16+ project (if you don't have one)\n// npx create-next-app@latest my-next-app --ts\n// cd my-next-app\n\n// 2. Start your Next.js development server (in a separate terminal):\n// npm run dev\n\n// 3. Configure your AI agent (e.g., Cursor, Claude Code, Gemini) to use the next-devtools-mcp server.\n//    Add this to your MCP client's configuration file (e.g., .cursor/mcp.json, .mcp.json, etc.):\n/*\n{\n  \"mcpServers\": {\n    \"next-devtools\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"next-devtools-mcp@latest\"]\n    }\n  }\n}\n*/\n\n// 4. Once configured, your AI agent can now use Next.js DevTools capabilities.\n//    Example CLI command to add the server (specific to your client, e.g., for Gemini):\n// gemini mcp add next-devtools npx next-devtools-mcp@latest\n","lang":"typescript","description":"Demonstrates how to set up and run a Next.js 16+ project, and then configure an AI agent to connect to the `next-devtools-mcp` server for enhanced development capabilities and runtime diagnostics.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}