mcp-hub
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@mcp-hublist all available widgets in the hub"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
English | 中文
mcp-hub

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 | |
MCP endpoint |
|
Discovery | |
Agent index |
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 |
| 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 to Chart | Data | Chart a CSV instantly (bar or line). |
| ECharts Data Visualization | Data | Render interactive Apache ECharts charts from an ECharts option — line, bar, pie, radar, scatter, sankey and more. |
| JSON-LD / Schema Viewer | Data | Inspect, validate and explore structured JSON / JSON-LD with a collapsible tree, syntax checks and JSON-LD detection. |
| Statistics | Data | Mean, median, standard deviation and a histogram for a data set. |
| Color Blindness Simulator | Design | Preview a color under different color-vision deficiencies. |
| Color Palette | Design | Generate a harmonious palette from a base color. |
| Color Studio & Contrast | Design | Convert between hex/RGB/HSL, generate tints and shades, and check WCAG contrast against black and white. |
| CSS Effects Studio | Design | Design gradients, box-shadows and border-radius with live previews and copy-ready CSS. |
| Favicon Generator | Design | Turn text or an emoji into a favicon. |
| Image Compressor | Design | Compress an image in the browser. |
| Image to Base64 | Design | Convert an image to a data URI / Base64. |
| QR Code Generator | Design | Generate a QR code from text or a URL. |
| Bit Visualizer | Developer | See an integer as a grid of bits, with binary/octal/hex. |
| Cron & Regex Debugger | Developer | Translate a cron schedule into plain language, preview the next runs, and test regular expressions with live highlighting. |
| Hash Generator | Developer | Compute SHA-1 / SHA-256 / SHA-512 digests of text as hex and base64, entirely in your browser. |
| JWT Decoder | Developer | Decode a JWT into its header, payload and claims, and check whether it is expired. |
| 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 Code | Everyday | Decode a 4-band resistor into ohms. |
| Unit Converter | Everyday | Convert length, mass, area, volume, temperature, speed, data and time units. |
| World Clock | Everyday | Live times across major cities with a day/night indicator. |
| Amount in Chinese | Finance | Render an amount in Chinese capital numerals, like a receipt. |
| Compound Interest | Finance | Project compound growth over time. |
| Loan Calculator | Finance | Monthly payment, total interest and a balance chart. |
| Dice Roller | Games | Roll cryptographically-random dice and read the total. |
| 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 | Games | Spin a wheel to fairly pick from a list. |
| Reaction Test | Games | Interactive reaction-time measurement. |
| Typing Test | Games | Measure typing speed and accuracy. |
| 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 | Math | Plot circles, ellipses, parabolas and hyperbolas with live sliders, showing foci, eccentricity and asymptotes. |
| Function Grapher | Math | Plot common functions with live parameter sliders (linear, inverse, quadratic, power, exponential, logarithmic) and read off key features. |
| Geometry Lab | Math | Drag triangles, quadrilaterals and circles to explore sides, angles, area and the Pythagorean / sine / cosine theorems. |
| Matrix Calculator | Math | Multiply, transpose and take determinants of matrices. |
| Trigonometry Lab | Math | Explore the unit circle and trigonometric functions y = A·sin(ωx+φ)+k with live sliders for amplitude, period and phase. |
| API Health & Latency | Monitoring | Probe an API endpoint, measure live latency, and view a 24h uptime and latency dashboard. |
| DNS Lookup | Monitoring | Resolve DNS records over DNS-over-HTTPS. |
| HTTP Inspector | Monitoring | Fetch a URL and inspect status, redirects and headers. |
| Password Strength | Security | Estimate password strength and entropy. |
| TOTP Generator | Security | Generate time-based one-time codes (2FA). |
| 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) |
| SEO landing page for one tool (prerendered + SPA) |
| Category landing page, e.g. |
| Sandboxed, per-widget single-file app (iframe / MCP Apps) |
| Raw per-widget bundle (used internally) |
| MCP endpoint (Streamable HTTP / JSON-RPC) |
| Agent discovery document |
| SEO / GEO surfaces |
| 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 |
| Vite dev server (UI only; no Worker/MCP) |
| Serve |
| Type-check, build web, per-widget embeds, OG images, prerender |
| Fast path: type-check + web build only |
| Preview the built site with |
| Vitest unit + MCP integration tests |
| ESLint |
| App TypeScript |
| Worker TypeScript |
|
|
Development
pnpm install
pnpm dev # http://localhost:5173 (UI only)
pnpm build && pnpm dev:worker # full stack incl. /mcp on http://localhost:8787
pnpm testDeployment (Cloudflare)
Deploys as a Worker with static assets (wrangler.jsonc):
main→worker/index.tshandles/mcp,/mcp/sse,/.well-known/mcp.json,/embed/:id,/tools/:idand 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
Add a
ToolMetaentry inshared/tools.ts(id, i18n,inputSchema, examples).Add the widget in
src/widgets/<id>/and register it insrc/widgets/registry.ts.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
This server cannot be deployed
Maintenance
Related MCP Connectors
MCP server for your apps' tools and custom tools, plus hosted AI agents and approval-gated workflows
The OpenRouter for tools. One MCP connection gives any AI agent 254 hosted tools, pay per call.
Zero-setup MCP gateway securely connecting AI to your tools with authentication and workflows
Build your own tools from chat: design, test and host them on a shareable MCP server URL.
Related MCP Servers
- AlicenseNot gradedqualityCmaintenanceExposes identity, tools, workflows, guardrails, and evaluation as MCP tools — so any AI agent can read and write your ecosystem programmatically.19 npmMIT
- AlicenseNot gradedqualityDmaintenanceEnables AI agents to discover and execute tools via a secure MCP server with JWT authentication, RBAC, rate limiting, and audit logging.1MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI agents to access a unified catalog of tools from various APIs (OpenAPI, GraphQL, MCP, Google Discovery) through the MCP protocol.4 npmMIT
- AlicenseNot gradedqualityCmaintenanceEnables 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 npmMIT