mcp-app-studio 0.3.2

package/dist/platforms/mcp/index.js

@@ -0,0 +1,159 @@
+import {
+  MCPBridge
+} from "../../chunk-QO43ZGJI.js";
+import "../../chunk-4LAH4JH6.js";
+
+// src/platforms/mcp/hooks.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var MCPContext = createContext(null);
+function MCPProvider({
+  children,
+  appInfo,
+  appCapabilities
+}) {
+  const [bridge] = useState(() => new MCPBridge(appInfo, appCapabilities));
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    bridge.connect().then(() => setReady(true));
+  }, [bridge]);
+  if (!ready) return null;
+  return /* @__PURE__ */ jsx(MCPContext.Provider, { value: bridge, children });
+}
+function useMCPBridge() {
+  const bridge = useContext(MCPContext);
+  if (!bridge) {
+    throw new Error("useMCP* hooks must be used within MCPProvider");
+  }
+  return bridge;
+}
+function useHostContext() {
+  const bridge = useMCPBridge();
+  const [context, setContext] = useState(
+    bridge.getHostContext()
+  );
+  useEffect(() => {
+    return bridge.onHostContextChanged((ctx) => {
+      setContext(
+        (prev) => prev ? { ...prev, ...ctx } : ctx
+      );
+    });
+  }, [bridge]);
+  return context;
+}
+function useTheme() {
+  const context = useHostContext();
+  return context?.theme ?? "light";
+}
+function useToolInput() {
+  const bridge = useMCPBridge();
+  const [input, setInput] = useState(null);
+  useEffect(() => {
+    return bridge.onToolInput((args) => setInput(args));
+  }, [bridge]);
+  return input;
+}
+function useToolInputPartial() {
+  const bridge = useMCPBridge();
+  const [input, setInput] = useState(null);
+  useEffect(() => {
+    return bridge.onToolInputPartial((args) => setInput(args));
+  }, [bridge]);
+  return input;
+}
+function useToolResult() {
+  const bridge = useMCPBridge();
+  const [result, setResult] = useState(null);
+  useEffect(() => {
+    return bridge.onToolResult(setResult);
+  }, [bridge]);
+  return result;
+}
+function useToolCancellation(callback) {
+  const bridge = useMCPBridge();
+  useEffect(() => {
+    return bridge.onToolCancelled(callback);
+  }, [bridge, callback]);
+}
+function useTeardown(callback) {
+  const bridge = useMCPBridge();
+  useEffect(() => {
+    return bridge.onTeardown(callback);
+  }, [bridge, callback]);
+}
+function useDisplayMode() {
+  const bridge = useMCPBridge();
+  const context = useHostContext();
+  const mode = context?.displayMode ?? "inline";
+  const setMode = useCallback(
+    async (newMode) => {
+      const available = context?.availableDisplayModes ?? [];
+      if (available.length > 0 && !available.includes(newMode)) {
+        console.warn(
+          `Display mode "${newMode}" not available. Available: ${available.join(", ")}`
+        );
+      }
+      await bridge.requestDisplayMode(newMode);
+    },
+    [bridge, context?.availableDisplayModes]
+  );
+  return [mode, setMode];
+}
+function useCallTool() {
+  const bridge = useMCPBridge();
+  return useCallback(
+    (name, args) => bridge.callTool(name, args),
+    [bridge]
+  );
+}
+function useOpenLink() {
+  const bridge = useMCPBridge();
+  return useCallback((url) => bridge.openLink(url), [bridge]);
+}
+function useSendMessage() {
+  const bridge = useMCPBridge();
+  return useCallback(
+    (text) => bridge.sendMessage({
+      role: "user",
+      content: [{ type: "text", text }]
+    }),
+    [bridge]
+  );
+}
+function useUpdateModelContext() {
+  const bridge = useMCPBridge();
+  return useCallback(
+    (ctx) => bridge.updateModelContext(ctx),
+    [bridge]
+  );
+}
+function useLog() {
+  const bridge = useMCPBridge();
+  return useCallback(
+    (level, data) => bridge.sendLog(level, data),
+    [bridge]
+  );
+}
+export {
+  MCPBridge,
+  MCPProvider,
+  useCallTool,
+  useDisplayMode,
+  useHostContext,
+  useLog,
+  useOpenLink,
+  useSendMessage,
+  useTeardown,
+  useTheme,
+  useToolCancellation,
+  useToolInput,
+  useToolInputPartial,
+  useToolResult,
+  useUpdateModelContext
+};

package/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "mcp-app-studio",
+  "version": "0.3.2",
+  "description": "Build interactive apps for AI assistants (ChatGPT, Claude, MCP hosts)",
+  "keywords": [
+    "chatgpt",
+    "openai",
+    "claude",
+    "anthropic",
+    "mcp",
+    "widget",
+    "app",
+    "create",
+    "scaffold",
+    "studio"
+  ],
+  "author": "AgentbaseAI Inc.",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "mcp-app-studio": "./bin/mcp-app-studio.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./cli": {
+      "import": {
+        "types": "./dist/cli/index.d.ts",
+        "default": "./dist/cli/index.js"
+      }
+    },
+    "./core": {
+      "import": {
+        "types": "./dist/core/index.d.ts",
+        "default": "./dist/core/index.js"
+      }
+    },
+    "./chatgpt": {
+      "import": {
+        "types": "./dist/platforms/chatgpt/index.d.ts",
+        "default": "./dist/platforms/chatgpt/index.js"
+      }
+    },
+    "./mcp": {
+      "import": {
+        "types": "./dist/platforms/mcp/index.d.ts",
+        "default": "./dist/platforms/mcp/index.js"
+      }
+    }
+  },
+  "files": [
+    "bin",
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "preview:sync": "tsx scripts/sync-template.ts",
+    "preview:install": "cd .preview && npm install",
+    "preview:dev": "cd .preview && npm run dev",
+    "preview": "tsx scripts/sync-template.ts && cd .preview && npm run dev",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:smoke": "vitest run --config vitest.smoke.config.ts",
+    "test:coverage": "vitest run --coverage",
+    "test:scaffold": "bash scripts/test-scaffold.sh",
+    "typecheck": "tsc --noEmit",
+    "prepack": "pnpm run build"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.11.0",
+    "picocolors": "^1.1.1",
+    "tar": "^7.5.4"
+  },
+  "peerDependencies": {
+    "@modelcontextprotocol/ext-apps": ">=0.4.0",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@modelcontextprotocol/ext-apps": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@modelcontextprotocol/ext-apps": "^0.4.0",
+    "@assistant-ui/x-buildutils": "workspace:*",
+    "@types/node": "^25.0.9",
+    "@types/react": "^19.1.6",
+    "@types/tar": "^6.1.13",
+    "@vitest/coverage-v8": "^4.0.17",
+    "react": "^19.1.0",
+    "tsup": "^8.5.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.17"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://www.assistant-ui.com/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/assistant-ui/assistant-ui.git",
+    "directory": "packages/mcp-app-studio"
+  },
+  "bugs": {
+    "url": "https://github.com/assistant-ui/assistant-ui/issues"
+  },
+  "engines": {
+    "node": ">=20.9.0"
+  }
+}