21st.dev Magic
आधिकारिकसर्वश्रेष्ठ 21st.dev डिज़ाइन इंजीनियरों से प्रेरित शिल्पित UI घटक बनाएं।
21st Dev Magic MCP के साथ आप क्या कर सकते हैं?
- 21st.dev कैटलॉग खोजें —
searchटूल का उपयोग करके अपनी आवश्यकता का वर्णन करके कंपोनेंट, थीम या टेम्पलेट खोजें। - प्रॉम्प्ट से UI कंपोनेंट जनरेट करें — किसी विवरण से मेल खाने वाला React कंपोनेंट मांगें और
generateके माध्यम से उपयोग के लिए तैयार कोड प्राप्त करें। - कंपोनेंट प्रेरणा प्राप्त करें —
get_inspirationके साथ किसी विशिष्ट उपयोग मामले के लिए क्यूरेटेड कंपोनेंट उदाहरण प्राप्त करें। - कंपनी लोगो खोजें —
search_logoका उपयोग करके कंपनी के नाम से SVG लोगो खोजें (प्रति कॉल एक क्वेरी)। - भुगतान वाला कोड प्राप्त करें — प्लेटफ़ॉर्म के माध्यम से आपके द्वारा खरीदे गए प्रीमियम कंपोनेंट तक पहुँचें।
दस्तावेज़
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 पर्यावरण चर।
पुराने टूल नाम → नए टूल नाम
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 कॉल करें।
लिंक
- 21st MCP सेटअप और API कुंजियाँ: https://21st.dev/mcp
- npm पर 21st CLI: https://www.npmjs.com/package/@21st-dev/cli
- 21st.dev — UI घटकों की खोज, प्रकाशन और जनरेशन: https://21st.dev
सामान्य प्रश्न
मेरा पुराना Magic MCP काम क्यों बंद हो गया?
Magic बैकएंड (magic.21st.dev) को एकीकृत 21st MCP द्वारा हटा दिया गया था, और सुरक्षा के लिए सभी पुरानी API कुंजियाँ रीसेट कर दी गई थीं। 21st.dev/mcp से एक नई कुंजी में अपडेट करें — आपका मौजूदा @21st-dev/magic कॉन्फ़िग तब इस संगतता प्रॉक्सी के माध्यम से फिर से काम करेगा, हालाँकि हम npx @21st-dev/cli@latest init पर स्विच करने की अनुशंसा करते हैं।
क्या /ui अभी भी प्रासंगिक है?
प्राकृतिक भाषा का उपयोग करें: अपने एजेंट से घटकों के लिए 21st खोजने (search), या नया UI जनरेट करने (generate) के लिए कहें। पुराने /ui, /21 ट्रिगर वाक्यांश पुराने टूल्स के विवरणों की एक परंपरा थे, प्रोटोकॉल की नहीं।