mountly-mcp 3.1.0 → 4.0.1

package/templates/svelte/package.json.tmpl

@@ -0,0 +1,26 @@
+{
+  "name": "{{name}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "mountly-mcp dev --server ./server.mjs",
+    "verify": "mountly-mcp verify",
+    "verify:strict": "mountly-mcp verify --strict",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.30.0",
+    "mountly-mcp": "^{{mcpVersion}}",
+    "mountly-svelte": "^2.0.3",
+    "svelte": "^5.56.9",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.9.0",
+    "vite": "^8.2.1"
+  }
+}

package/templates/svelte/server.mjs.tmpl

@@ -0,0 +1,70 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { readMcpAppManifest } from "mountly-mcp/artifact";
+import { registerMcpApps } from "mountly-mcp/server";
+import { z } from "zod";
+
+const URI = "{{uri}}";
+
+function sampleCards() {
+  return [
+    { label: "Requests", value: Math.floor(1200 + Math.random() * 200) },
+    { label: "Latency", value: `${Math.floor(30 + Math.random() * 20)} ms` },
+    { label: "Uptime", value: "99.9%" },
+  ];
+}
+
+/** Default export for `mountly-mcp dev --server ./server.mjs`. */
+export default async function createServer() {
+  const server = new McpServer(
+    { name: "{{slug}}", version: "0.0.1" },
+    { capabilities: { tools: {}, resources: {} } },
+  );
+
+  const { artifacts } = await readMcpAppManifest("dist/mountly-mcp.manifest.json");
+
+  await registerMcpApps(server, {
+    views: artifacts.map((artifact) => ({ artifact })),
+    tools: [
+      {
+        name: "showDashboard",
+        resourceUri: URI,
+        config: {
+          description: "Show an interactive metrics dashboard",
+          inputSchema: {
+            topic: z.string().describe("Dashboard topic"),
+          },
+        },
+        handler: async ({ topic }) => ({
+          structuredContent: {
+            topic,
+            cards: [
+              { label: "Requests", value: 1284 },
+              { label: "Latency", value: "42 ms" },
+              { label: "Uptime", value: "99.9%" },
+            ],
+          },
+        }),
+      },
+      {
+        name: "refreshDashboard",
+        resourceUri: URI,
+        visibility: ["app"],
+        config: {
+          description: "Refresh dashboard metrics (app-only)",
+          inputSchema: {
+            reason: z.string().optional(),
+          },
+        },
+        handler: async ({ reason }) => ({
+          structuredContent: {
+            refreshedAt: new Date().toISOString(),
+            cards: sampleCards(),
+            reason: reason ?? null,
+          },
+        }),
+      },
+    ],
+  });
+
+  return server;
+}

