generflow-react

v0.2.0

Published

a month ago

Generflow renderer — React, Web Components, and vanilla TS. Progressive UI from low-token GF-Lang specs streamed over SSE.

0High
0Medium
0Low

litoceans

generative-ui ai llm sse react web-components hitl human-in-the-loop design-system streaming tooling

@generflow/react

The renderer for Generflow — React, Web Components, and vanilla TS.

@generflow/react renders GF-Lang specs streamed from a Generflow backend. It works with:

React — <GFRenderer /> + <Chat /> + useGenerflow() hook
Web Components — <gf-renderer> custom element (works in Vue, Svelte, Solid, plain HTML)
TypeScript — full types, autocompletion in your IDE

Install

npm install @generflow/react react react-dom

Or via the playground CDN (no build step):

<script type="module">
  import { GfRenderer } from "https://esm.sh/@generflow/react/webcomponents";
  customElements.define("gf-renderer", GfRenderer);
</script>

React quickstart

import { GFRenderer, Chat, useGenerflow } from "@generflow/react";

function App() {
  const { state, send } = useGenerflow({
    baseUrl: "http://localhost:7878",
    manifest: "/v1/registry/manifest",
  });
  return (
    <div>
      <Chat baseUrl="http://localhost:7878" onSend={send} />
      <GFRenderer state={state} />
    </div>
  );
}

Web Components quickstart

<!doctype html>
<html>
<head>
  <script type="module">
    import { GfRenderer } from "https://esm.sh/@generflow/react/webcomponents";
    customElements.define("gf-renderer", GfRenderer);
  </script>
</head>
<body>
  <gf-renderer
    src="http://localhost:7878/v1/stream"
    manifest="http://localhost:7878/v1/registry/manifest"
    message="build a sales dashboard"
    show-rewind="true"
  ></gf-renderer>
</body>
</html>

Standalone (no backend)

import { GFRenderer } from "@generflow/react";

<GFRenderer
  spec={`
    Card(title="Static Demo", [
      Header(level=1, text="Hard-coded"),
      Metric(label=Users, value=1240, delta="+12%"),
    ])
  `}
/>

Events

The renderer dispatches typed CustomEvents:

| Event | When | Detail | |-------|------|--------| | generflow:component-mount | A component finished rendering | { name, path } | | generflow:data-fill | A src= ref resolved | { ref, value, latency_ms } | | generflow:hitl | HITL gate triggered | { kind, question, options } | | generflow:hitl-response | User clicked an option | { kind, choice } | | generflow:update | A surgical update applied | { path, value } | | generflow:stream-end | Stream finished | { tokens, latency_ms } | | generflow:error | Something failed | { message } |

Versioning

Components can be versioned. Card resolves to the latest, Card@v1 resolves explicitly:

<gf-renderer spec="Card@v2(title=Hello)" />

License

Apache-2.0 — see LICENSE.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme