Vue 3

How it connects to OpenUI

Vue component definitions and Zod schemas form a shared library for prompt generation and rendering. The Vue Renderer updates progressively as OpenUI Lang arrives.

Integration steps

1. 1

   Define Vue components

   Register each Vue component with defineComponent and a Zod prop schema, then combine them with createLibrary.

2. 2

   Generate the system prompt

   Build the prompt from the same library with library.prompt(), or with generateSystemPrompt on the server, so the model only calls components the renderer knows.

3. 3

   Render the stream

   Bind the streamed text to the Renderer component's response prop along with library and is-streaming. Handle button and form actions with on-action.