mountly-mcp 3.1.0 → 4.0.0

package/dist/vite/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/vite/index.ts"],"sourcesContent":["import { rm } from \"node:fs/promises\";\nimport { basename, isAbsolute, join, resolve } from \"node:path\";\nimport type { BuildEnvironment, Plugin, UserConfig } from \"vite\";\nimport { MCP_APP_MANIFEST_FILE, writeMcpAppManifest } from \"../artifact/index.js\";\nimport type { McpAppArtifact } from \"../artifact/index.js\";\nimport { buildMcpResourceFromSource } from \"../build/index.js\";\nimport type { BuildSelfContainedOptions } from \"../build/index.js\";\n\nexport interface MountlyMcpWidgetOptions extends Omit<\n  BuildSelfContainedOptions,\n  \"entry\" | \"output\" | \"cssEntry\"\n> {\n  entry: string;\n  output?: string;\n  cleanIntermediate?: boolean;\n}\n\nexport interface MountlyMcpWidgetsOptions {\n  apps: ReadonlyArray<MountlyMcpWidgetOptions>;\n  /** Defaults to `<outDir>/mountly-mcp.manifest.json`; false disables it. */\n  manifest?: string | false;\n}\n\nexport type MountlyMcpViteOptions = MountlyMcpWidgetOptions | MountlyMcpWidgetsOptions;\n\nexport interface MountlyMcpViteApi {\n  apps: ReadonlyArray<MountlyMcpWidgetOptions>;\n  manifest?: string | false;\n}\n\nfunction isCollection(options: MountlyMcpViteOptions): options is MountlyMcpWidgetsOptions {\n  return \"apps\" in options;\n}\n\nfunction safeBuildName(name: string, index: number): string {\n  const safe = name.replace(/[^a-zA-Z0-9_-]/g, \"_\");\n  return `mountly_mcp_${index}_${safe || \"app\"}`;\n}\n\nfunction outputPath(root: string, outDir: string, app: MountlyMcpWidgetOptions): string {\n  if (!app.output) return join(outDir, `${basename(app.name)}.html`);\n  return isAbsolute(app.output) ? app.output : resolve(root, app.output);\n}\n\n/**\n * Build one or many independent MCP Apps Views. Each View is a Vite build\n * environment, so frameworks and CSS remain isolated while callers configure\n * the collection once.\n */\nexport function mountlyMcpWidget(options: MountlyMcpViteOptions): Plugin {\n  const configuredApps = isCollection(options) ? [...options.apps] : [options];\n  const selectedForDev = process.env.MOUNTLY_MCP_SELECTED_APP;\n  const apps = selectedForDev\n    ? configuredApps.filter((app) => app.name === selectedForDev)\n    : configuredApps;\n  const manifestOption = isCollection(options) ? options.manifest : undefined;\n  if (apps.length === 0) throw new Error(\"mountly-mcp: apps must contain at least one View\");\n\n  const names = new Set<string>();\n  const uris = new Set<string>();\n  for (const app of apps) {\n    if (!app.uri.startsWith(\"ui://\")) {\n      throw new Error(\n        `mountly-mcp: UI resource uri must use the 'ui://' scheme (received '${app.uri}')`,\n      );\n    }\n    if (names.has(app.name)) throw new Error(`mountly-mcp: duplicate app name '${app.name}'`);\n    if (uris.has(app.uri)) throw new Error(`mountly-mcp: duplicate app uri '${app.uri}'`);\n    names.add(app.name);\n    uris.add(app.uri);\n  }\n\n  const environments = apps.map((app, index) => ({\n    app,\n    name: safeBuildName(app.name, index),\n    jsFile: `widget-${index}-${basename(app.name)}.js`,\n    cssFile: `widget-${index}-${basename(app.name)}.css`,\n  }));\n  const byEnvironment = new Map(environments.map((environment) => [environment.name, environment]));\n  const emitted = new Map<\n    string,\n    { js?: string; css?: string; jsFile?: string; cssFile?: string; names: string[] }\n  >();\n  const artifacts = new Map<string, McpAppArtifact>();\n  let root = process.cwd();\n  let outDir = resolve(root, \"dist\");\n  let manifestWritten = false;\n\n  function currentEnvironment(context: unknown) {\n    const name = (context as { environment?: { name?: string } }).environment?.name;\n    return (\n      (name ? byEnvironment.get(name) : undefined) ??\n      (environments.length === 1 ? environments[0] : undefined)\n    );\n  }\n\n  const plugin: Plugin = {\n    name: \"mountly-mcp-widget\",\n    api: {\n      // The CLI consumes this documented plugin interface instead of scraping\n      // Vite's resolved build settings.\n      mountlyMcp: { apps: configuredApps, manifest: manifestOption } satisfies MountlyMcpViteApi,\n    },\n    // After Vite core plugins: css-post writes the stylesheet in its own\n    // closeBundle, and this plugin has to see the file to inline it.\n    enforce: \"post\",\n    // Only meaningful during `vite build`; a dev server has no bundle to emit.\n    apply: \"build\",\n\n    config(_config, env): UserConfig {\n      const first = environments[0];\n      if (!first) throw new Error(\"mountly-mcp: configure at least one app\");\n      return {\n        // Vite's lib mode leaves `process.env.NODE_ENV` for a consuming bundler\n        // to replace. There isn't one — the bundle is inlined into HTML and run\n        // in a sandboxed iframe, where `process` is undefined and React and Vue\n        // throw on their first environment check.\n        define: { \"process.env.NODE_ENV\": JSON.stringify(env.mode) },\n        // Legacy `vite build` builds one environment. Preserve that zero-config\n        // path for single-View projects; multi-View projects use\n        // `mountly-mcp build`, which drives the environments below.\n        build: {\n          lib: {\n            entry: first.app.entry,\n            // IIFE so the bundle inlines into a single <script> with no import\n            // graph left to resolve inside the sandboxed iframe.\n            formats: [\"iife\"] as const,\n            name: \"__mountlyMcpEntry0\",\n            fileName: () => first.jsFile,\n            // Named explicitly: otherwise a lib build derives the stylesheet\n            // name from package.json and fails outright when there isn't one.\n            cssFileName: first.cssFile.replace(/\\.css$/, \"\"),\n          },\n          // One stylesheet to inline; per-chunk CSS would strand imports.\n          cssCodeSplit: false,\n        },\n        builder: {\n          sharedPlugins: true,\n          async buildApp(builder) {\n            for (const environment of environments) {\n              const target = builder.environments[environment.name] as BuildEnvironment | undefined;\n              if (!target)\n                throw new Error(`mountly-mcp: missing Vite environment '${environment.name}'`);\n              await builder.build(target);\n            }\n          },\n        },\n        environments: Object.fromEntries(\n          environments.map((environment, index) => [\n            environment.name,\n            {\n              // A custom environment defaults to a server consumer, which\n              // externalizes node_modules — React and Vue would become bare\n              // globals and the view would die on `vue is not defined`. A\n              // `ui://` resource has no import graph at runtime, so everything\n              // must be bundled in.\n              consumer: \"client\" as const,\n              resolve: { noExternal: true as const },\n              build: {\n                emptyOutDir: index === 0,\n                lib: {\n                  entry: environment.app.entry,\n                  formats: [\"iife\"] as const,\n                  name: `__mountlyMcpEntry${index}`,\n                  fileName: () => environment.jsFile,\n                  cssFileName: environment.cssFile.replace(/\\.css$/, \"\"),\n                },\n                cssCodeSplit: false,\n              },\n            },\n          ]),\n        ),\n      };\n    },\n\n    configResolved(config) {\n      root = config.root;\n      outDir = resolve(config.root, config.build.outDir);\n    },\n\n    buildStart() {\n      const name = (this as { environment?: { name?: string } }).environment?.name;\n      if (apps.length > 1 && !byEnvironment.has(String(name))) {\n        this.error(\n          \"mountly-mcp: multi-View builds require 'mountly-mcp build' (or 'vite build --app') so Vite builds every environment\",\n        );\n      }\n    },\n\n    generateBundle: {\n      order: \"post\",\n      handler(_outputOptions, bundle) {\n        const environment = currentEnvironment(this);\n        if (!environment) return;\n        const chunk =\n          bundle[environment.jsFile] ??\n          Object.values(bundle).find((item) => item.type === \"chunk\" && item.isEntry);\n        const cssAsset =\n          bundle[environment.cssFile] ??\n          Object.values(bundle).find(\n            (item) => item.type === \"asset\" && item.fileName.endsWith(\".css\"),\n          );\n        emitted.set(environment.name, {\n          js: chunk && \"code\" in chunk ? chunk.code : undefined,\n          css: cssAsset && \"source\" in cssAsset ? cssAsset.source.toString() : undefined,\n          jsFile: chunk?.fileName,\n          cssFile: cssAsset?.fileName,\n          names: Object.keys(bundle),\n        });\n      },\n    },\n\n    async closeBundle() {\n      const environment = currentEnvironment(this);\n      if (!environment || artifacts.has(environment.name)) return;\n      const source = emitted.get(environment.name);\n      if (source?.js === undefined) {\n        this.error(\n          `mountly-mcp: the build emitted no ${environment.jsFile} for '${environment.app.entry}'. Emitted: ${source?.names.join(\", \") || \"nothing\"}`,\n        );\n        return;\n      }\n      const {\n        entry: _entry,\n        output: _output,\n        cleanIntermediate = true,\n        ...resourceOptions\n      } = environment.app;\n      const result = await buildMcpResourceFromSource({\n        ...resourceOptions,\n        js: source.js,\n        css: source.css,\n        output: outputPath(root, outDir, environment.app),\n      });\n      artifacts.set(environment.name, result.artifact);\n      if (cleanIntermediate) {\n        if (source.jsFile) await rm(join(outDir, source.jsFile), { force: true });\n        if (source.cssFile) await rm(join(outDir, source.cssFile), { force: true });\n      }\n      this.info?.(`mountly-mcp: ${environment.app.uri} → ${result.htmlPath}`);\n\n      if (!manifestWritten && artifacts.size === environments.length && manifestOption !== false) {\n        manifestWritten = true;\n        const path = manifestOption\n          ? isAbsolute(manifestOption)\n            ? manifestOption\n            : resolve(root, manifestOption)\n          : join(outDir, MCP_APP_MANIFEST_FILE);\n        await writeMcpAppManifest(\n          path,\n          environments.map((item) => artifacts.get(item.name) as McpAppArtifact),\n        );\n        this.info?.(`mountly-mcp: manifest → ${path}`);\n      }\n    },\n  };\n\n  return plugin;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/vite/index.ts"],"sourcesContent":["import { rm } from \"node:fs/promises\";\nimport { basename, isAbsolute, join, resolve } from \"node:path\";\nimport type { BuildEnvironment, Plugin, UserConfig } from \"vite\";\nimport { MCP_APP_MANIFEST_FILE, writeMcpAppManifest } from \"../artifact/index.js\";\nimport type { McpAppArtifact } from \"../artifact/index.js\";\nimport { buildMcpResourceFromSource } from \"../build/index.js\";\nimport type { BuildSelfContainedOptions } from \"../build/index.js\";\n\nexport interface MountlyMcpViewOptions extends Omit<\n  BuildSelfContainedOptions,\n  \"entry\" | \"output\" | \"cssEntry\"\n> {\n  entry: string;\n  output?: string;\n  cleanIntermediate?: boolean;\n}\n\nexport interface MountlyMcpViewsOptions {\n  apps: ReadonlyArray<MountlyMcpViewOptions>;\n  /** Defaults to `<outDir>/mountly-mcp.manifest.json`; false disables it. */\n  manifest?: string | false;\n}\n\nexport type MountlyMcpViteOptions = MountlyMcpViewOptions | MountlyMcpViewsOptions;\n\nexport interface MountlyMcpViteApi {\n  apps: ReadonlyArray<MountlyMcpViewOptions>;\n  manifest?: string | false;\n}\n\nfunction isCollection(options: MountlyMcpViteOptions): options is MountlyMcpViewsOptions {\n  return \"apps\" in options;\n}\n\nfunction safeBuildName(name: string, index: number): string {\n  const safe = name.replace(/[^a-zA-Z0-9_-]/g, \"_\");\n  return `mountly_mcp_${index}_${safe || \"app\"}`;\n}\n\nfunction outputPath(root: string, outDir: string, app: MountlyMcpViewOptions): string {\n  if (!app.output) return join(outDir, `${basename(app.name)}.html`);\n  return isAbsolute(app.output) ? app.output : resolve(root, app.output);\n}\n\n/**\n * Build one or many independent MCP Apps Views. Each View is a Vite build\n * environment, so frameworks and CSS remain isolated while callers configure\n * the collection once.\n */\nexport function mountlyMcpViews(options: MountlyMcpViteOptions): Plugin {\n  const configuredApps = isCollection(options) ? [...options.apps] : [options];\n  const selectedForDev = process.env.MOUNTLY_MCP_SELECTED_APP;\n  const apps = selectedForDev\n    ? configuredApps.filter((app) => app.name === selectedForDev)\n    : configuredApps;\n  const manifestOption = isCollection(options) ? options.manifest : undefined;\n  if (apps.length === 0) throw new Error(\"mountly-mcp: apps must contain at least one View\");\n\n  const names = new Set<string>();\n  const uris = new Set<string>();\n  for (const app of apps) {\n    if (!app.uri.startsWith(\"ui://\")) {\n      throw new Error(\n        `mountly-mcp: UI resource uri must use the 'ui://' scheme (received '${app.uri}')`,\n      );\n    }\n    if (names.has(app.name)) throw new Error(`mountly-mcp: duplicate app name '${app.name}'`);\n    if (uris.has(app.uri)) throw new Error(`mountly-mcp: duplicate app uri '${app.uri}'`);\n    names.add(app.name);\n    uris.add(app.uri);\n  }\n\n  const environments = apps.map((app, index) => ({\n    app,\n    name: safeBuildName(app.name, index),\n    jsFile: `view-${index}-${basename(app.name)}.js`,\n    cssFile: `view-${index}-${basename(app.name)}.css`,\n  }));\n  const byEnvironment = new Map(environments.map((environment) => [environment.name, environment]));\n  const emitted = new Map<\n    string,\n    { js?: string; css?: string; jsFile?: string; cssFile?: string; names: string[] }\n  >();\n  const artifacts = new Map<string, McpAppArtifact>();\n  let root = process.cwd();\n  let outDir = resolve(root, \"dist\");\n  let manifestWritten = false;\n\n  function currentEnvironment(context: unknown) {\n    const name = (context as { environment?: { name?: string } }).environment?.name;\n    return (\n      (name ? byEnvironment.get(name) : undefined) ??\n      (environments.length === 1 ? environments[0] : undefined)\n    );\n  }\n\n  const plugin: Plugin = {\n    name: \"mountly-mcp-views\",\n    api: {\n      // The CLI consumes this documented plugin interface instead of scraping\n      // Vite's resolved build settings.\n      mountlyMcp: { apps: configuredApps, manifest: manifestOption } satisfies MountlyMcpViteApi,\n    },\n    // After Vite core plugins: css-post writes the stylesheet in its own\n    // closeBundle, and this plugin has to see the file to inline it.\n    enforce: \"post\",\n    // Only meaningful during `vite build`; a dev server has no bundle to emit.\n    apply: \"build\",\n\n    config(_config, env): UserConfig {\n      const first = environments[0];\n      if (!first) throw new Error(\"mountly-mcp: configure at least one app\");\n      return {\n        // Vite's lib mode leaves `process.env.NODE_ENV` for a consuming bundler\n        // to replace. There isn't one — the bundle is inlined into HTML and run\n        // in a sandboxed iframe, where `process` is undefined and React and Vue\n        // throw on their first environment check.\n        define: { \"process.env.NODE_ENV\": JSON.stringify(env.mode) },\n        // Legacy `vite build` builds one environment. Preserve that zero-config\n        // path for single-View projects; multi-View projects use\n        // `mountly-mcp build`, which drives the environments below.\n        build: {\n          lib: {\n            entry: first.app.entry,\n            // IIFE so the bundle inlines into a single <script> with no import\n            // graph left to resolve inside the sandboxed iframe.\n            formats: [\"iife\"] as const,\n            name: \"__mountlyMcpEntry0\",\n            fileName: () => first.jsFile,\n            // Named explicitly: otherwise a lib build derives the stylesheet\n            // name from package.json and fails outright when there isn't one.\n            cssFileName: first.cssFile.replace(/\\.css$/, \"\"),\n          },\n          // One stylesheet to inline; per-chunk CSS would strand imports.\n          cssCodeSplit: false,\n        },\n        builder: {\n          sharedPlugins: true,\n          async buildApp(builder) {\n            for (const environment of environments) {\n              const target = builder.environments[environment.name] as BuildEnvironment | undefined;\n              if (!target)\n                throw new Error(`mountly-mcp: missing Vite environment '${environment.name}'`);\n              await builder.build(target);\n            }\n          },\n        },\n        environments: Object.fromEntries(\n          environments.map((environment, index) => [\n            environment.name,\n            {\n              // A custom environment defaults to a server consumer, which\n              // externalizes node_modules — React and Vue would become bare\n              // globals and the view would die on `vue is not defined`. A\n              // `ui://` resource has no import graph at runtime, so everything\n              // must be bundled in.\n              consumer: \"client\" as const,\n              resolve: { noExternal: true as const },\n              build: {\n                emptyOutDir: index === 0,\n                lib: {\n                  entry: environment.app.entry,\n                  formats: [\"iife\"] as const,\n                  name: `__mountlyMcpEntry${index}`,\n                  fileName: () => environment.jsFile,\n                  cssFileName: environment.cssFile.replace(/\\.css$/, \"\"),\n                },\n                cssCodeSplit: false,\n              },\n            },\n          ]),\n        ),\n      };\n    },\n\n    configResolved(config) {\n      root = config.root;\n      outDir = resolve(config.root, config.build.outDir);\n    },\n\n    buildStart() {\n      const name = (this as { environment?: { name?: string } }).environment?.name;\n      if (apps.length > 1 && !byEnvironment.has(String(name))) {\n        this.error(\n          \"mountly-mcp: multi-View builds require 'mountly-mcp build' (or 'vite build --app') so Vite builds every environment\",\n        );\n      }\n    },\n\n    generateBundle: {\n      order: \"post\",\n      handler(_outputOptions, bundle) {\n        const environment = currentEnvironment(this);\n        if (!environment) return;\n        const chunk =\n          bundle[environment.jsFile] ??\n          Object.values(bundle).find((item) => item.type === \"chunk\" && item.isEntry);\n        const cssAsset =\n          bundle[environment.cssFile] ??\n          Object.values(bundle).find(\n            (item) => item.type === \"asset\" && item.fileName.endsWith(\".css\"),\n          );\n        emitted.set(environment.name, {\n          js: chunk && \"code\" in chunk ? chunk.code : undefined,\n          css: cssAsset && \"source\" in cssAsset ? cssAsset.source.toString() : undefined,\n          jsFile: chunk?.fileName,\n          cssFile: cssAsset?.fileName,\n          names: Object.keys(bundle),\n        });\n      },\n    },\n\n    async closeBundle() {\n      const environment = currentEnvironment(this);\n      if (!environment || artifacts.has(environment.name)) return;\n      const source = emitted.get(environment.name);\n      if (source?.js === undefined) {\n        this.error(\n          `mountly-mcp: the build emitted no ${environment.jsFile} for '${environment.app.entry}'. Emitted: ${source?.names.join(\", \") || \"nothing\"}`,\n        );\n        return;\n      }\n      const {\n        entry: _entry,\n        output: _output,\n        cleanIntermediate = true,\n        ...resourceOptions\n      } = environment.app;\n      const result = await buildMcpResourceFromSource({\n        ...resourceOptions,\n        js: source.js,\n        css: source.css,\n        output: outputPath(root, outDir, environment.app),\n      });\n      artifacts.set(environment.name, result.artifact);\n      if (cleanIntermediate) {\n        if (source.jsFile) await rm(join(outDir, source.jsFile), { force: true });\n        if (source.cssFile) await rm(join(outDir, source.cssFile), { force: true });\n      }\n      this.info?.(`mountly-mcp: ${environment.app.uri} → ${result.htmlPath}`);\n\n      if (!manifestWritten && artifacts.size === environments.length && manifestOption !== false) {\n        manifestWritten = true;\n        const path = manifestOption\n          ? isAbsolute(manifestOption)\n            ? manifestOption\n            : resolve(root, manifestOption)\n          : join(outDir, MCP_APP_MANIFEST_FILE);\n        await writeMcpAppManifest(\n          path,\n          environments.map((item) => artifacts.get(item.name) as McpAppArtifact),\n        );\n        this.info?.(`mountly-mcp: manifest → ${path}`);\n      }\n    },\n  };\n\n  return plugin;\n}\n"],"mappings":"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","names":[]}

