Render agent responses with OpenUI components
Define the components an agent may render and review its actions before connecting real data.
Originally posted · Published here · 1 source · Resume reading
OpenUI lets an agent stream interfaces made from components you register. Its repository documents typed component contracts and separate packages for rendering, chat state and backend integration. [1]
Start with the rendering packages
For a React application, the README gives this installation: [1]
npm install @openuidev/react-lang @openuidev/react-uiFollow the repository's getting-started example to define the component library and connect the renderer. Begin with a small set, such as a text block and a read-only result card.
Treat actions as application input
A generated form or button still needs application code to validate its request and check authorization. I would test malformed values and an unauthorized action before connecting production data.
Inspect loading, empty and error states as well as successful output. Keyboard access and narrow-screen layout still belong to the application's review.
The current repository lists React, Vue, Svelte and Angular packages. [1] Check the package and examples for your framework; the versions mentioned in the older social post are not a current compatibility matrix.
Keep this guide
Sources
- OpenUI official repositorygithub.com