MCP UI बनाम MCP Apps: अंतर, SDK और उदाहरण

दस डेवलपर्स से पूछें कि MCP UI और MCP Apps में क्या अंतर है, तो आपको दस अलग-अलग जवाब मिलेंगे। वजह सीधी है: ये दोनों नाम एक कम्युनिटी प्रोजेक्ट और उससे निकले आधिकारिक स्टैंडर्ड को दर्शाते हैं, और कई पोस्ट इन्हें आपस में प्रतिस्पर्धी मान लेती हैं। अगर आपके MCP टूल को लंबे, घने टेक्स्ट की जगह चार्ट, फ़ॉर्म या मैप दिखाना है, तो आपको पता होना चाहिए कि कौन सा पैकेज इंस्टॉल करना है, HTML कहाँ रहता है और कौन से होस्ट उसे असल में दिखाएँगे। MCP UI बनाम MCP Apps की यह तुलना दोनों के अंतर, हर तरफ़ के SDK हिस्से और ऐसा कोड सामने रखती है जिसे आप आज ही अपना सकते हैं।

💡 संक्षिप्त जवाब: MCP Apps एक आधिकारिक MCP एक्सटेंशन है जो 26 जनवरी 2026 को लाइव हुआ। MCP-UI वह पहले का SDK प्रोजेक्ट है जिसने यह विचार शुरू किया, और अब इसके पैकेज MCP Apps स्टैंडर्ड के साथ काम करते हैं। इन्हें आपसी प्रतिस्पर्धी नहीं, बल्कि पिछला प्रोजेक्ट और उसके उत्तराधिकारी के रूप में समझें।

असल में हर एक क्या है

MCP UI सीधी भाषा में

MCP-UI, Model Context Protocol टूल्स के लिए इंटरैक्टिव इंटरफ़ेस कॉम्पोनेंट बनाने का SDK है। यह 2025 में सामने आया और इसने यह विचार रखा कि MCP सर्वर सादे टेक्स्ट की जगह एक लाइव इंटरफ़ेस के साथ जवाब दे सकता है। MCP-UI के डॉक्यूमेंटेशन के अनुसार, इस प्रोजेक्ट ने MCP Apps स्पेसिफ़िकेशन पर सीधा प्रभाव डाला।

इस टूलकिट के दो हिस्से हैं:

• @mcp-ui/server createUIResource को एक्सपोज़ करता है, जो HTML स्ट्रिंग या किसी बाहरी URL से UI रिसोर्स बनाता है।
• @mcp-ui/client टूल का इंटरफ़ेस रेंडर करने के लिए AppRenderer और आपके पहले से फ़ेच किए गए HTML के लिए AppFrame एक्सपोज़ करता है।

Ruby (mcp_ui_server) और Python (mcp-ui-server) के लिए भी सर्वर हेल्पर मौजूद हैं, जो तब बड़ा फ़ायदा है जब आपका MCP सर्वर TypeScript में नहीं लिखा गया हो। अपने शुरुआती रूप में MCP-UI कई कंटेंट प्रकार देता था, जिनमें रॉ HTML, बाहरी URL और Remote DOM शामिल थे, और इंटरफ़ेस टूल रिस्पॉन्स के भीतर सफ़र करता था।

MCP Apps सीधी भाषा में

MCP Apps एक आधिकारिक एक्सटेंशन है, जो किसी टूल को एक इंटरैक्टिव कॉम्पोनेंट लौटाने देता है, जैसे डैशबोर्ड, फ़ॉर्म या मल्टी-स्टेप वर्कफ़्लो, जो बातचीत के भीतर सैंडबॉक्स्ड iframe में रेंडर होता है। आधिकारिक घोषणा इसे पहला आधिकारिक MCP एक्सटेंशन बताती है और कहती है कि यह प्रोडक्शन के लिए तैयार है।

यह दो सामान्य MCP प्राइमिटिव्स पर टिका है:

1. एक टूल जो _meta.ui.resourceUri फ़ील्ड में UI मेटाडेटा रखता है।
2. एक UI रिसोर्स जो ui:// स्कीम के ज़रिए सर्व होता है और उसमें बंडल किए हुए HTML और JavaScript होते हैं।

