AI Engineer onepage/ MCP Apps in VS Code
Marlene Mhangami & Liam Hampton, GitHub · 16:06
這支影片在講：MCP tool 不該只回文字，也可以回一個可互動 App
MCP Apps 讓 server tool 回傳資料之外，也回傳一個 HTML UI resource。VS Code 這類 host 會把它抓回來，放進 chat 裡的 sandboxed iframe，讓使用者不用離開對話就能看圖表、操作 checkout、編輯圖形或探索 profiling data。
Published: 2026-06-06Video ID: _xIwFcnHqp4
01 / 問題
純文字太窄
早期 MCP 回傳多半是文字、連結或 ASCII art。遇到資料探索、圖表、架構圖或 checkout flow，文字會把互動成本推回使用者身上。
02 / 機制
工具回傳 UI resource
MCP server 的 tool result 可以帶一個 resource reference，指向 bundled HTML UI；host 抓取後在 chat 裡 render。
03 / Demo
Flame graph 直接進 VS Code
Liam 用 Go pprof profile bubble sort 與 Fibonacci，把 profiling summary 與 flame graph 做成 chat 裡可互動的 iframe。
Watch for this
影片最值得抓的四個訊號
Runtime
16:06
短 talk，前半講 MCP Apps 概念，後半是 VS Code live demo。
Core parts
3
MCP app 由 tool、resource、link 組成：資料回應與 UI 要能被 host 對上。
Demo profile
5 sec
MCP server 對 Go app 跑 5 秒 profiling，用 Go pprof 產出 flame graph data。
Host boundary
iframe
UI 在 sandboxed iframe 裡跑，避免 app 直接碰 VS Code 設定或外部 API。
Mechanism
MCP Apps 的資料流長這樣
1
使用者在 host 裡發 prompt
VS Code 是 host，GitHub Copilot 是 client；client 維持和 MCP server 的一對一連線，LLM 判斷要呼叫哪個 tool。
2
Server 回傳 tool result + UI resource reference
Tool 不只回 JSON 或文字，也可以帶一個指向 HTML UI 的 resource。這個 UI 可以用 React、Vue、Svelte 或 vanilla JS bundle 出來。
3
Host 抓 HTML，放進 sandboxed iframe
VS Code 取得 resource 後，在 chat 視窗中 render iframe。App 可以再 call back 到 server，server 回新資料，UI 跟著更新。
Examples
哪些場景需要「chat 裡的互動 UI」
資料探索使用者看 bar chart 後想切維度、點數字、追 trend，不應每一步都重新打 prompt；UI 控制比文字往返更自然。
電商 checkoutShopify 的例子重點是把品牌體驗與完整 checkout flow 保留在 chat 裡，而不是只丟一串外部連結。
架構圖與白板Excalidraw MCP app 可以生成可拖拉、可編輯的 diagram；使用者能直接改文字與圖形，而不是只看靜態圖片。
設計元件生成Figma 這類場景讓 MCP Apps 變成設計操作入口：agent 生成元件，host 直接呈現可操作結果。
Demo notes
Live demo 實際做了什麼
用 MCP repo 的 skill 生成範例 appLiam 提到他借用 Model Context Protocol repository 裡的 skill，透過 GitHub Copilot CLI 產出多個 MCP app 範例。
示範 app 是 flame graph profilerRepo 裡還有 markdown viewer、flight status、color picker 等通用範例，但 talk 聚焦 flame graph。
測試程式是 Go 的 bubble sort 與 FibonacciDemo 用一個 Go file 做 profiling，目標是看時間花在哪些 functions；底層使用 Go pprof。
Server 是本機 TypeScript MCP serverMCP server bundle Go program、執行 profiling、吐出 JSON data，並把 React flame graph UI link 到 tool result。
結果直接出現在 VS Code chatCopilot 辨識到 flame graph profiler tool，呼叫後在 chat window render summary、top functions 與 flame graph，減少反覆問模型「哪裡慢」的往返。
Use this checklist
如果你要做 MCP App，先確認這五點
這個結果真的需要互動嗎？圖表、白板、checkout、profiling、資料探索適合；純摘要或短答案不一定需要 UI。
Tool result 與 resource link 是否清楚對上？Host 必須能辨識 data response 與 UI resource 的連結，才能 render 正確 app。
UI 是否能 call back server 拿新資料？互動 UI 的價值在於使用者操作後能更新資料，而不是把靜態 HTML 包進 iframe。
Sandbox 邊界是否明確？Iframe 應限制 app 對 VS Code 設定、外部 API 與本機環境的接觸，互動能力和安全邊界要一起設計。
Source video