讓 MCP 工具在聊天室裡長出介面

概要

• MCP apps 解的是純文字回應Marlene 說早期 MCP 多半只回傳文字，所以大家才會用 ASCII art 和一堆 emoji 湊數。MCP apps 讓 server 的工具直接回傳可互動的元件，顯示在聊天裡。
• 運作流程使用者送出 prompt，LLM 挑工具，server 回傳工具結果與一個 UI 資源的參照。Marlene 強調，去抓那份 HTML 的是 host（VS Code），不是 client（GitHub Copilot），然後 host 把它放進沙盒化的 iframe 裡渲染。
• 適用情境Marlene 舉了資料探索（點 UI 比一直打字問更省力）和電商（讓使用者在聊天裡完成結帳，不必跳去瀏覽器），並提到 Shopify、Excalidraw、Figma 都在用。
• 一個 MCP app 有三塊Liam 說明是工具、打包好的 HTML UI 資源，以及讓 host 與 server 認得「這筆資料有對應介面」的連結。前端用 React、Vue、Svelte 或純 JS 都可以。
• 示範：火焰圖Liam 用 MCP server 對一支 Go 程式剖析五秒，結果以 React 寫的火焰圖顯示在 Copilot 的聊天視窗內，省掉反覆問模型「哪裡慢」的來回。
• 為什麼用 iframeLiam 的說法是把應用關在聊天視窗裡，不讓它碰 VS Code 設定、API 或任何外部的東西。

原話

• “MCP, of course, is an open protocol that standardizes how applications provide context to LLM.”

  Marlene：MCP 是一個開放協議，統一應用程式向 LLM 提供脈絡的方式

  ▶ 01:05

• “server tools return rich interactive components that render directly in the chat”

  Marlene：讓 server 的工具回傳可互動的元件，直接顯示在聊天裡

  ▶ 04:19

• “What we want is to keep the user inside the chat and then have them interact and have that experience there.”

  Marlene：我們要的是讓使用者留在聊天裡，在那裡完成互動

  ▶ 07:54

• “The reason we're doing this in an iframe, or why the iframe, is the same reason that you put a hamster in a cage.”

  Liam：我們用 iframe 的理由，就跟把倉鼠關在籠子裡一樣

  ▶ 14:34

• “You don't want this application to interact with your VS Code settings, any APIs, anything external, all of that kind of stuff.”

  Liam：你不想讓這個應用去碰 VS Code 設定、API 或任何外部的東西

  ▶ 14:49

延伸

• Liam 提到 skill 中有「工具可見度」的設定：只給模型呼叫、模型與 app 都能呼叫，或只有 app 能呼叫，也就是決定誰能觸發這個工具。
• Marlene 說電商結帳在 VS Code 裡不那麼適用，更像是其他聊天介面（例如 OpenAI）的情境。