SDK एक ही npm पैकेज, @modelcontextprotocol/ext-apps में आता है, जिसमें React हुक्स, होस्ट एंबेडिंग और सर्वर रजिस्ट्रेशन के लिए सबपाथ हैं।

दोनों प्रोजेक्ट एक कैसे हुए

प्रयोग से एक्सटेंशन तक

मेंटेनर्स ने नवंबर 2025 में MCP Apps का प्रस्ताव रखा, जो MCP-UI और OpenAI Apps SDK के काम पर आधारित था। दो महीने बाद, 26 जनवरी 2026 को, यह एक्सटेंशन लाइव हुआ। घोषणा साफ़ कहती है कि MCP-UI एक अलग प्रोजेक्ट के रूप में जारी रहेगा और आधिकारिक एक्सटेंशन पर जाना वैकल्पिक है।

यह बात उन लोगों के लिए मायने रखती है जिनके पास पुराना कोड है। फ़िलहाल दोबारा लिखने की कोई मजबूरी नहीं है, और MCP-UI के पैकेज अब MCP Apps स्टैंडर्ड के registerAppTool और registerAppResource की ओर इशारा करते हैं, जो टूल और रिसोर्स को जोड़ने का तरीका है।

स्टैंडर्ड क्यों मायने रखा

विलय से पहले इंटरफ़ेस के प्रयोग किसी एक क्लाइंट से बँधे थे। एक होस्ट के लिए बना पैनल क्लाइंट-विशिष्ट कोड के बिना दूसरे होस्ट में चलेगा, इसका भरोसा नहीं किया जा सकता था। MCP-UI और Apps SDK के विचारों को एक एक्सटेंशन में मिलाने का मतलब है कि सर्वर लेखक एक इंटरफ़ेस लिखता है और कोई भी अनुरूप होस्ट उसे रेंडर कर सकता है।

कई ग्राहकों तक MCP सर्वर पहुँचाने वाली टीमों के लिए यही असली बात है: एक बिल्ड, कई होस्ट, एक सुरक्षा मॉडल।

वे अंतर जो सच में मायने रखते हैं

तुलना तालिका

इस तालिका को अंकों का स्कोरबोर्ड नहीं, परतों का नक्शा समझकर पढ़ें। MCP Apps कॉन्ट्रैक्ट तय करता है, और MCP-UI उस कॉन्ट्रैक्ट के ऊपर सुविधाएँ जोड़ता है।

HTML कहाँ रहता है

सबसे बड़ा संरचनात्मक अंतर यह है कि इंटरफ़ेस कहाँ रहता है। MCP Apps में सर्वर UI को ui:// URI के तहत रखता है और टूल _meta.ui.resourceUri के ज़रिए उसकी ओर इशारा करता है। होस्ट उस रिसोर्स को अलग से फ़ेच करता है और अपने समय पर रेंडर करता है, इसलिए HTML हर टूल रिस्पॉन्स में ठूँसा नहीं जाता।

व्यावहारिक फ़ायदे:

• समीक्षा योग्य टेम्पलेट। होस्ट चलने से पहले टेम्पलेट पढ़ सकता है।
• साफ़ अलगाव। टूल के नतीजे डेटा ही रहते हैं, और रिसोर्स इंटरफ़ेस बना रहता है।

सुरक्षा और सैंडबॉक्सिंग

चैट के भीतर इंटरैक्टिव कोड एक जोखिम है, इसलिए सुरक्षा मॉडल एक मुख्य फ़ीचर है। घोषणा चार परतें गिनाती है:

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

MCP-UI की ओर से, AppRenderer एक sandbox प्रॉप लेता है जो एक अलग प्रॉक्सी पेज की ओर इशारा करता है, जिसे डॉक्यूमेंटेशन का उदाहरण अपने अलग पोर्ट से सर्व करता है। अविश्वसनीय HTML कभी आपके होस्ट ऐप के साथ पेज साझा नहीं करता।

