Claude, Cursor या VS Code से MCP के ज़रिए लोगो या कैरेक्टर कैसे एनिमेट करें

MCP (Model Context Protocol) क्या है?

MCP "an open-source standard for connecting AI applications to external systems" है। ऑफ़िशियल साइट इसकी तुलना "a USB-C port for AI applications" से करती है: Claude, ChatGPT, Cursor, VS Code और दूसरे clients के लिए बाहरी tools तक पहुँचने का एक standard तरीका।

मौजूदा specification (revision 2026-07-28) तीन चीज़ें तय करती है जो एक server दे सकता है:

• Tools: "Functions for the AI model to execute", जैसे लोगो डिज़ाइन करना या वीडियो export करना।
• Resources: "Context and data, for the user or the AI model to use."
• Prompts: "Templated messages and workflows for users."

Messages JSON-RPC 2.0 में होते हैं। Server या तो stdio पर locally चलता है या Streamable HTTP पर remotely, जहाँ "each message is an HTTP POST to a single MCP endpoint." Animation services remote servers होती हैं: rigging, rendering और file storage उनकी मशीनों पर होते हैं, और आपका असिस्टेंट सिर्फ़ requests भेजता है और नतीजे दिखाता है।

AI से सीधे माँगने के बजाय MCP server से एनिमेट क्यों करें?

Chat model एनिमेशन कोड लिख सकता है: CSS keyframes, SVG एनिमेशन या एक छोटी script। Spinner या fade के लिए अक्सर इतना काफ़ी है। दस मूड वाले मैस्कॉट या polished लोगो launch एनिमेशन के लिए यह काफ़ी नहीं, क्योंकि उन्हें ऐसी pipeline चाहिए जो model के पास नहीं है: image analysis, rigging, rendering, file export और नतीजे रखने की जगह।

MCP server असिस्टेंट को उस pipeline के लिए tools देता है। असल में इससे तीन चीज़ें बदलती हैं:

• असली फ़ाइलें वापस आती हैं, जैसे Rive फ़ाइल, MP4 या transparent WebM, download links के साथ, ऐसे कोड के बजाय जिसे आपको debug करना पड़े।
• लंबे jobs track होते हैं। मिनटों में होने वाला build एक id देता है, और एक status tool तैयार होने तक progress बताता है।
• वही असिस्टेंट नतीजे को embed कर सकता है। Cursor, VS Code या Claude Code में जिस असिस्टेंट को फ़ाइलें मिलीं, वही उन्हें जोड़ने के लिए आपके project को edit भी कर सकता है।

अगर लोगो को ठीक वैसा ही रहना है जैसा डिज़ाइन हुआ, तो शुरू करने से पहले जाँचें कि server किस तरह का AI इस्तेमाल करता है: देखें क्या AI लोगो को बदले बिना एनिमेट कर सकता है।

Remote MCP server के लिए sign-in कैसे काम करता है?

OAuth से, जो MCP authorization spec में तय है और OAuth 2.1 पर आधारित है। आपको एक ब्राउज़र विंडो दिखती है: आप service में sign in करते हैं और approve करते हैं कि असिस्टेंट क्या कर सकता है। इसके पीछे:

1. Server बिना authentication वाली request का जवाब HTTP 401 से देता है और अपने Protected Resource Metadata की ओर इशारा करता है, जिसे हर protected MCP server को "MUST implement" करना होता है।
2. Client authorization server ढूँढता है और एक client ID पाता है। Spec तीन तरीके बताती है: Client ID Metadata Documents (जिन्हें clients को "SHOULD" सपोर्ट करना चाहिए), pre-registration, या Dynamic Client Registration, जिसे 2026-07-28 revision deprecated बताती है लेकिन compatibility के लिए रखती है।
3. Client PKCE और MCP server का नाम बताने वाले resource parameter के साथ authorization code flow चलाता है, ताकि token सिर्फ़ उसी server के लिए काम करे।
4. बाद की हर request token को Authorization: Bearer header में ले जाती है।

