Skip to content

OpenUI integration example for Langflow #14732

Description

@vishxrad

Feature Request

Add a documented OpenUI integration example to the Langflow repository. The example should show how a Langflow or LFX flow can stream model-produced OpenUI Lang into OpenUI's AgentInterface, then send generated follow-up actions and submitted form values back through the same Langflow path as new model turns.

A tested prototype uses this request path:

OpenUI AgentInterface
  -> server-side stream adapter
  -> Langflow /flows/{flow_id}/stream
  -> ChatInput -> Agent -> ChatOutput
  -> OpenUI parser and renderer

Langflow owns the flow graph, model invocation, and token events. OpenUI owns the chat shell, parser, renderer, theming, and action UI. The server adapter translates LFX token events into the streaming protocol consumed by AgentInterface and preserves action and form context.

The proposed Langflow contribution would include:

  • a runnable scripted LFX flow;
  • an OpenUI client example or recipe in the repository's preferred example location;
  • a server-side token and action adapter;
  • generated system-prompt setup based on the exact OpenUI component library;
  • documentation covering architecture, supported versions, configuration, and acceptance prompts;
  • focused tests for fragmented LFX events, streaming translation, follow-ups, forms, and OpenUI parser errors.

The prototype is tested with lfx==1.11.4, lfx-openai==0.1.0, and @openuidev/react-ui 0.13.8. Live acceptance covered a labeled numeric chart, a generated follow-up that produced one new request, validation that blocked an incomplete form, and a valid form whose edited values appeared in the next rendered model response. Unit tests, typecheck, lint, formatting, production build, prompt generation, and graph loading pass.

Motivation

Langflow users can already build and stream agent flows, but there is no first-party example showing how to use that stream for generative UI rather than plain text. Developers currently have to determine the LFX event format, translate the stream, align the model prompt with the OpenUI renderer, and preserve structured action context themselves.

A Langflow-hosted example would document this frontend integration boundary without coupling OpenUI rendering to Langflow's own application UI. It would also give users a reference for self-hosted and deployed LFX flows.

Your Contribution

I have a working prototype and can restructure it to match the Langflow repository's preferred example and documentation conventions after maintainer direction.

I would also be happy to maintain an @openuidev/langflow package containing the reusable stream, message, and action adapter if both projects prefer a package-level integration. I would like to agree first on whether that package should own only stream translation or also conversation and action conversion.

Langflow documents its APIs and several infrastructure integrations, but it does not currently have a dedicated location for examples showing how to embed Langflow into application frameworks and frontend technologies. This OpenUI example could initially live beside the Workflow API documentation, or establish an “Application integrations” section if maintainers want to expand this category.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions