Layovelle

Interactive Apps

Documentation

Legacy. This section documents the original Layovelle MCP server at mcp.moda.app/mcp, built around start_design_task and get_moda_canvas. It is superseded by Layovelle for Agents — the moda CLI wherever your agent has a shell, and the Layovelle connector for claude.ai and other chat hosts. The connector replaces this server, so the tools below retire with it. These pages stay published for existing integrations; start new ones on Layovelle for Agents.

Some Layovelle MCP tools ship with paired interactive UIs. Hosts that support the io.modelcontextprotocol/ui extension — currently claude.ai web and Claude Desktop — render an embedded iframe on top of the tool’s normal JSON result. The same tools called from any other MCP host (Claude Code, Cursor, custom clients) return exactly the same JSON they always did. Interactive apps are purely additive. Interactive apps are useful when:

The tool returns visual data (canvases, brand colors, logos) that’s much easier to scan as a grid of thumbnails than as JSON
The tool starts a long-running job whose progress benefits from a live view
The user might want to take a follow-up action (search, set as default, remove) without round-tripping through the LLM

Available apps

App	Tool(s)	What it shows
Canvas Gallery	`list_my_canvases`	A grid of canvas thumbnails with names and last-updated timestamps. The inline search box and “Show more” both re-call `list_my_canvases` — forwarding the keyword and the active template filter — to refine and paginate results without involving the LLM. `search_canvases` is the JSON-only counterpart for agent-side lookups and renders no app.
Brand Kit Showcase	`list_brand_kits`	Per-kit cards with logos, color swatches, and live font samples. Includes a “Set as default” button that calls `set_default_brand_kit`.
Design Task Progress	`start_design_task`	Live progress, current step, and rendered page thumbnails as the design agent works. Polls `get_task_status` itself every couple of seconds and updates in place — no need to block the tool call or have the LLM babysit the polling loop.
Brand Kit Image Gallery	`list_brand_kit_images`	Logos and reference images grouped by role, with a per-card Remove button that calls `remove_brand_kit_image`.

How it works

Each tool’s result includes a _meta.ui.resourceUri pointing to a ui://moda/... HTML resource. Iframe-aware hosts fetch that resource, hand it the tool result, and render it next to (or in place of) the raw JSON. Apps can call back into the same MCP server via app.callServerTool(...) to refine results, paginate, or perform follow-up actions — those follow-up calls hit the same authenticated session as the originating tool call.

Non-interactive hosts

Hosts that don’t support io.modelcontextprotocol/ui simply ignore the _meta.ui block and present the raw tool result as before. Every interactive feature has a non-interactive equivalent:

The Design Task Progress iframe replaces an explicit get_task_status polling loop. On non-interactive hosts, the host (or its LLM) polls get_task_status(task_id) directly.
The “Set as default” button calls set_default_brand_kit, which is also callable directly when a user explicitly asks to change their default.
The Remove button calls remove_brand_kit_image, which is also directly callable.

If you’re building an MCP integration, you can ignore interactive apps entirely and rely on the JSON tool results — nothing breaks, nothing is hidden.

Interactive Apps

​Available apps

​How it works

​Non-interactive hosts

Available apps

How it works

Non-interactive hosts