Skip to content
mountly

MCP Apps

Mountly supports MCP Apps as a first-class distribution path.

Use this path when you want a tool to return embeddable UI resources (ui://...) that MCP-capable hosts can render inline.

Packages

Section titled “Packages”
  • mountly-mcp — bridge runtime + build helpers (buildMcpResource, runBridge)
  • mountly-mcp-react — React widget wrapper (createMcpWidget) + context-bound hooks (useMcpHost, useToolInput, useToolResult, useHostStyleVariables, …)
  • mountly-mcp-server — server helper to register widget resources and tools with @modelcontextprotocol/sdk

End-to-end flow

Section titled “End-to-end flow”
  1. Build a widget bundle with your framework adapter and set globalThis.__mountlyMcpWidget__ = createMcpWidget(...).
  2. Emit an MCP Apps resource with buildMcpResource(...) to create:
  • widget.html
  • widget.html.meta.json
  1. Register both on the server with createMcpAppServer(...).
  2. MCP host calls your tool and receives _meta.ui.resourceUri.
  3. Host reads ui://... resource and renders the iframe.
  4. Bridge runs ui/initialize, then applies tool results via ui/notifications/tool-result.

Minimal build step

Section titled “Minimal build step”
import { buildMcpResource } from "mountly-mcp/build";


await buildMcpResource({
  entry: "./dist/widget.js",
  uri: "ui://example/demo",
  name: "demo",
  output: "./dist/demo.html",
  awaitToolResult: true,
});

Minimal server registration

Section titled “Minimal server registration”
import { createMcpAppServer } from "mountly-mcp-server";


const server = createMcpAppServer({
  name: "demo-server",
  version: "0.0.1",
  widgets: [
    {
      uri: "ui://example/demo",
      htmlPath: "./dist/demo.html",
      tool: {
        name: "show_demo",
        inputSchema: { type: "object", properties: {} },
        handler: async () => ({
          structuredContent: { message: "Hello from MCP Apps" },
        }),
      },
    },
  ],
});

Verify

Section titled “Verify”