MCP Apps उदाहरण: Claude और ChatGPT में इंटरैक्टिव UI, असली डेमो के साथ

AI असिस्टेंट से मैप माँगते थे तो पहले आपको उसका वर्णन करता एक पैराग्राफ़ मिलता था। अब किसी टूल के पीछे MCP App हो तो वही सवाल चैट में एक असली मैप लौटाता है: पिन लगा हुआ, ज़ूम होने वाला, और आपके अगले फ़ॉलो-अप के लिए तैयार। वर्णन से दिखाने तक का यही कदम MCP Apps का पूरा मकसद है, और यह क्यों मायने रखता है, यह समझने का सबसे तेज़ तरीका स्पेसिफ़िकेशन पढ़ने की बजाय काम करते उदाहरणों को देखना है। यह लेख आधिकारिक डेमो, उस एक्सटेंशन के साथ पहले से चल रहे प्रोडक्ट, उनमें से हर एक के पीछे का कोड पैटर्न, और Claude और ChatGPT के अंदर अपना इंटरैक्टिव UI बनाने के लिए क्या चाहिए, यह सब कवर करता है।

MCP Apps असल में क्या हैं

MCP Apps, Model Context Protocol का पहला आधिकारिक एक्सटेंशन है। इसकी घोषणा 26 जनवरी 2026 को हुई थी, और यह किसी टूल को ऐसा इंटरैक्टिव इंटरफ़ेस लौटाने देता है जो सीधे चैट विंडो में रेंडर होता है, सिर्फ़ टेक्स्ट या JSON नहीं। चार्ट, फ़ॉर्म, डैशबोर्ड और 3D सीन, सब बातचीत के भीतर, मॉडल के जवाब के ठीक बगल में रहते हैं।

सादे जवाब से लाइव इंटरफ़ेस तक

एक सामान्य MCP टूल एक फ़ंक्शन है। मॉडल उसे कॉल करता है, डेटा वापस पाता है, और नतीजे को गद्य में समझाता है। यह तब तक चलता है जब तक डेटा 40 पंक्तियों की टेबल या शहर का रूट न हो, और तब गद्य एक खराब इंटरफ़ेस बन जाता है।

MCP Apps के साथ, टूल एक UI रिसोर्स की ओर इशारा कर सकता है। होस्ट (यानी चैट ऐप) उस रिसोर्स को लाता है और उसे sandboxed iframe में दिखाता है। होस्ट टूल का डेटा इंटरफ़ेस में पहुँचाता है, और इंटरफ़ेस होस्ट के ज़रिए दूसरे टूल वापस कॉल कर सकता है। बातचीत और UI एक साथ सिंक में रहते हैं, इसलिए चार्ट पर एक क्लिक मॉडल के लिए अगला सवाल बन सकता है।

यह विचार यूँ ही नहीं आया। यह दो कम्युनिटी प्रयासों पर आधारित है: MCP-UI प्रोजेक्ट, जिसका नेतृत्व Ido Salomon और Liad Yosef ने किया, और OpenAI का Apps SDK। Anthropic और OpenAI ने दो प्रतिद्वंद्वी स्पेसिफ़िकेशन बनाने की बजाय एक साझा स्पेसिफ़िकेशन पर काम किया, और इसी वजह से एक ही ऐप दोनों असिस्टेंट को निशाना बना सकता है।

Claude और ChatGPT कहाँ आते हैं

Claude और ChatGPT दो बड़े होस्ट हैं, लेकिन अकेले नहीं। ext-apps रिपॉज़िटरी VS Code, Goose, Postman, MCPJam, mcp-use inspector और Alpic Playground को भी ऐसे क्लाइंट के रूप में सूचीबद्ध करती है जो ये ऐप रेंडर करते हैं।

💡 होस्ट सपोर्ट अलग-अलग है। MCP Apps एक स्पेसिफ़िकेशन है, और हर क्लाइंट तय करता है कि उसमें से कितना लागू करे। यूज़र्स से कोई वादा करने से पहले अपने ऐप को हर उस होस्ट में टेस्ट करें जो आपके लिए मायने रखता है।

आधिकारिक उदाहरण ऐप्स

modelcontextprotocol/ext-apps रिपॉज़िटरी लगभग 18 उदाहरण ऐप्स के साथ आती है, और उदाहरण सर्वर @modelcontextprotocol/server-<name> पैकेज के रूप में प्रकाशित होते हैं, इसलिए आप बिना एक लाइन कोड लिखे किसी एक को आज़मा सकते हैं। यहाँ पूरी सूची एक नज़र में है।

