Open AI Apps SDK for Vue

Installation

npm i @zacksmash/vue-open-ai-apps

Composables

A set of composables and UI helpers for Vue to assist with using the OpenAI SDK window object.

// Example usage
import { useRequestDisplayMode } from "@zacksmash/vue-open-ai-apps";

const requestDisplayMode = useRequestDisplayMode();

const onRequestDisplayMode = async () => {
    await requestDisplayMode("fullscreen");
};

<OpenAIProvider />

The provider waits for the host page to inject window.openai, exposes typed lifecycle events (ready, loading, error), and renders accessible defaults that can be overridden via slots or CSS variables.

<script setup>
import { OpenAIProvider } from '@zacksmash/vue-open-ai-apps'
</script>

<template>
    <OpenAIProvider>
        <template #loading>
            <!-- loading the app -->
        </template>

        <!-- Default slot for your root app component -->

        <template #error="{ message, retry }">
            <!-- App was not loaded, retry or show error message -->
        </template>
    </OpenAIProvider>
</template>

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | timeout | number | 15000 | How long (ms) to wait before emitting an error event. | | windowObject | string | "openai" | Global key to probe for the OpenAI bridge (useful for testing). | | autoStart | boolean | true | Automatically begin polling when the component mounts. | | pollingInterval | number? | requestAnimationFrame | Fixed interval in ms for environments without RAF. | | loadingText / errorText / retryLabel | string? | Built-in copy | Override the default i18n-friendly strings without replacing slots. | | loadingClass / errorClass | string? | undefined | Apply custom classes while still using default markup. |

The runtime prop config lives in components/OpenAIProvider.types.ts, so the package always ships accurate TypeScript definitions.

Events

<OpenAIProvider
    @loading="({ retry }) => console.log('loading', retry)"
    @ready="({ duration }) => console.log('ready in', duration)"
    @error="({ message }) => toast.error(message)"
/>

• loading: fires whenever a connection attempt is in flight; useful for analytics or global progress indicators.
• ready: dispatched once the host bridge resolves; includes the measured duration in milliseconds.
• error: emitted for timeouts or unexpected failures, with a retry handler and original cause when available.

Slots & Styling

| Slot | Purpose | | --- | --- | | default | Render your app shell once the bridge is ready. | | loading | Replace the default status message. Receive no scoped props. | | error | Override the error UI. Receives { message, retry }. |

Accessible defaults automatically announce changes with role="status" / role="alert". You can further style them through CSS variables:

:root {
	--openai-provider-loading-color: #1d4ed8;
	--openai-provider-error-bg: #fee2e2;
}

useOpenAIReady()

If you only need the readiness logic without UI, import the composable:

import { useOpenAIReady } from "@zacksmash/vue-open-ai-apps";

const bridge = useOpenAIReady({ timeout: 10_000, autoStart: false });
await bridge.start();

if (bridge.ready.value) {
	// safe to interact with window.openai
}

The composable mirrors the provider props (timeout, autoStart, pollingInterval, windowObject) and returns reactive refs for ready, errorMessage, isLoading, lastError, lastDuration, plus start() / reset() helpers.