@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.

generflow-react

Package Exports

Readme