wau-en.mp4
Dynamic UI composition by humans and LLMs connected to multiple MCP servers.
An LLM agent (via remote API or in-browser WASM/WebGPU or locally) reads available tools and recipes from MCP + WebMCP servers, fetches data, and assembles typed UI blocks (stat cards, tables, charts, dashboards, geo...). Each block is exposed as a live WebMCP tool that agents can read and update. The system implements HyperSkills (hyperlink skills or recipes) for portable, versionable UI snapshots (?hs=gzip.base64).
| Package | Description |
|---|---|
@webmcp-auto-ui/agent |
Agent loop, providers (remote LLM / Gemma WASM / Ollama), autoui WebMCP server, lazy tool loading, recipes |
@webmcp-auto-ui/core |
MCP client, McpMultiClient, createWebMcpServer(), frontmatter parser, utilities |
@webmcp-auto-ui/sdk |
Canvas store (Svelte 5 + vanilla), Widget/WidgetType, HyperSkills encode/decode/hash/diff, Skills registry |
@webmcp-auto-ui/ui |
31 Svelte 5 components (blocks, widgets, layouts), WidgetRenderer, AgentConsole, ThemeProvider |
| App | Port | Description |
|---|---|---|
home |
static | Landing page with links to demos |
flex |
3007 | Full UI composer: agent chat, multi-MCP, canvas drag/resize, smart/explicit mode, debug panel, provenance badges, composer/consumer mode |
viewer |
3008 | HyperSkills reader: paste URI, CRUD blocks, DAG versions, export |
recipes |
3009 | MCP + WebMCP recipe explorer with live agent testing |
showcase |
3010 | Dynamic demo: all components with 3 themes, or agent-driven generation from an MCP server |
todo |
static | Minimal WebMCP todo |
boilerplate |
3011 | Starter template with 3 Tricoteuses widgets, tutorial-ready |
- MCP (Model Context Protocol) provides remote data tools — databases, APIs, external services
- WebMCP provides local display/interaction tools — widgets, renderers, UI actions
Both expose tools to the agent via the same layer() interface. Tool names follow the convention {source}_{protocol}_{tool} for disambiguation when multiple servers are connected.
createWebMcpServer(name, opts)-- create a WebMCP server with custom widgets and tools (in@webmcp-auto-ui/core)autoui-- pre-configured WebMCP server with all built-in widgets (in@webmcp-auto-ui/agent)- Unified system prompt -- recipe-driven 4-step workflow generated by
buildSystemPrompt(layers)(see docs/system-prompt.md) - Lazy tool loading --
buildDiscoveryTools()+activateServerTools()keep the initial prompt small, integrated with the system prompt steps - Recipes -- WebMCP recipes (
.mdfiles with frontmatter) + MCP recipes (served vialist_recipes/get_recipe) - Compression -- old tool results compressed to save context window
- WasmProvider -- Gemma 4 LiteRT running in-browser, native
<|tool_call|>format
npm install
# Copy .env.example to .env and add your LLM provider API key
cp .env.example .env
# Development
npm run dev:flex # single app (recommended)
npm run dev # all apps
# Tests
npm test
# Production deploy
./scripts/deploy.sh # all apps
./scripts/deploy.sh flex # single app- Site: https://jeanbaptiste.github.io/webmcp-auto-ui/ (40+ pages, FR + EN)
- Demos: https://demos.hyperskills.net/
- GitHub: https://github.com/jeanbaptiste/webmcp-auto-ui
- NPM:
@webmcp-auto-ui/agent,core,sdk,ui
- Chrome 146+ -- enable
chrome://flags/#enable-webmcp-testing - Install Model Context Tool Inspector
- Open any app -- tools registered by the page appear in the extension
https://example.com?hs=gz.base64(skill)
Skills are gzip-compressed and appended to their source URL. Each version carries a SHA-256 hash of source_url + content, chainable for traceability. Defined at hyperskills.net and available as an NPM package.
AGPL-3.0-or-later - Copyright CERI SAS