package/dist/vue/index.d.ts

@@ -1,12 +1,11 @@
 /**
- * Vue entry point: turn a Vue component into an MCP App view.
+ * Vue entry point: turn a Vue component into an MCP App View.
  *
  * ```ts
- * import { createMcpWidget } from "mountly-mcp/vue";
+ * import { createMcpView } from "mountly-mcp/vue";
  * import Dashboard from "./Dashboard.vue";
  *
- * const widget = createMcpWidget(Dashboard);
- * (globalThis as { __mountlyMcpWidget__?: unknown }).__mountlyMcpWidget__ = widget;
+ * createMcpView(Dashboard);
  * ```
  *
  * The component receives the bridge's props (`mcp`, `toolInput`, `toolResult`,
@@ -14,26 +13,22 @@
  * below, which mirror `mountly-mcp/react`'s hooks.
  */
 import { type Component, type ComputedRef, type InjectionKey } from "vue";
-import type { AdapterOptions, WidgetModule } from "mountly/adapter";
+import type { AdapterOptions } from "mountly/adapter";
 import type { App, McpUiDisplayMode, McpUiHostContext } from "@modelcontextprotocol/ext-apps";
-import type { McpWidgetProps } from "../types.js";
-/** What {@link createMcpWidget} provides to descendants. */
+import type { McpView, McpViewProps } from "../types.js";
+/** What {@link createMcpView} provides to descendants. */
 export interface McpVueContext {
     app: App;
-    toolInput?: McpWidgetProps["toolInput"];
-    toolInputPartial?: McpWidgetProps["toolInputPartial"];
-    toolResult?: McpWidgetProps["toolResult"];
+    toolInput?: McpViewProps["toolInput"];
+    toolInputPartial?: McpViewProps["toolInputPartial"];
+    toolResult?: McpViewProps["toolResult"];
     hostContext?: McpUiHostContext;
 }
 export declare const McpInjectionKey: InjectionKey<ComputedRef<McpVueContext>>;
