explainx.aijoin newsletter3.01k
productivity

MCP-UI Widgets▌

by ref-tools

Explore MCP-UI Widgets, a React UI library offering timers, stopwatches, and unit converters for dynamic, customizable R

Demo: Provides MCP-UI components including timers, stopwatches, fact displays, and unit converters through templated HTML widgets that replace JavaScript configuration objects with user-provided parameters for dynamic content creation.

github stars

★ 50

GitHubnpm
Interactive HTML widgets instead of plain textWorks with MCP-UI compatible clients

best for

  • / Replacing quick Google searches for timers and conversions
  • / Breaking up text-heavy chat interfaces with visual widgets
  • / Adding interactive elements to AI assistant responses

capabilities

  • / Start customizable timers with audio alerts
  • / Run stopwatches that count up from zero
  • / Display facts in easy-to-read cards
  • / Convert between units with real-time calculations

what it does

Provides interactive HTML widgets for common tasks like timers, stopwatches, unit conversions, and fact displays that can be embedded in chat interfaces.

about

MCP-UI Widgets is a community-built MCP server published by ref-tools that provides AI assistants with tools and capabilities via the Model Context Protocol. Explore MCP-UI Widgets, a React UI library offering timers, stopwatches, and unit converters for dynamic, customizable R It is categorized under productivity. This server exposes 4 tools that AI clients can invoke during conversations and coding sessions.

how to install

You can install MCP-UI Widgets in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport. This server supports remote connections over HTTP, so no local installation is required.

license

Unlicense

MCP-UI Widgets is released under the Unlicense license. This is a permissive open-source license, meaning you can freely use, modify, and distribute the software.

readme

⚙️ Widget MCP

Add simple widgets to you LLM chat for common situations like timers, conversions and more.

widget-mcp

Demo video: https://youtu.be/4gfom42vHkc

Motivation

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.

Current widgets

  • 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.

Supported MCP Clients

MCP-UI is new and as of August 2025 is only supported by a few clients.

Smithery

Try widget-mcp in the Smithery playground. (TODO: pending Smithery deploy)

Goose

  1. Install Goose
  2. Click Extensions and Add custom extension
  3. Fill in name as Widgets and command npx widget-mcp
  4. Verify it's working by clicking Chat and prompting 2 minute timer

Goose Setup

Requests for widgets

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!

Development

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 <somethingawesome>. 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:mcp

Links

  • MCP-UI - UI over MCP.
  • Smithery - Easiest way to find and try MCP servers.
  • Goose - Block's opensource MCP client.
  • PulseMCP - The best way to stay up-to-date on MCP.
  • Maintained by Ref. - Context for your coding agent.

FAQ

What is the MCP-UI Widgets MCP server?
MCP-UI Widgets is a Model Context Protocol (MCP) server profile on explainx.ai. MCP lets AI hosts (e.g. Claude Desktop, Cursor) call tools and resources through a standard interface; this page summarizes categories, install hints, and community ratings.
How do MCP servers relate to agent skills?
Skills are reusable instruction packages (often SKILL.md); MCP servers expose live capabilities. Teams frequently combine both—skills for workflows, MCP for APIs and data. See explainx.ai/skills and explainx.ai/mcp-servers for parallel directories.
How are reviews shown for MCP-UI Widgets?
This profile displays 10 aggregated ratings (sample rows for discoverability plus signed-in user reviews). Average score is about 4.5 out of 5—verify behavior in your own environment before production use.
MCP server reviews

Ratings

4.5★★★★★10 reviews
  • ★★★★★Shikha Mishra· Oct 10, 2024

    MCP-UI Widgets is among the better-indexed MCP projects we tried; the explainx.ai summary tracks the official description.

  • ★★★★★Piyush G· Sep 9, 2024

    We evaluated MCP-UI Widgets against two servers with overlapping tools; this profile had the clearer scope statement.

  • ★★★★★Chaitanya Patil· Aug 8, 2024

    Useful MCP listing: MCP-UI Widgets is the kind of server we cite when onboarding engineers to host + tool permissions.

  • ★★★★★Sakshi Patil· Jul 7, 2024

    MCP-UI Widgets reduced integration guesswork — categories and install configs on the listing matched the upstream repo.

  • ★★★★★Ganesh Mohane· Jun 6, 2024

    I recommend MCP-UI Widgets for teams standardizing on MCP; the explainx.ai page compares cleanly with sibling servers.

  • ★★★★★Oshnikdeep· May 5, 2024

    Strong directory entry: MCP-UI Widgets surfaces stars and publisher context so we could sanity-check maintenance before adopting.

  • ★★★★★Dhruvi Jain· Apr 4, 2024

    MCP-UI Widgets has been reliable for tool-calling workflows; the MCP profile page is a good permalink for internal docs.

  • ★★★★★Rahul Santra· Mar 3, 2024

    According to our notes, MCP-UI Widgets benefits from clear Model Context Protocol framing — fewer ambiguous “AI plugin” claims.

  • ★★★★★Pratham Ware· Feb 2, 2024

    We wired MCP-UI Widgets into a staging workspace; the listing’s GitHub and npm pointers saved time versus hunting across READMEs.

  • ★★★★★Yash Thakker· Jan 1, 2024

    MCP-UI Widgets is a well-scoped MCP server in the explainx.ai directory — install snippets and categories matched our Claude Code setup.