मैप और 3D सीन

Map उदाहरण CesiumJS से 3D ग्लोब रेंडर करता है। असिस्टेंट से किसी शहर को दिखाने को कहें, तो ग्लोब सीधे वहाँ पहुँच जाता है। आप उसे किसी भी मैपिंग ऐप की तरह खींच, ज़ूम और झुका सकते हैं, क्योंकि यह एक लाइव इंटरफ़ेस है, स्क्रीनशॉट नहीं। व्यू होस्ट से उसी चैनल पर बात करता है जिस पर बाकी सब कुछ होता है, इसलिए यूज़र मैप पर जो करता है वह मॉडल के अगले जवाब को आकार दे सकता है।

Three.js और ShaderToy वही विचार ग्राफ़िक्स की ओर ले जाते हैं। एक इंटरैक्टिव 3D सीन रेंडर करता है, दूसरा लाइव GLSL शेडर चलाता है। दोनों को हर फ़्रेम के लिए सर्वर राउंड ट्रिप की ज़रूरत नहीं होती, जो दिखाता है कि GPU-भारी रेंडरिंग सैंडबॉक्स के भीतर ठीक से चलती है। अगर आपका टूल जियोमेट्री, टेरेन या कोई भी स्पेशियल चीज़ लौटाता है, तो ये दो सबसे अच्छे नमूने हैं।

डैशबोर्ड और चार्ट

एनालिटिक्स वह जगह है जहाँ इंटरैक्टिव UI सबसे जल्दी फ़ायदा देता है। Cohort Heatmap यूज़र समूहों में रिटेंशन दिखाता है। Customer Segmentation स्कैटर और बबल चार्ट बनाता है, जिनके क्लस्टर आप जाँच सकते हैं। System Monitor ऑपरेटिंग सिस्टम मेट्रिक्स को बदलते ही स्ट्रीम करता है, और wiki link graph डेमो एक ऐसा ग्राफ़ बनाता है जिसे आप नोड-दर-नोड फ़ॉलो कर सकते हैं।

इनमें से हर एक एक लंबे, पढ़ने में मुश्किल जवाब की जगह ऐसी चीज़ रखता है जिसे आप दो सेकंड में स्कैन कर लें। अगर आपका डेटा तब भी बदलता है जब यूज़र उसे देख रहा है, तो System Monitor वह उदाहरण है जिसे पढ़ना चाहिए, क्योंकि वह दिखाता है कि पहला नतीजा आने के बाद भी कोई व्यू कैसे अपडेट होता रह सकता है।

स्लाइडर और प्लानिंग टूल

Budget Allocator स्लाइडर को चार्ट के साथ जोड़ता है, ताकि आप श्रेणियों के बीच पैसा खिसका सकें और टोटल को बदलते देख सकें। Scenario Modeler SaaS प्रोजेक्शन के लिए यही करता है: अपनी ग्रोथ और लागत की मान्यताएँ बदलें, और रेवेन्यू कर्व दोबारा बन जाता है। रिपॉज़िटरी के ये दो सबसे अच्छे सिखाने वाले उदाहरण हैं, क्योंकि पैटर्न सरल है। यूज़र कंट्रोल को हिलाता है, ऐप गणना दोबारा करता है, और चार्ट अपडेट हो जाता है।

💡 टिप: अगर गणना सस्ती है, तो उसे व्यू के भीतर चलाएँ। टूल कॉल उस डेटा के लिए बचाकर रखें जो आपके सर्वर पर रहता है।

डॉक्यूमेंट, संगीत और मीडिया

PDF Server डॉक्यूमेंट को टुकड़ों में परोसता है, इसलिए बड़ी फ़ाइल एक ही बार में आना ज़रूरी नहीं। Sheet Music ABC नोटेशन को पढ़ने लायक स्कोर में बदलता है। Video Resource MCP के ज़रिए बाइनरी वीडियो स्ट्रीम करता है, Transcript स्पीच को टेक्स्ट में बदलता है, Say Demo टेक्स्ट को ज़ोर से बोलकर सुनाता है, और QR Code ऐप एक ही कॉल में स्कैन होने योग्य कोड बनाता है। इनमें से हर एक छोटा है, और हर एक दिखाता है कि ऐप किस तरह का अलग पेलोड संभाल सकता है।

