feat(openui): implement web preview and components page by gaoachao · Pull Request #2611 · lynx-family/lynx-stack

gaoachao · 2026-05-12T09:30:02Z

Add rawText/rawTextUrl support in render.tsx to pass OpenUI DSL content to the Lynx view via globalProps
Update OpenUI Lynx app to read rawText from globalProps with fallback to mock data, and respect speed multiplier
Fix OpenUIDemosPage to use same-origin baseUrl for iframe rendering
Refactor component metadata into src/catalog/ directory
Enhance OpenUIComponentsPage with full component browsing UI

Summary by CodeRabbit

New Features
- OpenUI component browser page now displays a browsable catalog with sidebar navigation, component details, and category filtering instead of a placeholder.
- Added streaming support for OpenUI rendering with configurable speed control.
- Component documentation now includes metadata such as props and usage examples.

Checklist

Tests updated (or not required).
Documentation updated (or not required).
Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

- Add rawText/rawTextUrl support in render.tsx to pass OpenUI DSL content to the Lynx view via globalProps - Update OpenUI Lynx app to read rawText from globalProps with fallback to mock data, and respect speed multiplier - Fix OpenUIDemosPage to use same-origin baseUrl for iframe rendering - Refactor component metadata into src/catalog/ directory - Enhance OpenUIComponentsPage with full component browsing UI

changeset-bot · 2026-05-12T09:30:09Z

🦋 Changeset detected

Latest commit: 7c7c21a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-05-12T09:30:15Z

📝 Walkthrough

Walkthrough

This PR introduces OpenUI component catalog metadata and a functional components browser for the playground. It extends the playground's initialization data flow to accept raw text and speed parameters, implements chunked streaming rendering in the OpenUI App, builds a components browser page with detail and grid views, and streamlines URL handling in the demos page.

Changes

OpenUI Components Catalog and Browser

Layer / File(s)	Summary
OpenUI component catalog types and data `packages/genui/a2ui-playground/src/catalog/openui.ts`	Introduces `OpenUIComponentProp` and `OpenUIComponentDoc` interfaces for component metadata, exports `OPENUI_CATEGORIES` and `OPENUI_COMPONENT_CATALOG` with structured documentation for multiple OpenUI components.
Playground initialization data extension `packages/genui/a2ui-playground/src/render.tsx`	`InitData` interface adds optional `rawText` and `rawTextUrl` fields. Query parsing and global props building are updated to read and forward these parameters.
OpenUI App streaming parser implementation `packages/genui/a2ui-playground/lynx-src/openui/App.tsx`	Reworks `App` to read `rawText` and `speed` from `globalProps`, implements a timed loop that incrementally feeds fixed-size chunks to a streaming parser, and tracks `loading` and `isStreaming` state.
OpenUI Components Browser page `packages/genui/a2ui-playground/src/pages/OpenUIComponentsPage.tsx`	Replaces placeholder with functional components browser. Adds `ComponentDetail` and `ComponentGrid` components, computes selected component and category grouping, renders sidebar navigation and conditional main content.
Catalog imports and path updates `packages/genui/a2ui-playground/src/catalog/a2ui.ts`, `packages/genui/a2ui-playground/src/pages/ComponentsPage.tsx`	Updates import path for `ProtocolName` type and updates `ComponentsPage` catalog imports to use the new `a2ui.ts` catalog source.

OpenUI Demos URL Handling Simplification

Layer / File(s)	Summary
Remove memoized network base URL `packages/genui/a2ui-playground/src/pages/OpenUIDemosPage.tsx`	Removes `networkBaseUrl` memoization and uses `baseUrl` directly throughout URL construction in the `doRender` callback and shortened URL generation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

lynx-family/lynx-stack#2530: Both PRs extend playground initialization data flow with globalProps and add related query parameter parsing to enable passing dynamic content to the playground.
lynx-family/lynx-stack#2561: Both PRs implement OpenUI support in genui/a2ui-playground, modifying App.tsx, render.tsx, OpenUID pages, and catalog utilities.
lynx-family/lynx-stack#2598: Both PRs modify URL handling and construction logic in OpenUIDemosPage for rendering OpenUI payloads.

Suggested reviewers

HuJean
PupilTong
Sherry-hue

Poem

🐰 A catalog blooms with component cheer,
Streaming chunks arrive loud and clear,
Browser pages now showcase the view,
From raw text flows to URLs anew! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 28.57% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(openui): implement web preview and components page' clearly and accurately summarizes the main changes, which include OpenUI web preview functionality (streaming, globalProps support) and an enhanced components page with full browsing UI.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/openui-web-preview-and-components-page

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-05-12T09:34:13Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/genui/a2ui-playground/src/catalog/openui.ts (1)

