Generative UI components
you can embed everywhere

Describe what you want. Get a real component — installed, typechecked, bundled, and running behind one tag. The thing on the right is the line below it.

<OpenWidget prompt="iOS weather widget" city="Cupertino" />

Try it out See it in a chat

idle…

Add freeform AI-generated components to your React projects, safely

Generated code never runs on your page. It is built in a sandbox, typechecked with a real tsc, and served into an iframe that cannot reach your DOM, your cookies or your session. What crosses the boundary is a size and a set of props.

Use them in chat, with the Vercel AI SDK

Give your assistant a frontend tool and let it answer with an interface instead of a paragraph — a weather card, a pricing table, a chart. Try the live demo.

…or anywhere else in your app

The same component works outside chat, in React or in a page with no build step at all.

React

// generated on demand, from a description
<OpenWidget.Provider apiKey={process.env.NEXT_PUBLIC_LIVEBIN_KEY}>
  <OpenWidget prompt="an iOS-style weather widget" city="Cupertino" />
</OpenWidget.Provider>

// or already generated — by you, in the studio or over the API.
// No key: it is just a hash.
<OpenWidget hash="guvuld3sh3rm…" />

Plain HTML — a whole page, no build step

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://open-widgets.com/b/ul3z2rj3papcmrep4b5ck757tj/styles.css" />
    <script type="importmap">
    {
      "imports": {
        "react": "https://esm.sh/react@19.2.0",
        "react/": "https://esm.sh/react@19.2.0/",
        "react-dom": "https://esm.sh/react-dom@19.2.0?external=react",
        "react-dom/": "https://esm.sh/react-dom@19.2.0/",
        "react-dom/client": "https://esm.sh/react-dom@19.2.0/client?external=react",
        "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime"
      }
    }
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module">
      import { createElement } from "react";
      import { createRoot } from "react-dom/client";
      import Widget from "https://open-widgets.com/b/ul3z2rj3papcmrep4b5ck757tj/bundle.js";

      createRoot(document.getElementById("root")).render(createElement(Widget));
    </script>
  </body>
</html>

One generation, every URL you need

A component is content-addressed, so generating it once gives you a hash and every representation of it at once — an embed, a bundle, its stylesheet, its manifest, its build log, and a live endpoint for each action it declared.

POST /api/generate   { "prompt": "an iOS-style weather widget" }
  -> { "hash": "guvuld3sh3rm…", "status": "ok" }

/b/<hash>/embed          the iframe, sized to the component
/b/<hash>/bundle.js      ESM, React external
/b/<hash>/styles.css     just this component's CSS
/b/<hash>/manifest.json  props, exports, actions, sizes
/b/<hash>/logs           install, typecheck and build output
/b/<hash>/api/<action>   a live endpoint, one per action

You pay once. The first ask for a given prompt runs the agent; every ask after that is a cache lookup that costs nothing and returns the same hash — so a page that embeds it is never paying per view, and the component cannot change under its readers.

Let your users reach any integration, without you managing their credentials

A component can call a real API on behalf of the person looking at it. The credential lives in that user's own vault, is substituted server-side, and is never in your database, your logs or the bundle. You get the integration; you never hold the secret.

Enforce your own design systemComing soon

Point open-widgets at your component library and have generated UI compose it, instead of approximating it.

Connect your own toolsComing soon

Expose your internal APIs so generated components can call them directly.

Generative UI componentsyou can embed everywhere