Next.js DevTools MCP

आधिकारिक

next-devtools-mcp एक MCP सर्वर है जो Claude और Cursor जैसे AI कोडिंग सहायकों के लिए Next.js विकास उपकरण और उपयोगिताएँ प्रदान करता है।

GitHub

822

इस MCP को आज़माएँप्रायोजित

Next Js DevTools MCP के साथ आप क्या कर सकते हैं?

डेव सर्वर खोजें — अपने असिस्टेंट से nextjs_index चलाने और चल रहे Next.js 16+ डेव सर्वरों को उनके रनटाइम टूल्स के साथ सूचीबद्ध करने के लिए कहें।
लाइव ऐप स्थिति क्वेरी करें — किसी विशिष्ट डेव सर्वर पोर्ट से वर्तमान त्रुटियाँ, रूट्स, लॉग्स, या सर्वर एक्शन प्राप्त करने के लिए nextjs_call का उपयोग करें।
संस्करण-सटीक दस्तावेज़ खोजें — अपने इंस्टॉल किए गए संस्करण के लिए node_modules/next/dist/docs/ में बंडल किए गए Next.js दस्तावेज़ों का पता लगाने हेतु nextjs_docs का उपयोग करें।
ब्राउज़र स्वचालन सेट करें — browser_eval से agent-browser का पता लगाने और इंस्टॉल चरण या सीधे उपयोग के लिए CLI एंट्री पॉइंट लौटाने के लिए कहें।

दस्तावेज़

Next.js DevTools MCP

next-devtools-mcp एक मॉडल कॉन्टेक्स्ट प्रोटोकॉल (MCP) सर्वर है जो क्लाउड और कर्सर जैसे कोडिंग एजेंटों को आपके चल रहे Next.js डेव सर्वर से जोड़ता है।

यह एक पतला कनेक्टर है। यह चल रहे Next.js 16+ डेव सर्वरों को खोजता है और उनके अंतर्निहित MCP एंडपॉइंट (/_next/mcp) को प्रॉक्सी करता है ताकि एजेंटों को लाइव रनटाइम त्रुटियाँ, रूट्स और लॉग मिल सकें। यह दो गेटवे भी भेजता है जो एजेंटों को उन टूल्स की ओर इंगित करते हैं जिन्हें वे सीधे चलाते हैं: संस्करण-सटीक दस्तावेज़ और agent-browser CLI।

[!NOTE] दस्तावेज़ और माइग्रेशन वर्कफ़्लो अब इस सर्वर में नहीं रहते। Next.js अपने दस्तावेज़ node_modules/next/dist/docs/ पर बंडल करता है, और अपग्रेड / कैश कंपोनेंट्स वर्कफ़्लो एजेंट कौशल के रूप में वितरित किए जाते हैं। 0.3.x से माइग्रेट करना देखें।

आवश्यकताएँ

Node.js v20.19 या नया LTS संस्करण
npm या pnpm
Next.js 16+ चल रहे डेव सर्वर के साथ (nextjs_index / nextjs_call के लिए)

इंस्टॉल करें

अपने सभी कोडिंग एजेंटों के लिए add-mcp के साथ इंस्टॉल करें:

npx add-mcp next-devtools-mcp@latest

प्रॉम्प्ट छोड़ने और सभी पहचाने गए एजेंटों में इंस्टॉल करने के लिए -y जोड़ें। सभी प्रोजेक्ट्स में वैश्विक रूप से इंस्टॉल करने के लिए -g जोड़ें।

या कॉन्फ़िगरेशन को अपने MCP क्लाइंट में मैन्युअल रूप से जोड़ें:

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

[!NOTE] next-devtools-mcp@latest आपके क्लाइंट को नवीनतम संस्करण पर रखता है।

क्लाइंट-विशिष्ट सेटअप

Amp

amp mcp add next-devtools -- npx next-devtools-mcp@latest

या ऊपर दिए गए कॉन्फ़िगरेशन के साथ Amp के MCP दस्तावेज़ का पालन करें।

Claude Code

claude mcp add next-devtools npx next-devtools-mcp@latest

या ऊपर दिए गए कॉन्फ़िगरेशन के साथ अपनी MCP सेटिंग्स फ़ाइल संपादित करें।

Codex

codex mcp add next-devtools -- npx next-devtools-mcp@latest

Windows 11: .codex/config.toml में पर्यावरण चर और लंबा स्टार्टअप टाइमआउट जोड़ें:

env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

Cursor

कर्सर में इंस्टॉल करें

या Cursor Settings → MCP → New MCP Server पर जाएं और ऊपर दिए गए कॉन्फ़िगरेशन का उपयोग करें।

Gemini

# Project
gemini mcp add next-devtools npx next-devtools-mcp@latest

# Global
gemini mcp add -s user next-devtools npx next-devtools-mcp@latest

Google Antigravity

.gemini/antigravity/mcp_config.json में जोड़ें:

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

Antigravity MCP दस्तावेज़ देखें।

VS Code / Copilot

code --add-mcp '{"name":"next-devtools","command":"npx","args":["-y","next-devtools-mcp@latest"]}'

