Skip to main content
Glama
Gholls

mcp-hub

English | 中文

mcp-hub

CI License: MIT

mcp-hub — interactive micro-tools for humans and AI agents

Interactive micro-tools for humans and AI agents, served from mcp.gholl.com.

  • For humans — a login-free playground of fast, single-purpose widgets.

  • For AI agents — the same widgets exposed as MCP tools that render as sandboxed iframe apps (MCP Apps).

Reference implementation. mcp-hub is a working reference for the MCP Apps interactive-UI pattern (SEP-1865): every tool ships a self-contained UI card over resources/read, side by side with the pure-data MCP path.

One tool definition (shared/tools.ts) powers four surfaces: the gallery, the SEO landing page, the sandboxed embed, and the MCP server + discovery document.

Live

Site

https://mcp.gholl.com

MCP endpoint

https://mcp.gholl.com/mcp (Streamable HTTP, no auth)

Discovery

https://mcp.gholl.com/.well-known/mcp.json

Agent index

https://mcp.gholl.com/llms.txt

Tools

The live catalogue has 41 cards across 13 categories (Culture, Data, Design, Developer, Education, Everyday, Finance, Games, Infrastructure, Math, Monitoring, Security, Text). See the gallery at https://mcp.gholl.com or the machine-readable list at https://mcp.gholl.com/.well-known/mcp.json. Full list:

id

Tool

Category

What it does

chrono-energy

BaZi Chrono-Energy Wheel

Culture

Compute the Four Pillars (BaZi) from a birth date/time and explore the five-element energy wheel and luck cycles.

csv-chart

CSV to Chart

Data

Chart a CSV instantly (bar or line).

echarts

ECharts Data Visualization

Data

Render interactive Apache ECharts charts from an ECharts option — line, bar, pie, radar, scatter, sankey and more.

schema-viewer

JSON-LD / Schema Viewer

Data

Inspect, validate and explore structured JSON / JSON-LD with a collapsible tree, syntax checks and JSON-LD detection.

statistics

Statistics

Data

Mean, median, standard deviation and a histogram for a data set.

color-blindness

Color Blindness Simulator

Design

Preview a color under different color-vision deficiencies.

color-palette

Color Palette

Design

Generate a harmonious palette from a base color.

color-studio

Color Studio & Contrast

Design

Convert between hex/RGB/HSL, generate tints and shades, and check WCAG contrast against black and white.

css-effects

CSS Effects Studio

Design

Design gradients, box-shadows and border-radius with live previews and copy-ready CSS.

favicon-generator

Favicon Generator

Design

Turn text or an emoji into a favicon.

image-compressor

Image Compressor

Design

Compress an image in the browser.

image-to-base64

Image to Base64

Design

Convert an image to a data URI / Base64.

qr-generator

QR Code Generator

Design

Generate a QR code from text or a URL.

bit-visualizer

Bit Visualizer

Developer

See an integer as a grid of bits, with binary/octal/hex.

cron-debugger

Cron & Regex Debugger

Developer

Translate a cron schedule into plain language, preview the next runs, and test regular expressions with live highlighting.

hash-generator

Hash Generator

Developer

Compute SHA-1 / SHA-256 / SHA-512 digests of text as hex and base64, entirely in your browser.

jwt-decoder

JWT Decoder

Developer

Decode a JWT into its header, payload and claims, and check whether it is expired.

quiz

Quiz

Education

A universal quiz card. The AI defines the questions, the options, each option’s score and how many to show per page; the card renders them and reports the answers back.

resistor-color

Resistor Color Code

Everyday

Decode a 4-band resistor into ohms.

unit-converter

Unit Converter

Everyday

Convert length, mass, area, volume, temperature, speed, data and time units.

world-clock

World Clock

Everyday

Live times across major cities with a day/night indicator.

chinese-money

Amount in Chinese

Finance

Render an amount in Chinese capital numerals, like a receipt.

compound-interest

