Next.js DevTools MCP

आधिकारिक

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

GitHub

807

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

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

दस्तावेज़

Next.js DevTools MCP

next-devtools-mcp एक मॉडल कॉन्टेक्स्ट प्रोटोकॉल (MCP) सर्वर है जो Claude और Cursor जैसे कोडिंग एजेंटों को आपके चल रहे 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 में इंस्टॉल करें

या 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+ डिफ़ॉल्ट रूप से http://localhost:3000/_next/mcp पर अपना 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।

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

दस्तावेज़ प्राप्त नहीं करता है। Next.js 16+ अपने पूर्ण दस्तावेज़ (मार्कडाउन, आपके स्थापित संस्करण से मेल खाते हुए) node_modules/next/dist/docs/ पर भेजता है। यह टूल वह पथ लौटाता है और इसे कैसे पढ़ना है, ताकि एजेंट प्रशिक्षण-डेटा अनुमानों के बजाय संस्करण-सटीक दस्तावेज़ों का उपयोग करे। पुराने Next.js पर, यह npx @next/codemod@latest upgrade latest की अनुशंसा करता है।

इनपुट: topic (वैकल्पिक), project_path (वैकल्पिक, cwd पर डिफ़ॉल्ट)।

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

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

लाइसेंस

MIT