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

    Interface UIDef

    Single UI resource definition

    Defines an HTML-based UI component that can be bound to tools.

    const ui = {
    "restaurant-list": {
    html: "./ui/dist/list.html",
    csp: {
    connectDomains: ["https://api.yelp.com"],
    resourceDomains: ["https://s3-media0.fl.yelpcdn.com"],
    },
    prefersBorder: true,
    },
    };
    interface UIDef {
        autoResize?: boolean;
        csp?: CSPConfig;
        description?: string;
        domain?: string;
        html: string;
        name?: string;
        prefersBorder?: boolean;
        widgetDescription?: string;
    }
    Index

    Properties

    autoResize?: boolean

    Enable automatic size change notifications.

    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.

    MCP Apps only - ignored in ChatGPT.

    true
    
    csp?: CSPConfig

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

    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.

    html: string

    HTML content - path to file or inline HTML string.

    If the value starts with "<", it's treated as inline HTML. Otherwise, it's treated as a file path relative to the project root.

    "./ui/dist/widget.html"
    
    "<div>Hello World</div>"
    
    name?: string

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

    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"