@leanmcp/ui 0.3.4 → 0.3.5

package/dist/server.d.mts

@@ -0,0 +1,179 @@
+import React__default from 'react';
+export { McpUiAppResourceConfig, McpUiAppToolConfig, RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY, ToolConfig, registerAppResource, registerAppTool } from '@modelcontextprotocol/ext-apps/server';
+
+/**
+ * @UIApp Decorator
+ *
+ * Links an MCP tool to a React UI component.
+ * When applied to a tool method, it:
+ * 1. Adds _meta.ui/resourceUri to the tool definition
+ * 2. Auto-registers a resource that renders the component to HTML
+ *
+ * This decorator is designed to work with @leanmcp/core decorators.
+ */
+
+declare const UI_APP_COMPONENT_KEY = "ui:app:component";
+declare const UI_APP_URI_KEY = "ui:app:uri";
+declare const UI_APP_OPTIONS_KEY = "ui:app:options";
+/**
+ * Options for @UIApp decorator
+ */
+interface UIAppOptions {
+    /**
+     * React component or path to component file (relative to service file).
+     * - Use path string (e.g., './WeatherCard') for CLI build - avoids importing browser code in server
+     * - Use component reference for direct SSR rendering
+     */
+    component: React__default.ComponentType<any> | string;
+    /** Custom resource URI (auto-generated if not provided) */
+    uri?: string;
+    /** HTML document title */
+    title?: string;
+    /** Additional CSS styles */
+    styles?: string;
+}
+/**
+ * Decorator that links a tool to a UI component.
+ *
+ * When the tool is called, the host will fetch the UI resource
+ * which returns the component rendered as HTML.
+ *
+ * @example
+ * ```typescript
+ * import { Tool } from '@leanmcp/core';
+ * import { UIApp } from '@leanmcp/ui';
+ * import { WeatherCard } from './WeatherCard';
+ *
+ * class WeatherService {
+ *   @Tool({ description: 'Get weather for a city' })
+ *   @UIApp({ component: WeatherCard })
+ *   async getWeather(args: { city: string }) {
+ *     return { city: args.city, temp: 22 };
+ *   }
+ * }
+ * ```
+ */
+declare function UIApp(options: UIAppOptions): MethodDecorator;
+/**
+ * Helper to get UIApp metadata from a method
+ */
+declare function getUIAppMetadata(target: Function): UIAppOptions | undefined;
+/**
+ * Helper to get the resource URI from a method
+ */
+declare function getUIAppUri(target: Function): string | undefined;
+
+/**
+ * @GPTApp Decorator
+ *
+ * Links an MCP tool to a React UI component compliant with ChatGPT Apps SDK.
+ *
+ * When applied to a tool method, it:
+ * 1. Adds _meta.ui/resourceUri to the tool definition
+ * 2. Adds OpenAI-specific metadata (widgetAccessible, outputTemplate, etc.)
+ * 3. Auto-registers a resource that renders the component to HTML with 'text/html+skybridge' mimeType
+ */
+
+declare const GPT_APP_COMPONENT_KEY = "gptapp:component";
+declare const GPT_APP_URI_KEY = "gptapp:uri";
+declare const GPT_APP_OPTIONS_KEY = "gptapp:options";
+/**
+ * Options for @GPTApp decorator
+ */
+interface GPTAppOptions {
+    /**
+     * React component or path to component file (relative to service file).
+     * - Use path string (e.g., './WeatherCard') for CLI build - avoids importing browser code in server
+     * - Use component reference for direct SSR rendering
+     */
+    component: React__default.ComponentType<any> | string;
+    /** Custom resource URI (auto-generated ui://... if not provided) */
+    uri?: string;
+    /** HTML document title */
+    title?: string;
+    /** Additional CSS styles */
+    styles?: string;
+    /**
+     * Allow widget to call tools via window.openai.callTool.
+     * Maps to _meta["openai/widgetAccessible"]
+     */
+    widgetAccessible?: boolean;
+    /**
+     * Tool visibility: 'public' (default) or 'private'.
+     * 'private' hides the tool from the model but keeps it callable by the widget.
+     * Maps to _meta["openai/visibility"]
+     */
+    visibility?: 'public' | 'private';
+    /**
+     * Widget prefers border around iframe.
+     * Maps to _meta["openai/widgetPrefersBorder"]
+     */
+    prefersBorder?: boolean;
+    /**
+     * Widget domain for API allowlists.
+     * Maps to _meta["openai/widgetDomain"]
+     */
+    widgetDomain?: string;
+    /**
+     * Widget description for the model.
+     * Maps to _meta["openai/widgetDescription"]
+     */
+    widgetDescription?: string;
+    /**
+     * Content Security Policy configuration.
+     * Maps to _meta["openai/widgetCSP"]
+     */
+    csp?: {
+        connect_domains?: string[];
+        resource_domains?: string[];
+        redirect_domains?: string[];
+        frame_domains?: string[];
+    };
+    /**
+     * File parameters (fields treated as file uploads).
+     * Maps to _meta["openai/fileParams"]
+     */
+    fileParams?: string[];
+    /**
+     * Invocation messages shown during tool call.
+     * Maps to _meta["openai/toolInvocation"]
+     */
+    invocation?: {
+        invoking?: string;
+        invoked?: string;
+    };
+}
+/**
+ * Decorator that links a tool to a UI component for ChatGPT Apps.
+ *
+ * When the tool is called, the host will fetch the UI resource
+ * which returns the component rendered as HTML with 'text/html+skybridge'.
+ *
+ * @example
+ * ```typescript
+ * import { Tool } from '@leanmcp/core';
+ * import { GPTApp } from '@leanmcp/ui';
+ * import { KanbanBoard } from './KanbanBoard';
+ *
+ * class KanbanService {
+ *   @Tool({ description: 'Show Kanban Board' })
+ *   @GPTApp({
+ *     component: KanbanBoard,
+ *     widgetAccessible: true,
+ *     invocation: { invoking: 'Loading board...' }
+ *   })
+ *   async showBoard() { ... }
+ * }
+ * ```
+ */
+declare function GPTApp(options: GPTAppOptions): MethodDecorator;
+/**
+ * Helper to get GPTApp metadata from a method
+ */
+declare function getGPTAppMetadata(target: Function): GPTAppOptions | undefined;
+/**
+ * Helper to get the resource URI from a method
+ */
+declare function getGPTAppUri(target: Function): string | undefined;
+
+export { GPTApp, type GPTAppOptions, GPT_APP_COMPONENT_KEY, GPT_APP_OPTIONS_KEY, GPT_APP_URI_KEY, UIApp, type UIAppOptions, UI_APP_COMPONENT_KEY, UI_APP_OPTIONS_KEY, UI_APP_URI_KEY, getGPTAppMetadata, getGPTAppUri, getUIAppMetadata, getUIAppUri };

