@opendatalabs/vana-react - v0.3.1
    Preparing search index...

    Interface VanaAppUploadWidgetProps

    Configuration properties for the VanaAppUploadWidget component.

    interface VanaAppUploadWidgetProps {
        appId: string;
        className?: string;
        filters?: Record<string, string>;
        iframeOrigin?: string;
        iframeRef?: Ref<HTMLIFrameElement>;
        isOpen?: boolean;
        onAuth: (walletAddress: string) => void;
        onClose?: () => void;
        onError: (error: string) => void;
        onReady?: () => void;
        onResult: (data: AgentOperationResult) => void;
        operation?: string;
        operationParams?: Record<string, unknown>;
        prompt?: string;
        schemaId?: number;
        theme?: VanaAppUploadTheme;
        zIndex?: number;
    }
    Index

    Properties

    appId className? filters? iframeOrigin? iframeRef? isOpen? onAuth onClose? onError onReady? onResult operation? operationParams? prompt? schemaId? theme? zIndex?

    Properties

    appId: string

    Application ID from the Vana Developer Portal (app.vana.com/build). This identifies your app and its associated configuration.

    className?: string

    className is no longer used; widget layout is fully controlled internally. This prop is accepted for backward compatibility but has no effect. Remove it from your code when upgrading to the next major version.

    filters?: Record<string, string>

    JSONPath filters to apply to user data before sending to the operation. Maps schema IDs to JSONPath expressions for data filtering.

    { "24": "$.publicData.linkedinUserData.[hero, about.aboutText]" }
    iframeOrigin?: string

    Origin URL of the Vana iframe application.

    "https://app.vana.com"

    iframeRef?: Ref<HTMLIFrameElement>

    Optional React ref to the underlying iframe element. Use this if you need direct DOM access to the iframe.

    const iframeRef = useRef<HTMLIFrameElement>(null);
    <VanaAppUploadWidget iframeRef={iframeRef} />
    // Access iframe: iframeRef.current?.scrollTop
    isOpen?: boolean

    Controls visibility while keeping the iframe mounted for prefetching

    onAuth: (walletAddress: string) => void

    Callback function invoked when user successfully authenticates with their wallet.

    Type Declaration

      • (walletAddress: string): void

      • Parameters

        • walletAddress: string

          The authenticated user's wallet address

        Returns void

    onClose?: () => void

    Optional callback function invoked when user closes the widget. Useful for hiding or removing the iframe container.

    onError: (error: string) => void

    Callback function invoked when an error occurs during the upload process.

    Type Declaration

      • (error: string): void

      • Parameters

        • error: string

          Error message describing what went wrong

        Returns void

    onReady?: () => void

    Fires after the iframe posts "ready" and the config is sent. Useful for coordinating animations; not a signal that app fetch is done.

    onResult: (data: AgentOperationResult) => void

    Callback function invoked when data upload or agent operation completes successfully.

    Type Declaration

    operation?: string

    Generic agent operation to execute on the user's personal server.

    Important: This operation is executed on the user's trusted personal server instance (vana-personal-server). The personal server must be running and properly configured to support the requested operation type. The Vana SDK communicates with the user's personal server to execute the operation securely with access to their encrypted data.

    Standard supported operations (vana-personal-server v1.0+):

    • llm_inference: Direct LLM text generation with user data context. Use with operationParams: { prompt: string, response_format?: { type: 'json_object' } }
    • prompt_gemini_agent: Gemini-based agentic task execution with tool use, web search, and multi-step reasoning. Use with operationParams: { goal: string }
    • prompt_qwen_agent: Qwen-based agentic task execution with shell command capabilities. Use with operationParams: { goal: string }

    Custom operations may also be supported depending on the personal server configuration and installed agent plugins.

    "prompt_gemini_agent"

    "llm_inference"
    operationParams?: Record<string, unknown>

    Parameters to pass to the agent operation. These will be sent to the personal server along with the operation.

    { "model": "gpt-4", "temperature": 0.7 }
    prompt?: string

    LLM inference prompt for the user's trusted server. This prompt will be used to process the uploaded data. Kept for backward compatibility - prefer using operation for new implementations.

    "Extract personality insights in JSON format { \"openness\": 0.33 } from user data: {{data}}"
    schemaId?: number

    Optional schema ID to override the app's default schema. Each app has a configured schema, but you can specify a different one here.

    theme?: VanaAppUploadTheme

    Custom theme configuration using CSS custom properties.

    theme={{
      "--primary": "#007bff",
      "--background": "transparent",
      "--card": "rgba(255, 255, 255, 0.95)",
      "--foreground": "#1a1a1a"
    }}
    zIndex?: number

    Optional z-index for stacking order control. Useful when embedding alongside other overlays (modals, toasts, etc.).

    1000

    Settings

    Member Visibility

    On This Page

    Properties