💡 टिप: डॉक्यूमेंटेड onOpenLink हैंडलर window.open को बुलाने से पहले जाँचता है कि URL https:// या http:// से शुरू होता है। यह आदत अपनाएँ। View अविश्वसनीय इनपुट है, इसलिए फ़िल्टर करें कि वह होस्ट से क्या करने को कह रहा है।

वे होस्ट जो Views रेंडर करते हैं

लॉन्च के समय घोषणा में Claude (वेब और डेस्कटॉप), Goose और Visual Studio Code Insiders का नाम था, और उसी हफ़्ते ChatGPT भी आने वाला था। ext-apps रिपॉज़िटरी अब ChatGPT, Claude, VS Code, Goose, Postman, MCPJam, mcp-use inspector और Alpic Playground सूचीबद्ध करती है। JetBrains, AWS, Google DeepMind और Antigravity को उन पक्षों के रूप में नामित किया गया था जो सपोर्ट पर विचार कर रहे हैं।

किसी लॉन्च तारीख का वादा करने से पहले अपने लक्ष्य होस्ट की मौजूदा स्थिति जाँच लें। यह सूची तेज़ी से बदलती है।

SDK के वे हिस्से जिन्हें आप छुएँगे

दो पैकेज परिवार यह काम करते हैं, और वे आपस में अच्छे से जुड़ते हैं।

ext-apps के साथ सर्वर साइड

MCP सर्वर के लिए, रिपॉज़िटरी से इंस्टॉल कमांड कुछ ऐसा दिखता है:

npm install -S @modelcontextprotocol/ext-apps \
  @modelcontextprotocol/client@^2.0.0 \
  @modelcontextprotocol/server@^2.0.0 \
  @modelcontextprotocol/node@^2.0.0 \
  @modelcontextprotocol/express@^2.0.0 \
  zod@^4.2.0

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

सर्वर पैकेज आपको दो हेल्पर देता है, registerAppTool और registerAppResource, साथ में RESOURCE_MIME_TYPE कॉन्स्टेंट। एक टूल में UI मेटाडेटा जोड़ता है, और दूसरा HTML बंडल सर्व करता है।

App क्लास के साथ View साइड

View वह पेज है जो iframe के भीतर चलता है। इसकी App क्लास एक PostMessageTransport के ज़रिए होस्ट से बात करती है। आप ऐप बनाते हैं, ontoolresult जैसे हैंडलर सेट करते हैं और connect() कॉल करते हैं। उसके बाद View callServerTool से सर्वर टूल कॉल कर सकता है और updateModelContext से मॉडल को वापस नोट भेज सकता है।

AppRenderer के साथ होस्ट साइड

अगर आप अपना चैट क्लाइंट बनाते हैं, तो @mcp-ui/client से AppRenderer हाई-लेवल कॉम्पोनेंट है। इसे एक MCP client, एक toolName, एक sandbox URL, और कॉल के toolInput और toolResult चाहिए। onOpenLink और onMessage जैसे कॉलबैक होस्ट को तय करने देते हैं कि कोई View क्या कर सकता है। AppFrame उस HTML के लिए निचले स्तर का विकल्प है जिसे आपने खुद फ़ेच किया है।

काम करने वाले कोड उदाहरण

एक टूल जो समय लौटाता है

यह सर्वर कोड आधिकारिक क्विकस्टार्ट का पालन करता है। get-time नाम का एक टूल ui:// रिसोर्स से जुड़ा है, और रिसोर्स हैंडलर एक बंडल की गई HTML फ़ाइल पढ़ता है।

import { z } from "zod";
import fs from "node:fs/promises";
import path from "node:path";
import {
  registerAppResource,
  registerAppTool,
  RESOURCE_MIME_TYPE,
} from "@modelcontextprotocol/ext-apps/server";

const DIST_DIR = path.join(process.cwd(), "dist");
const resourceUri = "ui://get-time/mcp-app.html";

registerAppTool(
  server,
  "get-time",
  {
    title: "Get Time",
    description: "Returns the current server time.",
    inputSchema: z.object({}),
    _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 }],
    };
  },
);

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

देखें कि यह कितना छोटा है: एक टूल, एक रिसोर्स और एक मेटाडेटा फ़ील्ड, जो इन्हें आपस में जोड़ते हैं।

