@developmentseed/mcp-view 0.1.2

package/dist/host.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Set the App identity reported to the host during `ui/initialize`. Optional —
+ * call it before the first `onData`/`sendMessage`. Defaults to a generic name.
+ */
+export declare function configure(info: {
+    name: string;
+    version: string;
+}): void;
+/** Register for the tool's structuredContent, and connect to the host. */
+export declare function onData<T>(handler: (payload: T) => void): void;
+/** Send text back into the conversation, so the model calls the next tool. */
+export declare function sendMessage(text: string): void;

package/dist/host.js

@@ -0,0 +1,52 @@
+// The host bridge — the one seam a view shares no matter what framework it is
+// built with. A view runs in a sandboxed iframe and talks to its host over the
+// MCP Apps `ui/*` JSON-RPC-over-postMessage protocol, via the standard SDK
+// (`@modelcontextprotocol/ext-apps`). That is what Claude, ChatGPT, Goose and
+// VS Code speak, and what the bundled Chainlit host (mcp_agent/elements/McpView.jsx)
+// implements the other end of.
+//
+// The SDK handles the `ui/initialize` handshake, delivers the tool's result
+// (`ui/notifications/tool-result`), and sends a chat message (`ui/message`).
+// This module wraps it in two tiny functions so the views stay host-agnostic:
+//
+//   onData(handler)   — the tool's structuredContent, once the host sends it
+//   sendMessage(text) — a user turn back into the chat, to run the next tool
+import { App } from "@modelcontextprotocol/ext-apps";
+// One App per iframe, connected once. Created lazily on first use so the
+// tool-result handler is registered before connect() runs the handshake (the
+// SDK warns if a handler is added after connect()).
+let appPromise = null;
+let dataHandler = null;
+let appInfo = {
+    name: "mcp-view",
+    version: "0.1.0",
+};
+/**
+ * Set the App identity reported to the host during `ui/initialize`. Optional —
+ * call it before the first `onData`/`sendMessage`. Defaults to a generic name.
+ */
+export function configure(info) {
+    appInfo = info;
+}
+function app() {
+    if (!appPromise) {
+        const instance = new App(appInfo);
+        // The host delivers the tool's structuredContent here; hand it to whatever
+        // onData registered. Read dataHandler lazily so a later onData still wins.
+        instance.ontoolresult = (params) => {
+            if (params.structuredContent != null)
+                dataHandler?.(params.structuredContent);
+        };
+        appPromise = instance.connect().then(() => instance);
+    }
+    return appPromise;
+}
+/** Register for the tool's structuredContent, and connect to the host. */
+export function onData(handler) {
+    dataHandler = handler;
+    void app();
+}
+/** Send text back into the conversation, so the model calls the next tool. */
+export function sendMessage(text) {
+    void app().then((instance) => instance.sendMessage({ role: "user", content: [{ type: "text", text }] }));
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { configure, onData, sendMessage } from "./host";

package/dist/index.js

@@ -0,0 +1 @@
+export { configure, onData, sendMessage } from "./host";

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@developmentseed/mcp-view",
+  "version": "0.1.2",
+  "description": "View-side bridge for MCP Apps UI views: the ui/* postMessage protocol as two tiny functions (onData / sendMessage).",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "tsc",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/ext-apps": "^1.7.5"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.3",
+    "vitest": "^4.1.10"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/developmentseed/mcp-toolsets-runtime.git",
+    "directory": "js/mcp-view"
+  }
+}