Introduction

generative-frame renders HTML and SVG that a model writes, chunk by chunk, inside a Safe Content Frame on its own site. The frame loads once, and code streams into it over a private MessagePort, so partial markup renders as it arrives and scripts run once the code is complete.

The package also ships the model side (tool definitions, prompts, a repair loop), a spec mode that renders your own components from JSONL patches, and bindings for React and assistant-ui. The core is framework-agnostic; React and @assistant-ui/react are optional peers.

Install

npm install generative-frame

Render a streamed widget

import { createWidget, readThemeTokens } from "generative-frame";

const widget = createWidget({
  container: document.getElementById("widget")!,
  tokens: readThemeTokens(),
  onPrompt: (text) => sendChatMessage(text),
});

for await (const chunk of modelStream) widget.write(chunk);
await widget.end();

createWidget returns immediately. Writes made before the frame connects are queued, and the iframe grows to the height of its content.

Entry points

The package has two halves that never import each other: the frame half renders HTML and SVG widgets, and the spec half renders your own components from a spec. You compose them by passing values from one into the other, so an app ships only the half it uses.

Pages