[Open Source] MCP Apps 時代，倒數計時中，互動 UI 引爆點！

用互動式 UI 提升你的聊天機器人：@modelcontextprotocol/ext-apps 簡介

嘿，各位台灣的開發者們！想讓你的聊天機器人更酷、功能更強嗎？在 AI 蓬勃發展的時代，單純的文字回覆可能已經不夠看了。今天，我們要來介紹一個超棒的工具—— @modelcontextprotocol/ext-apps，它能讓你為聊天機器人加入互動式 UI 元素，讓使用者體驗更上一層樓！

什麼是 @modelcontextprotocol/ext-apps？

簡單來說，@modelcontextprotocol/ext-apps 是一個 SDK（Software Development Kit，軟體開發套件），它讓你能夠開發「MCP Apps」。這些 Apps 就像是迷你程式，可以在支援 Model Context Protocol（MCP）的聊天介面中運行。

你可能會想：「MCP 是什麼？這跟我的聊天機器人有什麼關係？」別擔心，我們慢慢來。MCP 是一種協議，它定義了聊天機器人伺服器和聊天客戶端（例如，你的聊天應用程式）之間如何溝通。而 @modelcontextprotocol/ext-apps 則擴展了 MCP 的功能，讓你的工具可以傳送互動式的 UI，例如圖表、表單或影片播放器，而不是單純的文字回覆。

想像一下，你的聊天機器人可以顯示一個互動式地圖，讓使用者探索地點；或者是一個動態圖表，即時呈現數據分析結果。這些都是 @modelcontextprotocol/ext-apps 能夠實現的可能性。

為什麼你需要 MCP Apps？

傳統的聊天機器人通常只能回覆文字和結構化資料。這在許多情況下是足夠的，但當你需要更複雜的互動時，例如：

• 視覺化數據： 呈現圖表、地圖等，讓使用者更容易理解數據。
• 互動式表單： 收集使用者輸入，例如預約、訂單等。
• 多媒體內容： 嵌入影片播放器、音訊播放器等，提供更豐富的內容。

MCP Apps 就能派上用場。它提供了一個標準化的方式，讓你的工具能傳送互動式 UI，並在任何支援 MCP 的聊天客戶端中顯示。

@modelcontextprotocol/ext-apps 怎麼運作？

核心概念非常簡單，大致可以分為以下幾個步驟：

1. 工具定義： 你的工具會宣告一個 ui:// 資源，其中包含它的 HTML 介面。
2. 工具呼叫： 你的 LLM（Large Language Model，大型語言模型）會呼叫你的工具。
3. Host 渲染： 聊天客戶端（例如，你的聊天應用程式）會獲取資源並將其顯示在沙盒化的 iframe 中。
4. 雙向通訊： 聊天客戶端透過通知將工具資料傳遞給 UI，而 UI 可以透過客戶端呼叫其他工具。

換句話說： 你的工具定義了 UI，LLM 觸發工具，聊天應用程式顯示 UI 並與之互動。

如何開始使用 @modelcontextprotocol/ext-apps？

@modelcontextprotocol/ext-apps 提供了兩個主要用途的 SDK：

• 給 App 開發者： 建立在 MCP 聊天客戶端中運行的互動式 UI。
  • SDK for Apps: @modelcontextprotocol/ext-apps – API 文件
  • React Hooks: @modelcontextprotocol/ext-apps/react – API 文件（如果你使用 React）
• 給 Host 開發者： 在你的聊天應用程式中嵌入 MCP Apps 並與之通訊。
  • SDK for Hosts: @modelcontextprotocol/ext-apps/app-bridge – API 文件

對於初學者來說， 建立 App 比較容易上手。讓我們看看如何開始：

1. 安裝 @modelcontextprotocol/ext-apps

首先，你需要在你的專案中安裝這個套件。使用 npm 或 yarn 即可：

npm install @modelcontextprotocol/ext-apps
# 或者
yarn add @modelcontextprotocol/ext-apps

2. 建立你的 App (UI)

你的 App 是一個 HTML 頁面，你可以在其中使用 HTML、CSS 和 JavaScript 來建立你的 UI。你可以使用 React、Vue、Svelte 等前端框架，或者使用純 HTML/CSS/JavaScript。

3. 使用 app-bridge (在 UI 中)

@modelcontextprotocol/ext-apps/app-bridge 是一個核心的 API，讓你的 App 可以與 host (也就是你的聊天介面) 溝通。

• 初始化 appBridge:

  import { createAppBridge } from '@modelcontextprotocol/ext-apps/app-bridge';
  
  const appBridge = createAppBridge(); // 這會自動連線到 host
  

• 接收訊息:

  appBridge.on('notification', (data) => {
      console.log('收到通知:', data);
      // 根據收到的 data 更新 UI
  });
  

• 傳送訊息:

  appBridge.call('toolName', { key: 'value' })
      .then(result => {
        console.log('工具回覆:', result);
      })
      .catch(error => {
        console.error('呼叫工具失敗:', error);
      });
  

4. 在你的伺服器中註冊 App

你的伺服器（你的聊天機器人後端）需要知道你的 App 的資訊，例如它的 URL。

5. 測試與除錯

在開發過程中，你可能會需要調整一些設定。請參考官方文件，了解更多關於測試與除錯的資訊。

實作心得： 從範例開始，逐步擴展

@modelcontextprotocol/ext-apps 提供了許多範例，包括地圖、Three.js 3D 渲染器、即時程式碼編輯器等。建議初學者從範例開始，了解如何將這些 Apps 整合到你的聊天機器人中。

1. 從基本範例開始： 從最簡單的範例開始，例如「Hello World」或顯示簡單訊息的 App，讓你熟悉基本架構和溝通流程。
2. 逐步增加複雜度： 在你熟悉基本概念後，嘗試修改範例，添加功能，或者將現有 UI 元素整合到你的 App 中。
3. 注意安全性： 由於 App 運行在 iframe 中，請注意安全問題，例如避免直接操作 DOM，以及驗證來自 host 的資料。
4. 善用 API 文件： 查閱 API 文件，了解更多關於 @modelcontextprotocol/ext-apps 提供的功能。
5. 參考 SEP-1865 Discussion: 了解 MCP Apps 設計背後的原理和討論，可以幫助你更好地理解和使用這個工具。

錯誤排除指南

在開發過程中，你可能會遇到一些問題。以下是一些常見問題和解決方法：

• App 無法顯示： 檢查你的 HTML 程式碼、CSS 樣式和 JavaScript 程式碼是否有錯誤。同時，檢查你的伺服器是否正確地傳送了 App 的 URL。
• 通訊失敗： 檢查 appBridge 是否正確初始化，以及你的 App 和伺服器之間是否正確地傳遞訊息。
• 跨域問題： 確保你的 App 伺服器允許來自你的聊天機器人伺服器的請求。
• 資料格式錯誤： 仔細檢查你傳遞給 UI 和伺服器的資料格式是否正確。

總結： 讓你的聊天機器人更上一層樓

@modelcontextprotocol/ext-apps 是一個強大的工具，它可以讓你為你的聊天機器人添加互動式 UI，提升使用者體驗。雖然初次接觸可能需要一些時間來學習，但只要你掌握了基本概念，並從範例開始，就能夠輕鬆地建立出令人驚豔的聊天機器人。

希望這篇文章對你有所幫助！開始嘗試 @modelcontextprotocol/ext-apps，讓你的聊天機器人脫穎而出吧！

如果你有任何問題，或是在實作上遇到困難，歡迎在下方留言，一起討論！ 加油！

參考閱讀

https://github.com/modelcontextprotocol/ext-apps