MCP Apps Kit - v0.5.0
    Preparing search index...

    Interface ReactUIInput

    Input for defining a React component UI.

    This is what you pass to defineReactUI(). The function returns a standard UIDef with an auto-generated html path that the Vite plugin will build.

    import { defineReactUI } from "@mcp-apps-kit/ui-react-builder";
    import { MyWidget } from "./widgets/MyWidget";

    const widgetUI = defineReactUI({
      component: MyWidget,
      name: "My Widget",
      description: "A beautiful widget",
      prefersBorder: true,
    });
    interface ReactUIInput {
        autoResize?: boolean;
        component: ComponentType<Record<string, unknown>>;
        csp?: CSPConfig;
        defaultProps?: Record<string, unknown>;
        description?: string;
        domain?: string;
        name?: string;
        outDir?: string;
        prefersBorder?: boolean;
        widgetDescription?: string;
    }

    Hierarchy

    • Omit<UIDef, "html">
      • ReactUIInput
    Index

    Properties

    autoResize? component csp? defaultProps? description? domain? name? outDir? prefersBorder? widgetDescription?

    Properties

    autoResize?: boolean

    Enable automatic size change notifications (MCP adapter only).

    When enabled, the UI automatically reports its size changes to the host using a ResizeObserver on document.body and document.documentElement. The host can then resize the UI container accordingly.

    true
    component: ComponentType<Record<string, unknown>>

    React component to render as the UI.

    Must be a function component or class component. The component will be wrapped in AppsProvider from @mcp-apps-kit/ui-react, giving it access to hooks like useToolResult, useAppsClient, etc.

    The component's name is used to generate the output HTML filename. For example, a component named GreetingWidget will output to greeting-widget.html.

    csp?: CSPConfig

    Content Security Policy configuration. Controls what external resources the UI can access.

    defaultProps?: Record<string, unknown>

    Optional default props to pass to the component.

    These props are baked into the HTML at build time. For runtime data, use hooks like useToolResult instead.

    description?: string

    Optional description of the UI resource. Used in protocol metadata.

    domain?: string

    Dedicated domain for widget isolation. Advanced feature for security-sensitive applications.

    ChatGPT only - ignored on MCP Apps.

    name?: string

    Optional display name for the UI resource. Used in protocol metadata.

    outDir?: string

    Output directory for the built HTML file. Defaults to "./src/ui/dist" if not specified.

    "./dist/ui"
    prefersBorder?: boolean

    Request a visible border around the widget. Hint to the host platform - may not be honored.

    widgetDescription?: string

    Human-readable summary for the AI model (ChatGPT only).

    This description helps the model understand what the widget does and when to display it. Keep it concise and informative.

    "Interactive task board for managing project workflows"

    Settings

    Member Visibility

    On This Page

    Properties