webmcp-auto-ui · demo WEBMCP-AUTO-UI WebMCP widgets connected to multiple MCP servers a quick tour What is an MCP server? MCP SERVER An RPC server designed to be called by AI agents Lives anywhere — local process, remote service, container. Speaks the Model Context Protocol over stdio, HTTP or SSE. Exposes tools and recipes the agent can discover and call. A tool a typed function the agent can call MCP SERVER tricoteuses → list_amendments → get_votes → query_sql CALL get_votes(year: 2026) RESULT [ {id, date, party, pour, contre, abst}, ... 43 items ] A recipe (MCP) a named playbook the server suggests to the agent MCP RECIPE SHAPE { name: string, description?: string } EXAMPLE name: "find-deputy-profile" description: "Use query_sql to retrieve a deputy by name, group, or constituency" The agent calls search_recipes(...) to discover them, then get_recipe(name) to read one. Recipes save the agent from re-deriving common query patterns from scratch. So an MCP server gives the agent tools (capabilities) + recipes (proven ways to use them). An MCP server says: "here is what I can do, here is how others have used it." What is a WebMCP server? WEBMCP SERVER Same idea, in the browser an MCP server that runs in the page Created by the page itself — not by a remote service. Exposes the things the page knows how to do visually. Its tools are called widgets; they ship with their own recipes too. A widget a UI building block exposed as a WebMCP tool WIDGET stat-card Revenue 45 230 ↑ +12.4% WIDGET chart WIDGET table A B C LFI 32 4 SOC 24 6 WIDGET timeline stat-card · chart · table · timeline · map · profile · gallery · hemicycle · kv... The agent calls component(name, props). The widget renders. A recipe (UI) a Markdown playbook for assembling widgets into a coherent dashboard UI RECIPE — dashboard-kpi.md FRONTMATTER id: compose-kpi-dashboard-from-aggregated-metrics name: Compose a KPI dashboard from aggregated metrics WHEN MCP data contains numeric metrics, totals, percentages, or aggregated stats COMPONENTS USED [stat-card, chart, table, kv] BODY (excerpt) component("stat-card", {label: "Revenue", value: "45 230 EUR", trend: "+12.4%", trendDir: "up"}) component("chart", {type: "bar", labels: months, ...}) A WebMCP server says: "here are my widgets, here are the patterns that work well." PUTTING IT TOGETHER The agent talks to both, the same way MCP SERVERS (REMOTE) data + behaviour tricoteuses → tools, recipes inaturalist → tools, recipes openmeteo → tools, recipes + many more... WEBMCP SERVER (LOCAL) widgets + UI recipes autoui → stat-card, chart... dashboard-kpi.md cross-server.md + 18 more recipes AGENT consumes both same layer() interface to the agent The agent does not see a difference between a remote tool and a local widget. EXAMPLE One call · from data to widget AGENT picks a tool, calls it MCP SERVER tricoteuses parliamentary data WEBMCP WIDGET component("timeline") Oct Nov Dec list_amendments() JSON payload PAYLOAD [{ date: "2025-10-08", count: 7, party: "LFI" }, { date: "2025-10-15", count: 4, party: "SOC" }, ...] One call. The demo below chains five. webmcp-auto-ui · flex 5 tool calls · 3 widgets · MCP + WebMCP Amendments to the 2026 budget bill, grouped by party, with the related votes submit agent TOOL CALLS → list_amendments source: tricoteuses_mcp → group_by(party) source: autoui_webmcp → component("timeline") source: autoui_webmcp → get_votes source: tricoteuses_mcp → component("chart") source: autoui_webmcp MCP CALL The agent fetches data from a remote MCP server. Here: tricoteuses. WEBMCP CALL The agent renders a widget locally. The widget itself becomes a tool the agent can re-read or update. Amendments — chronology By party PARTY FILED PASSED LFI 32 4 SOC 24 6 LR 21 8 REN 13 11 Votes — for / against LFI SOC LR REN SHARING THE COMPOSED UI HyperSkills — UI as a portable URL https://example.com?hs=gz.base64(skill) SOURCE URL where the skill is hosted used in the SHA-256 hash GZIP compressed to fit in URL length BASE64 URL-safe encoding appended to source URL Each version carries a SHA-256 hash of source_url + content, chainable for traceability. Defined at hyperskills.net · npm install hyperskills WEBMCP-AUTO-UI WebMCP widgets connected to multiple MCP servers @webmcp-auto-ui/agent · core · sdk · ui hyperskills.net AGPL-3.0-or-later · Copyright CERI SAS