आज ही चल रहे प्रोडक्ट

लॉन्च पार्टनर

घोषणा में दस लॉन्च पार्टनर के नाम थे: Amplitude, Asana, Box, Canva, Clay, Figma, Hex, monday.com, Slack और Salesforce। लॉन्च के आसपास बताए गए उपयोग मामले थे: सहयोगी डिज़ाइन, डेटा एक्सप्लोरेशन डैशबोर्ड, प्रोजेक्ट समन्वय और इंसिडेंट रिस्पॉन्स। यानी वही पैटर्न जो आपने अभी डेमो में देखे, उन टूल्स पर लागू जिनके लिए लोग पहले से पैसे देते हैं।

जो कोई स्टैंडर्ड पर बनाना चाहता है, उसके लिए यह मायने रखता है। पहले ही दिन दस पहचाने जाने वाले नामों वाला स्पेसिफ़िकेशन ऐसा है जिसे क्लाइंट लागू करते रहेंगे, और इसका मतलब है कि आज आप जो इंटरफ़ेस बनाते हैं, वह किसी एक विक्रेता पर दांव नहीं है।

यूज़र असल में क्या देखते हैं

चैट में MCP App बातचीत के भीतर एक पैनल जैसा दिखता है। यूज़र उससे सीधे इंटरैक्ट कर सकता है, और मॉडल भी बातचीत का हिस्सा बना रहता है। पर्दे के पीछे, टूल्स चलने से पहले होस्ट यूज़र की सहमति माँगता है, और व्यू और होस्ट के बीच का हर संदेश एक JSON-RPC संदेश होता है जिसे लॉग और ऑडिट किया जा सकता है।

टीमें इसे समीक्षा के काम में सबसे तेज़ी से अपनाती हैं। एक व्यक्ति चैट में सवाल पूछता है, पैनल दिखता है, और मेज़ पर बैठा हर कोई एक ही चार्ट की ओर इशारा कर सकता है, बजाय एक ही पैराग्राफ़ को अलग-अलग पढ़ने के।

एक ऐप अंदर से कैसे काम करता है

हर MCP App तीन हिस्सों से बनता है: एक tool, एक resource, और एक view।

Tool, Resource, View

टूल _meta.ui.resourceUri के ज़रिए बताता है कि वह कौन-सा इंटरफ़ेस इस्तेमाल करता है, जो एक ui:// पता है। रिसोर्स उस पते के लिए HTML बंडल लौटाता है। View वह कोड है जो iframe के भीतर चलता है। आधिकारिक क्विकस्टार्ट सर्वर कुछ इस तरह दिखता है:

import {
  registerAppResource,
  registerAppTool,
  RESOURCE_MIME_TYPE,
} from "@modelcontextprotocol/ext-apps/server";

registerAppTool(
  server,
  "get-time",
  {
    title: "Get Time",
    description: "Returns the current server time.",
    inputSchema: {},
    _meta: { ui: { resourceUri } },
  },
  async () => {
    const time = new Date().toISOString();
    return { content: [{ type: "text", text: time }] };
  },
);

registerAppResource(
  server,
  resourceUri,
  resourceUri,
  { mimeType: RESOURCE_MIME_TYPE },
  async () => {
    const html = await fs.readFile(path.join(DIST_DIR, "mcp-app.html"), "utf-8");
    return { contents: [{ uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }] };
  },
);

प्रॉम्प्ट कॉपी करें

ध्यान दें कि टूल अब भी सादा टेक्स्ट कंटेंट लौटाता है। जो होस्ट MCP Apps को सपोर्ट नहीं करता, उसे फिर भी एक काम का जवाब मिलता है, और जो होस्ट सपोर्ट करता है, उसे उसके ऊपर इंटरफ़ेस मिल जाता है।

इंटरफ़ेस से टूल कॉल करना

iframe के भीतर, @modelcontextprotocol/ext-apps से App क्लास होस्ट के साथ बातचीत संभालती है। वह टूल का नतीजा प्राप्त करती है, और वह अपने सर्वर टूल भी कॉल कर सकती है:

import { App } from "@modelcontextprotocol/ext-apps";

const app = new App({ name: "Get Time App", version: "1.0.0" });

app.ontoolresult = (result) => {
  const time = result.content?.find((c) => c.type === "text")?.text;
  serverTimeEl.textContent = time ?? "[ERROR]";
};

getTimeBtn.addEventListener("click", async () => {
  const result = await app.callServerTool({ name: "get-time", arguments: {} });
});

