# Windsurf MCP setup guide: हिंदी में पूरा step-by-step तरीका

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-10. 10 min read.
> Source: https://vp0.com/blogs/windsurf-mcp-setup-guide-hindi

MCP की मदद से Windsurf का Cascade बाहरी tools और design source तक पहुँचता है। config जोड़ें, refresh करें, और बस।

**TL;DR.** Windsurf में MCP (Model Context Protocol) setup करने का तरीका सीधा है: एक mcp_config.json फाइल में अपने servers add करें, Cascade को refresh करें, और बस। MCP की मदद से Windsurf का Cascade agent बाहरी tools और live context तक पहुँच जाता है, जैसे filesystem, GitHub, या design source। design के लिए सबसे काम का server VP0 का free vp0-mcp है, क्योंकि यह Cascade को असली, machine-readable app designs सीधे देता है, ताकि generate हुआ code एक असली layout से match करे।

अगर आप Windsurf में MCP (Model Context Protocol) setup करना चाहते हैं, तो इसका छोटा जवाब यह है: एक `mcp_config.json` फाइल में अपने servers add करें, Cascade को refresh करें, और बस। MCP की मदद से Windsurf का Cascade agent बाहरी tools और live context तक पहुँच जाता है, जैसे आपका filesystem, GitHub, या design source। design के लिए सबसे काम का server VP0 का free `vp0-mcp` है, क्योंकि यह Cascade को असली, machine-readable app designs सीधे देता है, ताकि generate हुआ code एक blank prompt की जगह एक असली layout से match करे।

आज हम आपको step-by-step बताने जा रहे हैं कि Windsurf में MCP कैसे setup करें, कौन-कौन से servers जोड़ने चाहिए, और आम गलतियाँ कैसे ठीक करें। यह guide developers के लिए है जो Windsurf को सिर्फ एक editor नहीं, बल्कि एक ऐसा agent बनाना चाहते हैं जो आपके tools के साथ काम करे।

## Windsurf में MCP क्या है और क्यों जरूरी है?

MCP एक open standard है जिसकी मदद से AI agent बाहरी tools और data sources से जुड़ता है। Windsurf का Cascade agent by default सिर्फ आपके code को देखता है, लेकिन MCP servers जोड़ने के बाद वह नई capabilities पा जाता है, जैसे किसी database को query करना, GitHub issues पढ़ना, या एक design library से screens लाना। आसान भाषा में, MCP वह pul है जो Cascade को आपके बाकी workflow से connect करता है।

