Angular

How it connects to OpenUI

Standalone Angular components and Zod schemas form one library for prompt generation and rendering. The openui-renderer component resolves streamed statements into those components, and injection helpers give them access to actions, form state, and query loading.

Integration steps

1. 1

   Define Angular components

   Write standalone components that accept props, renderNode, and statementId inputs. Register each one with defineComponent and a Zod schema, then combine them with createLibrary.

2. 2

   Generate the system prompt

   Call library.prompt() in the app, or share the Zod schemas with a Node backend and use @openuidev/lang-core so the server never imports Angular classes.

3. 3

   Render with openui-renderer

   Import Renderer and bind response, library, and isStreaming. Handle the (action), (stateUpdate), and (error) outputs, and pass a toolProvider to run Query and Mutation calls.