Widget MCP

Widget MCP是一個為LLM聊天添加簡單小部件的項目，包括計時器、單位轉換和事實展示等常用功能，支持MCP-UI協議，可通過Smithery和Goose客戶端使用。

人工智能聊天機器人開發者工具 #小部件工具 #單位轉換 #計時功能 #MCP服務 .TypeScript

評分 : 2.5分

下載量 : 0

更新時間 : 2025-09-09

打開站點

什麼是Widget MCP?

Widget MCP是一個Model Context Protocol服務器，專門為LLM聊天界面提供可視化小部件功能。它允許AI助手在對話中嵌入交互式組件，如計時器、單位轉換器等，讓用戶能夠直接在聊天界面中進行操作和查看結果。

如何使用Widget MCP?

通過支持的MCP客戶端（如Smithery或Goose）安裝Widget MCP服務器後，只需在聊天中輸入相關指令（如'設置2分鐘計時器'或'轉換溫度'），AI助手就會自動調用相應的小部件來提供服務。

適用場景

適用於需要快速訪問常用工具的場景，如時間管理、單位換算、簡單計算等。特別適合在AI對話過程中需要即時交互反饋的情況。

主要功能

計時器

可編輯的倒計時器，時間到時會發出提示音，支持自定義時長

秒錶

正向計時功能，記錄經過的時間，適合運動計時或任務計時

單位轉換

支持多種單位間的轉換，LLM可以編寫轉換公式來實現靈活的轉換功能

信息展示卡

簡潔的信息展示界面，以卡片形式呈現簡單答案，提高可讀性

優勢

提供直觀的交互界面，打破純文本聊天的限制

無需離開聊天界面即可使用常用工具

支持自定義小部件，擴展性強

與LLM無縫集成，智能調用相應功能

侷限性

目前僅支持少數MCP客戶端（Smithery和Goose）

需要額外的安裝配置步驟

部分高級功能可能需要技術知識進行定製

如何使用

安裝MCP客戶端

選擇並安裝支持MCP-UI的客戶端，如Goose或Smithery

添加Widget MCP服務器

在客戶端擴展設置中添加Widget MCP，使用命令'npx widget-mcp'

開始使用小部件

在聊天中輸入相關指令，AI助手會自動調用相應的小部件

使用案例

廚房計時

在烹飪過程中設置定時提醒

貨幣轉換

快速查看貨幣匯率換算

運動計時

記錄運動或鍛鍊時間

常見問題

哪些聊天客戶端支持Widget MCP？

如何添加自定義小部件？

Widget MCP是免費的嗎？

是否需要編程知識才能使用？

🚀 ⚙️ Widget MCP

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

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

🚀 快速開始

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

Smithery

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

Goose

安裝 Goose
點擊 Extensions 並選擇 Add custom extension
輸入名稱 Widgets 和命令 npx widget - mcp
點擊 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” 來完成添加。