Skip to main content
Glama

Widget MCP

by ref-tools
npmGitHub
The Unlicense
5
47
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

⚙️ 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 . 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
  • 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.
Deploy Server
-
security - not tested
A
license - permissive license
-
quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

Adds interactive widgets to LLM chats for common tasks like timers, stopwatches, unit conversions, and displaying facts. Breaks away from text-only interfaces by providing visual, interactive components similar to Google's search result widgets.

  1. Motivation
    1. Current widgets
      1. Supported MCP Clients
        1. Smithery
        2. Goose
      2. Requests for widgets
        1. Development
          1. Links

            Related MCP Servers

            • MCP Perplexity Search

              spences10
              A
              security
              A
              license
              A
              quality
              Enables integration of Perplexity's AI API with LLMs, delivering advanced chat completion by utilizing specialized prompt templates for tasks like technical documentation, code review, and API documentation.
              Last updated -
              54
              8
              MIT License
              • Linux

            • emojikey-server MCP Server

              identimoji
              A
              security
              A
              license
              A
              quality
              Maintains consistent LLM interaction styles across conversations by storing emoji-based context keys (emojikeys) that can be used across different devices and applications.
              Last updated -
              22
              4
              MIT License
              • Apple

            • Linear MCP Server

              gerbal
              -
              security
              F
              license
              -
              quality
              Allows LLMs to integrate with Linear's issue tracking system, enabling them to create, update, search, and comment on issues through the Linear API.
              Last updated -
              374

            • Lightning Tools MCP Server

              getAlby
              A
              security
              F
              license
              A
              quality
              Enables interaction with lightning addresses and common lightning tools via your LLM, providing Lightning Network functionality through natural language.
              Last updated -
              3
              7
              1

            View all related MCP servers

            New MCP Servers

            MCP directory API

            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