आपके लिए इसका मतलब है: copy या leak करने के लिए कोई API key नहीं, approval स्क्रीन पर दिखने वाली permissions, और ऐसा access जिसे आप service की तरफ़ से वापस ले सकते हैं।

Claude और Claude Code में remote MCP server कैसे जोड़ें?

Claude (वेब और desktop app)। Anthropic के help center (नवंबर 2026) के अनुसार remote MCP इस्तेमाल करने वाले custom connectors Free, Pro, Max, Ultra, Team और Enterprise प्लान पर उपलब्ध हैं, और "Free users are limited to one custom connector." Pro या Max पर:

1. Customize, Connectors खोलें, + Add पर क्लिक करें, फिर Add custom connector।
2. एक नाम और remote MCP server URL डालें, फिर Continue।
3. पहचानी गई authentication settings जाँचें और चुनें कि sign in कब करना है, फिर Add पर क्लिक करें।

Team और Enterprise पर एक Owner Organization settings में connector जोड़ता है, फिर members उसे Customize, Connectors से जोड़ते हैं। Claude "connects to your remote MCP server from Anthropic's cloud infrastructure", इसलिए server public internet पर पहुँच में होना चाहिए।

Claude Code। Terminal से server जोड़ें, फिर Claude Code के अंदर से sign in करें:

claude mcp add --transport http <name> <server-url>
# then, inside Claude Code:
/mcp

/mcp command आपके servers की लिस्ट दिखाता है; नया वाला चुनें और "follow the steps in your browser to log in."

Cursor और VS Code में remote MCP server कैसे जोड़ें?

Cursor। किसी project में .cursor/mcp.json बनाएँ, या हर project के लिए अपने home folder में ~/.cursor/mcp.json, और server को एक url दें:

{
  "mcpServers": {
    "animation": { "url": "https://example.com/mcp" }
  }
}

Cursor stdio, SSE और Streamable HTTP सपोर्ट करता है, और इसके docs कहते हैं "Cursor supports OAuth for servers that require it", "the authorization code flow with PKCE" इस्तेमाल करके। जब Cursor पूछे, तो MCP settings से sign in करें।

VS Code (GitHub Copilot)। Command Palette से MCP: Add Server चलाएँ, HTTP चुनें और endpoint डालें। या इसे .vscode/mcp.json में जोड़ें; VS Code का format servers इस्तेमाल करता है:

{
  "servers": {
    "animation": { "type": "http", "url": "https://example.com/mcp" }
  }
}

VS Code के docs कहते हैं "A remote HTTP server can require an account or sign-in" और सलाह देते हैं "Review any server trust or authentication prompts before accepting them." इसके configuration reference में उन servers के लिए एक oauth सेटिंग भी है जिन्हें खास client ID चाहिए, और यह client secrets को mcp.json से बाहर रखता है।

क्या ChatGPT में custom MCP server जोड़ा जा सकता है?

हाँ, नवंबर 2026 तक, ChatGPT Plugins के ज़रिए। OpenAI के Apps SDK docs ये steps बताते हैं:

1. ChatGPT Plugins पर जाएँ, plus बटन चुनें और Add custom MCP server चुनें।
2. एक नाम और विवरण डालें।
3. Connection में /mcp path सहित server URL डालें।
4. Authentication configure करें, risk warning पढ़ें, और Create as a plugin चुनें।
5. ChatGPT ने server पर जो tools खोजे, उन्हें review करें।

OpenAI जहाँ authorization server सपोर्ट करे वहाँ Client ID Metadata Documents के साथ OAuth की सलाह देता है, और बताता है कि dynamic client registration भी सपोर्टेड है। वह यह भी कहता है कि "Account and workspace policies apply to adding and using custom MCP servers", इसलिए work अकाउंट को admin की मंज़ूरी चाहिए हो सकती है।

