Widget MCP

Widget MCP is a project that adds simple widgets to LLM chats, including common functions such as timers, unit conversions, and fact displays. It supports the MCP - UI protocol and can be used through Smithery and Goose clients.

Artificial intelligence chatbots Developer tools #Widget tool #Unit conversion #Timing function #MCP service .TypeScript

rating : 2.5 points

downloads : 0

update time : 2025-09-09

Open Site

What is Widget MCP?

Widget MCP is a Model Context Protocol server dedicated to providing visual widget functions for LLM chat interfaces. It allows AI assistants to embed interactive components, such as timers and unit converters, in conversations, enabling users to directly operate and view results in the chat interface.

How to use Widget MCP?

After installing the Widget MCP server through a supported MCP client (such as Smithery or Goose), simply enter relevant instructions in the chat (such as 'Set a 2 - minute timer' or 'Convert temperature'), and the AI assistant will automatically call the corresponding widgets to provide services.

Applicable scenarios

Suitable for scenarios that require quick access to common tools, such as time management, unit conversion, and simple calculations. It is particularly suitable for situations that require immediate interactive feedback during AI conversations.

Main features

Timer

An editable countdown timer that emits a prompt sound when the time is up and supports custom durations.

Stopwatch

A forward - counting function that records the elapsed time, suitable for sports timing or task timing.

Unit conversion

Supports conversion between multiple units. LLM can write conversion formulas to achieve flexible conversion functions.

Information display card

A concise information display interface that presents simple answers in card form to improve readability.

Advantages

Provide an intuitive interactive interface, breaking the limitation of pure text chats.

Allows users to use common tools without leaving the chat interface.

Supports custom widgets with strong scalability.

Seamlessly integrates with LLM and intelligently calls corresponding functions.

Limitations

Currently only supports a few MCP clients (Smithery and Goose).

Requires additional installation and configuration steps.

Some advanced functions may require technical knowledge for customization.

How to use

Install an MCP client

Select and install a client that supports MCP - UI, such as Goose or Smithery

Add the Widget MCP server

Add Widget MCP in the client extension settings using the command 'npx widget - mcp'

Start using widgets

Enter relevant instructions in the chat, and the AI assistant will automatically call the corresponding widgets

Usage examples

Kitchen timing

Set a timed reminder during the cooking process

Currency conversion

Quickly view currency exchange rate conversions

Sports timing

Record sports or exercise time

Frequently Asked Questions

Which chat clients support Widget MCP?

How to add custom widgets?

Is Widget MCP free?

Do I need programming knowledge to use it?

Related resources

MCP - UI official website

Learn about the MCP - UI protocol and standards

Smithery platform

Online playground environment to experience Widget MCP

Goose client

An open - source MCP client by Block

Demo video

A demo video of Widget MCP functions

GitHub repository

Project source code and contribution guidelines

🚀 Widget MCP

Add simple widgets to your LLM chat for common scenarios such as timers, conversions, and more.

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

🚀 Quick Start

This project offers a straightforward way to integrate useful widgets into your LLM chat. You can start using these widgets based on the supported MCP clients introduced below.

✨ Features

Current widgets

Timer - An editable timer with a chime.
Stopwatch - A timer that simply counts up.
Conversion - Convert between a set of units for which the LLM can write a formula.
Display Fact - When the answer is simple, display it in an easy - to - read card.

Requests for widgets

Here are some widget ideas that could be interesting to add:

Color Picker - Interactive color selection and palette tools. It could be parameterized to allow the LLM to suggest a color and let the user tweak and explore.
Calculator - Basic and scientific calculator functionality. The initial function is seeded by the LLM.
Dice Roller - A custom set of dice based on what you ask the agent for.

📦 Installation

Supported MCP Clients

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

Smithery

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

Goose

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

🔧 Technical Details

Development

Adding new widgets is quite easy! All these widgets are HTML pages that can have variables injected (e.g., values provided by the LLM). To add new widgets, add a 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:mcp

📚 Documentation

Motivation

MCP - UI opens the door to breaking the text wall from chat UIs we've been using in the last few years. The full extent of what's possible is yet to be explored.

This project shows the basic possibilities by providing a few simple widgets for common situations.

If you've ever googled "convert X to Y" or "2 minute timer" and seen the custom UI results, this should feel very familiar.