वह View जो इसे कॉल करता है

View ontoolresult के ज़रिए पहला नतीजा पाता है, और जब उपयोगकर्ता बटन दबाता है तो सर्वर से ताज़ा डेटा माँग सकता है।

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

const app = new App({ name: "Get Time App", version: "1.0.0" });
const serverTimeEl = document.getElementById("server-time")!;

const readTime = (result: { content?: Array<{ type: string; text?: string }> }) =>
  result.content?.find((c) => c.type === "text")?.text ?? "[ERROR]";

app.ontoolresult = (result) => {
  serverTimeEl.textContent = readTime(result);
};

document.getElementById("get-time-btn")!.addEventListener("click", async () => {
  const result = await app.callServerTool({ name: "get-time", arguments: {} });
  serverTimeEl.textContent = readTime(result);
});

app.connect();

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

createUIResource से UI पैक करना

MCP-UI के साथ, @mcp-ui/server से createUIResource रिसोर्स ऑब्जेक्ट आपके लिए बनाता है:

import { createUIResource } from "@mcp-ui/server";

const widgetUI = await createUIResource({
  uri: "ui://my-server/widget",
  content: { type: "rawHtml", htmlString: "<h1>Widget</h1>" },
  encoding: "text",
});

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

यह जो वायर फ़ॉर्मेट बनाता है, वह स्टैंडर्ड MIME टाइप वाला एक सादा MCP रिसोर्स है:

{
  type: "resource",
  resource: {
    uri: "ui://my-server/widget",
    mimeType: "text/html;profile=mcp-app",
    text: "<h1>Widget</h1>",
  },
}

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

मॉडल को संदर्भ वापस भेजना

View कोई बंद रास्ता नहीं है। वह मॉडल को बता सकता है कि उपयोगकर्ता ने अभी क्या किया, ताकि अगला जवाब क्लिक को दर्शाए:

await app.updateModelContext({
  content: [{ type: "text", text: "User selected option B" }],
});

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

यही एक कॉल स्थिर विजेट को बातचीत का हिस्सा बना देती है।

आपको कौन सा चुनना चाहिए

ईमानदार जवाब यह है कि ज़्यादातर नए प्रोजेक्ट्स को MCP Apps स्टैंडर्ड से शुरू करना चाहिए और MCP-UI को उसके बगल में रखे एक टूलबॉक्स की तरह देखना चाहिए।

MCP Apps SDK चुनें जब:

• आप नया TypeScript प्रोजेक्ट शुरू कर रहे हैं और आधिकारिक, होस्ट-तटस्थ रास्ता चाहते हैं।
• आप एक ही इंटरफ़ेस को कई होस्ट में रेंडर करना चाहते हैं, जैसे Claude, VS Code, Goose और ChatGPT।
• आपको React हुक्स चाहिए, या अपने चैट क्लाइंट में Views एंबेड करने के लिए app-bridge।
• आपका टूल लंबे काम चलाता है। इमेज और वीडियो जनरेशन एसिंक्रोनस है: टूल एक जॉब शुरू करता है, फिर कुछ उसे तब तक पोल करता है जब तक वह पूरा न हो। प्रोग्रेस बार और नतीजों की गैलरी वाला View हर बार टेक्स्ट लॉग से बेहतर है।

MCP-UI हेल्पर रखें जब:

• आपका सर्वर Ruby या Python में लिखा है और आप mcp_ui_server या mcp-ui-server चाहते हैं।
• आपके पास पहले से createUIResource आउटपुट है और वह आपके होस्ट में सही रेंडर होता है।
• आप AppRenderer चाहते हैं, जो आपके नियंत्रण वाले क्लाइंट के भीतर एक तैयार रेंडरर हो।

माइग्रेशन की एक छोटी चेकलिस्ट:

1. इंटरफ़ेस वाले हर टूल में _meta.ui.resourceUri जोड़ें।
2. HTML को ui:// रिसोर्स से MIME टाइप text/html;profile=mcp-app के साथ सर्व करें।
3. टूल रिस्पॉन्स में एम्बेड किए UI पेलोड को रिसोर्स पॉइंटर से बदलें।
4. View का लॉजिक App क्लास में ले जाएँ और नतीजे ontoolresult में पढ़ें।
5. रिलीज़ करने से पहले कम से कम दो होस्ट पर टेस्ट करें।

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

