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” 来完成添加。