Compound Interest

Finance

Project compound growth over time.

loan-calculator

Loan Calculator

Finance

Monthly payment, total interest and a balance chart.

dice-roller

Dice Roller

Games

Roll cryptographically-random dice and read the total.

gomoku

Gomoku · Play vs AI

Games

Play Gomoku (five-in-a-row) against your host AI. The card provides the board, move rules and win detection.

random-picker

Random Picker

Games

Spin a wheel to fairly pick from a list.

reaction-test

Reaction Test

Games

Interactive reaction-time measurement.

typing-test

Typing Test

Games

Measure typing speed and accuracy.

vram-calc

GPU VRAM & Deployment Estimator

Infrastructure

Estimate the VRAM required to serve an LLM and get GPU recommendations with ready-to-copy vLLM / Ollama commands.

conic-sections

Conic Sections

Math

Plot circles, ellipses, parabolas and hyperbolas with live sliders, showing foci, eccentricity and asymptotes.

function-grapher

Function Grapher

Math

Plot common functions with live parameter sliders (linear, inverse, quadratic, power, exponential, logarithmic) and read off key features.

geometry-lab

Geometry Lab

Math

Drag triangles, quadrilaterals and circles to explore sides, angles, area and the Pythagorean / sine / cosine theorems.

matrix-calculator

Matrix Calculator

Math

Multiply, transpose and take determinants of matrices.

trig-lab

Trigonometry Lab

Math

Explore the unit circle and trigonometric functions y = A·sin(ωx+φ)+k with live sliders for amplitude, period and phase.

api-uptime

API Health & Latency

Monitoring

Probe an API endpoint, measure live latency, and view a 24h uptime and latency dashboard.

dns-lookup

DNS Lookup

Monitoring

Resolve DNS records over DNS-over-HTTPS.

http-inspector

HTTP Inspector

Monitoring

Fetch a URL and inspect status, redirects and headers.

password-strength

Password Strength

Security

Estimate password strength and entropy.

totp-generator

TOTP Generator

Security

Generate time-based one-time codes (2FA).

text-diff

Text Diff

Text

Line-by-line diff between two texts.

Related MCP server: Enterprise MCP Gateway and Tool Registry

Routes

Path

Purpose

/

Tool gallery + playground (prerendered)

/tools/:id

SEO landing page for one tool (prerendered + SPA)

/:category

Category landing page, e.g. /math, /developer (prerendered)

/embed/:id

Sandboxed, per-widget single-file app (iframe / MCP Apps)

/app/:id/index.html

Raw per-widget bundle (used internally)

/mcp, /mcp/sse

MCP endpoint (Streamable HTTP / JSON-RPC)

/.well-known/mcp.json

Agent discovery document

/llms.txt, /sitemap.xml, /robots.txt

SEO / GEO surfaces

/og/:name.png

Generated Open Graph images

GET /mcp (no text/event-stream) returns the discovery document; a browser gets a help page. POST /mcp is the JSON-RPC transport. See docs/host-integration.md for the full matrix.

Stack