12-25: ⚡ Quick win

Constrain category to known IDs for type safety.

category: string allows invalid values that won’t be caught at compile time and can break grouping/navigation silently.

Suggested diff

 export interface OpenUIComponentDoc {
   name: string;
-  category: string;
+  category: OpenUICategory;
   description: string;
   props: OpenUIComponentProp[];
   usage: string;
 }
 
+export type OpenUICategory =
+  | 'layout'
+  | 'content'
+  | 'buttons'
+  | 'data-display';
+
 export const OPENUI_CATEGORIES = [
   { id: 'layout', label: 'Layout' },
   { id: 'content', label: 'Content' },
   { id: 'buttons', label: 'Buttons' },
   { id: 'data-display', label: 'Data Display' },
-] as const;
+] as const satisfies ReadonlyArray<{ id: OpenUICategory; label: string }>;

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/genui/a2ui-playground/src/catalog/openui.ts` around lines 12 - 25,
The category field on OpenUIComponentDoc is currently an untyped string and
should be constrained to the known category IDs to ensure compile-time safety;
update the types so category is the union of OPENUI_CATEGORIES ids (e.g. derive
a type like OpenUICategoryId = typeof OPENUI_CATEGORIES[number]['id'] and change
OpenUIComponentDoc.category to OpenUICategoryId), and export that type if needed
so all usages (component definitions, grouping/navigation code) must use one of
the defined ids rather than any string.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.changeset/many-pots-care.md:
- Around line 1-3: The changeset file is empty; populate
.changeset/many-pots-care.md with a valid changeset: add a YAML section listing
affected package names and semver levels (e.g. "@lynx/playground": minor)
between the --- delimiters and then a short description of the change under the
YAML block describing what was added/changed (one or two sentences) so releases
and versioning can be generated; ensure package names and bump levels match the
PR changes (patch/minor/major) and include a concise human-readable description.

---

Nitpick comments:
In `@packages/genui/a2ui-playground/src/catalog/openui.ts`:
- Around line 12-25: The category field on OpenUIComponentDoc is currently an
untyped string and should be constrained to the known category IDs to ensure
compile-time safety; update the types so category is the union of
OPENUI_CATEGORIES ids (e.g. derive a type like OpenUICategoryId = typeof
OPENUI_CATEGORIES[number]['id'] and change OpenUIComponentDoc.category to
OpenUICategoryId), and export that type if needed so all usages (component
definitions, grouping/navigation code) must use one of the defined ids rather
than any string.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a8f2672a-8d1f-4a77-bd70-f2d457b094a3

📥 Commits

Reviewing files that changed from the base of the PR and between 460ddbd and 7c7c21a.

📒 Files selected for processing (8)

.changeset/many-pots-care.md
packages/genui/a2ui-playground/lynx-src/openui/App.tsx
packages/genui/a2ui-playground/src/catalog/a2ui.ts
packages/genui/a2ui-playground/src/catalog/openui.ts
packages/genui/a2ui-playground/src/pages/ComponentsPage.tsx
packages/genui/a2ui-playground/src/pages/OpenUIComponentsPage.tsx
packages/genui/a2ui-playground/src/pages/OpenUIDemosPage.tsx
packages/genui/a2ui-playground/src/render.tsx

codspeed-hq · 2026-05-12T09:48:39Z

Merging this PR will not alter performance

✅ 81 untouched benchmarks
⏩ 26 skipped benchmarks¹

_{Comparing feat/openui-web-preview-and-components-page (7c7c21a) with main (460ddbd)}

26 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

relativeci · 2026-05-12T09:52:52Z

React MTF Example

#1217 Bundle Size — 206.65KiB (-0.39%).

7c7c21a(current) vs 1e1257e main#1206(baseline)

Bundle metrics

2 changes

	Current #1217	Baseline #1206
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`46.38%`	`46.17%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`192`	`192`
Duplicate Modules	`77`	`77`
Duplicate Code	`44.36%`(`-0.05%`)	`44.38%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type

1 change

1 improvement

	Current #1217	Baseline #1206
IMG	`111.23KiB`	`111.23KiB`
Other	`95.42KiB` (`-0.84%`)	`96.23KiB`

Bundle analysis report Branch feat/openui-web-preview-and-comp... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-12T09:53:10Z

React External

#1199 Bundle Size — 690.27KiB (-0.4%).

7c7c21a(current) vs 1e1257e main#1188(baseline)

Bundle metrics

1 change

	Current #1199	Baseline #1188
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`40.81%`	`40.57%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`17`	`17`
Duplicate Modules	`5`	`5`
Duplicate Code	`8.59%`	`8.59%`
Packages	`0`	`0`
Duplicate Packages	`0`	`0`

