DEDUPED Hot AI repos, turned into use cases Get 5 a day

How to stream a LangChain agent's output as live UI with Openui

Connect a LangChain or LangGraph agent to OpenUI through AG-UI for streamed UI responses.

Credentials. Your LangChain model provider keys must be stored in environment variables on the server and kept out of client code.

Who it is forAn AI engineer who already runs a LangChain or LangGraph agent and wants its answers shown as interactive UI in a chat app.

The problemAgent responses arrive as text, so structured results such as tables and charts need custom plumbing to reach the screen.

The outcomeAn agent whose output streams through AG-UI as OpenUI Lang and renders as components in the client.

What you need first

  • Node.js with npm and npx, since the README install and scaffold commands use them
  • An LLM provider you can call from your backend, because OpenUI sends a generated system prompt to your model
  • A component library to use or define; the README provides built-in libraries in @openuidev/react-ui

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 for your agent

In the thesysdev/openui repo, wire the @openuidev/langchain transformer into the LangGraph agent at <target agent path> 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.

Share: X LinkedIn Hacker News Email Copy link

Disclaimer

Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked "Seen in the wild", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email [email protected] and we will look at it promptly. Full disclaimer page