Why it matters
Live widget streaming
Tool-call streams turn into real surfaces, not screenshots or markdown hacks.
Generative UI for production apps
Interfaces that stream in with the model.
StreamCanvas packages Claude-style generative UI into an open-source product teams can actually ship: safe rendering, React primitives, and a reference app that proves the UX before integration work begins.
NDJSON stream protocol shared by server and client
Inline widget actions bridged back to the host app
SVG-first charts and operational surfaces that work offline
Why it matters
Safe by default
Sandboxed iframe rendering by default, plus schema-validated React components.
Why it matters
App plus SDK
Reference app, core protocol, React SDK, and a create-app scaffold in one repo.
Platform layer
Stream Protocol
A typed event contract for messages, widget creation, incremental HTML frames, component payloads, and host callbacks.
Platform layer
Rendering Layer
A sandboxed iframe renderer for HTML widgets plus schema-validated React components for app-native surfaces.
Platform layer
Action Bridge
Client tools, approvals, and structured payloads let widgets trigger trusted host actions without arbitrary DOM access.
Who it is for
Ship AI interfaces users can act on, not just read.
StreamCanvas is built for AI product teams, agent builders, analytics apps, and SaaS platforms that want a generative UI layer without depending on brittle DOM hacks. You get a landing page and demo app for evaluation, then reusable packages for integration.
Search intent
Looking for open-source Claude generative UI?
StreamCanvas is the production-oriented open-source answer to that search: a Claude-style generative UI pattern with a typed stream, sandboxed widget renderer, React SDK, and self-hostable reference app.
Read the implementation guideWhere it fits
SaaS Copilots
Embed AI workspaces directly into existing products so users can ask, approve, refine, and act without leaving the page.
Where it fits
Operations Interfaces
Render dashboards, launch plans, and operational briefings that stay useful while the model is still streaming.
Where it fits
Analytics Experiences
Turn prompts into charts, scenario summaries, and data review flows with structured callbacks to the host system.
Built for operators, not just demos
Stream a useful answer before the widget is complete.
The server package emits message and widget events over a single stream. The React package consumes that stream, renders progressive updates, and routes widget actions back into the host application. The landing page, demo route, and SDK all use the same protocol.
01Tool call plans the surface
02Server streams message and widget frames
03Sandboxed renderer posts structured events back
What production generative UI actually needs
A practical guide to the layers required for a real generative UI product, from the event stream to the rendering surface.
Read articleHow to secure streamed widget rendering
Why rendering strategy matters, where teams get exposed, and how to reduce risk without killing the interactive experience.
Read articleDesigning AI interfaces that users can actually operate
A framework for deciding where generative UI belongs in a product, what users expect, and which surfaces should remain traditional.
Read articleFAQ
What is StreamCanvas?
StreamCanvas is an open-source framework for building AI interfaces that render real widgets, dashboards, and operational surfaces while the model streams.
FAQ
Does StreamCanvas inject raw HTML into the host page?
No. The default renderer uses a sandboxed iframe and sanitizes widget HTML before it ever reaches the browser surface.
FAQ
Can I self-host the app and SDK?
Yes. The reference app and server helpers are self-hostable, and the React package is designed to plug into your own backend if you already have one.
Ship fast, extend later