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.，为你的编码代理提供上下文支持。