21st.dev Magic

आधिकारिक

सर्वश्रेष्ठ 21st.dev डिज़ाइन इंजीनियरों से प्रेरित शिल्पित UI घटक बनाएं।

GitHub

5.9k

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

21st Dev Magic MCP के साथ आप क्या कर सकते हैं?

Generate UI components — अपने AI से generate के माध्यम से एक नया कंपोनेंट बनाने के लिए कहें, जो AI एक्सेस सक्षम होने पर प्राकृतिक-भाषा प्रॉम्प्ट से विविधताएँ उत्पन्न करता है।
Search the component catalog — 21st.dev पर कंपोनेंट, थीम या टेम्पलेट खोजने के लिए search का उपयोग करें, फिर get_component के साथ पूरा कोड प्राप्त करें।
Refine existing designs — अपने पिछले ड्राफ्ट संदर्भ को आगे बढ़ाते हुए, generate के माध्यम से रिफाइनमेंट प्रॉम्प्ट से नई जनरेशन का अनुरोध करें।
Retrieve paid code — जब आपके खाते में भुगतान एक्सेस सक्षम हो, तो get_component के माध्यम से प्रीमियम कंपोनेंट कोड माँगें।
Check AI access status — होस्टेड जनरेशन शुरू करने से पहले यह पुष्टि करने के लिए get_usage क्वेरी करें कि aiGenerationEnabled सही है या नहीं।

दस्तावेज़

Magic MCP → 21st MCP

Magic MCP अब 21st MCP है। Magic MCP सर्वर (@21st-dev/magic) को एकीकृत 21st MCP द्वारा प्रतिस्थापित कर दिया गया है, जिसे 21st CLI के माध्यम से स्थापित किया जाता है — सेटअप 21st.dev/mcp पर उपलब्ध है। यह पैकेज अभी भी एक हल्के संगतता प्रॉक्सी के रूप में प्रकाशित है ताकि पुराने कॉन्फ़िगरेशन काम करते रहें।

21st MCP स्थापित करें (अनुशंसित)

npx @21st-dev/cli@latest init --client cursor   # or: claude | vscode | windsurf | codex

या इसे मैन्युअल रूप से जोड़ें — यह एक साधारण HTTP MCP सर्वर है:

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "YOUR_21ST_API_KEY" }
    }
  }
}

21st.dev/mcp पर API कुंजी प्राप्त करें।

पुरानी Magic API कुंजियाँ रीसेट कर दी गईं। पुराने Magic कंसोल द्वारा जारी की गई कुंजियाँ अब कहीं भी काम नहीं करतीं। 21st.dev/mcp पर एक नई कुंजी बनाएँ।