package/dist/server.d.ts

@@ -0,0 +1,179 @@
+import React__default from 'react';
+export { McpUiAppResourceConfig, McpUiAppToolConfig, RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY, ToolConfig, registerAppResource, registerAppTool } from '@modelcontextprotocol/ext-apps/server';
+
+/**
+ * @UIApp Decorator
+ *
+ * Links an MCP tool to a React UI component.
+ * When applied to a tool method, it:
+ * 1. Adds _meta.ui/resourceUri to the tool definition
+ * 2. Auto-registers a resource that renders the component to HTML
+ *
+ * This decorator is designed to work with @leanmcp/core decorators.
+ */
+
+declare const UI_APP_COMPONENT_KEY = "ui:app:component";
+declare const UI_APP_URI_KEY = "ui:app:uri";
+declare const UI_APP_OPTIONS_KEY = "ui:app:options";
+/**
+ * Options for @UIApp decorator
+ */
+interface UIAppOptions {
+    /**
+     * React component or path to component file (relative to service file).
+     * - Use path string (e.g., './WeatherCard') for CLI build - avoids importing browser code in server
+     * - Use component reference for direct SSR rendering
+     */
+    component: React__default.ComponentType<any> | string;
+    /** Custom resource URI (auto-generated if not provided) */
+    uri?: string;
+    /** HTML document title */
+    title?: string;
+    /** Additional CSS styles */
+    styles?: string;
+}
+/**
+ * Decorator that links a tool to a UI component.
+ *
+ * When the tool is called, the host will fetch the UI resource
+ * which returns the component rendered as HTML.
+ *
+ * @example
+ * ```typescript
+ * import { Tool } from '@leanmcp/core';
+ * import { UIApp } from '@leanmcp/ui';
+ * import { WeatherCard } from './WeatherCard';
+ *
+ * class WeatherService {
+ *   @Tool({ description: 'Get weather for a city' })
+ *   @UIApp({ component: WeatherCard })
+ *   async getWeather(args: { city: string }) {
+ *     return { city: args.city, temp: 22 };
+ *   }
+ * }
+ * ```
+ */
+declare function UIApp(options: UIAppOptions): MethodDecorator;
+/**
+ * Helper to get UIApp metadata from a method
+ */
+declare function getUIAppMetadata(target: Function): UIAppOptions | undefined;
+/**
+ * Helper to get the resource URI from a method
+ */
+declare function getUIAppUri(target: Function): string | undefined;
+
+/**
+ * @GPTApp Decorator
+ *
+ * Links an MCP tool to a React UI component compliant with ChatGPT Apps SDK.
+ *
+ * When applied to a tool method, it:
+ * 1. Adds _meta.ui/resourceUri to the tool definition
+ * 2. Adds OpenAI-specific metadata (widgetAccessible, outputTemplate, etc.)
+ * 3. Auto-registers a resource that renders the component to HTML with 'text/html+skybridge' mimeType
+ */
+
+declare const GPT_APP_COMPONENT_KEY = "gptapp:component";
+declare const GPT_APP_URI_KEY = "gptapp:uri";
+declare const GPT_APP_OPTIONS_KEY = "gptapp:options";
+/**
+ * Options for @GPTApp decorator
+ */
+interface GPTAppOptions {
+    /**
+     * React component or path to component file (relative to service file).
+     * - Use path string (e.g., './WeatherCard') for CLI build - avoids importing browser code in server
+     * - Use component reference for direct SSR rendering
+     */
+    component: React__default.ComponentType<any> | string;
+    /** Custom resource URI (auto-generated ui://... if not provided) */
+    uri?: string;
+    /** HTML document title */
+    title?: string;
+    /** Additional CSS styles */
+    styles?: string;
+    /**
+     * Allow widget to call tools via window.openai.callTool.
+     * Maps to _meta["openai/widgetAccessible"]
+     */
+    widgetAccessible?: boolean;
+    /**
+     * Tool visibility: 'public' (default) or 'private'.
+     * 'private' hides the tool from the model but keeps it callable by the widget.
+     * Maps to _meta["openai/visibility"]
+     */
+    visibility?: 'public' | 'private';
+    /**
+     * Widget prefers border around iframe.
+     * Maps to _meta["openai/widgetPrefersBorder"]
+     */
+    prefersBorder?: boolean;
+    /**
+     * Widget domain for API allowlists.
+     * Maps to _meta["openai/widgetDomain"]
+     */
+    widgetDomain?: string;
+    /**
+     * Widget description for the model.
+     * Maps to _meta["openai/widgetDescription"]
+     */
+    widgetDescription?: string;
+    /**
+     * Content Security Policy configuration.
+     * Maps to _meta["openai/widgetCSP"]
+     */
+    csp?: {
+        connect_domains?: string[];
+        resource_domains?: string[];
+        redirect_domains?: string[];
+        frame_domains?: string[];
+    };
+    /**
+     * File parameters (fields treated as file uploads).
+     * Maps to _meta["openai/fileParams"]
+     */
+    fileParams?: string[];
+    /**
+     * Invocation messages shown during tool call.
+     * Maps to _meta["openai/toolInvocation"]
+     */
+    invocation?: {
+        invoking?: string;
+        invoked?: string;
+    };
+}
+/**
+ * Decorator that links a tool to a UI component for ChatGPT Apps.
+ *
+ * When the tool is called, the host will fetch the UI resource
+ * which returns the component rendered as HTML with 'text/html+skybridge'.
+ *
+ * @example
+ * ```typescript
+ * import { Tool } from '@leanmcp/core';
+ * import { GPTApp } from '@leanmcp/ui';
+ * import { KanbanBoard } from './KanbanBoard';
+ *
+ * class KanbanService {
+ *   @Tool({ description: 'Show Kanban Board' })
+ *   @GPTApp({
+ *     component: KanbanBoard,
+ *     widgetAccessible: true,
+ *     invocation: { invoking: 'Loading board...' }
+ *   })
+ *   async showBoard() { ... }
+ * }
+ * ```
+ */
+declare function GPTApp(options: GPTAppOptions): MethodDecorator;
+/**
+ * Helper to get GPTApp metadata from a method
+ */
+declare function getGPTAppMetadata(target: Function): GPTAppOptions | undefined;
+/**
+ * Helper to get the resource URI from a method
+ */
+declare function getGPTAppUri(target: Function): string | undefined;
+
+export { GPTApp, type GPTAppOptions, GPT_APP_COMPONENT_KEY, GPT_APP_OPTIONS_KEY, GPT_APP_URI_KEY, UIApp, type UIAppOptions, UI_APP_COMPONENT_KEY, UI_APP_OPTIONS_KEY, UI_APP_URI_KEY, getGPTAppMetadata, getGPTAppUri, getUIAppMetadata, getUIAppUri };

