webmcp

WebMCP 是 Web Model Context API 與 Model Context Protocol (MCP) 之間的強力橋樑。它讓開發者能將任何網站（無論是 React/Vue/Next.js 單頁應用、傳統 Rails/Django/Laravel 網站，或是純 JavaScript）轉化為 AI 代理程式的強大工具來源。透過填充 W3C 標準的 navigator.modelContext API，WebMCP 允許開發者註冊 AI 可以直接發現、查詢與呼叫的自訂工具，彌補了網頁 UI 與後端代理邏輯之間的鴻溝。

此技能為自主迭代提供了簡化的開發流程。使用者可以導航至目標 URL，注入透過 esbuild 自動打包的自訂 TypeScript 程式碼，並立即驗證工具註冊。這非常適合為 GitHub 或 Notion 等第三方平台建立使用者腳本、自動化複雜的網頁表單，或在不建置複雜中介軟體的情況下將內部應用程式狀態暴露給 AI 助理。對於想要透過即時瀏覽器上下文增強代理能力的人來說，它是一套完整的工具集。

• 支援直接從瀏覽器運行時使用 navigator.modelContext 註冊可供 AI 呼叫的工具。

• 包含穩健的開發工作流程：注入腳本、差異化工具列表、測試執行，並透過主控台快照進行偵錯。

• 支援 TypeScript 自動打包，允許使用 npm 依賴進行模組化工具開發。

• 為非原生瀏覽器環境提供跨平台相容性與 MCP-b 填充層。

• 透過 Chrome DevTools MCP 伺服器實現工具發現，確保與 Claude Code 及其他 MCP 相容客戶端的無縫整合。

• 為常見的網頁爬取、互動與資料處理任務提供專用協助函數。

• 在注入前務必重新載入頁面，以防止舊的填充狀態或工具命名衝突。

• 工具識別採用 webmcp_{domain}page{idx}{name} 模式，支援針對多個應用實例進行精確定位。

• 使用提供的 @webmcp/helpers 獲取標準化的 ToolResponse 模式，例如 textResponse、jsonResponse 或 errorResponse。

• 根據安全性（唯讀、讀寫或破壞性）對工具進行分類，以引導 AI 代理的行為。

• 確保定義適當的結構（inputSchema/outputSchema），以最大限度地提高 AI 工具呼叫的可靠性。