package/templates/svelte/src/Dashboard.svelte.tmpl

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import type { McpViewProps } from "mountly-mcp";
+
+  interface DashboardCard {
+    label: string;
+    value: string | number;
+  }
+
+  interface DashboardData {
+    topic?: string;
+    refreshedAt?: string;
+    cards?: DashboardCard[];
+  }
+
+  interface DashboardResult {
+    structuredContent?: DashboardData;
+  }
+
+  let { mcp, toolResult }: McpViewProps = $props();
+
+  let data = $state<DashboardData | undefined>();
+  let busy = $state(false);
+  let status = $state("Connected.");
+
+  $effect(() => {
+    const next = (toolResult as DashboardResult | undefined)?.structuredContent;
+    if (next) data = next;
+  });
+
+  const cards = $derived(data?.cards ?? []);
+  const title = $derived(data?.topic ? `${data.topic} Dashboard` : "Dashboard");
+
+  async function refresh() {
+    busy = true;
+    status = "Refreshing…";
+    try {
+      const next = (await mcp.callServerTool({
+        name: "refreshDashboard",
+        arguments: { reason: "User clicked refresh" },
+      })) as DashboardResult;
+      const content = next.structuredContent;
+      if (content) {
+        data = {
+          ...data,
+          ...content,
+          topic: content.topic ?? data?.topic,
+        };
+      }
+      status = content?.refreshedAt
+        ? `Refreshed ${new Date(content.refreshedAt).toLocaleTimeString()}`
+        : "Refreshed.";
+    } catch (error) {
+      status = error instanceof Error ? error.message : "Refresh failed.";
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+<div class="card">
+  <p class="eyebrow">MCP App · Mountly</p>
+  <h1>{title}</h1>
+  <p class="subtitle">
+    Built with <code>mountly-mcp</code> — try Refresh to call an app-only tool.
+  </p>
+  <div class="grid">
+    {#if cards.length === 0}
+      {#each [1, 2, 3] as i (i)}
+        <div class="metric">
+          <div class="label">—</div>
+          <div class="value">—</div>
+        </div>
+      {/each}
+    {:else}
+      {#each cards as c (c.label)}
+        <div class="metric">
+          <div class="label">{c.label}</div>
+          <div class="value">{c.value}</div>
+        </div>
+      {/each}
+    {/if}
+  </div>
+  <div class="row">
+    <button type="button" disabled={busy} onclick={refresh}>Refresh data</button>
+    <span class="status">{status}</span>
+  </div>
+</div>
+
+<style>
+  .card {
+    border: 1px solid var(--color-border-primary, #e5e5e5);
+    border-radius: 12px;
+    padding: 20px;
+    background: var(--color-background-secondary, #fafafa);
+  }
+  .eyebrow {
+    margin: 0 0 8px;
+    color: var(--color-text-secondary, #737373);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+  h1 {
+    margin: 0 0 4px;
+    font-size: 20px;
+    font-weight: 600;
+  }
+  .subtitle {
+    color: var(--color-text-secondary, #737373);
+    font-size: 14px;
+    margin: 0 0 16px;
+  }
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    margin-bottom: 16px;
+  }
+  .metric {
+    border: 1px solid var(--color-border-primary, #e5e5e5);
+    border-radius: 8px;
+    padding: 12px;
+    background: var(--color-background-primary, #ffffff);
+  }
+  .label {
+    color: var(--color-text-secondary, #737373);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  .value {
+    margin-top: 4px;
+    font-size: 22px;
+    font-weight: 600;
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  button {
+    border: 1px solid var(--color-border-primary, #e5e5e5);
+    border-radius: 8px;
+    padding: 8px 14px;
+    background: var(--color-background-primary, #ffffff);
+    color: inherit;
+    cursor: pointer;
+    font-size: 13px;
+  }
+  button:disabled {
+    opacity: 0.6;
+    cursor: wait;
+  }
+  .status {
+    font-size: 12px;
+    color: var(--color-text-secondary, #737373);
+  }
+</style>

package/templates/svelte/src/view.ts.tmpl

@@ -0,0 +1,14 @@
+import { createMcpView } from "mountly-mcp/svelte";
+import Dashboard from "./Dashboard.svelte";
+
+const styles = `
+:root {
+  color-scheme: light dark;
+  font-family: system-ui, -apple-system, sans-serif;
+  background: var(--color-background-primary, #ffffff);
+  color: var(--color-text-primary, #171717);
+}
+body { margin: 0; padding: 20px; }
+`;
+
+createMcpView(Dashboard, { shadow: true, styles });

package/templates/svelte/tsconfig.json.tmpl

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte"]
+}

package/templates/svelte/vite.config.ts.tmpl

@@ -0,0 +1,22 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { mountlyMcpViews } from "mountly-mcp/vite";
+
+export default defineConfig({
+  plugins: [
+    svelte(),
+    mountlyMcpViews({
+      apps: [
+        {
+          entry: "src/view.ts",
+          uri: "{{uri}}",
+          name: "dashboard",
+          description: "Interactive metrics dashboard",
+          displayModes: ["inline", "fullscreen"],
+          prefersBorder: true,
+          awaitToolResult: true,
+        },
+      ],
+    }),
+  ],
+});

package/templates/vanilla/.gitignore.tmpl

@@ -0,0 +1,4 @@
+node_modules
+dist
+.DS_Store
+*.log

package/templates/vanilla/README.md.tmpl

@@ -0,0 +1,20 @@
+# {{name}}
+
+MCP App scaffolded with `mountly-mcp create`.
+
+```bash
+pnpm install
+pnpm dev      # sandboxed host on :5179
+pnpm verify   # conformance
+```
+
+- View: `src/view.ts` (`publishMcpView`)
+- Server: `server.mjs` (`registerMcpApps`)
+- Fixtures: `mcp.fixtures.json` (tool args when using `--server`)
+
+No framework, no adapter: a View is just `mount` / `update` / `unmount`, so
+`publishMcpView` takes the object directly. The bridge drives it exactly as it
+drives a React, Vue or Svelte View. Add a framework later by swapping
+`publishMcpView(...)` for that framework's `createMcpView(Component)`.
+
+Do not clone the Mountly monorepo for greenfield apps — this project is the canonical path.

package/templates/vanilla/mcp.fixtures.json.tmpl

@@ -0,0 +1,4 @@
+{
+  "server-usage": { "topic": "server usage" },
+  "billing": { "topic": "billing" }
+}

package/templates/vanilla/package.json.tmpl

@@ -0,0 +1,22 @@
+{
+  "name": "{{name}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "mountly-mcp dev --server ./server.mjs",
+    "verify": "mountly-mcp verify",
+    "verify:strict": "mountly-mcp verify --strict",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.30.0",
+    "mountly-mcp": "^{{mcpVersion}}",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.0",
+    "vite": "^8.2.1"
+  }
+}

package/templates/vanilla/server.mjs.tmpl

@@ -0,0 +1,70 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { readMcpAppManifest } from "mountly-mcp/artifact";
+import { registerMcpApps } from "mountly-mcp/server";
+import { z } from "zod";
+
+const URI = "{{uri}}";
+
+function sampleCards() {
+  return [
+    { label: "Requests", value: Math.floor(1200 + Math.random() * 200) },
+    { label: "Latency", value: `${Math.floor(30 + Math.random() * 20)} ms` },
+    { label: "Uptime", value: "99.9%" },
+  ];
+}
+
+/** Default export for `mountly-mcp dev --server ./server.mjs`. */
+export default async function createServer() {
+  const server = new McpServer(
+    { name: "{{slug}}", version: "0.0.1" },
+    { capabilities: { tools: {}, resources: {} } },
+  );
+
+  const { artifacts } = await readMcpAppManifest("dist/mountly-mcp.manifest.json");
+
+  await registerMcpApps(server, {
+    views: artifacts.map((artifact) => ({ artifact })),
+    tools: [
+      {
+        name: "showDashboard",
+        resourceUri: URI,
+        config: {
+          description: "Show an interactive metrics dashboard",
+          inputSchema: {
+            topic: z.string().describe("Dashboard topic"),
+          },
+        },
+        handler: async ({ topic }) => ({
+          structuredContent: {
+            topic,
+            cards: [
+              { label: "Requests", value: 1284 },
+              { label: "Latency", value: "42 ms" },
+              { label: "Uptime", value: "99.9%" },
+            ],
+          },
+        }),
+      },
+      {
+        name: "refreshDashboard",
+        resourceUri: URI,
+        visibility: ["app"],
+        config: {
+          description: "Refresh dashboard metrics (app-only)",
+          inputSchema: {
+            reason: z.string().optional(),
+          },
+        },
+        handler: async ({ reason }) => ({
+          structuredContent: {
+            refreshedAt: new Date().toISOString(),
+            cards: sampleCards(),
+            reason: reason ?? null,
+          },
+        }),
+      },
+    ],
+  });
+
+  return server;
+}

package/templates/vanilla/src/view.ts.tmpl

@@ -0,0 +1,177 @@
+import { publishMcpView, type McpViewProps } from "mountly-mcp";
+
+/**
+ * No framework, no adapter. A View is just `mount` / `update` / `unmount`, so
+ * `publishMcpView` takes this object directly — the bridge drives it exactly
+ * as it drives a React, Vue or Svelte View.
+ */
+
+interface DashboardCard {
+  label: string;
+  value: string | number;
+}
+
+interface DashboardData {
+  topic?: string;
+  refreshedAt?: string;
+  cards?: DashboardCard[];
+}
+
+interface DashboardResult {
+  structuredContent?: DashboardData;
+}
+
+const STYLES = `
+:host, :root { color-scheme: light dark; }
+.card {
+  font-family: system-ui, -apple-system, sans-serif;
+  border: 1px solid var(--color-border-primary, #e5e5e5);
+  border-radius: 12px;
+  padding: 20px;
+  background: var(--color-background-secondary, #fafafa);
+  color: var(--color-text-primary, #171717);
+}
+.eyebrow {
+  margin: 0 0 8px;
+  color: var(--color-text-secondary, #737373);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: .1em;
+}
+h1 { margin: 0 0 16px; font-size: 20px; font-weight: 600; }
+.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
+.metric {
+  border: 1px solid var(--color-border-primary, #e5e5e5);
+  border-radius: 8px;
+  padding: 12px;
+  background: var(--color-background-primary, #fff);
+}
+.label {
+  color: var(--color-text-secondary, #737373);
+  font-size: 11px;
+  text-transform: uppercase;
+}
+.value { margin-top: 4px; font-size: 22px; font-weight: 600; }
+.row { display: flex; align-items: center; gap: 10px; }
+button {
+  border: 1px solid var(--color-border-primary, #e5e5e5);
+  border-radius: 8px;
+  padding: 8px 14px;
+  background: var(--color-background-primary, #fff);
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+}
+button:disabled { opacity: .6; cursor: wait; }
+.status { font-size: 12px; color: var(--color-text-secondary, #737373); }
+`;
+
+/** Per-container state, so several instances on one page stay independent. */
+const instances = new WeakMap<Element, { data?: DashboardData; status: string; busy: boolean }>();
+
+function el(tag: string, className?: string, text?: string): HTMLElement {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  // textContent, never innerHTML: tool results are data, not markup.
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+function render(container: Element, props: McpViewProps): void {
+  const state = instances.get(container);
+  if (!state) return;
+
+  const data = state.data;
+  const cards = data?.cards ?? [];
+
+  container.replaceChildren();
+
+  const style = document.createElement("style");
+  style.textContent = STYLES;
+
+  const card = el("div", "card");
+  card.append(el("p", "eyebrow", "MCP App · Mountly"));
+  card.append(el("h1", undefined, data?.topic ? `${data.topic} Dashboard` : "Dashboard"));
+
+  const grid = el("div", "grid");
+  const shown: DashboardCard[] = cards.length > 0 ? cards : [
+    { label: "—", value: "—" },
+    { label: "—", value: "—" },
+    { label: "—", value: "—" },
+  ];
+  for (const c of shown) {
+    const metric = el("div", "metric");
+    metric.append(el("div", "label", c.label));
+    metric.append(el("div", "value", String(c.value)));
+    grid.append(metric);
+  }
+  card.append(grid);
+
+  const row = el("div", "row");
+  const button = el("button") as HTMLButtonElement;
+  button.type = "button";
+  button.textContent = "Refresh data";
+  button.disabled = state.busy;
+  button.addEventListener("click", () => void refresh(container, props));
+  const status = el("span", "status", state.status);
+  row.append(button, status);
+  card.append(row);
+
+  container.append(style, card);
+}
+
+async function refresh(container: Element, props: McpViewProps): Promise<void> {
+  const state = instances.get(container);
+  if (!state || state.busy) return;
+  state.busy = true;
+  state.status = "Refreshing…";
+  render(container, props);
+
+  try {
+    const next = (await props.mcp.callServerTool({
+      name: "refreshDashboard",
+      arguments: { reason: "User clicked refresh" },
+    })) as DashboardResult;
+    const content = next.structuredContent;
+    if (content) {
+      state.data = { ...state.data, ...content, topic: content.topic ?? state.data?.topic };
+    }
+    state.status = content?.refreshedAt
+      ? `Refreshed ${new Date(content.refreshedAt).toLocaleTimeString()}`
+      : "Refreshed.";
+  } catch (error) {
+    state.status = error instanceof Error ? error.message : "Refresh failed.";
+  } finally {
+    state.busy = false;
+    render(container, props);
+  }
+}
+
+publishMcpView({
+  mount(container, props) {
+    const typed = props as McpViewProps;
+    instances.set(container, {
+      data: (typed.toolResult as DashboardResult | undefined)?.structuredContent,
+      status: "Connected.",
+      busy: false,
+    });
+    render(container, typed);
+  },
+
+  // The bridge calls this on every new tool-result or host-context change.
+  // Updating in place keeps focus and scroll, which a remount would lose.
+  update(container, props) {
+    const typed = props as McpViewProps;
+    const state = instances.get(container);
+    if (!state) return;
+    const incoming = (typed.toolResult as DashboardResult | undefined)?.structuredContent;
+    if (incoming) state.data = incoming;
+    render(container, typed);
+  },
+
+  unmount(container) {
+    instances.delete(container);
+    container.replaceChildren();
+  },
+});

package/templates/vanilla/tsconfig.json.tmpl

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*.ts"]
+}

package/templates/vanilla/vite.config.ts.tmpl

@@ -0,0 +1,20 @@
+import { defineConfig } from "vite";
+import { mountlyMcpViews } from "mountly-mcp/vite";
+
+export default defineConfig({
+  plugins: [
+    mountlyMcpViews({
+      apps: [
+        {
+          entry: "src/view.ts",
+          uri: "{{uri}}",
+          name: "dashboard",
+          description: "Interactive metrics dashboard",
+          displayModes: ["inline", "fullscreen"],
+          prefersBorder: true,
+          awaitToolResult: true,
+        },
+      ],
+    }),
+  ],
+});

package/templates/vue/.gitignore.tmpl

@@ -0,0 +1,4 @@
+node_modules
+dist
+.DS_Store
+*.log

package/templates/vue/README.md.tmpl

@@ -0,0 +1,14 @@
+# {{name}}
+
+MCP App scaffolded with `mountly-mcp create --framework vue`.
+
+```bash
+pnpm install
+pnpm dev
+pnpm verify
+```
+
+- View: `src/view.ts` + `src/Dashboard.vue`
+- Server: `server.mjs` (`registerMcpApps`)
+
+Do not clone the Mountly monorepo for greenfield apps — this project is the canonical path.

package/templates/vue/mcp.fixtures.json.tmpl

@@ -0,0 +1,4 @@
+{
+  "server-usage": { "topic": "server usage" },
+  "billing": { "topic": "billing" }
+}