package/dist/server.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var chunk57VDL5UC_js = require('./chunk-57VDL5UC.js');
+var server = require('@modelcontextprotocol/ext-apps/server');
+
+
+
+Object.defineProperty(exports, "GPTApp", {
+  enumerable: true,
+  get: function () { return chunk57VDL5UC_js.GPTApp; }
+});
+Object.defineProperty(exports, "GPT_APP_COMPONENT_KEY", {
+  enumerable: true,
+  get: function () { return chunk57VDL5UC_js.GPT_APP_COMPONENT_KEY; }
+});
+Object.defineProperty(exports, "GPT_APP_OPTIONS_KEY", {
+  enumerable: true,
+  get: function () { return chunk57VDL5UC_js.GPT_APP_OPTIONS_KEY; }
+});
+Object.defineProperty(exports, "GPT_APP_URI_KEY", {
+  enumerable: true,
+  get: function () { return chunk57VDL5UC_js.GPT_APP_URI_KEY; }
+});
+Object.defineProperty(exports, "UIApp", {
+  enumerable: true,
+  get: function () { return chunk57VDL5UC_js.UIApp; }
+});
+Object.defineProperty(exports, "UI_APP_COMPONENT_KEY", {
+  enumerable: true,
+  get: function () { return chunk57VDL5UC_js.UI_APP_COMPONENT_KEY; }
+});
+Object.defineProperty(exports, "UI_APP_OPTIONS_KEY", {
+  enumerable: true,
+  get: function () { return chunk57VDL5UC_js.UI_APP_OPTIONS_KEY; }
+});
+Object.defineProperty(exports, "UI_APP_URI_KEY", {
+  enumerable: true,
+  get: function () { return chunk57VDL5UC_js.UI_APP_URI_KEY; }
+});
+Object.defineProperty(exports, "getGPTAppMetadata", {
+  enumerable: true,
+  get: function () { return chunk57VDL5UC_js.getGPTAppMetadata; }
+});
+Object.defineProperty(exports, "getGPTAppUri", {
+  enumerable: true,
+  get: function () { return chunk57VDL5UC_js.getGPTAppUri; }
+});
+Object.defineProperty(exports, "getUIAppMetadata", {
+  enumerable: true,
+  get: function () { return chunk57VDL5UC_js.getUIAppMetadata; }
+});
+Object.defineProperty(exports, "getUIAppUri", {
+  enumerable: true,
+  get: function () { return chunk57VDL5UC_js.getUIAppUri; }
+});
+Object.defineProperty(exports, "RESOURCE_MIME_TYPE", {
+  enumerable: true,
+  get: function () { return server.RESOURCE_MIME_TYPE; }
+});
+Object.defineProperty(exports, "RESOURCE_URI_META_KEY", {
+  enumerable: true,
+  get: function () { return server.RESOURCE_URI_META_KEY; }
+});
+Object.defineProperty(exports, "registerAppResource", {
+  enumerable: true,
+  get: function () { return server.registerAppResource; }
+});
+Object.defineProperty(exports, "registerAppTool", {
+  enumerable: true,
+  get: function () { return server.registerAppTool; }
+});
+//# sourceMappingURL=server.js.map
+//# sourceMappingURL=server.js.map