-/**
- * Wraps a Vue component as a mountly `WidgetModule` driven by the mountly-mcp
- * bridge. The component's own props/attrs pass through unchanged; MCP bridge
- * props are consumed by the wrapper and provided to the subtree.
- */
-export declare function createMcpWidget<P extends object>(Component: Component<P>, options?: AdapterOptions): WidgetModule;
+/** Wraps a Vue component as an MCP Apps View and publishes it for the bridge. */
+export declare function createMcpView<P extends object>(Component: Component<P>, options?: AdapterOptions): McpView;
 /** The view-side ext-apps App: call server tools, send messages, open links. */
-export declare function useMcpHost(): App;
+export declare function useMcpApp(): App;
 /** Complete notification params; read the tool arguments from `.arguments`. */
 export declare function useToolInput<T = unknown>(): ComputedRef<T | undefined>;
 /**

package/dist/vue/index.js

@@ -1,3 +1,7 @@
+import {
+  publishMcpView
+} from "../chunk-SADNMGP6.js";
+
 // src/vue/index.ts
 import {
   computed,
@@ -8,7 +12,7 @@ import {
 } from "vue";
 import { createWidget } from "mountly-vue";
 var McpInjectionKey = /* @__PURE__ */ Symbol("mountly-mcp");
-function createMcpWidget(Component, options) {
+function createMcpView(Component, options) {
   const Wrapped = defineComponent({
     name: "MountlyMcpProvider",
     inheritAttrs: false,
@@ -31,18 +35,18 @@ function createMcpWidget(Component, options) {
       return () => h(Component, attrs);
     }
   });
-  return createWidget(Wrapped, options);
+  return publishMcpView(createWidget(Wrapped, options));
 }
 function useEnsuredContext() {
   const context = inject(McpInjectionKey, null);
   if (!context) {
     throw new Error(
-      "mountly-mcp/vue: useMcpHost/useToolResult/etc must be used inside a component wrapped with createMcpWidget()."
+      "mountly-mcp/vue: useMcpApp/useToolResult/etc must be used inside a component wrapped with createMcpView()."
     );
   }
   return context;
 }
-function useMcpHost() {
+function useMcpApp() {
   return useEnsuredContext().value.app;
 }
 function useToolInput() {
@@ -77,10 +81,10 @@ function useRequestDisplayMode() {
 }
 export {
   McpInjectionKey,
-  createMcpWidget,
+  createMcpView,
   useDisplayMode,
   useHostContext,
-  useMcpHost,
+  useMcpApp,
   useRequestDisplayMode,
   useToolInput,
   useToolInputPartial,

package/dist/vue/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/vue/index.ts"],"sourcesContent":["/**\n * Vue entry point: turn a Vue component into an MCP App view.\n *\n * ```ts\n * import { createMcpWidget } from \"mountly-mcp/vue\";\n * import Dashboard from \"./Dashboard.vue\";\n *\n * const widget = createMcpWidget(Dashboard);\n * (globalThis as { __mountlyMcpWidget__?: unknown }).__mountlyMcpWidget__ = widget;\n * ```\n *\n * The component receives the bridge's props (`mcp`, `toolInput`, `toolResult`,\n * `hostContext`) and can also reach them from any depth with the composables\n * below, which mirror `mountly-mcp/react`'s hooks.\n */\nimport {\n  computed,\n  defineComponent,\n  h,\n  inject,\n  provide,\n  type Component,\n  type ComputedRef,\n  type InjectionKey,\n} from \"vue\";\nimport { createWidget } from \"mountly-vue\";\nimport type { AdapterOptions, WidgetModule } from \"mountly/adapter\";\nimport type { App, McpUiDisplayMode, McpUiHostContext } from \"@modelcontextprotocol/ext-apps\";\nimport type { McpWidgetProps } from \"../types.js\";\n\n/** What {@link createMcpWidget} provides to descendants. */\nexport interface McpVueContext {\n  app: App;\n  toolInput?: McpWidgetProps[\"toolInput\"];\n  toolInputPartial?: McpWidgetProps[\"toolInputPartial\"];\n  toolResult?: McpWidgetProps[\"toolResult\"];\n  hostContext?: McpUiHostContext;\n}\n\nexport const McpInjectionKey: InjectionKey<ComputedRef<McpVueContext>> = Symbol(\"mountly-mcp\");\n\n/**\n * Wraps a Vue component as a mountly `WidgetModule` driven by the mountly-mcp\n * bridge. The component's own props/attrs pass through unchanged; MCP bridge\n * props are consumed by the wrapper and provided to the subtree.\n */\nexport function createMcpWidget<P extends object>(\n  Component: Component<P>,\n  options?: AdapterOptions,\n): WidgetModule {\n  const Wrapped = defineComponent({\n    name: \"MountlyMcpProvider\",\n    inheritAttrs: false,\n    props: {\n      mcp: { type: Object, required: true },\n      toolInput: { type: Object, default: undefined },\n      toolInputPartial: { type: Object, default: undefined },\n      toolResult: { type: Object, default: undefined },\n      hostContext: { type: Object, default: undefined },\n    },\n    setup(props, { attrs }) {\n      const context = computed<McpVueContext>(() => ({\n        app: props.mcp as App,\n        toolInput: props.toolInput as McpVueContext[\"toolInput\"],\n        toolInputPartial: props.toolInputPartial as McpVueContext[\"toolInputPartial\"],\n        toolResult: props.toolResult as McpVueContext[\"toolResult\"],\n        hostContext: props.hostContext as McpUiHostContext | undefined,\n      }));\n      provide(McpInjectionKey, context);\n      return () => h(Component as Component, attrs);\n    },\n  });\n  return createWidget(Wrapped, options);\n}\n\nfunction useEnsuredContext(): ComputedRef<McpVueContext> {\n  const context = inject(McpInjectionKey, null);\n  if (!context) {\n    throw new Error(\n      \"mountly-mcp/vue: useMcpHost/useToolResult/etc must be used inside a component wrapped with createMcpWidget().\",\n    );\n  }\n  return context;\n}\n\n/** The view-side ext-apps App: call server tools, send messages, open links. */\nexport function useMcpHost(): App {\n  return useEnsuredContext().value.app;\n}\n\n/** Complete notification params; read the tool arguments from `.arguments`. */\nexport function useToolInput<T = unknown>(): ComputedRef<T | undefined> {\n  const context = useEnsuredContext();\n  return computed(() => context.value.toolInput as T | undefined);\n}\n\n/**\n * Streaming tool arguments (`ui/notifications/tool-input-partial`), present only\n * when the bridge runs with `streamToolInput`. Best-effort recovered JSON —\n * render loading states from it, never critical operations.\n */\nexport function useToolInputPartial<T = unknown>(): ComputedRef<Partial<T> | undefined> {\n  const context = useEnsuredContext();\n  return computed(() => context.value.toolInputPartial as Partial<T> | undefined);\n}\n\n/** Complete MCP tool result; structured data is available at `.structuredContent`. */\nexport function useToolResult<T = unknown>(): ComputedRef<T | undefined> {\n  const context = useEnsuredContext();\n  return computed(() => context.value.toolResult as T | undefined);\n}\n\n/** Latest host context (theme, styles, displayMode, container dimensions). */\nexport function useHostContext(): ComputedRef<McpUiHostContext | undefined> {\n  const context = useEnsuredContext();\n  return computed(() => context.value.hostContext);\n}\n\n/** Current display mode reported by the host. */\nexport function useDisplayMode(): ComputedRef<McpUiDisplayMode | undefined> {\n  const context = useEnsuredContext();\n  return computed(() => context.value.hostContext?.displayMode);\n}\n\n/**\n * Request a display mode change, resolving to the mode the host actually\n * applied. Modes the host didn't advertise are never requested — the spec\n * requires views to check `availableDisplayModes` first.\n */\nexport function useRequestDisplayMode(): (\n  mode: McpUiDisplayMode,\n) => Promise<McpUiDisplayMode | undefined> {\n  const context = useEnsuredContext();\n  return async (mode) => {\n    const { app, hostContext } = context.value;\n    const available = hostContext?.availableDisplayModes;\n    if (available && !available.includes(mode)) return hostContext?.displayMode;\n    const result = await app.requestDisplayMode({ mode });\n    return result.mode;\n  };\n}\n"],"mappings":";AAeA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,oBAAoB;AActB,IAAM,kBAA4D,uBAAO,aAAa;AAOtF,SAAS,gBACd,WACA,SACc;AACd,QAAM,UAAU,gBAAgB;AAAA,IAC9B,MAAM;AAAA,IACN,cAAc;AAAA,IACd,OAAO;AAAA,MACL,KAAK,EAAE,MAAM,QAAQ,UAAU,KAAK;AAAA,MACpC,WAAW,EAAE,MAAM,QAAQ,SAAS,OAAU;AAAA,MAC9C,kBAAkB,EAAE,MAAM,QAAQ,SAAS,OAAU;AAAA,MACrD,YAAY,EAAE,MAAM,QAAQ,SAAS,OAAU;AAAA,MAC/C,aAAa,EAAE,MAAM,QAAQ,SAAS,OAAU;AAAA,IAClD;AAAA,IACA,MAAM,OAAO,EAAE,MAAM,GAAG;AACtB,YAAM,UAAU,SAAwB,OAAO;AAAA,QAC7C,KAAK,MAAM;AAAA,QACX,WAAW,MAAM;AAAA,QACjB,kBAAkB,MAAM;AAAA,QACxB,YAAY,MAAM;AAAA,QAClB,aAAa,MAAM;AAAA,MACrB,EAAE;AACF,cAAQ,iBAAiB,OAAO;AAChC,aAAO,MAAM,EAAE,WAAwB,KAAK;AAAA,IAC9C;AAAA,EACF,CAAC;AACD,SAAO,aAAa,SAAS,OAAO;AACtC;AAEA,SAAS,oBAAgD;AACvD,QAAM,UAAU,OAAO,iBAAiB,IAAI;AAC5C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,aAAkB;AAChC,SAAO,kBAAkB,EAAE,MAAM;AACnC;AAGO,SAAS,eAAwD;AACtE,QAAM,UAAU,kBAAkB;AAClC,SAAO,SAAS,MAAM,QAAQ,MAAM,SAA0B;AAChE;AAOO,SAAS,sBAAwE;AACtF,QAAM,UAAU,kBAAkB;AAClC,SAAO,SAAS,MAAM,QAAQ,MAAM,gBAA0C;AAChF;AAGO,SAAS,gBAAyD;AACvE,QAAM,UAAU,kBAAkB;AAClC,SAAO,SAAS,MAAM,QAAQ,MAAM,UAA2B;AACjE;AAGO,SAAS,iBAA4D;AAC1E,QAAM,UAAU,kBAAkB;AAClC,SAAO,SAAS,MAAM,QAAQ,MAAM,WAAW;AACjD;AAGO,SAAS,iBAA4D;AAC1E,QAAM,UAAU,kBAAkB;AAClC,SAAO,SAAS,MAAM,QAAQ,MAAM,aAAa,WAAW;AAC9D;AAOO,SAAS,wBAE2B;AACzC,QAAM,UAAU,kBAAkB;AAClC,SAAO,OAAO,SAAS;AACrB,UAAM,EAAE,KAAK,YAAY,IAAI,QAAQ;AACrC,UAAM,YAAY,aAAa;AAC/B,QAAI,aAAa,CAAC,UAAU,SAAS,IAAI,EAAG,QAAO,aAAa;AAChE,UAAM,SAAS,MAAM,IAAI,mBAAmB,EAAE,KAAK,CAAC;AACpD,WAAO,OAAO;AAAA,EAChB;AACF;","names":[]}
+{"version":3,"sources":["../../src/vue/index.ts"],"sourcesContent":["/**\n * Vue entry point: turn a Vue component into an MCP App View.\n *\n * ```ts\n * import { createMcpView } from \"mountly-mcp/vue\";\n * import Dashboard from \"./Dashboard.vue\";\n *\n * createMcpView(Dashboard);\n * ```\n *\n * The component receives the bridge's props (`mcp`, `toolInput`, `toolResult`,\n * `hostContext`) and can also reach them from any depth with the composables\n * below, which mirror `mountly-mcp/react`'s hooks.\n */\nimport {\n  computed,\n  defineComponent,\n  h,\n  inject,\n  provide,\n  type Component,\n  type ComputedRef,\n  type InjectionKey,\n} from \"vue\";\nimport { createWidget } from \"mountly-vue\";\nimport type { AdapterOptions } from \"mountly/adapter\";\nimport type { App, McpUiDisplayMode, McpUiHostContext } from \"@modelcontextprotocol/ext-apps\";\nimport type { McpView, McpViewProps } from \"../types.js\";\nimport { publishMcpView } from \"../publish.js\";\n\n/** What {@link createMcpView} provides to descendants. */\nexport interface McpVueContext {\n  app: App;\n  toolInput?: McpViewProps[\"toolInput\"];\n  toolInputPartial?: McpViewProps[\"toolInputPartial\"];\n  toolResult?: McpViewProps[\"toolResult\"];\n  hostContext?: McpUiHostContext;\n}\n\nexport const McpInjectionKey: InjectionKey<ComputedRef<McpVueContext>> = Symbol(\"mountly-mcp\");\n\n/** Wraps a Vue component as an MCP Apps View and publishes it for the bridge. */\nexport function createMcpView<P extends object>(\n  Component: Component<P>,\n  options?: AdapterOptions,\n): McpView {\n  const Wrapped = defineComponent({\n    name: \"MountlyMcpProvider\",\n    inheritAttrs: false,\n    props: {\n      mcp: { type: Object, required: true },\n      toolInput: { type: Object, default: undefined },\n      toolInputPartial: { type: Object, default: undefined },\n      toolResult: { type: Object, default: undefined },\n      hostContext: { type: Object, default: undefined },\n    },\n    setup(props, { attrs }) {\n      const context = computed<McpVueContext>(() => ({\n        app: props.mcp as App,\n        toolInput: props.toolInput as McpVueContext[\"toolInput\"],\n        toolInputPartial: props.toolInputPartial as McpVueContext[\"toolInputPartial\"],\n        toolResult: props.toolResult as McpVueContext[\"toolResult\"],\n        hostContext: props.hostContext as McpUiHostContext | undefined,\n      }));\n      provide(McpInjectionKey, context);\n      return () => h(Component as Component, attrs);\n    },\n  });\n  return publishMcpView(createWidget(Wrapped, options));\n}\n\nfunction useEnsuredContext(): ComputedRef<McpVueContext> {\n  const context = inject(McpInjectionKey, null);\n  if (!context) {\n    throw new Error(\n      \"mountly-mcp/vue: useMcpApp/useToolResult/etc must be used inside a component wrapped with createMcpView().\",\n    );\n  }\n  return context;\n}\n\n/** The view-side ext-apps App: call server tools, send messages, open links. */\nexport function useMcpApp(): App {\n  return useEnsuredContext().value.app;\n}\n\n/** Complete notification params; read the tool arguments from `.arguments`. */\nexport function useToolInput<T = unknown>(): ComputedRef<T | undefined> {\n  const context = useEnsuredContext();\n  return computed(() => context.value.toolInput as T | undefined);\n}\n\n/**\n * Streaming tool arguments (`ui/notifications/tool-input-partial`), present only\n * when the bridge runs with `streamToolInput`. Best-effort recovered JSON —\n * render loading states from it, never critical operations.\n */\nexport function useToolInputPartial<T = unknown>(): ComputedRef<Partial<T> | undefined> {\n  const context = useEnsuredContext();\n  return computed(() => context.value.toolInputPartial as Partial<T> | undefined);\n}\n\n/** Complete MCP tool result; structured data is available at `.structuredContent`. */\nexport function useToolResult<T = unknown>(): ComputedRef<T | undefined> {\n  const context = useEnsuredContext();\n  return computed(() => context.value.toolResult as T | undefined);\n}\n\n/** Latest host context (theme, styles, displayMode, container dimensions). */\nexport function useHostContext(): ComputedRef<McpUiHostContext | undefined> {\n  const context = useEnsuredContext();\n  return computed(() => context.value.hostContext);\n}\n\n/** Current display mode reported by the host. */\nexport function useDisplayMode(): ComputedRef<McpUiDisplayMode | undefined> {\n  const context = useEnsuredContext();\n  return computed(() => context.value.hostContext?.displayMode);\n}\n\n/**\n * Request a display mode change, resolving to the mode the host actually\n * applied. Modes the host didn't advertise are never requested — the spec\n * requires views to check `availableDisplayModes` first.\n */\nexport function useRequestDisplayMode(): (\n  mode: McpUiDisplayMode,\n) => Promise<McpUiDisplayMode | undefined> {\n  const context = useEnsuredContext();\n  return async (mode) => {\n    const { app, hostContext } = context.value;\n    const available = hostContext?.availableDisplayModes;\n    if (available && !available.includes(mode)) return hostContext?.displayMode;\n    const result = await app.requestDisplayMode({ mode });\n    return result.mode;\n  };\n}\n"],"mappings":";;;;;AAcA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,oBAAoB;AAetB,IAAM,kBAA4D,uBAAO,aAAa;AAGtF,SAAS,cACd,WACA,SACS;AACT,QAAM,UAAU,gBAAgB;AAAA,IAC9B,MAAM;AAAA,IACN,cAAc;AAAA,IACd,OAAO;AAAA,MACL,KAAK,EAAE,MAAM,QAAQ,UAAU,KAAK;AAAA,MACpC,WAAW,EAAE,MAAM,QAAQ,SAAS,OAAU;AAAA,MAC9C,kBAAkB,EAAE,MAAM,QAAQ,SAAS,OAAU;AAAA,MACrD,YAAY,EAAE,MAAM,QAAQ,SAAS,OAAU;AAAA,MAC/C,aAAa,EAAE,MAAM,QAAQ,SAAS,OAAU;AAAA,IAClD;AAAA,IACA,MAAM,OAAO,EAAE,MAAM,GAAG;AACtB,YAAM,UAAU,SAAwB,OAAO;AAAA,QAC7C,KAAK,MAAM;AAAA,QACX,WAAW,MAAM;AAAA,QACjB,kBAAkB,MAAM;AAAA,QACxB,YAAY,MAAM;AAAA,QAClB,aAAa,MAAM;AAAA,MACrB,EAAE;AACF,cAAQ,iBAAiB,OAAO;AAChC,aAAO,MAAM,EAAE,WAAwB,KAAK;AAAA,IAC9C;AAAA,EACF,CAAC;AACD,SAAO,eAAe,aAAa,SAAS,OAAO,CAAC;AACtD;AAEA,SAAS,oBAAgD;AACvD,QAAM,UAAU,OAAO,iBAAiB,IAAI;AAC5C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,YAAiB;AAC/B,SAAO,kBAAkB,EAAE,MAAM;AACnC;AAGO,SAAS,eAAwD;AACtE,QAAM,UAAU,kBAAkB;AAClC,SAAO,SAAS,MAAM,QAAQ,MAAM,SAA0B;AAChE;AAOO,SAAS,sBAAwE;AACtF,QAAM,UAAU,kBAAkB;AAClC,SAAO,SAAS,MAAM,QAAQ,MAAM,gBAA0C;AAChF;AAGO,SAAS,gBAAyD;AACvE,QAAM,UAAU,kBAAkB;AAClC,SAAO,SAAS,MAAM,QAAQ,MAAM,UAA2B;AACjE;AAGO,SAAS,iBAA4D;AAC1E,QAAM,UAAU,kBAAkB;AAClC,SAAO,SAAS,MAAM,QAAQ,MAAM,WAAW;AACjD;AAGO,SAAS,iBAA4D;AAC1E,QAAM,UAAU,kBAAkB;AAClC,SAAO,SAAS,MAAM,QAAQ,MAAM,aAAa,WAAW;AAC9D;AAOO,SAAS,wBAE2B;AACzC,QAAM,UAAU,kBAAkB;AAClC,SAAO,OAAO,SAAS;AACrB,UAAM,EAAE,KAAK,YAAY,IAAI,QAAQ;AACrC,UAAM,YAAY,aAAa;AAC/B,QAAI,aAAa,CAAC,UAAU,SAAS,IAAI,EAAG,QAAO,aAAa;AAChE,UAAM,SAAS,MAAM,IAAI,mBAAmB,EAAE,KAAK,CAAC;AACpD,WAAO,OAAO;AAAA,EAChB;AACF;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mountly-mcp",
-  "version": "3.1.0",
-  "description": "Build MCP Apps (SEP-1865) views from your React, Vue or Svelte components — one build emits the ui:// resource, its sidecar, and the MCP server wiring.",
+  "version": "4.0.0",
+  "description": "Build MCP Apps (SEP-1865) views from React, Vue or Svelte components — new or existing. One build emits the ui:// resource, its sidecar, and the MCP server wiring.",
   "keywords": [
     "chatgpt",
     "claude",
@@ -14,7 +14,7 @@
     "svelte",
     "vite-plugin",
     "vue",
-    "widget"
+    "mcp-view"
   ],
   "license": "Apache-2.0",
   "repository": {
@@ -26,7 +26,8 @@
     "mountly-mcp": "./dist/cli.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "templates"
   ],
   "type": "module",
   "main": "./dist/index.js",
@@ -106,6 +107,8 @@
   "dependencies": {
     "@modelcontextprotocol/ext-apps": "^1.7.5",
     "@modelcontextprotocol/sdk": "^1.30.0",
+    "mountly": "^0.4.0",
+    "mountly-react": "^2.0.2",
     "zod": "^4.4.3"
   },
   "devDependencies": {
@@ -117,14 +120,12 @@
     "ai": "6.0.208",
     "axe-core": "4.13.0",
     "jsdom": "^30.0.1",
-    "mountly": "^0.4.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tsup": "^8.5.1",
     "typescript": "^7.0.2",
     "vite": "^8.1.5",
     "mountly-svelte": "^2.0.3",
-    "mountly-react": "^2.0.2",
     "mountly-vue": "^2.0.3"
   },
   "peerDependencies": {
@@ -132,8 +133,6 @@
     "@json-render/react": "^0.20.0",
     "ai": "^7.0.65",
     "axe-core": ">=4.10.0",
-    "mountly": "^0.4.0",
-    "mountly-react": "^2.0.2",
     "mountly-svelte": "^2.0.3",
     "mountly-vue": "^2.0.3",
     "playwright": ">=1.62.1",
@@ -151,9 +150,6 @@
     "ai": {
       "optional": true
     },
-    "mountly-react": {
-      "optional": true
-    },
     "react": {
       "optional": true
     },

package/templates/react/.gitignore.tmpl

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

package/templates/react/README.md.tmpl

@@ -0,0 +1,15 @@
+# {{name}}
+
+MCP App scaffolded with `mountly-mcp create`.
+
+```bash
+pnpm install
+pnpm dev      # sandboxed host on :5179
+pnpm verify   # conformance
+```
+
+- View: `src/view.tsx` (`createMcpView`)
+- Server: `server.mjs` (`registerMcpApps`)
+- Fixtures: `mcp.fixtures.json` (tool args when using `--server`)
+
+Do not clone the Mountly monorepo for greenfield apps — this project is the canonical path.

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

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

package/templates/react/package.json.tmpl

@@ -0,0 +1,27 @@
+{
+  "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": "^3.1.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "^5.9.0",
+    "vite": "^8.2.1"
+  }
+}

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" }
+}