@apify/mcp-widgets 0.0.1

package/README.md

@@ -0,0 +1,33 @@
+# `@apify/mcp-widgets`
+
+React components that render the output of Apify MCP tools. One source for every host: Apify Console renders them in its own React tree, the [Apify MCP server](https://github.com/apify/apify-mcp-server) bundles them into the HTML it serves to MCP Apps hosts (Claude, ChatGPT).
+
+## Install
+
+```bash
+pnpm add @apify/mcp-widgets
+```
+
+Peer dependencies: `react`, `react-dom`, `styled-components`. The components build on `@apify/ui-library`, so the tree must also be wrapped in its `UiDependencyProvider`.
+
+## Usage
+
+Components reach the environment through `WidgetHostProvider`:
+
+```tsx
+import { WidgetHostProvider } from '@apify/mcp-widgets';
+
+<WidgetHostProvider host={{ openLink: (url) => window.open(url, '_blank', 'noopener') }}>{children}</WidgetHostProvider>;
+```
+
+`WidgetHost` has one required member, `openLink`. `requestDisplayMode` and `maxHeight` are optional: hosts with a single display mode or no height limit leave them out.
+
+## Development
+
+Inside the apify-core monorepo:
+
+```bash
+pnpm run storybook                        # shared Storybook, section "MCP-Widgets"
+pnpm --filter @apify/mcp-widgets test     # unit tests
+pnpm --filter @apify/mcp-widgets build    # dist/ (components + d.ts)
+```

package/dist/files_hash_at_build.txt

@@ -0,0 +1 @@
+c8087e74da2d5ea8c1ce1a3829915951762ffd3e

package/dist/host/types.d.ts

@@ -0,0 +1,10 @@
+export type WidgetDisplayMode = 'inline' | 'fullscreen';
+/** What a widget needs from its host (MCP Apps iframe, Console, Storybook). */
+export type WidgetHost = {
+    openLink: (url: string) => void;
+    /** Absent when the host has a single display mode. */
+    requestDisplayMode?: (mode: WidgetDisplayMode) => Promise<void> | void;
+    /** In px; absent when unconstrained. */
+    maxHeight?: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/host/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/host/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,YAAY,CAAC;AAExD,+EAA+E;AAC/E,MAAM,MAAM,UAAU,GAAG;IACrB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,sDAAsD;IACtD,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACvE,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CAEtB,CAAC"}

package/dist/host/widget_host_provider.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { WidgetHost } from './types';
+type WidgetHostProviderProps = {
+    host: WidgetHost;
+    children: ReactNode;
+};
+export declare function WidgetHostProvider({ host, children }: WidgetHostProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useWidgetHost(): WidgetHost;
+export {};
+//# sourceMappingURL=widget_host_provider.d.ts.map

package/dist/host/widget_host_provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget_host_provider.d.ts","sourceRoot":"","sources":["../../src/host/widget_host_provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,KAAK,uBAAuB,GAAG;IAC3B,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CAE7E;AAED,wBAAgB,aAAa,IAAI,UAAU,CAI1C"}

package/dist/host/widget_host_provider.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/host/widget_host_provider.tsx
+var WidgetHostContext = createContext(null);
+function WidgetHostProvider({ host, children }) {
+	return /* @__PURE__ */ jsx(WidgetHostContext.Provider, {
+		value: host,
+		children
+	});
+}
+function useWidgetHost() {
+	const host = useContext(WidgetHostContext);
+	if (!host) throw new Error("Widgets must be wrapped by WidgetHostProvider");
+	return host;
+}
+//#endregion
+export { WidgetHostProvider, useWidgetHost };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { WidgetDisplayMode, WidgetHost } from './host/types';
+export { useWidgetHost, WidgetHostProvider } from './host/widget_host_provider';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+import { WidgetHostProvider, useWidgetHost } from "./host/widget_host_provider.js";
+export { WidgetHostProvider, useWidgetHost };

package/package.json

@@ -0,0 +1,63 @@
+{
+    "name": "@apify/mcp-widgets",
+    "version": "0.0.1",
+    "description": "React components that render the output of Apify MCP tools",
+    "keywords": [
+        "apify",
+        "mcp",
+        "react",
+        "widgets"
+    ],
+    "license": "Apache-2.0",
+    "type": "module",
+    "sideEffects": false,
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./package.json": "./package.json"
+    },
+    "files": [
+        "dist",
+        "!dist/src",
+        "!dist/*.tsbuildinfo"
+    ],
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org",
+        "access": "public"
+    },
+    "scripts": {
+        "test": "vitest run",
+        "test:watch": "vitest watch",
+        "lint": "oxlint --type-aware .",
+        "lint:fix": "oxlint --type-aware --fix .",
+        "build": "pnpm run clean && pnpm run compile && ./scripts/save_current_files_hash.sh",
+        "rebuild-if-needed": "./scripts/rebuild_if_needed.sh",
+        "clean": "rimraf ./dist",
+        "compile": "vite build",
+        "type-check": "tsc --noEmit -p tsconfig.json",
+        "postpublish": "rimraf ./dist"
+    },
+    "dependencies": {
+        "@apify/ui-icons": "^1.50.0",
+        "@apify/ui-library": "^1.165.4"
+    },
+    "peerDependencies": {
+        "react": "17.x || 18.x || 19.x",
+        "react-dom": "17.x || 18.x || 19.x",
+        "styled-components": "^6.1.19"
+    },
+    "devDependencies": {
+        "@types/react": "19.2.2",
+        "@types/react-dom": "19.2.2",
+        "@vitejs/plugin-react-swc": "^4.3.1",
+        "react": "19.2.0",
+        "react-dom": "19.2.0",
+        "styled-components": "^6.1.19",
+        "vite": "^8.0.14",
+        "vite-plugin-dts": "^5.0.1"
+    }
+}