The Widget MCP server provides interactive widgets for LLM chats to enhance user experience with time tracking, unit conversions, and information display.
Timer: Start and manage an editable timer for a specified duration (in seconds)
Stopwatch: Start a stopwatch that counts up from zero
Display Fact: Present concise facts with descriptions in an easy-to-read card format
Unit Conversion: Display a real-time conversion widget supporting multiple units with predefined formulas
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Widget MCP set a 5 minute timer for my tea"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Add simple widgets to you LLM chat for common situations like timers, conversions and more.
Demo video: https://youtu.be/4gfom42vHkc
MCP-UI opens the door to breaking the text wall from chat UIs we've been using the last few years. The full extent of what's possible is
This project shows the floor of what's possible by providing a few simple widgets for common situations.
If you've ever google "convert X to Y" or "2 minute timer" and see the custom UI results, this should feel very familiar.
Related MCP server: ChatGPT Apps MCP Server
Timer - Editable timer with a chime.
Stopwatch - Timer that just counts up.
Conversion - Convert between set of units for which the LLM can write a formula.
Display Fact - When the answer is simple, just show it in an easy to read card.
MCP-UI is new and as of August 2025 is only supported by a few clients.
Try widget-mcp in the Smithery playground. (TODO: pending Smithery deploy)
Click Extensions and Add custom extension
Fill in name as Widgets and command npx widget-mcp
Verify it's working by clicking Chat and prompting 2 minute timer
Here's a few examples of widgets that could be fun to add.
Color Picker - Interactive color selection and palette tools. Could be parameterized to allow the LLM to suggest a color and let the user tweak and explore.
Calculator - Basic and scientific calculator functionality. Initial function seeded by LLM.
Dice Roller - Custom set of dice based on what you ask the agent for.
I'm sure you have some cool ideas!
Adding new widgets should be very easy! All these widgets are HTML pages that can have variables injected (eg. values provided by the LLM). To add new widgets, add an template file to the html directory and a new tool to index.ts.
You can probably just prompt "Add a widget html and tool to do . Look at index.ts and timer.html for examples of how".
# 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:mcpUnclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
LLM chat, text summarization and AI image generation
60+ units, live FX, timezones, and date arithmetic for AI agents.
Renders interactive Chart.js charts and dashboards inline in AI conversations.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/ref-tools/widget-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
