> ## Documentation Index
> Fetch the complete documentation index at: https://docs.moda.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Interactive Apps

> Hosts that support io.modelcontextprotocol/ui automatically render visual UIs on top of Moda's MCP tools.

Some Moda MCP tools ship with paired interactive UIs. Hosts that support the [`io.modelcontextprotocol/ui`](https://modelcontextprotocol.io/) 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`](/mcp/tools#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`](/mcp/tools#search_canvases) is the JSON-only counterpart for agent-side lookups and renders no app. |
| Brand Kit Showcase      | [`list_brand_kits`](/mcp/tools#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`](/mcp/tools#set_default_brand_kit).                                                                                                                                                                                                           |
| Design Task Progress    | [`start_design_task`](/mcp/tools#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`](/mcp/tools#list_brand_kit_images) | Logos and reference images grouped by role, with a per-card Remove button that calls [`remove_brand_kit_image`](/mcp/tools#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.