Views ज़्यादातर HTML, CSS और TypeScript की पतली परत हैं, और यही वह काम है जिसे कोडिंग मॉडल अच्छी तरह संभालता है। Picasso IA पर Claude Sonnet 5 मल्टी-स्टेप कोडिंग और टूल-उपयोग वाले कामों के लिए बना है, स्क्रीनशॉट और वायरफ़्रेम पढ़ता है, और एक सादे अनुरोध से सर्वर, View या होस्ट रैपर का पहला ड्राफ़्ट लिख सकता है।

1. मॉडल पेज खोलें। Picasso IA पर Claude Sonnet 5 पेज पर जाएँ।
2. ज़रूरी फ़ील्ड भरें। prompt अकेला ज़रूरी पैरामीटर है। यह आज़माएँ: "TypeScript MCP सर्वर टूल लिखें जिसका नाम show-chart हो और जो ui:// रिसोर्स रजिस्टर करे, साथ में App क्लास का View जो टूल नतीजे से बार चार्ट रेंडर करे।"
3. इफ़र्ट लेवल सेट करें। डिफ़ॉल्ट low है, जो सबसे तेज़ जवाब के लिए थिंकिंग बंद रखता है। जब काम कई फ़ाइलों को छूता हो, जैसे सर्वर, View और बिल्ड स्टेप एक साथ, तब इसे high या max पर बढ़ाएँ।
4. सिस्टम प्रॉम्प्ट जोड़ें। एक भूमिका एक बार तय करें, जैसे: "आप @modelcontextprotocol/ext-apps के साथ MCP Apps कोड लिखते हैं और HTML में कभी सीक्रेट्स इनलाइन नहीं डालते।" यह पूरे सेशन में लागू रहती है।
5. अगर हो तो इमेज जोड़ें। वैकल्पिक image पैरामीटर वायरफ़्रेम या स्क्रीनशॉट लेता है, जिसे समय और पैसे बचाने के लिए max_image_resolution से स्केल किया जाता है।
6. जनरेट करें और समीक्षा करें। आउटपुट डिफ़ॉल्ट रूप से 8,192 टोकन तक जा सकता है। कोड कॉपी करें, फिर उसे एक होस्ट में टेस्ट करें।

💡 टिप: इस लेख के स्निपेट अपने प्रॉम्प्ट में संदर्भ के रूप में चिपकाएँ। तब मॉडल असली API नाम मिलाता है, उन्हें अनुमान से नहीं गढ़ता।

आज ही अपने विज़ुअल्स बनाएँ

हर MCP ऐप को आखिरकार तस्वीरों की ज़रूरत पड़ती है: लैंडिंग पेज के लिए हीरो इमेज, गैलरी View के लिए प्रोडक्ट शॉट, डेमो के लिए एक छोटी क्लिप। Picasso IA इन सबके मॉडल एक जगह रखता है, ताकि आप सर्वर से कुछ भी जोड़ने से पहले अपने विचार आज़मा सकें।

• Seedream 5 Pro के स्टिल्स से शुरू करें, और फ़ोटोग्राफ़िक नतीजे के लिए प्रॉम्प्ट को एक लेंस, रोशनी की दिशा और एक टेक्सचर दें।
• सबसे अच्छे फ़्रेम को Seedance 2.0 से मोशन में बदलें, जो वीडियो के साथ बिल्ट-इन ऑडियो भी देता है।
• ऊपर दिए स्टेप्स का उपयोग करते हुए, Claude Sonnet 5 से कोड वाला हिस्सा चलता रखें।

एक प्रॉम्प्ट चुनें, एक इमेज जनरेट करें, और देखें कि एक विचार कितनी दूर तक जाता है। फिर Picasso IA मॉडल कलेक्शन खोलें और वही प्रॉम्प्ट किसी दूसरे मॉडल पर आज़माएँ। सिर्फ़ यह तुलना ही आपको सिखा देगी कि हर मॉडल किसमें सबसे अच्छा है।