038 · MCP App 的介面設計與上架心法
從介面元件、雙向通訊到動態探索，拆解 MCP App 的運作原理，以及在三大商店上架的實際流程。
原標題：MCP Apps: Primitives, discovery, and the Future of Software - Pietro Zullo, Manufact, Inc
重點摘要
- 工具不再只回 JSONMCP 伺服器呼叫工具時可以回傳一個跑在沙盒 iframe 裡的介面，取代純文字清單，讓資訊更好讀，也讓介面與 host 之間能雙向傳訊。
- 幾個核心原語撐起互動用 set state 把介面狀態同步給模型、用 send follow-up message 讓介面主動送訊息、串流填引數即時更新畫面、從介面呼叫其他工具，四者組成豐富的互動體驗。
- 資料可以只給人看、不給模型看工具能同時回傳給介面的完整版本與給模型的精簡版本，遇到隱私資料時可以只顯示在畫面上，不外流給模型。
- 三大商店都已開放自助送審ChatGPT、Claude、Cursor 現在都能自助提交 MCP 伺服器與 App，審查會檢查工具標註、參數與驗證機制，通過後才會出現在各自的目錄裡。
- Claude 已經會動態找連結器使用者交辦一個沒有對應工具的任務時，Claude 會直接到 MCP registry 裡找連結器來完成；講者認為做好上架，等於讓產品有機會被動態、有機地找到。
- MCP 是這個時代的新網站講者引用 Paul Graham「AI App 是新瀏覽器」的說法，延伸主張如果成立，MCP 伺服器就是新網站，未來許多過去要開網站才能做的事，會直接在對話介面裡完成。
時間軸
時碼點下去會跳到影片的那一段。
| 時碼 | 段落 | 重點 |
|---|---|---|
| 00:00 | 開場介紹 | Pietro Zullo 說明這場要談 MCP App 的組成原語、發布方式，以及使用者怎麼發現這些 App。 |
| 01:38 | 公司背景 | Manufact 的開源 SDK 與 Inspector 合計超過 800 萬次下載、GitHub 上有 1 萬顆星，另外也有能直接從 GitHub repo 出貨、跑評測與上架檢查的雲端服務。 |
| 03:05 | 協定演進 | MCP 在 2024 年推出，隔年開始有人提案讓伺服器不只回傳資料、還能回傳 UI 元件，開啟互動式體驗的想像。 |
| 04:37 | 正式併入規格 | 這個提案在 2026 年 1 月正式轉正、成為協定官方支援的介面擴充，同時 ChatGPT 與 Claude 也逐漸把原本只給少數設計夥伴的商店對外開放。 |
| 06:05 | 運作原理 | 工具呼叫不再只回傳 JSON，而是回傳一個跑在沙盒 iframe 裡的介面，並在介面與 host 之間建立雙向通訊管道。 |
| 08:18 | 同步介面狀態 | 用 set state 這個原語，把畫面上使用者實際選了什麼同步給模型，模型才不會對介面上發生的事一無所知。 |
| 10:02 | 介面回傳訊息 | 介面上的按鈕可以觸發一則後續訊息送進聊天；Claude 會先讓使用者確認要不要送出，ChatGPT 則直接送出並立刻開始串流回覆。 |
| 12:05 | 即時串流渲染 | 以自製的 Remotion MCP App 為例，模型一邊產生工具的引數，畫面就一邊即時更新，不必等整段回覆結束才顯示。 |
| 13:03 | 分流隱私資料 | 工具可以把完整資料只顯示在介面上，另外傳一份精簡甚至空白的版本給模型，遇到敏感內容不需要整段藏起來。 |
| 16:46 | 多平台展示 | 在 Cursor、ChatGPT 上展示同一款分析用的 App，也秀了一款能邊串流邊即時畫出圖表的繪圖 App。 |
| 19:14 | 依用戶端調整 | 伺服器能從連線的中繼資料判斷目前用戶端支不支援 MCP App，再決定要不要回傳介面內容給它。 |
| 20:29 | 動手打造 | 開發時只要把 React 元件放進 resources 資料夾，工具回傳時就會自動編成 HTML、CSS 並註冊成介面資源。 |
| 23:16 | 送審與稽核 | 很多開發者其實不知道 MCP 有商店、也不知道怎麼送審；流程是連上遠端伺服器後，商店先檢查工具標註與參數，再檢查驗證機制，最後人工加自動測試才會通過。 |
| 24:57 | 動態探索連結器 | Claude 目前是唯一會在任務沒有對應工具時，主動到 MCP registry 找連結器來完成任務的用戶端，講者認為這對做好上架的產品是很大的機會。 |
| 27:45 | 收尾類比 | 引用 Paul Graham「AI App 是新瀏覽器」的說法，講者延伸主張如果成立，MCP 伺服器就是這個時代的新網站。 |
值得記的話
名詞與人物
| MCP | Model Context Protocol，讓 AI 模型呼叫外部工具與服務的通訊協定。 |
|---|---|
| MCP Apps | MCP 的官方介面擴充，讓伺服器除了回傳資料，還能回傳跑在聊天視窗裡的互動介面。 |
| MCP-UI | MCP Apps 的前身，最早提出讓伺服器回傳 UI 元件的方案。 |
| Manufact | 講者共同創辦的公司，提供 MCP 開源 SDK 與雲端出貨服務。 |
| Manufact 的開源 SDK | 在官方 SDK 之上再包一層抽象，讓開發者不必直接處理 MCP 規格細節就能寫伺服器、用戶端與 agent；講者說累積下載超過八百萬次。 |
| Inspector | Manufact 提供的開源工具，用來在本機測試 MCP 伺服器與 App。 |
| set state | MCP Apps 的原語之一，讓介面把目前狀態同步給模型知道。 |
| send follow-up message | MCP Apps 的原語之一，讓介面主動觸發一則後續訊息送進聊天。 |
| Remotion MCP app | Manufact 做的示範 App，用 Remotion 在介面裡即時渲染影片。 |
| MCP registry | Claude 在沒有對應工具時，用來動態搜尋合適連結器的登錄庫。 |
| Paul Graham | Y Combinator 創辦人，被引用說出「AI App 是新瀏覽器」。 |
延伸
- 官方提供的鷹架指令，只提到名字，沒有進一步示範怎麼用。
- VS Code 等其他支援 MCP App 的用戶端，只點名沒有展開介紹。
- Codex 對 MCP App 的支援程度，同樣只提到名字，沒有細節。