Skip to content

Open ended Generative UI example - #823

Merged
rabisg merged 5 commits into
thesysdev:mainfrom
rabisg:open-ended
Jul 23, 2026
Merged

Open ended Generative UI example#823
rabisg merged 5 commits into
thesysdev:mainfrom
rabisg:open-ended

Conversation

@rabisg

@rabisg rabisg commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

What

Adds a new example, examples/html-artifact, demonstrating open-ended generative UI with OpenUI: the model can generate a complete, self-contained HTML/CSS/JavaScript experience as the props of a single OpenUI component, rendered in a sandboxed iframe.

This is the "Open-Ended component inside a Declarative catalog" pattern from the State of Generative UI report: the model chats normally with markdown and emits an HtmlArtifact only when the user asks it to build something interactive (an app, game, simulation, or visualization). The artifact streams its raw source into a detailed-view panel on the right and switches to a rendered sandboxed iframe when the stream completes — using the existing assistant response stream, with no extra endpoint or tool call.

Changes

  • examples/html-artifact — new Next.js example (derived from openui-chat) with:
    • HtmlArtifact component: compact inline preview, plus a DetailedViewPanel with Raw/Rendered tabs that auto-switches to Rendered (sandboxed iframe srcDoc) when streaming completes.
    • A minimal library (Response root, Markdown, HtmlArtifact) so emitting an artifact is a per-reply choice the model makes, not the only output shape.
    • Prompt rules and examples teaching the model when to use the artifact and how to emit self-contained, correctly escaped HTML.
    • A minimal /api/chat route (no tools) and a checked-in generated system prompt.
  • packages/react-ui — export DetailedViewPanel / DetailedViewPortalTarget (and their prop types) from the package index so custom components can target the AgentInterface detailed view. No other library changes.
  • Docs — new guide docs/agent/guides/open-ended-html, cross-linked from the Generative UI core-concepts page, the generative UI report blog post, and docs/public/AGENTS.md.
  • Skill — new skills/openui/references/open-ended-html.md reference with a routing rule in SKILL.md, including an explicit warning not to make the artifact the library root.

Test Plan

  • Not applicable (explain why)
  • Verified locally

Ran the example end-to-end: plain messages (e.g. "hi") get a normal markdown reply; "build a sorting visualizer"-style prompts stream an HtmlArtifact with raw source in the panel, then render the completed document in the sandboxed iframe. Regenerated the checked-in system prompt via pnpm generate:prompt (which also validates the library through the CLI bundler). Lint and build pass for the example and

image

@rabisg
rabisg requested review from Aditya-thesys and vishxrad July 22, 2026 19:25
@rabisg
rabisg merged commit fc2c4a4 into thesysdev:main Jul 23, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants