Widget MCP

🚀 ⚙️ Widget MCP

Widget MCP 可以為你的大語言模型（LLM）聊天添加簡單的小部件，適用於常見場景，如計時器、單位轉換等，極大提升交互體驗。

演示視頻：https://youtu.be/4gfom42vHkc

🚀 快速開始

本項目可通過不同的 MCP 客戶端使用，以下為你介紹在不同客戶端的使用方法。

Smithery

你可以在 Smithery 沙盒中嘗試 widget - mcp。（注意：Smithery 部署待完成）

Goose

1. 安裝 Goose
2. 點擊 Extensions 並選擇 Add custom extension
3. 輸入名稱 Widgets 和命令 npx widget - mcp
4. 點擊 Chat 並輸入 2 minute timer 來驗證是否正常工作

✨ 主要特性

當前小部件

• Timer：可編輯的計時器，計時結束會有提示音。
• Stopwatch：僅進行計時的秒錶。
• Conversion：在大語言模型能給出公式的一組單位之間進行轉換。
• Display Fact：當答案簡單時，以易讀卡片形式展示。

待添加小部件示例

• Color Picker：交互式顏色選擇和調色板工具。可設置參數，讓大語言模型推薦顏色，用戶可進行調整和探索。
• Calculator：具備基本和科學計算功能的計算器，初始功能由大語言模型提供。
• Dice Roller：根據你向代理提出的需求生成自定義骰子組。

📦 安裝指南

開發依賴安裝

# 安裝依賴
npm install

開發命令

# 熱加載方式開發 HTML
npm run dev:html

# 使用 Smithery 的 Web 檢查器啟動 MCP 服務器
npm run dev:mcp

🔧 技術細節

MCP - UI 為突破過去幾年我們使用的聊天界面的“文本牆”問題提供瞭解決思路（參考：breaking the text wall）。本項目通過為常見場景提供一些簡單的小部件，展示了其應用的可能性。

所有這些小部件都是可以注入變量（例如大語言模型提供的值）的 HTML 頁面。若要添加新的小部件，只需在 html 目錄中添加一個模板文件，並在 index.ts 中添加一個新工具。你可以通過提示“Add a widget html and tool to do . Look at index.ts and timer.html for examples of how” 來完成添加。

📚 詳細文檔

相關鏈接

• MCP - UI：基於 MCP 的用戶界面。
• Smithery：查找和試用 MCP 服務器的便捷方式。
• Goose：Block 開源的 MCP 客戶端。
• PulseMCP：跟蹤 MCP 最新動態的最佳途徑。
• 項目維護者：Ref.，為你的編碼代理提供上下文支持。