app.connect();

प्रॉम्प्ट कॉपी करें

अगर आप React के साथ बना रहे हैं, तो पैकेज @modelcontextprotocol/ext-apps/react पर हुक देता है, जिनमें useApp और useHostStyles शामिल हैं। भीतर से दोनों पक्ष एक PostMessageTransport के ज़रिए बात करते हैं, जो MCP के लिए लपेटा गया iframe का मेसेज चैनल है।

सैंडबॉक्स क्यों मायने रखता है

कोई चैट ऐप जो किसी तीसरे-पक्ष सर्वर से इंटरफ़ेस कोड रेंडर करता है, वह आपकी बातचीत के बगल में किसी और का कोड चला रहा होता है। पूरा डिज़ाइन मानकर चलता है कि वह कोड भरोसेमंद नहीं है, और यह एक अच्छी बात है।

सुरक्षा की चार परतें

• सैंडबॉक्स्ड iframes अनुमतियों और नेटवर्क एक्सेस को सीमित करते हैं, इसलिए व्यू केवल वही कर सकता है जिसकी होस्ट अनुमति देता है।
• पहले से घोषित टेम्पलेट्स का मतलब है कि टूल चलने से पहले ही होस्ट को पता होता है कि वह कौन-सा इंटरफ़ेस इस्तेमाल करेगा। इससे अचानक कोई अनचाहा कंटेंट डाल देना कहीं ज़्यादा मुश्किल हो जाता है।
• ऑडिट किए जा सकने वाले JSON-RPC संदेश व्यू और होस्ट के बीच हर आदान-प्रदान को ऐसा रिकॉर्ड बना देते हैं जिसकी आप जाँच कर सकते हैं।
• यूज़र की सहमति टूल्स चलने से पहले ज़रूरी है, इसलिए कोई पैनल चुपचाप आपकी ओर से कोई कार्रवाई नहीं कर सकता।

💡 किसी कंपनी के लिए बना रहे हैं? अपनी सिक्योरिटी टीम से इन चार बिंदुओं को पढ़ने को कहें। वे इस मॉडल को पहचान लेंगे: यह वही मॉडल है जो एम्बेड किए गए तीसरे-पक्ष विजेट्स में इस्तेमाल होता है, जिसे AI चैट के लिए और कसा गया है।

एक दोपहर में अपना ऐप बनाएँ

एक स्टार्टर टेम्पलेट चुनें

रिपॉज़िटरी में React, Vue, Svelte, Preact, Solid और vanilla JavaScript में बुनियादी स्टार्टर ऐप शामिल हैं। वह चुनें जो आपकी टीम के फ़्रंट-एंड स्टैक से मेल खाता हो, उसे कॉपी करें, और उदाहरण टूल की जगह अपना टूल रखें। आप कोई भी टेम्पलेट चुनें, सर्वर वाला हिस्सा वही रहता है।

Agent Skills से सेटअप करवाएँ

रिपॉज़िटरी चार agent skills भी देती है, जो उबाऊ हिस्से अपने आप करते हैं:

• create-mcp-app एक बिल्कुल नए MCP App का ढाँचा बनाता है।
• migrate-oai-app मौजूदा OpenAI ऐप को साझा स्टैंडर्ड में बदलता है।
• add-app-to-server उन टूल्स में इंटरफ़ेस जोड़ता है जो आपके पहले से चल रहे सर्वर पर हैं।
• convert-web-app मौजूदा वेब ऐप को हाइब्रिड वेब और MCP App में बदलता है।

डिज़ाइन की गलतियाँ जिनसे बचें

1. हार्ड-कोडेड चौड़ाई। चैट पैनल संकरा होता है, और फ़ोन पर और भी संकरा। पहले सबसे छोटे आकार के लिए बनाएँ।
2. होस्ट की थीम को नज़रअंदाज़ करना। useHostStyles या उसके समकक्ष का इस्तेमाल करें, ताकि आपका पैनल होस्ट के लाइट और डार्क मोड से मेल खाए।
3. साधारण गणित के लिए टूल कॉल। हर कॉल होस्ट से होकर जाती है, इसलिए छोटी गणनाएँ व्यू के भीतर रखें।
4. टेक्स्ट फ़ॉलबैक न होना। हर टूल से उपयोगी टेक्स्ट कंटेंट लौटाएँ, जैसा क्विकस्टार्ट करता है, क्योंकि हर होस्ट इंटरफ़ेस रेंडर नहीं करता।