यह पैकेज अब क्या करता है (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." अभी भी काम करता है: v0.2.0 से यह एक छोटा stdio प्रॉक्सी है जो हर MCP संदेश को 21st MCP सर्वर पर अग्रेषित करता है। मौजूदा mcp.json प्रविष्टियाँ जो @21st-dev/magic का संदर्भ देती हैं, कार्य करती रहती हैं — लेकिन वे अब उसी सर्वर से बात करती हैं जैसा 21st CLI करता है, जिसमें प्रमाणित खाते के लिए उपलब्ध उपकरण शामिल हैं।

API कुंजी सभी ऐतिहासिक रूपों में स्वीकार की जाती है: स्थितीय API_KEY="...", --API_KEY=..., /API_KEY:..., -API_KEY ..., या TWENTY_FIRST_API_KEY / API_KEY_21ST पर्यावरण चर।

AI पहुँच

बिल्डर घटक पहुँच होस्टेड 21st AI को सक्षम नहीं करती। सर्वर केवल तब generate और iterate_generation सूचीबद्ध करता है जब AI पहुँच सक्षम हो। get_usage.aiGenerationEnabled जाँचें; यह पहुँच की रिपोर्ट करता है, शेष AI क्रेडिट शेष राशि की नहीं। AI बंद होने पर, search और get_component का उपयोग करें, फिर कोड को अपने स्वयं के कोडिंग एजेंट के साथ अनुकूलित करें। मौजूदा ड्राफ्ट पठनीय रहते हैं।

कैश्ड या विरासत जनरेशन कॉल ai_subscription_required लौटा सकती है। AI सक्षम होने तक पुनः प्रयास न करें। AI सक्षम करने के बाद क्लाइंट टूल सूची को ताज़ा करें या पुनः कनेक्ट करें। प्रॉक्सी खोज को सर्वर पर अग्रेषित करता है, इसलिए मौजूदा प्रॉक्सी संस्करण npm अपडेट के बिना यह व्यवहार प्राप्त करते हैं।

server.json आधिकारिक dev.21st/mcp रजिस्ट्री सूची को दर्शाता है। रजिस्ट्री संस्करण इस संगतता पैकेज संस्करण से स्वतंत्र है।

पुराने टूल नाम → नए टूल नाम

21st MCP अभी भी विरासत Magic टूल नामों को स्वीकार करता है और उनका अनुवाद करता है, इसलिए पुराने नाम याद रखने वाले एजेंट काम करते रहते हैं। नए नामों को प्राथमिकता दें:

विरासत Magic टूल	21st MCP टूल
`21st_magic_component_builder`	`generate`
`21st_magic_component_inspiration`	`get_inspiration`
`21st_magic_component_refiner`	`generate` (परिष्करण प्रॉम्प्ट से नई जनरेशन)
`logo_search`	`search_logo` (प्रति कॉल एक क्वेरी)

वर्तमान सर्वर पुराने चार टूल से कहीं अधिक उजागर करता है: घटकों/थीम/टेम्पलेट्स में कैटलॉग खोज, भुगतान किए गए कोड पुनर्प्राप्ति, बुकमार्क, टीम लाइब्रेरी, वेरिएंट के साथ UI जनरेशन, प्रोफ़ाइल प्रबंधन, और बहुत कुछ। अपने खाते के लिए उपलब्ध टूल देखने के लिए कनेक्ट करें और tools/list को कॉल करें।

प्लगइन के रूप में स्थापित करें

यह रिपॉजिटरी एक एजेंट प्लगइन (MCP सर्वर + एक UI कौशल) के रूप में भी पैक की गई है। किसी स्टोर की प्रतीक्षा करने की आवश्यकता नहीं है — यह रिपोजिटरी स्वयं एक मार्केटप्लेस है, इसे सीधे जोड़ें:

# Claude Code
claude plugin marketplace add 21st-dev/magic-mcp   # then: /plugin install 21st

# Grok Build
grok plugin marketplace add 21st-dev/magic-mcp && grok plugin install 21st --trust

# Codex CLI
codex plugin marketplace add 21st-dev/magic-mcp    # then install "21st" from /plugins

API_KEY_21ST चर में अपनी API कुंजी सेट करें (मुफ्त कुंजी 21st.dev/mcp पर)।

स्टोर सूचियाँ:

Cursor / Grok Bot — Cursor Marketplace से "21st" स्थापित करें, फिर Plugins → Configure के अंतर्गत अपना API_KEY_21ST सेट करें। 21st.dev/mcp पर एक कुंजी प्राप्त करें।
Grok Build — grok plugin install 21st --trust (आधिकारिक xAI marketplace से), फिर API_KEY_21ST निर्यात करें।
Claude Code — रिपोजिटरी में एक .claude-plugin/ मैनिफेस्ट है: इसे किसी भी मार्केटप्लेस से /plugin install करें जो इस रिपोजिटरी को सूचीबद्ध करता है, या claude --plugin-dir . के साथ स्थानीय रूप से लोड करें और API_KEY_21ST निर्यात करें।

प्लगइन कॉन्फ़िगरेशन हर क्लाइंट में API_KEY_21ST चर में API कुंजी की अपेक्षा करता है।

लिंक

21st MCP सेटअप और API कुंजियाँ: https://21st.dev/mcp
npm पर 21st CLI: https://www.npmjs.com/package/@21st-dev/cli
21st.dev — UI घटकों की खोज, प्रकाशन और जनरेशन: https://21st.dev

FAQ

मेरा पुराना Magic MCP काम करना क्यों बंद कर दिया? Magic बैकएंड (magic.21st.dev) को एकीकृत 21st MCP द्वारा प्रतिस्थापित कर दिया गया था, और सुरक्षा के लिए सभी पुरानी API कुंजियाँ रीसेट कर दी गईं। 21st.dev/mcp से एक नई कुंजी अपडेट करें — आपका मौजूदा @21st-dev/magic कॉन्फ़िगरेशन फिर इस संगतता प्रॉक्सी के माध्यम से काम करेगा, हालाँकि हम npx @21st-dev/cli@latest init पर स्विच करने की सलाह देते हैं।

क्या /ui अभी भी मौजूद है? प्राकृतिक भाषा का उपयोग करें: अपने एजेंट से 21st पर घटकों की खोज करने के लिए कहें (search), या AI सक्षम होने पर होस्टेड UI जनरेशन (generate) का उपयोग करें। पुराने /ui, /21 ट्रिगर वाक्यांश विरासत टूल के विवरणों की एक परंपरा थे, प्रोटोकॉल की नहीं।