MCP पर एक अच्छा animation workflow कैसा दिखता है?

पाँच steps, हर एक के बाद एक checkpoint। आप सब कुछ आसान भाषा में कह सकते हैं; असिस्टेंट tools चुनता है।

इसे smooth रखने वाली आदतें:

• खर्च करने से पहले approve करें। MCP spec कहती है कि hosts को "must obtain explicit user consent before invoking any tool", और एक अच्छा बना server यह भी बताता है कि कौन से steps आपका प्लान इस्तेमाल करते हैं। सब कुछ allow करने के बजाय ये prompts पढ़ें।
• इमेज खुद देखें। Build से पहले असिस्टेंट से डिज़ाइन दिखाने को कहें और अक्षर व रंग जाँचें।
• Embed अपने coding टूल में करें। Chat app में build करना और Cursor, VS Code या Claude Code में embed करना अच्छा चलता है: दोनों में वही server जोड़ें।
• Accessibility जाँचें। असिस्टेंट से reduced motion का ध्यान रखने को कहें; देखें accessible animation।

फ़ाइलें मिलने के बाद coding असिस्टेंट में पेस्ट करने लायक prompts के लिए देखें एनिमेटेड splash मैस्कॉट जोड़ने के लिए AI prompts। Rive web runtime के लिए Rive के docs @rive-app/webgl2 package की सलाह देते हैं।

MCP server जोड़ने से पहले क्या जाँचना चाहिए?

Remote MCP server को किसी भी ऐसे app की तरह लें जिसे आप अपने अकाउंट का access देते हैं। Anthropic चेतावनी देता है कि custom connectors "allow you to connect Claude to arbitrary services that have not been verified by Anthropic", और OpenAI के MCP docs मुख्य जोखिमों में prompt injection, ज़रूरत से ज़्यादा data requests और अनचाहे write actions गिनाते हैं।

• इसे कौन चलाता है? Service की अपनी साइट का URL इस्तेमाल करें, किसी forum से copy किया हुआ नहीं।
• हर tool क्या कर सकता है? आपका client जो tool list दिखाता है, उसे पढ़ें। Read-only tools और credits खर्च करने या data बदलने वाले tools के जोखिम अलग हैं।
• इसे क्या मिलता है? Service की privacy policy में लिखा होना चाहिए कि वह आपकी चैट देखती है या सिर्फ़ tool inputs।
• Disconnect कैसे करें? आपको अपने client में server हटाने और service की तरफ़ से access वापस लेने की सुविधा होनी चाहिए।

Charmotion का MCP server लोगो और कैरेक्टर एनिमेशन कैसे संभालता है?

Charmotion https://charmotion.app/mcp पर एक public remote MCP server (Streamable HTTP) चलाता है, जिसमें charmotion.app पर one-time email code से OAuth sign-in होता है। इसके tools ऊपर के पाँच steps के हिसाब से चलते हैं:

• डिज़ाइन: design_logo और design_character सादे background पर एक original लोगो या कैरेक्टर बनाते हैं (हर एक में एक AI डिज़ाइन लगता है; free प्लान में 2 शामिल हैं)। retry_design एक और वर्ज़न बनाता है।
• Review: लोगो के लिए start_motion website hero या app launch एनिमेशन के लिए तीन concepts सुझाता है, बिना किसी खर्च के। कैरेक्टर के लिए get_expressions सेट बनने से पहले वे expressions दिखाता है जो वह जोड़ेगा, और approve_expressions आपका चुनाव सेव करता है।
• Build: build_motion चुने गए concept को बनाता है (5 से 30 मिनट, get_motion से जाँचा जाता है), और refine_motion बदलाव लागू करता है। create_character_set looping मूड, one-shot रिएक्शन और एक launch intro वाली Rive फ़ाइल बनाता है।
• Export: export_videos लगभग एक मिनट में MP4, GIF और transparent WebM और MOV बनाता है।
• Embed: get_motion और get_character_set आपके coding असिस्टेंट के लिए हर प्लेटफ़ॉर्म का कोड और AI_README integration notes देते हैं।

