WebMCP：將 LLM 互動直接整合到您的網站中

什麼是 WebMCP？

WebMCP 是一個創新的開源 JavaScript 函式庫，旨在透過模型上下文協議 (Model Context Protocol, MCP) 彌合傳統 Web 應用程式與先進的大型語言模型 (LLM) 或 AI 代理之間的鴻溝。開發人員只需加入一個 script 標籤，即可在網頁的右下角嵌入一個小巧、不引人注目的藍色小工具。此小工具是終端使用者將其已配置的 MCP 客戶端（如 Claude Desktop）直接連接到網站即時上下文的閘道，從而實現複雜、具備上下文感知能力的互動。

WebMCP 的核心價值主張在於賦予 LLM 執行操作、存取特定頁面資料，並根據網頁的即時狀態進行結構化對話的能力。這將靜態內容消費轉變為動態、由代理輔助的體驗，同時透過客戶端令牌驗證，使用者仍能完全控制連線。對於希望為其網站注入下一代 AI 功能的開發人員來說，這是必備的工具。

主要功能

WebMCP 提供強大的 API，可與 MCP 客戶端進行深度整合，提供多項強大功能：

• LLM 工具註冊： 開發人員可以將自訂的 JavaScript 函式註冊為可呼叫的工具。然後，LLM 客戶端可以透過傳遞結構化參數來呼叫這些工具（例如 weather、calculate），允許代理代表網站直接執行操作。
• 預定義提示範本： 透過註冊提示來標準化常見的使用者互動。這些範本允許客戶端以預定義的結構和動態參數啟動複雜的查詢（如生成 Git commit 訊息或總結文字）。
• 上下文資源暴露： 將動態或靜態的網站資料暴露為由 URI 識別的可讀資源。這允許 LLM 存取當前頁面 HTML (page://current) 或特定 DOM 元素（例如 element://my-id）的內容，作為其回應的上下文。
• 安全採樣機制： 實作伺服器啟動的互動，其中 LLM 請求基於系統提示和上下文的完成。WebMCP 透過向使用者呈現一個模態對話框來處理安全性，要求在將回應傳送回原始伺服器之前進行明確輸入，從而確保隱私和監督。
• 可自訂的小工具外觀： 嵌入式小工具高度可配置，允許開發人員調整其顏色、位置（右下、右上等）、大小和間距，以無縫匹配其網站的設計美學。

如何使用 WebMCP

將 WebMCP 整合到網站對開發人員來說很簡單，而使用者互動則依賴於預先配置的 MCP 客戶端。

適用於網站開發人員（整合）：

1. 加入腳本： 將以下這一行加入到您的 HTML 中，通常在結束 </body> 標籤之前： <script src="webmcp.js"></script>
2. 初始化與配置： 在加入腳本後，可選擇使用自訂設定（顏色、位置）初始化函式庫。
3. 註冊功能： 使用 mcp.registerTool()、mcp.registerPrompt() 和 mcp.registerResource() 將您的網站功能和資料暴露給已連接的 LLM。

適用於終端使用者（連線）：

1. 配置客戶端： 確保使用者擁有已配置為連接到 WebMCP 伺服器端點的 MCP 客戶端（例如 Claude Desktop）（使用提供的 npx 命令）。
2. 生成令牌： 使用者啟動其 MCP 客戶端並請求一個 webmcp token。
3. 連線： 使用者點擊網站上的藍色 WebMCP 小工具，並將生成的令牌貼上到連線提示中。

使用案例

WebMCP 在各種 Web 環境中釋放了強大的 AI 整合能力：

1. 電子商務產品支援： 透過 WebMCP 連接的 LLM 代理可以存取 page-content 資源來閱讀產品描述和規格。使用者可以問：「根據此頁面，這台筆記型電腦適合影片編輯嗎？」代理會利用上下文提供準確、即時的答案，而無需離開產品頁面。
2. 互動式文件與教學課程： 對於複雜的軟體文件網站，可以註冊工具來執行程式碼片段或運行模擬。使用者可以要求代理「解釋所選程式碼區塊的功能」（透過註冊所選元素 ID 的資源），代理會根據即時 DOM 內容提供解釋。
3. 資料輸入與表單輔助： 在內部 Web 應用程式或複雜表單中，可以註冊提示以標準化資料輸入。例如，可以註冊一個提示來「生成標準化的合規摘要」，依據代理可以透過已註冊資源讀取的資料欄位。
4. 代理工作流程自動化： 透過註冊與後端 API 互動的工具（如果透過客戶端安全暴露），代理可能可以啟動複雜的多步驟工作流程——例如「起草一份總結今日銷售數據的電子郵件」——其中 LLM 在執行最終工具呼叫之前，會使用上下文資源來收集必要資料。

常見問題 (FAQ)

問：WebMCP 可以免費使用嗎？ A：是的，WebMCP 明確被提及是一個開源的 JavaScript 函式庫，這意味著核心整合程式碼是免費提供使用和修改的。

問：什麼是模型上下文協議 (MCP)？為什麼它有必要？ A：MCP 是 WebMCP 所實作的底層通訊標準。它定義了網站（伺服器）如何安全地與外部 LLM 客戶端通訊上下文、工具和請求，確保跨不同客戶端應用程式的互動是標準化的。

問：每次註冊新工具時，我都需要重新啟動我的 MCP 客戶端嗎？ A：強烈建議在註冊新工具或資源後重新啟動 MCP 客戶端，尤其是在初始設定或開發期間，因為某些客戶端可能無法在令牌連線後立即動態更新其可用工具集。

問：LLM 可以在未經我許可的情況下存取敏感的使用者資料嗎？ A：不能。互動受 MCP 客戶端控制。雖然資源可以暴露頁面內容，但關鍵步驟是使用者透過令牌進行連線。此外，需要外部執行的敏感操作是透過採樣機制處理的，該機制明確要求使用者透過模態對話框提供輸入，從而維持人工監督。

問：我可以更改藍色小工具的外觀嗎？ A：絕對可以。該函式庫允許在 WebMCP 物件的初始化階段自訂小工具的外觀，包括其 color（顏色）、position（位置，例如 'top-right'）、size（大小）和 padding（間距）。