mountly-mcp 0.0.0 → 4.0.0

package/templates/react/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/react/src/view.tsx.tmpl

@@ -0,0 +1,160 @@
+import { useEffect, useState } from "react";
+import {
+  createMcpView,
+  useHostStyles,
+  useMcpApp,
+  useToolResult,
+} from "mountly-mcp/react";
+
+interface DashboardCard {
+  label: string;
+  value: string | number;
+}
+
+interface DashboardData {
+  topic?: string;
+  refreshedAt?: string;
+  cards?: DashboardCard[];
+}
+
+interface DashboardResult {
+  structuredContent?: DashboardData;
+}
+
+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; }
+.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: .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: .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:hover:not(:disabled) { background: var(--color-background-secondary, #f5f5f5); }
+button:disabled { opacity: 0.6; cursor: wait; }
+.status { font-size: 12px; color: var(--color-text-secondary, #737373); }
+`;
+
+function Dashboard() {
+  useHostStyles();
+  const app = useMcpApp();
+  const result = useToolResult<DashboardResult>();
+  const [data, setData] = useState<DashboardData | undefined>(result?.structuredContent);
+  const [busy, setBusy] = useState(false);
+  const [status, setStatus] = useState("Connected.");
+
+  useEffect(() => {
+    if (result?.structuredContent) setData(result.structuredContent);
+  }, [result]);
+
+  const cards = data?.cards ?? [];
+  const title = data?.topic ? `${data.topic} Dashboard` : "Dashboard";
+
+  async function refresh() {
+    setBusy(true);
+    setStatus("Refreshing…");
+    try {
+      const next = await app.callServerTool({
+        name: "refreshDashboard",
+        arguments: { reason: "User clicked refresh" },
+      });
+      const content = (next as DashboardResult).structuredContent;
+      if (content) {
+        setData((prev) => ({
+          ...prev,
+          ...content,
+          topic: content.topic ?? prev?.topic,
+        }));
+      }
+      setStatus(
+        content?.refreshedAt
+          ? `Refreshed ${new Date(content.refreshedAt).toLocaleTimeString()}`
+          : "Refreshed.",
+      );
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : "Refresh failed.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="card">
+      <p className="eyebrow">MCP App · Mountly</p>
+      <h1>{title}</h1>
+      <p className="subtitle">
+        Built with <code>mountly-mcp</code> — try Refresh to call an app-only tool.
+      </p>
+      <div className="grid">
+        {cards.length === 0
+          ? [1, 2, 3].map((i) => (
+              <div className="metric" key={i}>
+                <div className="label">—</div>
+                <div className="value">—</div>
+              </div>
+            ))
+          : cards.map((c) => (
+              <div className="metric" key={c.label}>
+                <div className="label">{c.label}</div>
+                <div className="value">{String(c.value)}</div>
+              </div>
+            ))}
+      </div>
+      <div className="row">
+        <button type="button" disabled={busy} onClick={() => void refresh()}>
+          Refresh data
+        </button>
+        <span className="status">{status}</span>
+      </div>
+    </div>
+  );
+}
+
+createMcpView(Dashboard, { shadow: true, styles });

package/templates/react/tsconfig.json.tmpl

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

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

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

package/templates/svelte/.gitignore.tmpl

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

package/templates/svelte/README.md.tmpl

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

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

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

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": "^3.1.0",
+    "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/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" }
+}

package/templates/vue/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": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.30.0",
+    "mountly-mcp": "^3.1.0",
+    "mountly-vue": "^2.0.3",
+    "vue": "^3.5.41",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.8",
+    "typescript": "^5.9.0",
+    "vite": "^8.2.1",
+    "vue-tsc": "^2.2.0"
+  }
+}