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 = getDefaultTargetOrigin()) => 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

parametersany

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",
  });

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

UseAssistantFrameHostOptions
iframeRefReadonly<RefObject<HTMLIFrameElement | null | undefined>>

targetOrigin?string

register(frameHost: AssistantFrameHost) => Unsubscribe