या आधिकारिक VS Code MCP सेटअप गाइड का पालन करें।

Warp

Settings | AI | Manage MCP Servers → + Add:

नाम: next-devtools
कमांड: npx
तर्क: -y, next-devtools-mcp@latest

त्वरित प्रारंभ

अपना Next.js डेव सर्वर प्रारंभ करें:

npm run dev

Next.js 16+ अपने MCP एंडपॉइंट को डिफ़ॉल्ट रूप से http://localhost:3000/_next/mcp पर सक्षम करता है। next-devtools-mcp इसे स्वचालित रूप से खोजता और कनेक्ट करता है — कोई कॉन्फ़िगरेशन आवश्यक नहीं।

फिर अपने एजेंट से चल रहे ऐप के बारे में पूछें:

Next Devtools, what errors are in my Next.js application?
Next Devtools, show me the structure of my routes
Next Devtools, what's in the development server logs?

एजेंट सर्वरों को खोजने के लिए nextjs_index कॉल करता है, फिर उनकी वास्तविक स्थिति को क्वेरी करने के लिए nextjs_call कॉल करता है।

टूल्स

टूल	यह क्या करता है
`nextjs_index`	चल रहे Next.js डेव सर्वरों को खोजें और प्रत्येक के रनटाइम MCP टूल्स की सूची बनाएं।
`nextjs_call`	खोजे गए सर्वर पर रनटाइम टूल कॉल करें (त्रुटियाँ, रूट्स, लॉग, सर्वर एक्शन)।
`nextjs_docs`	गेटवे। एजेंट को `node_modules/next/dist/docs/` में संस्करण-सटीक दस्तावेज़ों की ओर इंगित करें।
`browser_eval`	गेटवे। ब्राउज़र स्वचालन के लिए एजेंट को `agent-browser` CLI की ओर इंगित करें।

गेटवे स्वयं काम नहीं करते — वे एजेंट को बताते हैं कि दस्तावेज़ कहाँ हैं या CLI कैसे इंस्टॉल/चलाएं, और एजेंट इसे सीधे चलाता है (MCP के माध्यम से प्रॉक्सी करने से तेज़)।

nextjs_index — सर्वर खोजें

चल रहे Next.js 16+ डेव सर्वरों के लिए सामान्य पोर्ट स्कैन करता है और प्रत्येक सर्वर के अंतर्निहित रनटाइम टूल्स को /_next/mcp पर सूचीबद्ध करता है। कोई पैरामीटर नहीं।

Next.js द्वारा उजागर रनटाइम टूल्स (संस्करण के अनुसार भिन्न):

get_errors — वर्तमान बिल्ड, रनटाइम और प्रकार की त्रुटियाँ
get_logs — डेव लॉग फ़ाइल का पथ (ब्राउज़र कंसोल + सर्वर आउटपुट)
get_page_metadata — रूट्स, पेज, कंपोनेंट मेटाडेटा
get_project_metadata — प्रोजेक्ट संरचना, कॉन्फ़िगरेशन, डेव सर्वर URL
get_server_action_by_id — सर्वर एक्शन ID को उसकी स्रोत फ़ाइल में हल करें

आउटपुट: खोजे गए सर्वरों (पोर्ट, PID, URL) और उनके टूल्स को सूचीबद्ध करने वाला JSON।

nextjs_call — रनटाइम टूल चलाएं

खोजे गए सर्वर पर एक रनटाइम टूल कॉल करता है। पोर्ट और टूल नाम खोजने के लिए पहले nextjs_index चलाएं।

इनपुट:

port (आवश्यक) — डेव सर्वर पोर्ट
toolName (आवश्यक) — आमंत्रित करने के लिए रनटाइम टूल
args (वैकल्पिक) — तर्क ऑब्जेक्ट, केवल यदि टूल को उनकी आवश्यकता हो

{ "port": 3000, "toolName": "get_errors" }

आउटपुट: टूल के परिणाम के साथ JSON। अपस्ट्रीम अनुरोध, जिसमें प्रतिक्रिया-बॉडी रीड शामिल हैं, की 60-सेकंड की समय सीमा होती है। MCP अनुरोध रद्द करना उसके अपस्ट्रीम नेटवर्क कार्य को समाप्त करता है; खोज प्रोटोकॉल का पता लगाने के लिए उपयोग की जाने वाली प्रतिक्रिया बॉडी को भी जारी करती है।

nextjs_docs — संस्करण-सटीक दस्तावेज़ खोजें

दस्तावेज़ नहीं लाता। हाल के Next.js रिलीज़ अपने दस्तावेज़ (मार्कडाउन, आपके स्थापित संस्करण से मेल खाते हुए) node_modules/next/dist/docs/ पर बंडल करते हैं। यह टूल पढ़ने के निर्देश लौटाने से पहले उन फ़ाइलों की जाँच करता है। यदि किसी स्थापित रिलीज़ में बंडल किए गए दस्तावेज़ नहीं हैं (प्रारंभिक 16.x रिलीज़ सहित), तो यह फ़ॉलबैक के रूप में https://nextjs.org/docs प्रदान करता है और एजेंट से स्थापित संस्करण के विरुद्ध API सत्यापित करने के लिए कहता है। लापता निर्भरताओं को स्थापना मार्गदर्शन प्राप्त होता है। Next.js 16 से नीचे, यह npx @next/codemod@latest upgrade latest की अनुशंसा करता है।