[Model Context Protocol](https://modelcontextprotocol.io/introduction) को Anthropic ने introduce किया था, और अब Windsurf, Cursor, Claude Code जैसे कई tools इसे support करते हैं। इसकी सबसे बड़ी बात यह है कि एक ही standard है, यानी जो MCP server आप Windsurf में जोड़ते हैं, वही दूसरे tools में भी चलता है। इस तरह आपका setup portable रहता है। MCP की जरूरत तब पड़ती है जब आप चाहते हैं कि agent सिर्फ बातें न करे, बल्कि असली काम करे।

## Windsurf में MCP server कैसे add करें?

Windsurf में MCP server जोड़ने का तरीका एक config फाइल के through है, बिल्कुल Claude Desktop की तरह। सबसे पहले Windsurf Settings खोलें, Cascade section में जाएँ, और MCP या "Manage plugins" वाला option ढूँढें। यहाँ से आप एक `mcp_config.json` फाइल edit कर सकते हैं जो आमतौर पर `~/.codeium/windsurf/` folder में होती है।

config का format simple है:

```json
{
  "mcpServers": {
    "vp0": {
      "command": "npx",
      "args": ["-y", "vp0-mcp"]
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
    }
  }
}
```

हर server का एक `command` और `args` होता है, जो बताता है कि उसे कैसे चलाना है। फाइल save करने के बाद Cascade panel में refresh button दबाएँ, ताकि नए servers load हो जाएँ। जब server सही से जुड़ जाता है, तो Cascade में एक tools (hammer) icon दिखता है, जिसमें उस server के सारे available tools list होते हैं। [Windsurf की official MCP guide](https://docs.windsurf.com/windsurf/cascade/mcp) में हर step का detail है, लेकिन असली बात यह है: valid JSON, सही command, और एक refresh।

ध्यान रहे कि `npx` चलाने के लिए आपके system पर Node.js installed होना चाहिए। अगर Node नहीं है, तो server कभी load नहीं होगा।

## कौन-कौन से MCP servers add करने चाहिए?

यह depend करता है कि आप क्या build कर रहे हैं, इसलिए servers को अपने काम के हिसाब से चुनें। नीचे दी गई table आम servers और उनके उपयोग को साफ करती है।

| Server | किस काम के लिए | कब जोड़ें |
|---|---|---|
| vp0 (design source) | असली app designs Cascade को देता है | जब आप UI या app screens बना रहे हों |
| filesystem | project की files पढ़ना और लिखना | लगभग हर project में काम का |
| github | issues, PRs, repo context | team या open-source काम में |
| database (Postgres आदि) | schema और data query करना | backend-heavy apps में |

ज्यादातर developers के लिए design source और filesystem दो सबसे काम के servers हैं, क्योंकि UI बनाना और files संभालना almost हर project का हिस्सा है। बाकी servers तब जोड़ें जब आपके काम को उनकी जरूरत हो, वरना Cascade के पास बहुत सारे tools आ जाते हैं और वह confuse हो सकता है। AI builders के बीच routing कैसे करें, यह [Claude Code mobile app UI templates](/blogs/in-ai-vibe-coding-tools-claude-code-mobile-app-ui-templates-free/) वाली guide में भी देखा जा सकता है।

## VP0 का free MCP server (vp0-mcp) कैसे जोड़ें?

UI और app screens बनाने के लिए VP0 का `vp0-mcp` सबसे काम का design server है, और यह पूरी तरह free ($0) है। इसे जोड़ने के बाद Cascade आपकी मदद से VP0 की free design library को search कर सकता है और किसी design का machine-readable source सीधे पढ़ सकता है, ताकि generate हुआ code एक असली layout से match करे, न कि एक guess से।

config में बस यह block जोड़ें:

```json
"vp0": {
  "command": "npx",
  "args": ["-y", "vp0-mcp"]
}
```

refresh करने के बाद Cascade में `search_vp0_designs` और `get_vp0_design` जैसे tools दिखने लगेंगे। अब आप Cascade से कह सकते हैं कि किसी screen का design ढूँढो और उसके हिसाब से React Native या SwiftUI code बनाओ। इसका फायदा यह है कि VP0 के हर design का एक hidden, AI-readable source page होता है, जिसे Claude, Cursor, या Windsurf सीधे पढ़ते हैं, इसलिए पहली ही generation एक proven layout से शुरू होती है। India के developers के लिए free design templates की पूरी list [इस guide](/blogs/in-ai-vibe-coding-tools-ai-app-builder-design-templates-free-india/) में दी गई है।

जो developers Cursor इस्तेमाल करते हैं, उनके लिए भी यही पैटर्न काम करता है, और [cursor rules file for React Native UI](/blogs/in-ai-vibe-coding-tools-cursor-rules-file-for-react-native-ui-download/) वाली guide उस setup को cover करती है।

## आम गलतियाँ और troubleshooting

कुछ गलतियाँ बार-बार होती हैं, और इन्हें पहचानना आधा काम है। सबसे आम है invalid JSON, यानी एक missing comma या bracket, जिसकी वजह से पूरी config load नहीं होती। फाइल को किसी JSON validator से check करना सबसे आसान fix है।

दूसरी आम गलती है refresh या restart न करना। config बदलने के बाद Cascade को refresh करना जरूरी है, वरना नए servers दिखेंगे ही नहीं। तीसरी है `npx` का न मिलना, जो तब होता है जब Node.js installed नहीं है या PATH में नहीं है। चौथी गलती है बहुत सारे servers एक साथ जोड़ देना, जिससे Cascade के पास इतने tools आ जाते हैं कि वह सही tool चुनने में गलती करता है। सिर्फ वही servers रखें जिनकी आपको सच में जरूरत है। अगर कोई server connect होकर भी काम नहीं कर रहा, तो उसके logs देखें, क्योंकि अक्सर वहाँ असली error साफ लिखा होता है।

एक और आम दिक्कत है tools का limit। हर MCP server कई tools देता है, और जब बहुत सारे servers एक साथ चलते हैं, तो Cascade के पास इतने tools आ जाते हैं कि वह सही वाला नहीं चुन पाता, या कुछ tools load ही नहीं होते। ऐसे में उन servers को बंद कर दें जिनकी उस काम में जरूरत नहीं है, और एक बार में सिर्फ relevant servers active रखें। पहली बार npx से कोई server चलाने पर थोड़ी देर भी लग सकती है, क्योंकि package download होता है, इसलिए कुछ seconds इंतजार करना normal है। अगर server बार-बार fail हो रहा है, तो उसी command को terminal में अलग से चलाकर देखें कि वह सही से start होता है या नहीं।

## MCP servers की security: किन बातों का ध्यान रखें?

MCP server जोड़ना मतलब है कि आप Cascade को किसी बाहरी program से जोड़ रहे हैं, इसलिए security का ध्यान रखना जरूरी है। हर server असल में एक छोटा program है जो आपके computer पर चलता है और data access करता है, इसलिए सिर्फ वही servers जोड़ें जिन पर आप भरोसा करते हैं, जैसे official MCP servers, [Windsurf](https://windsurf.com/) के suggested servers, या VP0 जैसा known free server। किसी unknown source से copy किया हुआ server जोड़ना risk भरा है।

दूसरी जरूरी बात है secrets का ध्यान। अपने API keys, database passwords, या tokens को सीधे `mcp_config.json` में मत लिखें, क्योंकि वह फाइल आसानी से leak हो सकती है। इसकी जगह environment variables का इस्तेमाल करें, ताकि secret config के बाहर रहे। database जैसे server जोड़ते समय एक read-only connection देना और भी safe रहता है, ताकि agent गलती से कुछ delete न कर दे। design source जैसे `vp0-mcp` servers इस लिहाज से सबसे safe होते हैं, क्योंकि वे सिर्फ public, read-only designs देते हैं और आपके किसी secret को नहीं छूते।

## कब MCP की जरूरत नहीं है?

हर project में MCP जरूरी नहीं है। अगर आप सिर्फ एक छोटा सा code change कर रहे हैं या एक simple function लिख रहे हैं, तो MCP servers जोड़ना बेकार की मेहनत है, और plain Cascade ही काफी है। MCP की असली कीमत तब है जब agent को बाहरी context या tools चाहिए, जैसे एक design library, एक database, या आपका GitHub।

इसलिए सोच-समझकर जोड़ें: जब काम के लिए external tool की जरूरत हो, तभी server add करें। एक खाली project में दस servers जोड़ देना setup को भारी बना देता है और Cascade को धीमा कर सकता है। जरूरत के हिसाब से चुनना ही समझदारी है।

## मुख्य बातें: Windsurf में MCP setup

Windsurf में MCP setup का तरीका सीधा है: `mcp_config.json` में servers जोड़ें, valid JSON रखें, और Cascade को refresh करें। UI काम के लिए VP0 का free `vp0-mcp` design server सबसे काम का है, साथ में filesystem लगभग हर project में उपयोगी है, और बाकी servers जरूरत के हिसाब से जोड़ें। Node.js installed होना जरूरी है, और config बदलने के बाद refresh करना न भूलें। बहुत सारे servers एक साथ जोड़ने से बचें, क्योंकि इससे Cascade confuse होता है। एक commissioned design setup पर $5,000 तक खर्च हो सकता है, जबकि VP0 का free design MCP बिना किसी कीमत के यह context दे देता है।

VP0 की free designs [यहाँ देखें](/explore) ताकि Cascade को एक असली screen से शुरू करने को मिले, न कि एक खाली prompt से।

## अक्सर पूछे जाने वाले सवाल

### Windsurf में MCP setup कैसे करें?

Windsurf Settings में Cascade section खोलें, `mcp_config.json` फाइल edit करें, और उसमें अपने servers का `command` और `args` block जोड़ें। फाइल save करने के बाद Cascade panel को refresh करें, और tools icon में नए servers के tools दिखने लगेंगे। valid JSON और installed Node.js दो जरूरी चीजें हैं। UI काम के लिए VP0 का free `vp0-mcp` server जोड़ना सबसे काम का है, क्योंकि यह Cascade को असली designs देता है।

### Windsurf MCP के लिए सबसे काम के servers कौन से हैं?

ज्यादातर developers के लिए दो servers सबसे काम के हैं: एक design source जैसे VP0 का free `vp0-mcp`, जो UI बनाने के लिए असली screens देता है, और filesystem, जो files पढ़ने-लिखने में मदद करता है। इसके बाद GitHub और database servers तब जोड़ें जब team काम या backend की जरूरत हो। बहुत सारे servers एक साथ जोड़ने से बचें, क्योंकि इससे Cascade सही tool चुनने में गलती करता है।

### क्या VP0 का MCP server free है?

जी हाँ, VP0 का `vp0-mcp` server पूरी तरह free है और `npx vp0-mcp` से चलता है। इसे config में जोड़ने के बाद Cascade `search_vp0_designs` और `get_vp0_design` tools से VP0 की free design library तक पहुँच जाता है। हर design का एक machine-readable source page होता है, जिसे Cascade सीधे पढ़कर React Native या SwiftUI code generate करता है, इसलिए पहली ही generation एक असली layout से match करती है।

### Windsurf में MCP server काम क्यों नहीं कर रहा?

सबसे आम वजहें चार हैं: invalid JSON (कोई missing comma या bracket), config बदलने के बाद refresh न करना, Node.js का installed न होना जिससे `npx` नहीं मिलता, और बहुत सारे servers जोड़ देना जिससे Cascade confuse होता है। पहले JSON को validate करें, फिर Cascade refresh करें, Node.js check करें, और सिर्फ जरूरी servers रखें। अगर फिर भी दिक्कत है, तो server के logs देखें, क्योंकि असली error अक्सर वहीं लिखा होता है।

### क्या Windsurf का MCP setup Cursor और Claude Code में भी चलता है?

हाँ, क्योंकि MCP एक open standard है, इसलिए जो server config आप Windsurf में बनाते हैं, वही format Cursor और Claude Code में भी काम करता है, बस फाइल की location अलग हो सकती है। इसका मतलब है कि आपका setup portable है, और एक बार बना design या tool server हर agent में दोबारा इस्तेमाल हो सकता है। यही MCP की सबसे बड़ी खूबी है।

## Frequently asked questions

### Windsurf में MCP setup कैसे करें?

Windsurf Settings में Cascade section खोलें, mcp_config.json फाइल edit करें, और उसमें अपने servers का command और args block जोड़ें। फाइल save करने के बाद Cascade panel को refresh करें, और tools icon में नए servers के tools दिखने लगेंगे। valid JSON और installed Node.js दो जरूरी चीजें हैं। UI काम के लिए VP0 का free vp0-mcp server जोड़ना सबसे काम का है, क्योंकि यह Cascade को असली designs देता है।

### Windsurf MCP के लिए सबसे काम के servers कौन से हैं?

ज्यादातर developers के लिए दो servers सबसे काम के हैं: एक design source जैसे VP0 का free vp0-mcp, जो UI बनाने के लिए असली screens देता है, और filesystem, जो files पढ़ने-लिखने में मदद करता है। इसके बाद GitHub और database servers तब जोड़ें जब team काम या backend की जरूरत हो। बहुत सारे servers एक साथ जोड़ने से बचें, क्योंकि इससे Cascade सही tool चुनने में गलती करता है।

### क्या VP0 का MCP server free है?

जी हाँ, VP0 का vp0-mcp server पूरी तरह free है और npx vp0-mcp से चलता है। इसे config में जोड़ने के बाद Cascade search_vp0_designs और get_vp0_design tools से VP0 की free design library तक पहुँच जाता है। हर design का एक machine-readable source page होता है, जिसे Cascade सीधे पढ़कर React Native या SwiftUI code generate करता है, इसलिए पहली ही generation एक असली layout से match करती है।

### Windsurf में MCP server काम क्यों नहीं कर रहा?

सबसे आम वजहें चार हैं: invalid JSON (कोई missing comma या bracket), config बदलने के बाद refresh न करना, Node.js का installed न होना जिससे npx नहीं मिलता, और बहुत सारे servers जोड़ देना जिससे Cascade confuse होता है। पहले JSON को validate करें, फिर Cascade refresh करें, Node.js check करें, और सिर्फ जरूरी servers रखें। अगर फिर भी दिक्कत है, तो server के logs देखें, क्योंकि असली error अक्सर वहीं लिखा होता है।

### क्या Windsurf का MCP setup Cursor और Claude Code में भी चलता है?

हाँ, क्योंकि MCP एक open standard है, इसलिए जो server config आप Windsurf में बनाते हैं, वही format Cursor और Claude Code में भी काम करता है, बस फाइल की location अलग हो सकती है। इसका मतलब है कि आपका setup portable है, और एक बार बना design या tool server हर agent में दोबारा इस्तेमाल हो सकता है। यही MCP की सबसे बड़ी खूबी है।

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*