PicassoIA पर Claude Sonnet 5 का इस्तेमाल करें

सर्वर, HTML बंडल और ग्लू कोड लिखना ज़्यादातर टाइपिंग का काम है, और PicassoIA पर Claude Sonnet 5 ठीक इसी के लिए बना है। यह मल्टी-स्टेप कोडिंग और टूल-यूज़ के काम संभालता है, और यह इमेज भी पढ़ता है, इसलिए वायरफ़्रेम स्केच सीधे रिक्वेस्ट में जा सकता है।

1. मॉडल पेज खोलें। Claude Sonnet 5 पर जाएँ और प्रॉम्प्ट बॉक्स ढूँढें।
2. प्रॉम्प्ट लिखें। टूल, उसका इनपुट स्कीमा और व्यू को क्या दिखाना चाहिए, यह बताएँ। उदाहरण के लिए: "एक MCP App लिखें जिसमें एक टूल हो, show-budget, और एक React व्यू जिसमें तीन स्लाइडर हों जो बार चार्ट दोबारा बनाएँ। @modelcontextprotocol/ext-apps का इस्तेमाल करें।"
3. प्रयास का स्तर सेट करें। effort सेटिंग low से max तक चलती है। Low डिफ़ॉल्ट है, थिंकिंग बंद रखता है और सबसे तेज़ जवाब देता है। जब ऐप कई फ़ाइलों को छूता हो, तो high या max पर जाएँ।
4. वायरफ़्रेम जोड़ें। पैनल के स्केच के लिए image फ़ील्ड इस्तेमाल करें। max_image_resolution सेटिंग भेजने से पहले इमेज को छोटा कर देती है, जिससे समय और लागत दोनों बचते हैं।
5. सिस्टम प्रॉम्प्ट जोड़ें। स्टैक एक बार तय करें, जैसे "TypeScript, React, केवल पूरी फ़ाइलें लौटाओ", और उसे पूरे प्रोजेक्ट में दोबारा इस्तेमाल करें।
6. बड़ी रिक्वेस्ट को बाँटें। एक जवाब अधिकतम 8,192 टोकन तक जाता है, इसलिए पहले सर्वर फ़ाइल माँगें और फिर व्यू फ़ाइल।

अगर उसी प्रॉम्प्ट पर दूसरी राय चाहिए, तो GPT 5.6 Sol भी प्लेटफ़ॉर्म पर है और जटिल कोडिंग कार्यों के लिए बना है।

💡 आउटपुट को क्विकस्टार्ट से मिलाएँ। मॉडल कभी-कभी पुराने API नाम अनुमान से लिख देते हैं। कुछ भी चलाने से पहले इम्पोर्ट और registerAppTool कॉल की ऊपर दिए स्निपेट से तुलना करें।

PicassoIA पर आज़माएँ

हर अच्छा इंटरफ़ेस पहले आपके दिमाग में एक तस्वीर होता है। कोड की एक लाइन लिखने से पहले, PicassoIA पर अपने ऐप के मॉकअप, हीरो विज़ुअल और डेमो सीन बनाएँ। Seedream 4.5 छोटे विवरण से शार्प 4K स्टिल बनाता है, Flux 2 Pro फ़ोटो-जैसे सीन के लिए मज़बूत विकल्प है, GPT Image 2 लंबे प्रॉम्प्ट को बारीकी से फ़ॉलो करता है, और P Image जब आप तेज़ी से दोहराना चाहते हैं तो लगभग एक सेकंड में इमेज लौटाता है।

एक सरल प्रॉम्प्ट से शुरू करें: लकड़ी की मेज़ पर रखा लैपटॉप, जिसकी स्क्रीन पर एक साफ़ डैशबोर्ड है जिसमें मैप और दो स्लाइडर हैं, नरम सुबह की रोशनी, शैलो डेप्थ ऑफ़ फ़ील्ड। उसे चलाएँ, एक विवरण बदलें, और फिर से चलाएँ। जब एक स्टिल काफ़ी न हो, तो प्लेटफ़ॉर्म के टेक्स्ट-टू-वीडियो मॉडल उसी विचार को एक छोटी क्लिप में बदल सकते हैं।

कोई मॉडल चुनें, अपना पहला प्रॉम्प्ट टाइप करें, और देखें कि आप क्या बना सकते हैं। पूरी कैटलॉग picassoia.com/en/all-models पर है।