इनपुट: topic (वैकल्पिक), project_path (वैकल्पिक, cwd पर डिफ़ॉल्ट)। टूल उस प्रोजेक्ट से next/package.json हल करता है, जिसमें होइस्टेड वर्कस्पेस निर्भरताएँ शामिल हैं, और स्थापित पैकेज के लिए एक पूर्ण docsPath लौटाता है।

browser_eval — ब्राउज़र स्वचालन सेट करें

ब्राउज़र नहीं चलाता। यह पता लगाता है कि agent-browser स्थापित है या नहीं और या तो प्रवेश बिंदु (agent-browser skills get core --full) या स्थापना चरण (npm install -g agent-browser, फिर agent-browser install) लौटाता है, ताकि एजेंट CLI को सीधे चलाए।

इनपुट: task (वैकल्पिक) — केवल मार्गदर्शन को अनुकूलित करने के लिए उपयोग किया जाता है।

0.3.x से माइग्रेट करना

0.4.0 से शुरू करते हुए, next-devtools-mcp एक पतला कनेक्टर है।

बदला गया:

nextjs_docs अब नेटवर्क पर दस्तावेज़ नहीं लाता। यह एजेंट को उन दस्तावेज़ों की ओर इंगित करता है जिन्हें Next.js node_modules/next/dist/docs/ पर बंडल करता है (या अपग्रेड करने की अनुशंसा करता है)। nextjs-docs://llms-index संसाधन हटा दिया गया है।

हटाया गया:

init टूल — यह केवल पुराने दस्तावेज़-लाने वाले वर्कफ़्लो को लागू करता था।
upgrade_nextjs_16 और enable_cache_components टूल और उनके प्रॉम्प्ट — अब एजेंट कौशल के रूप में वितरित।
सभी cache-components://, nextjs16://, और nextjs-fundamentals:// संसाधन — बंडल किए गए दस्तावेज़ों द्वारा प्रतिस्थापित।

जो बचा है: nextjs_index, nextjs_call, nextjs_docs, और browser_eval।

गोपनीयता और टेलीमेट्री

next-devtools-mcp टूल को बेहतर बनाने के लिए अनाम उपयोग टेलीमेट्री एकत्र करता है:

टूल उपयोग — कौन से MCP टूल आमंत्रित किए जाते हैं (जैसे nextjs_index, nextjs_call)
त्रुटि घटनाएँ — टूल विफल होने पर अनाम त्रुटि संदेश
सत्र मेटाडेटा — सत्र ID, टाइमस्टैम्प, बुनियादी पर्यावरण (OS, Node.js संस्करण)

एकत्र नहीं किया गया: आपका कोड, फ़ाइल सामग्री या पथ, व्यक्तिगत डेटा, क्रेडेंशियल, या टूल तर्क (केवल टूल नाम)।

स्थानीय फ़ाइलें ~/.next-devtools-mcp/ के अंतर्गत रहती हैं (अनाम telemetry-id, telemetry-salt, और एक डिबग लॉग mcp.log)।

ऑप्ट आउट पर्यावरण चर सेट करके (इसे बनाए रखने के लिए ~/.zshrc / ~/.bashrc में जोड़ें):

export NEXT_TELEMETRY_DISABLED=1

किसी भी समय स्थानीय टेलीमेट्री डेटा हटाएं:

rm -rf ~/.next-devtools-mcp

समस्या निवारण

ERR_MODULE_NOT_FOUND next-devtools-mcp/dist का संदर्भ दे रहा है — अपना npx कैश साफ़ करें और अपने MCP क्लाइंट को पुनरारंभ करें। सर्वर ताज़ा पुनः इंस्टॉल करता है।

[error] No server info found — nextjs_index / nextjs_call को चल रहे Next.js 16+ डेव सर्वर की आवश्यकता है:

इसे प्रारंभ करें: npm run dev
Next.js 16+ की पुष्टि करें (/_next/mcp एंडपॉइंट केवल वहाँ मौजूद है)
सत्यापित करें कि यह त्रुटियों के बिना प्रारंभ हुआ

browser_eval और nextjs_docs डेव सर्वर के बिना काम करते हैं।

स्थानीय विकास

git clone https://github.com/vercel/next-devtools-mcp.git
cd next-devtools-mcp
pnpm install
pnpm build

अपने MCP क्लाइंट को स्थानीय बिल्ड की ओर इंगित करें:

{
  "mcpServers": {
    "next-devtools": {
      "command": "node",
      "args": ["/absolute/path/to/next-devtools-mcp/dist/index.js"]
    }
  }
}

या Codex के साथ:

codex mcp add next-devtools-local -- node dist/index.js

MCP Next.js और कोडिंग एजेंटों के साथ कैसे काम करता है, इसके लिए Next.js MCP दस्तावेज़ीकरण देखें।

लाइसेंस

MIT