Vite · React 19 · TypeScript · Tailwind CSS v4 · @mcp-ui/* · @modelcontextprotocol/ext-apps · Apache ECharts · KaTeX · Cloudflare Workers + static assets · Vitest · GitHub Actions.

ECharts and KaTeX are imported lazily inside the widgets that need them, so they never affect the first paint of the site or other cards.

Architecture

shared/
  tools.ts            Single source of truth (ToolMeta: schema, i18n, examples)
  calc/               Pure logic reused by widgets AND the MCP server
  mcp/                MCP server, HTTP handler, discovery builders
worker/index.ts       Cloudflare Worker: /mcp, /.well-known, /embed, /tools, SPA
src/
  pages/              Home, ToolPage, EmbedPage
  components/         Layout, ToolCard, ParamTable, WidgetHost, ui, ...
  widgets/<id>/       Interactive widget components (lazy-loaded)
scripts/
  build-embeds.mjs    One self-contained HTML per widget -> dist/app/<id>
  build-og.mjs        Open Graph PNGs -> dist/og
  prerender.mjs       Crawler-visible HTML for / and /tools/<id> -> dist/tools
docs/                 integrations.md (clients), host-integration.md (hosts)

How the UI cards are delivered

Each tool returns a small result (text + structuredContent) plus _meta.ui.resourceUri = ui://gholl/<id>. Hosts fetch the card HTML via resources/read and get a self-contained single-file app (text/html;profile=mcp-app, no external requests). The same widgets are also served as regular pages (/tools/:id) and iframes (/embed/:id).

Performance & SEO/GEO

  • The main site is code-split (lazy routes + lazy widgets); first paint is ~2 KB HTML + ~100 KB gzip total. Widgets load only when opened.

  • Prerendered content is emitted for / and every /tools/:id, so AI crawlers that don't run JS still see full content, parameter tables and links.

  • Rich structured data: WebSite, ItemList, SoftwareApplication, BreadcrumbList, FAQPage, Organization. Per-tool OG images.

Scripts

Command

Description

pnpm dev

Vite dev server (UI only; no Worker/MCP)

pnpm dev:worker

Serve dist + Worker locally via wrangler dev (needs pnpm build first)

pnpm build

Type-check, build web, per-widget embeds, OG images, prerender

pnpm build:web

Fast path: type-check + web build only

pnpm preview

Preview the built site with vite preview

pnpm test / test:watch

Vitest unit + MCP integration tests

pnpm lint

ESLint

pnpm typecheck

App TypeScript

pnpm typecheck:functions

Worker TypeScript

pnpm deploy

pnpm build && wrangler deploy

Development

pnpm install
pnpm dev            # http://localhost:5173 (UI only)
pnpm build && pnpm dev:worker   # full stack incl. /mcp on http://localhost:8787
pnpm test

Deployment (Cloudflare)

Deploys as a Worker with static assets (wrangler.jsonc):

  • main → worker/index.ts handles /mcp, /mcp/sse, /.well-known/mcp.json, /embed/:id, /tools/:id and the SPA fallback.

  • assets.directory → ./dist, html_handling: none, not_found_handling: single-page-application.

Build command pnpm build, deploy command pnpm exec wrangler deploy (or connect the repo in the Cloudflare dashboard). Bind the custom domain mcp.gholl.com. Generated files (llms.txt, sitemap.xml, robots.txt, dist/app/*, dist/og/*, dist/tools/*) come from shared/tools.ts.

GEO note: Cloudflare's managed robots.txt / Content Signals policy can block AI crawlers (GPTBot, ClaudeBot, Perplexity, …). If you want AI engines to cite the site, allow those crawlers in the Cloudflare dashboard for this zone.

Connect a client

See docs/integrations.md for Claude Desktop / Code, Cursor, VS Code, LibreChat, Dify and FastGPT. Building a host? Use docs/host-integration.md. Registry metadata lives in server.json.

Adding a tool

  1. Add a ToolMeta entry in shared/tools.ts (id, i18n, inputSchema, examples).

  2. Add the widget in src/widgets/<id>/ and register it in src/widgets/registry.ts.

  3. Optionally add a server-side result in shared/mcp/server.ts (runTool).

Everything else — gallery card, landing page, per-widget embed, prerendered HTML, MCP tool listing, discovery document, OG image and sitemap entry — is generated automatically.

License

MIT

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI agents to access a unified catalog of tools from various APIs (OpenAPI, GraphQL, MCP, Google Discovery) through the MCP protocol.
    4 npm
    MIT
  • A
    license
    Not graded
    quality
    C
    maintenance
    Enables AI agents to securely discover, invoke, and manage tools through a hardened MCP endpoint with protections like injection detection, circuit breakers, retry backoff, response caching, context-window limiting, and state snapshots.
    15 npm
    MIT