AI导哈

LLM聊天小工具

为LLM聊天添加简单小工具，如计时器、单位转换等，提升交互体验。

  • by ref-tools
  • HTML
  • 本地部署
  • 更新于
在 GitHub 查看 ref-tools/widget-mcp

使用说明

⚙️ 微件MCP

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

演示视频：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

小部件请求

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

  • 颜色选择器 -交互式颜色选择和调色板工具。可以参数化，以允许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最新信息的最佳方式。
  • 由维护 文件编号 -您的编码代理的上下文。

相关 MCP