Widget MCP

⚙️ 微件MCP

在LLM聊天中添加简单的小部件，用于计时器、转换等常见情况。

widget-mcp

演示视频：https://youtu.be/4gfom42vHkc

动机

MCP-UI为 打破文字墙 来自我们过去几年一直使用的聊天UI。可能性的全部范围是

这个项目通过为常见情况提供一些简单的小部件来展示可能的情况。

如果你曾经在谷歌上搜索“将X转换为Y”或“2分钟计时器”并看到自定义UI结果，这应该会让你感到非常熟悉。

当前小部件

• Timer -带有蜂鸣声的可编辑定时器。
• Stopwatch -计时器刚刚开始计时。
• Conversion -在LLM可以编写公式的单位集之间进行转换。
• Display Fact -当答案很简单时，只需在易于阅读的卡片上显示即可。

支持的MCP客户端

MCP-UI是新的，截至2025年8月，只有少数客户支持它。

铁匠铺

在Smithery游乐场尝试小部件mcp。（TODO：Smithery部署待定）

鹅

1. 安装鹅
2. 点击 Extensions 和 Add custom extension
3. 填写姓名 Widgets 和指挥 npx widget-mcp
4. 单击以验证其是否正常工作 Chat 并提示 2 minute timer

Goose Setup

小部件请求

这里有一些小部件的例子，可以很有趣地添加。

• 颜色选择器 -交互式颜色选择和调色板工具。可以参数化，以允许LLM建议颜色，并让用户调整和探索。
• 计算器 -基本和科学的计算器功能。LLM播种的初始函数。
• 摇骰子 -根据您向代理人要求的内容定制一套骰子。

我相信你有一些很酷的想法！

发展

添加新的小部件应该很容易！所有这些小部件都是HTML页面，可以注入变量（例如LLM提供的值）。要添加新的小部件，请将模板文件添加到 html 目录和一个新的工具 index.ts.

你可能只需要提示“添加一个小部件html和工具来做 请查看index.ts和timer.html以获取如何操作的示例。

# Install dependencies
npm install

# Iterate on the html with hot-reloads
npm run dev:html

# Launch the MCP server with Smithery's web inspector
npm run dev:mcp

链接

• MCP-UI -MCP上的UI。
• 铁匠铺 -查找和尝试MCP服务器的最简单方法。
• 鹅 -Block的开源MCP客户端。
• PulseMCP -了解MCP最新信息的最佳方式。
• 由维护 文件编号 -您的编码代理的上下文。