#Interface: A2UIProps

Props for the all-in-one A2UI ReactLynx renderer.

#Properties

#catalogs

catalogs: readonly CatalogInput[]

Components the renderer is allowed to instantiate. Each item is either a bare component (name read from displayName ?? name) or a tuple [component, manifest] where the manifest is the JSON the extractor emits at dist/catalog/<Name>/catalog.json.

---

#className?

optional className?: string

Optional class name applied to the top-level surface-${surfaceId} view for the active surface. Use this when theme switching is expressed as surface-level classes.

---

#messageStore

messageStore: MessageStore

The raw-message buffer the developer pushes protocol messages into. <A2UI> subscribes via useSyncExternalStore and processes new messages incrementally.

The internal MessageProcessor (surfaces, signals, resources) is created once per mount and is not reset if messageStore is later replaced with a different instance. Pass a key prop derived from the store's identity if you want a fresh session, e.g. <A2UI key={turnId} messageStore={turnStore} ... />.

---

#onAction?

optional onAction?: (action: UserActionPayload) => void

Called when a user action fires inside the rendered tree (button tap, etc.). Forward to your agent and push the response messages back into the same messageStore to update the UI. Fire-and-forget; the renderer never awaits this.

#Parameters

#Returns

void

---

#renderEmpty?

optional renderEmpty?: () => ReactNode

Render before the first beginRendering arrives from the buffer.

#Returns

ReactNode

---

#renderError?

optional renderError?: (err: unknown) => ReactNode

Render when the active resource fails.

#Parameters

#Returns

ReactNode

---

#renderFallback?

optional renderFallback?: () => ReactNode

Render while the active resource is pending.

#Returns

ReactNode

---

#renderUnsupported?

optional renderUnsupported?: (info: UnsupportedInfo) => ReactNode

Render when unsupported data syntax or an unsupported component is encountered.

#Parameters

#Returns

ReactNode

---

#wrapSurface?

optional wrapSurface?: (children: ReactNode, ctx: object) => ReactNode

Wrap each top-level surface so consumers can apply an outer theme shell, wrapper className, or additional styles.

#Parameters

#Returns

ReactNode