# AI use cases for Openui (thesysdev/openui) Repo: [thesysdev/openui](https://github.com/thesysdev/openui) | Use cases: 5 | Page: https://dedupedai.com/use-cases/thesysdev-openui/ OpenUI is an open, framework-agnostic Generative UI framework that lets models stream structured UI, built around the compact OpenUI Lang and runtimes for React, Vue, Svelte, and Angular. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Scaffold a streaming generative UI chat app: https://dedupedai.com/use-cases/thesysdev-openui/scaffold-genui-chat-app/ - Add streamed OpenUI rendering to a React app: https://dedupedai.com/use-cases/thesysdev-openui/add-openui-rendering-to-react-app/ - Generate model prompts from a component list on the server: https://dedupedai.com/use-cases/thesysdev-openui/generate-prompts-on-backend-lang-core/ - Stream a LangChain agent's output as live UI: https://dedupedai.com/use-cases/thesysdev-openui/stream-langchain-agent-into-openui/ - Render streamed OpenUI in a Vue, Svelte, or Angular app: https://dedupedai.com/use-cases/thesysdev-openui/render-openui-in-vue-svelte-or-angular/ ## How to scaffold a streaming generative UI chat app with Openui Repo: [thesysdev/openui](https://github.com/thesysdev/openui) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Create a ready-to-run app that streams OpenUI Lang output and renders it as live UI. **Who it is for:** A developer who wants a working generative UI chat app to start from, without wiring streaming and rendering by hand. **The problem:** Wiring model output, streaming, and a UI renderer from scratch takes time before any working prototype exists. **The outcome:** A scaffolded app with OpenUI Lang support, library-driven prompts, and streaming UI updates that you can run and then extend. ### Steps 1. Open a terminal in the folder where you want the project. 2. Run `npx @openuidev/cli@latest create --name genui-chat-app` 3. Change into the new genui-chat-app folder and follow the install and start steps the CLI prints. 4. Open the app and send a prompt to confirm UI renders as the response streams. 5. Open the Playground at https://www.openui.com/playground to compare generated output with your app. ### Prompt to paste into your agent ```text Using the thesysdev/openui repo, scaffold a new app named genui-chat-app in by running `npx @openuidev/cli@latest create --name genui-chat-app`. Report the start command the CLI prints and confirm that a test prompt in the running app produces streamed UI rather than plain text. ``` ### Caveat The scaffold needs a model provider set up on your side, and the README does not describe which provider settings the generated app expects. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/thesysdev-openui/scaffold-genui-chat-app/ ## How to add streamed OpenUI rendering to a React app with Openui Repo: [thesysdev/openui](https://github.com/thesysdev/openui) | Difficulty: Intermediate | Time: 60 minutes | Basis: From the README Install the React runtime and prebuilt chat UI to render model output in an existing app. **Who it is for:** A React developer with an existing app who wants an assistant or copilot panel that shows structured UI from a model. **The problem:** An existing React app has no way to turn streamed model output into charts, forms, or tables without custom rendering code. **The outcome:** Your React app renders OpenUI Lang output progressively using prebuilt chat layouts and component libraries. ### Steps 1. In your React project folder, run `npm install @openuidev/react-lang @openuidev/react-ui` 2. Define or reuse a component library so the model knows which components it may generate. 3. Generate a system prompt from that library and send it with your model request. 4. Render the streamed OpenUI Lang output in your React chat view using the react-lang renderer. 5. Send a test message and check that charts, forms, or tables appear as the response arrives. ### Prompt to paste into your agent ```text In the thesysdev/openui repo, use the @openuidev/react-lang and @openuidev/react-ui packages to add a streamed chat panel to the React project at . Expected output is a running chat view that renders OpenUI Lang output; verify by sending one test prompt and confirming a component renders rather than raw text. ``` ### Caveat The README lists these packages but does not show a full integration example, so you will need to read the package docs at Openui.com for wiring details. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/thesysdev-openui/add-openui-rendering-to-react-app/ ## How to generate model prompts from a component list on the server with Openui Repo: [thesysdev/openui](https://github.com/thesysdev/openui) | Difficulty: Advanced | Time: 45 minutes | Basis: From the README Use the framework-agnostic core to build system prompts on a backend or Edge function. **Who it is for:** A backend or platform engineer whose model calls run on a server or Edge runtime and who needs prompts that match an allowed component set. **The problem:** The model can generate any UI unless the prompt limits it to a defined set of components, and that prompt must be kept in sync with the code that renders it. **The outcome:** A server-side step that produces a system prompt from your component library, so model output stays within the components you register. ### Steps 1. In your backend project, run `npm install @openuidev/lang-core` 2. Define the component library you want the model to use, with Zod schemas for props. 3. Call the lang-core prompt-generation function with that library in your server route and check the returned text. (inferred, check the README) 4. Pass the generated prompt to your model request and stream the response back to the client. 5. Confirm that a model reply uses only components from your library. ### Prompt to paste into your agent ```text Using the thesysdev/openui repo, add @openuidev/lang-core to the backend at and generate a system prompt from a component library that has at least two components. Expected output is the prompt text; verify that it lists only the components you defined. ``` ### Caveat The README says lang-core provides prompt generation but does not give the exact function names, so the call step must be confirmed in the package docs. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/thesysdev-openui/generate-prompts-on-backend-lang-core/ ## How to stream a LangChain agent's output as live UI with Openui Repo: [thesysdev/openui](https://github.com/thesysdev/openui) | Difficulty: Advanced | Time: 90 minutes | Basis: From the README Connect a LangChain or LangGraph agent to OpenUI through AG-UI for streamed UI responses. **Who it is for:** An AI engineer who already runs a LangChain or LangGraph agent and wants its answers shown as interactive UI in a chat app. **The problem:** Agent responses arrive as text, so structured results such as tables and charts need custom plumbing to reach the screen. **The outcome:** An agent whose output streams through AG-UI as OpenUI Lang and renders as components in the client. ### Steps 1. In your agent project, run `npm install @openuidev/langchain @langchain/langgraph` 2. Add the OpenUI agent transformer and server helpers from @openuidev/langchain to your agent server. 3. Define the component library the agent is allowed to use and include its prompt in the agent instructions. 4. Connect the client renderer so AG-UI events are displayed as they stream. 5. Run one agent request and check that structured output renders as UI. ### Prompt to paste into your agent ```text In the thesysdev/openui repo, wire the @openuidev/langchain transformer into the LangGraph agent at so its output streams as OpenUI Lang over AG-UI. Expected output is a streamed UI response in the client; verify by running one request that returns a table or form component. ``` ### Caveat The README names LangChain and LangGraph and AG-UI but does not document the transformer's exact API, so the wiring steps rely on the package docs. Risk, credentials: Your LangChain model provider keys must be stored in environment variables on the server and kept out of client code. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/thesysdev-openui/stream-langchain-agent-into-openui/ ## How to render streamed OpenUI in a Vue, Svelte, or Angular app with Openui Repo: [thesysdev/openui](https://github.com/thesysdev/openui) | Difficulty: Intermediate | Time: 60 minutes | Basis: From the README Install the matching runtime to render OpenUI Lang output in a non-React front end. **Who it is for:** A front-end developer on Vue 3, Svelte 5, or Angular who wants model-driven UI without switching frameworks. **The problem:** Most of the built-in component libraries are React-based, so non-React teams need their own runtime to render streamed model output. **The outcome:** A Vue, Svelte, or Angular app that defines model-renderable components and displays streamed OpenUI Lang as it arrives. ### Steps 1. In your project folder, run `npm install @openuidev/vue-lang` for Vue, `npm install @openuidev/svelte-lang` for Svelte, or `npm install @openuidev/angular-lang` for Angular. 2. Define the components the model may render using that framework's bindings. 3. Generate the system prompt from that component library and send it with your model request. 4. Render the streamed OpenUI Lang output in the matching view component. 5. Send a test prompt and check that a component renders as the response arrives. ### Prompt to paste into your agent ```text Using the thesysdev/openui repo, install the matching runtime for the project at (vue-lang, svelte-lang, or angular-lang) and render one streamed OpenUI Lang response. Expected output is a visible model-generated component; verify that it appears progressively rather than all at once. ``` ### Caveat The README lists the Vue, Svelte, and Angular bindings without built-in component libraries, so you must define your own components for these frameworks. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/thesysdev-openui/render-openui-in-vue-svelte-or-angular/