Svelte 5

How it connects to OpenUI

Svelte component definitions and Zod schemas become one component library. The package generates the model prompt and its Renderer resolves streamed statements into Svelte components.

Integration steps

1. 1

   Define Svelte components

   Pair each .svelte 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

   Pass the streamed text, the library, and isStreaming to the Renderer component. It resolves each statement into a Svelte component as it arrives.