Assistant Frame

Frame bridge APIs and serialized message types for embedding assistant-ui runtimes in external contexts.

API Reference

AssistantFrameHost

AssistantFrameHost

constructor ?: (iframeWindow: Window, targetOrigin: string = "*") => AssistantFrameHost
getModelContext ?: () => ModelContext
subscribe ?: (callback: () => void) => Unsubscribe
dispose ?: () => void

AssistantFrameProvider

AssistantFrameProvider

static addModelContextProvider ?: (provider: ModelContextProvider, targetOrigin?: string) => Unsubscribe
static dispose ?: () => void

FRAME_MESSAGE_CHANNEL

const FRAME_MESSAGE_CHANNEL: "assistant-ui-frame";

FrameMessage

FrameMessage

type : "model-context-request"

SerializedModelContext

SerializedModelContext

system ?: string
tools ?: Record<string, SerializedTool>

SerializedTool

SerializedTool

description ?: string
parameters : any
disabled ?: boolean
type ?: string

useAssistantFrameHost

React hook that manages the lifecycle of an AssistantFrameHost and its binding to the current AssistantRuntime.

Usage example:

function MyComponent() {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  useAssistantFrameHost({
    iframeRef,
    targetOrigin: "https://trusted-domain.com", // optional
  });

  return <iframe ref={iframeRef} src="..." />;
}

useAssistantFrameHost

options : UseAssistantFrameHostOptions

iframeRef : Readonly<RefObject<HTMLIFrameElement | null | undefined>>
targetOrigin ?: string
register : (frameHost: AssistantFrameHost) => Unsubscribe