Bundle size by type

1 change

1 improvement

	Current #1199	Baseline #1188
Other	`690.27KiB` (`-0.4%`)	`693.04KiB`

Bundle analysis report Branch feat/openui-web-preview-and-comp... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-12T09:53:10Z

React Example

#8085 Bundle Size — 235.77KiB (-0.31%).

7c7c21a(current) vs 1e1257e main#8075(baseline)

Bundle metrics

2 changes

	Current #8085	Baseline #8075
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`38.37%`	`38.18%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`197`	`197`
Duplicate Modules	`80`	`80`
Duplicate Code	`44.85%`(`-0.04%`)	`44.87%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type

1 change

1 improvement

	Current #8085	Baseline #8075
IMG	`145.76KiB`	`145.76KiB`
Other	`90.01KiB` (`-0.82%`)	`90.75KiB`

Bundle analysis report Branch feat/openui-web-preview-and-comp... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-12T09:53:12Z

Web Explorer

#9659 Bundle Size — 901.27KiB (0%).

7c7c21a(current) vs 1e1257e main#9648(baseline)

Bundle metrics no changes

	Current #9659	Baseline #9648
Initial JS	`45.06KiB`	`45.06KiB`
Initial CSS	`2.22KiB`	`2.22KiB`
Cache Invalidation	`0%`	`0%`
Chunks	`9`	`9`
Assets	`11`	`11`
Modules	`229`	`229`
Duplicate Modules	`11`	`11`
Duplicate Code	`27.24%`	`27.24%`
Packages	`10`	`10`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #9659	Baseline #9648
JS	`497KiB`	`497KiB`
Other	`402.06KiB`	`402.06KiB`
CSS	`2.22KiB`	`2.22KiB`

Bundle analysis report Branch feat/openui-web-preview-and-comp... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-12T09:53:13Z

React Example with Element Template

#351 Bundle Size — 197.79KiB (0%).

7c7c21a(current) vs 1e1257e main#341(baseline)

Bundle metrics

2 changes

	Current #351	Baseline #341
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`79`(`-2.47%`)	`81`
Duplicate Modules	`23`	`23`
Duplicate Code	`40.33%`(`+0.1%`)	`40.29%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #351	Baseline #341
IMG	`145.76KiB`	`145.76KiB`
Other	`52.03KiB`	`52.03KiB`

Bundle analysis report Branch feat/openui-web-preview-and-comp... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

gaoachao requested review from HuJean, PupilTong and Sherry-hue May 12, 2026 09:30

coderabbitai Bot reviewed May 12, 2026

View reviewed changes

Comment thread .changeset/many-pots-care.md

HuJean approved these changes May 12, 2026

View reviewed changes

gaoachao merged commit 47bb2ff into main May 12, 2026
139 of 148 checks passed

gaoachao deleted the feat/openui-web-preview-and-components-page branch May 12, 2026 11:08

This was referenced May 13, 2026

feat(a2ui): add icon catalog #2618

Merged

feat(a2ui): add TextField catalog component #2635

Open

Conversation

gaoachao commented May 12, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Checklist

Uh oh!

changeset-bot Bot commented May 12, 2026

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

codecov Bot commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codspeed-hq Bot commented May 12, 2026

Merging this PR will not alter performance

Footnotes

Uh oh!

relativeci Bot commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React MTF Example

#1217 Bundle Size — 206.65KiB (-0.39%).

Uh oh!

relativeci Bot commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React External

#1199 Bundle Size — 690.27KiB (-0.4%).

Uh oh!

relativeci Bot commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example

#8085 Bundle Size — 235.77KiB (-0.31%).

Uh oh!

relativeci Bot commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Web Explorer

#9659 Bundle Size — 901.27KiB (0%).

Uh oh!

relativeci Bot commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example with Element Template

#351 Bundle Size — 197.79KiB (0%).

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

gaoachao commented May 12, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 12, 2026 •

edited

Loading

codecov Bot commented May 12, 2026 •

edited

Loading

relativeci Bot commented May 12, 2026 •

edited

Loading

relativeci Bot commented May 12, 2026 •

edited

Loading

relativeci Bot commented May 12, 2026 •

edited

Loading

relativeci Bot commented May 12, 2026 •

edited

Loading

relativeci Bot commented May 12, 2026 •

edited

Loading