Renders OpenUI programs in Phoenix LiveView.
<OpenUI.LiveView.renderer
id={"msg-#{message.id}"}
response={message.openui}
components={MyAppWeb.AssistantUI}
tool_provider={&MyApp.Tools.run/2}
streaming={@streaming?}
>
<:unknown :let={error}><p>{error.message}</p></:unknown>
</OpenUI.LiveView.renderer>response is the program, or a stored message with ]]>openui: marker
lines (OpenUI.Message). While streaming is true, pass the text
accumulated so far; the renderer reads only what is new. Queries run when
streaming turns false.
components is a module that uses OpenUI.LiveView.Components. Each of
its function components receives:
- every prop of the catalog under its catalog name: plain values; a prop
that takes components arrives as rendered HTML (or a list of it),
rendered with
{@children}; an action prop arrives as attributes for a button (<button {@action || []}>), ornilwithout an action; a bound prop arrives with its current value; @bind, for components declared as fields:id,nameandvalueattributes for the input (<input {@bind} />);@error, the validation rule a field failed at the last submit ("required","email", ...) ornil;@loading, true while a query of the program is loading.
tool_provider answers Query and Mutation: a map of tool names to
fn args -> {:ok, data} | {:error, reason} end, or a function
(name, args) -> {:ok, data} | {:error, reason} that returns
{:error, {:tool_not_found, names}} for a tool it does not know.
The LiveView that renders the program receives:
{:openui, id, %OpenUI.Event{}}for@ToAssistant,@OpenUrland actions of the library;{:openui, id, {:state, state}}when the person changes state; store it withOpenUI.Message.build(content: program, context: [state])and the renderer restores it when the message is shown again;{:openui, id, {:errors, errors}}when the error list changes,[]once it recovers.
Nothing a program contains can crash the page: a component that raises is
left out and reported, an unknown component renders the :unknown slot
(or nothing), and a failure of the renderer itself leaves the program
empty and logs it. A catalog component cannot render a LiveComponent.
Summary
Functions
Renders a program. See the module documentation.