package/dist/server.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"server.js","sourcesContent":[]}

package/dist/server.mjs

@@ -0,0 +1,4 @@
+export { GPTApp, GPT_APP_COMPONENT_KEY, GPT_APP_OPTIONS_KEY, GPT_APP_URI_KEY, UIApp, UI_APP_COMPONENT_KEY, UI_APP_OPTIONS_KEY, UI_APP_URI_KEY, getGPTAppMetadata, getGPTAppUri, getUIAppMetadata, getUIAppUri } from './chunk-5RGEQPF3.mjs';
+export { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY, registerAppResource, registerAppTool } from '@modelcontextprotocol/ext-apps/server';
+//# sourceMappingURL=server.mjs.map
+//# sourceMappingURL=server.mjs.map

package/dist/server.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"server.mjs","sourcesContent":[]}

package/dist/styles.css

@@ -0,0 +1,4 @@
+/* @leanmcp/ui - Aggregated Component Styles */
+
+/* Import all component styles */
+@import './theme.css';

package/dist/theme.css

@@ -0,0 +1,102 @@
+/* @leanmcp/ui Theme Variables */
+:root {
+    /* Colors */
+    --lui-primary: #6366f1;
+    --lui-primary-hover: #4f46e5;
+    --lui-primary-active: #4338ca;
+
+    --lui-success: #22c55e;
+    --lui-warning: #f59e0b;
+    --lui-error: #ef4444;
+    --lui-info: #3b82f6;
+
+    /* Backgrounds */
+    --lui-bg: #ffffff;
+    --lui-bg-secondary: #f8fafc;
+    --lui-surface: #f1f5f9;
+    --lui-surface-hover: #e2e8f0;
+
+    /* Text */
+    --lui-text: #0f172a;
+    --lui-text-secondary: #475569;
+    --lui-text-muted: #94a3b8;
+    --lui-text-inverse: #ffffff;
+
+    /* Borders */
+    --lui-border: #e2e8f0;
+    --lui-border-focus: #6366f1;
+
+    /* Spacing */
+    --lui-space-1: 4px;
+    --lui-space-2: 8px;
+    --lui-space-3: 12px;
+    --lui-space-4: 16px;
+    --lui-space-5: 20px;
+    --lui-space-6: 24px;
+    --lui-space-8: 32px;
+
+    /* Radius */
+    --lui-radius-sm: 4px;
+    --lui-radius-md: 8px;
+    --lui-radius-lg: 12px;
+    --lui-radius-xl: 16px;
+    --lui-radius-full: 9999px;
+
+    /* Shadows */
+    --lui-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --lui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --lui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+    /* Transitions */
+    --lui-transition-fast: 100ms ease;
+    --lui-transition: 150ms ease;
+    --lui-transition-slow: 300ms ease;
+
+    /* Typography */
+    --lui-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --lui-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+
+    --lui-text-xs: 0.75rem;
+    --lui-text-sm: 0.875rem;
+    --lui-text-base: 1rem;
+    --lui-text-lg: 1.125rem;
+    --lui-text-xl: 1.25rem;
+}
+
+/* Dark theme */
+[data-theme="dark"],
+.lui-dark {
+    --lui-primary: #818cf8;
+    --lui-primary-hover: #6366f1;
+    --lui-primary-active: #4f46e5;
+
+    --lui-bg: #0f172a;
+    --lui-bg-secondary: #1e293b;
+    --lui-surface: #334155;
+    --lui-surface-hover: #475569;
+
+    --lui-text: #f1f5f9;
+    --lui-text-secondary: #cbd5e1;
+    --lui-text-muted: #64748b;
+    --lui-text-inverse: #0f172a;
+
+    --lui-border: #334155;
+    --lui-border-focus: #818cf8;
+}
+
+/* Base styles */
+.lui-root {
+    font-family: var(--lui-font-sans);
+    font-size: var(--lui-text-base);
+    color: var(--lui-text);
+    background: var(--lui-bg);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* Focus ring utility */
+.lui-focus-ring:focus-visible {
+    outline: 2px solid var(--lui-border-focus);
+    outline-offset: 2px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@leanmcp/ui",
-    "version": "0.3.4",
+    "version": "0.3.5",
     "description": "MCP-Native UI SDK - React components with first-class tool integration for building MCP Apps",
     "main": "dist/index.js",
     "module": "dist/index.mjs",