जो भी step आपका प्लान इस्तेमाल करता है, उससे पहले असिस्टेंट पूछता है। अपनी इमेज इस्तेमाल करने के लिए एक public https link शेयर करें (PNG, JPEG या WebP, कम से कम 512 px, 10 MB तक; लोगो SVG भी हो सकते हैं), क्योंकि ज़्यादातर असिस्टेंट अभी attached फ़ाइल को tool तक नहीं भेज सकते। Claude, Claude Code, Cursor, VS Code और Codex का setup MCP server पेज पर है; प्लान pricing पर हैं।

MCP पर AI असिस्टेंट से लोगो एनिमेट करें

1. Remote MCP server जोड़ें. Claude में Customize, Connectors, Add custom connector इस्तेमाल करें; Claude Code में claude mcp add --transport http चलाएँ; Cursor या VS Code में URL को mcp.json में जोड़ें; ChatGPT में Plugins, Add custom MCP server इस्तेमाल करें।
2. OAuth से sign in करें. जब client पूछे, तो अपने ब्राउज़र में service की साइट पर sign in करें और permissions approve करें।
3. लोगो डिज़ाइन करें या शेयर करें. असिस्टेंट से लोगो डिज़ाइन करने को कहें, या अपनी फ़ाइल का public link शेयर करें, फिर spelling और रंग जाँचें।
4. एक कॉन्सेप्ट चुनें. Motion concepts माँगें और कुछ भी बनने या आपका प्लान इस्तेमाल होने से पहले एक चुनें।
5. Build और export करें. Build चलने दें, status tool से progress जाँचें, फिर जिन formats की ज़रूरत है उन्हें export करें।
6. इसे एम्बेड करें. अपने coding असिस्टेंट में, लौटाए गए कोड और integration notes से एनिमेशन जोड़ने को कहें, reduced motion का ध्यान रखते हुए।

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

क्या एनिमेशन के लिए remote MCP server इस्तेमाल करने को API key चाहिए?

आम तौर पर नहीं। MCP authorization spec फ़ॉलो करने वाले servers OAuth इस्तेमाल करते हैं: आपका असिस्टेंट एक ब्राउज़र खोलता है, आप service में sign in करके access approve करते हैं, और client एक token सेव करता है जो सिर्फ़ उसी server के लिए काम करता है।

Claude मेरे MCP server से कनेक्ट क्यों नहीं हो रहा?

Claude custom connectors से Anthropic के cloud से कनेक्ट होता है, इसलिए server public internet पर पहुँच में होना चाहिए; localhost पर या firewall के पीछे वाले servers allowlisting के बिना काम नहीं करेंगे। Free प्लान में भी सिर्फ़ एक custom connector की सीमा है।

क्या वही MCP server Cursor और Claude app दोनों में काम कर सकता है?

हाँ, अगर वह internet पर पहुँच में आने वाला remote server है। जिस भी client का आप इस्तेमाल करते हैं, उसमें वही URL जोड़ें और पूछे जाने पर हर एक से sign in करें।

स्रोत

• What is the Model Context Protocol (MCP)?, Model Context Protocol
• Specification (revision 2026-07-28), Model Context Protocol
• Transports, Model Context Protocol
• Authorization, Model Context Protocol
• Get started with custom connectors using remote MCP, Claude Help Center
• Connect Claude Code to tools via MCP, Claude Code Docs
• Model Context Protocol (MCP), Cursor Docs
• Use MCP servers in VS Code, Visual Studio Code Docs
• MCP configuration reference, Visual Studio Code Docs
• Connect from ChatGPT, OpenAI Apps SDK
• Building MCP servers for ChatGPT and API integrations, OpenAI
• Web (JS) runtime, Rive
• Charmotion MCP server, Charmotion