賦予 AI Agent 視覺化表達能力：VS Code 現已支援 MCP Apps
2026 年 1 月 26 日，由 Harald Kirschner 與 Connor Peet 共同撰寫
AI 程式編寫 Agent 的能力已顯著提升。開箱即用，它們便能搜尋程式碼庫、編輯檔案、執行終端指令並針對編譯錯誤做出回應。若加入 MCP 伺服器，它們還能查詢資料庫、透過 Playwright 瀏覽網頁、摘要 GitHub 問題，並連接至您的雲端平台。模型甚至能處理影像——您可以貼上螢幕截圖來偵錯版面問題，或是讓 Playwright 擷取瀏覽器狀態以進行驗證。
Agent 可以格式化表格、建構資料並呈現 ASCII 圖表。但這些都不是互動式的。當您需要重新排序列表、確認具有特定要求的破壞性動作，或探索視覺化資料時，您又回到了必須用文字描述的情況。
今日，MCP 社群正式宣佈推出 MCP Apps，這是第一個官方 MCP 擴充功能。工具呼叫（Tool calls）現在可以回傳互動式 UI 元件，並直接在對話中呈現：例如儀表板、表單、視覺化圖表與多步驟工作流程。這為更豐富、更高效的人機協作創造了機會。
VS Code 是第一個全面支援 MCP Apps 的主流 AI 程式碼編輯器。 現在即可在 VS Code Insiders 中使用——這是我們率先部署新功能的每日建置版本。歡迎安裝 Insiders 搶先體驗 MCP Apps，預計下週發佈的 VS Code 穩定版也將全面支援。
演示：互動勝過文字
我們建立了一些 示範案例，展示 Agent 如何透過更豐富的互動與開發者協作。由於 MCP Apps 剛推出，我們期待看到生態系統中出現更多應用。
互動式列表重新排序
現狀： Agent 根據其分析提出排序建議。您需閱讀文字輸出，請求調整，並來回溝通直到排序符合您的需求。
使用 MCP Apps： Agent 會在建議排序的同時顯示拖放介面。您可以視覺化調整項目順序，或選擇「請 AI 排序」，讓 Agent 運用其邏輯進行處理。
效能分析視覺化
現狀： Agent 分析 CPU 效能資料並以文字總結瓶頸。您可以看到摘要，但無法驗證其假設，也無法探索 Agent 可能忽略的領域。
使用 MCP Apps： Agent 會呈現互動式火焰圖（Flame Graph）。您可以鑽研呼叫堆疊（Call stacks）、懸停查看計時細節，並運用自身的領域知識來確認或拒絕 Agent 的分析。
功能旗標（Feature Flag）選擇器
現狀： Agent 獲取旗標配置並列出所有現有項目。您必須在腦中與部署環境對照，並在另一個步驟中要求 Agent 產生整合程式碼。
使用 MCP Apps： Agent 顯示具備即時環境狀態的可搜尋旗標選擇器。您可以在同一次互動中選取旗標、切換生產/測試/開發環境視圖，並產生 SDK 程式碼。
合作夥伴焦點：Storybook
Storybook 已在他們的開源 MCP 伺服器中 加入了 MCP Apps 支援。只需要求 Agent 「使用我們的設計系統建立一個登入表單」，而不必詳細描述所需的結果，Agent 就會直接在 VS Code 中呈現互動式元件預覽。
「我們一直在與 VS Code 團隊合作開發 MCP Apps，對成果感到非常興奮。使用者現在可以直接在 Agent 聊天視窗中預覽 Storybook 元件，無需在聊天視窗與 Storybook 之間切換來檢視變更。」—— Jeppe Reinhold (Storybook 核心貢獻者，Chromatic)
VS Code 的天作之合
VS Code 一直不僅僅是文字編輯器。擴充功能透過 Webview 面板、自定義編輯器與側邊欄視圖，將 UI 和互動帶入編輯器中。Jupyter Notebook 證明了將程式碼與豐富的輸出混合可以改變工作流程。GitHub Copilot Agents 則讓 AI 具備在您的工作空間中自主運作的能力。
MCP Apps 是下一個層次：賦予 Agent 一個視覺化的聲音來進行溝通。您可以即時看到發生了什麼，自信地做出選擇，並保持掌控權。
入門指南
如果您正在建置 MCP 伺服器，請加入 MCP Apps 以提升其互動性。VS Code 是您開發與偵錯它們並獲得完整 MCP 支援的最佳環境。歡迎參加今日由 MCP 核心維護者 Den Delimarsky 主持的 VS Code 直播，觀看現場演示與問答。
試著建立您的第一個 MCP App 並與社群分享您的創作。有時「看圖說故事」勝過千言萬語——現在，您的 Agent 兩者皆能做到。
Happy Coding! 💙