Widget MCP

Simple MCP-UI widgets for common use cases.

html

50

GitHub Stars

html

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "ref-tools-widget-mcp": {
      "command": "npx",
      "args": [
        "widget-mcp"
      ]
    }
  }
}

Widget MCP lets you drop interactive widgets like timers and conversions into your LLM chat. It exposes simple HTML widgets that you can run as an MCP server and use from compatible MCP clients to perform common tasks right in the chat UI.

How to use

To use Widget MCP with a compatible MCP client, you connect the client to the Widget MCP server and then invoke the widget you want from the chat. Available widgets include a timer with a chime, a stopwatch that counts up, a conversion tool for unit changes, and a small information card display for simple answers. In the client, prompt the widget by its name (for example, asking for a timer) and interact with the on-screen controls or inputs provided by the widget.

How to install

Prerequisites: you need Node.js and npm installed on your machine.

Install dependencies and prepare the server for development.

# Install dependencies
npm install

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

# Launch the MCP server with the development command
npm run dev:mcp

Additional notes and setup tips

Supported MCP clients include Smithery and Goose. For Goose, add a custom extension named Widgets and use the command npx widget-mcp to run the server from the client extension. This lets you start using the widgets directly in your chat interface.

Available tools

Timer

Editable timer with a chime that you can start, pause, or reset from the chat UI.

Stopwatch

Timer that counts upward, suitable for tracking elapsed time during a task.

Conversion

Convert between common unit sets. The LLM can propose a formula and the widget applies the conversion.

Display Fact

Show a simple fact or answer in an easy-to-read card when the result is straightforward.