diff --git a/.changeset/cuddly-moons-hide.md b/.changeset/cuddly-moons-hide.md
new file mode 100644
index 0000000000..853d812bb3
--- /dev/null
+++ b/.changeset/cuddly-moons-hide.md
@@ -0,0 +1,3 @@
+---
+
+---
diff --git a/.github/genui-tsconfig.instructions.md b/.github/genui-tsconfig.instructions.md
new file mode 100644
index 0000000000..4d0be8dcb3
--- /dev/null
+++ b/.github/genui-tsconfig.instructions.md
@@ -0,0 +1,5 @@
+---
+applyTo: "packages/genui/**/*"
+---
+
+When adding a new package under `packages/genui`, add a package-level `tsconfig.json` and wire it into `packages/genui/tsconfig.json` references in the same change. Root type-aware ESLint uses the TypeScript project service, so new GenUI source files that are not reachable from those references will fail pre-commit parsing before code linting even starts.
diff --git a/biome.jsonc b/biome.jsonc
index afce235fed..76db89d25f 100644
--- a/biome.jsonc
+++ b/biome.jsonc
@@ -43,6 +43,7 @@
 
       "packages/tools/**",
       "packages/genui/a2ui/tools/**",
+      "packages/genui/openui/**",
 
       "packages/use-sync-external-store/test/**",
 
diff --git a/packages/genui/a2ui-playground/lynx-src/openui/App.tsx b/packages/genui/a2ui-playground/lynx-src/openui/App.tsx
new file mode 100644
index 0000000000..15e53d1818
--- /dev/null
+++ b/packages/genui/a2ui-playground/lynx-src/openui/App.tsx
@@ -0,0 +1,85 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import {
+  OpenUiRenderer,
+  createOpenUiLibrary,
+  createStreamingParser,
+} from '@lynx-js/openui-reactlynx';
+import type { ActionEvent, ParseResult } from '@lynx-js/openui-reactlynx';
+import { useCallback, useEffect, useMemo, useState } from '@lynx-js/react';
+
+import { OPENUI_SCENARIOS } from './mockData.js';
+
+const mockData = OPENUI_SCENARIOS[0].raw;
+
+export function App() {
+  const openUiLibrary = useMemo(() => createOpenUiLibrary(), []);
+
+  const [parseResult, setParseResult] = useState<ParseResult | null>(null);
+  const [error, setError] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError('');
+
+    try {
+      const streamParser = createStreamingParser(openUiLibrary.toJSONSchema());
+      const result = streamParser.push(mockData);
+      if (!cancelled) {
+        setParseResult(result);
+      }
+    } catch (e) {
+      if (!cancelled) {
+        setError(String(e));
+      }
+    } finally {
+      if (!cancelled) {
+        setLoading(false);
+      }
+    }
+
+    return () => {
+      cancelled = true;
+    };
+  }, [openUiLibrary]);
+
+  const onOpenUiAction = useCallback((_event: ActionEvent) => {
+    // noop for now
+  }, []);
+
+  return (
+    <view style={{ width: '100%', height: '100%', backgroundColor: '#fff' }}>
+      {error
+        ? (
+          <view style={{ padding: '12px' }}>
+            <text style={{ color: '#c40000' }}>{error}</text>
+          </view>
+        )
+        : null}
+
+      {loading
+        ? (
+          <view style={{ padding: '12px' }}>
+            <text>Loading...</text>
+          </view>
+        )
+        : null}
+
+      {parseResult?.root
+        ? (
+          <scroll-view scroll-y style={{ height: '100%' }}>
+            <OpenUiRenderer
+              result={parseResult}
+              library={openUiLibrary}
+              onAction={onOpenUiAction}
+              isStreaming={false}
+            />
+          </scroll-view>
+        )
+        : null}
+    </view>
+  );
+}
diff --git a/packages/genui/a2ui-playground/lynx-src/openui/index.css b/packages/genui/a2ui-playground/lynx-src/openui/index.css
new file mode 100644
index 0000000000..047d6a50a4
--- /dev/null
+++ b/packages/genui/a2ui-playground/lynx-src/openui/index.css
@@ -0,0 +1,4 @@
+page {
+  padding: 10px;
+  box-sizing: border-box;
+}
diff --git a/packages/genui/a2ui-playground/lynx-src/openui/index.tsx b/packages/genui/a2ui-playground/lynx-src/openui/index.tsx
new file mode 100644
index 0000000000..3f88998c88
--- /dev/null
+++ b/packages/genui/a2ui-playground/lynx-src/openui/index.tsx
@@ -0,0 +1,9 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { root } from '@lynx-js/react';
+
+import { App } from './App.jsx';
+import './index.css';
+
+root.render(<App />);
diff --git a/packages/genui/a2ui-playground/lynx-src/openui/mockData.ts b/packages/genui/a2ui-playground/lynx-src/openui/mockData.ts
new file mode 100644
index 0000000000..a38e9ec268
--- /dev/null
+++ b/packages/genui/a2ui-playground/lynx-src/openui/mockData.ts
@@ -0,0 +1,62 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+export interface OpenUIScenario {
+  id: string;
+  title: string;
+  raw: string;
+}
+
+export const OPENUI_SCENARIOS: OpenUIScenario[] = [
+  {
+    id: 'pricing-cards',
+    title: 'Pricing Cards',
+    raw: `root = Stack([header, cards], "column", "l", "center")
+header = TextContent("Choose Your Plan", "large-heavy")
+cards = Stack([freeCard, proCard, enterpriseCard], "row", "l", "stretch")
+
+freeCard = Card([freeHeader, freePrice, freeSep, freeFeatures, freeBtn], "card", "column", "stretch", "between")
+freeHeader = CardHeader("Free", "For individuals just getting started")
+freePrice = Stack([freePriceAmt, freePricePer], "row", "none", "baseline")
+freePriceAmt = TextContent("$0", "large-heavy")
+freePricePer = TextContent(" / month", "small")
+freeSep = Separator("horizontal", true)
+freeFeatures = Stack([ff1, ff2, ff3, ff4], "column", "s")
+ff1 = TextContent("✓  1 user")
+ff2 = TextContent("✓  5 projects")
+ff3 = TextContent("✓  2 GB storage")
+ff4 = TextContent("✗  Priority support")
+freeBtn = Buttons([Button("Get Started", Action([@ToAssistant("Get started with Free plan")]), "secondary")])
+
+proCard = Card([proHeader, proPrice, proBadge, proSep, proFeatures, proBtn], "card", "column", "stretch", "between")
+proHeader = CardHeader("Pro", "For growing teams and professionals")
+proPrice = Stack([proPriceAmt, proPricePer], "row", "none", "baseline")
+proPriceAmt = TextContent("$29", "large-heavy")
+proPricePer = TextContent(" / month", "small")
+proBadge = Tag("Most Popular", null, "sm", "info")
+proSep = Separator("horizontal", true)
+proFeatures = Stack([pf1, pf2, pf3, pf4, pf5], "column", "s")
+pf1 = TextContent("✓  Up to 10 users")
+pf2 = TextContent("✓  Unlimited projects")
+pf3 = TextContent("✓  50 GB storage")
+pf4 = TextContent("✓  Priority support")
+pf5 = TextContent("✓  Advanced analytics")
+proBtn = Buttons([Button("Start Free Trial", Action([@ToAssistant("Start free trial with Pro plan")]), "primary")])
+
+enterpriseCard = Card([entHeader, entPrice, entSep, entFeatures, entBtn], "card", "column", "stretch", "between")
+entHeader = CardHeader("Enterprise", "For large organizations at scale")
+entPrice = Stack([entPriceAmt, entPricePer], "row", "none", "baseline")
+entPriceAmt = TextContent("$99", "large-heavy")
+entPricePer = TextContent(" / month", "small")
+entSep = Separator("horizontal", true)
+entFeatures = Stack([ef1, ef2, ef3, ef4, ef5, ef6], "column", "s")
+ef1 = TextContent("✓  Unlimited users")
+ef2 = TextContent("✓  Unlimited projects")
+ef3 = TextContent("✓  1 TB storage")
+ef4 = TextContent("✓  24/7 dedicated support")
+ef5 = TextContent("✓  Advanced analytics")
+ef6 = TextContent("✓  Custom integrations")
+entBtn = Buttons([Button("Contact Sales", Action([@ToAssistant("Contact sales for Enterprise plan")]), "secondary")])`,
+  },
+];
diff --git a/packages/genui/a2ui-playground/lynx.config.ts b/packages/genui/a2ui-playground/lynx.config.ts
index caf0bde1b3..6a750961d0 100644
--- a/packages/genui/a2ui-playground/lynx.config.ts
+++ b/packages/genui/a2ui-playground/lynx.config.ts
@@ -22,6 +22,7 @@ export default defineConfig({
   source: {
     entry: {
       a2ui: './lynx-src/a2ui/index.tsx',
+      openui: './lynx-src/openui/index.tsx',
     },
   },
   environments: {
diff --git a/packages/genui/a2ui-playground/package.json b/packages/genui/a2ui-playground/package.json
index 1045883264..8de36cc181 100644
--- a/packages/genui/a2ui-playground/package.json
+++ b/packages/genui/a2ui-playground/package.json
@@ -15,6 +15,7 @@
     "@codemirror/lang-json": "^6.0.2",
     "@lynx-js/a2ui-reactlynx": "workspace:*",
     "@lynx-js/lynx-core": "0.1.3",
+    "@lynx-js/openui-reactlynx": "workspace:*",
     "@lynx-js/react": "workspace:*",
     "@lynx-js/web-core": "workspace:*",
     "@lynx-js/web-elements": "workspace:*",
diff --git a/packages/genui/a2ui-playground/src/mock/openui-scenarios.ts b/packages/genui/a2ui-playground/src/mock/openui-scenarios.ts
index 9b3ee0305d..bb7dbaea1a 100644
--- a/packages/genui/a2ui-playground/src/mock/openui-scenarios.ts
+++ b/packages/genui/a2ui-playground/src/mock/openui-scenarios.ts
@@ -62,24 +62,561 @@ entBtn = Buttons([Button("Contact Sales", Action([@ToAssistant("Contact sales fo
     parsed: JSON.stringify(
       {
         root: {
-          type: 'Stack',
-          direction: 'column',
-          spacing: 'l',
-          align: 'center',
-          children: ['header', 'cards'],
+          type: 'element',
+          typeName: 'Stack',
+          props: {
+            children: [
+              {
+                type: 'element',
+                typeName: 'TextContent',
+                props: {
+                  text: 'Choose Your Plan',
+                  size: 'large-heavy',
+                },
+                partial: false,
+                hasDynamicProps: false,
+                statementId: 'header',
+              },
+              {
+                type: 'element',
+                typeName: 'Stack',
+                props: {
+                  children: [
+                    {
+                      type: 'element',
+                      typeName: 'Card',
+                      props: {
+                        children: [
+                          {
+                            type: 'element',
+                            typeName: 'CardHeader',
+                            props: {
+                              title: 'Starter',
+                              subtitle:
+                                'Perfect for individuals and small projects',
+                            },
+                            partial: false,
+                            hasDynamicProps: false,
+                            statementId: 'starterHeader',
+                          },
+                          {
+                            type: 'element',
+                            typeName: 'Stack',
+                            props: {
+                              children: [
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: {
+                                    text: '$9',
+                                    size: 'large-heavy',
+                                  },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'starterAmount',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: {
+                                    text: '/ month',
+                                    size: 'small',
+                                  },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'starterPeriod',
+                                },
+                              ],
+                              direction: 'row',
+                              gap: 'baseline',
+                              align: 'start',
+                            },
+                            partial: false,
+                            hasDynamicProps: false,
+                            statementId: 'starterPrice',
+                          },
+                          {
+                            type: 'element',
+                            typeName: 'Separator',
+                            props: {
+                              orientation: 'horizontal',
+                              decorative: true,
+                            },
+                            partial: false,
+                            hasDynamicProps: false,
+                            statementId: 'starterSep',
+                          },
+                          {
+                            type: 'element',
+                            typeName: 'Stack',
+                            props: {
+                              children: [
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✓  5 Projects' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'sf1',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✓  10 GB Storage' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'sf2',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✓  Email Support' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'sf3',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✗  Custom Domain' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'sf4',
+                                },
+                              ],
+                              direction: 'column',
+                              gap: 's',
+                            },
+                            partial: false,
+                            hasDynamicProps: false,
+                            statementId: 'starterFeatures',
+                          },
+                          {
+                            type: 'element',
+                            typeName: 'Buttons',
+                            props: {
+                              buttons: [
+                                {
+                                  type: 'element',
+                                  typeName: 'Button',
+                                  props: {
+                                    label: 'Get Started',
+                                    action: {
+                                      k: 'Comp',
+                                      name: 'Action',
+                                      args: [
+                                        {
+                                          k: 'Arr',
+                                          els: [
+                                            {
+                                              k: 'Comp',
+                                              name: 'ToAssistant',
+                                              args: [
+                                                {
+                                                  k: 'Str',
+                                                  v: 'I\'d like the Starter plan',
+                                                },
+                                              ],
+                                            },
+                                          ],
+                                        },
+                                      ],
+                                    },
+                                    variant: 'secondary',
+                                  },
+                                  partial: false,
+                                  hasDynamicProps: true,
+                                },
+                              ],
+                            },
+                            partial: false,
+                            hasDynamicProps: true,
+                            statementId: 'starterBtn',
+                          },
+                        ],
+                        variant: 'card',
+                        direction: 'column',
+                        gap: 'stretch',
+                        align: 'between',
+                      },
+                      partial: false,
+                      hasDynamicProps: true,
+                      statementId: 'starterCard',
+                    },
+                    {
+                      type: 'element',
+                      typeName: 'Card',
+                      props: {
+                        children: [
+                          {
+                            type: 'element',
+                            typeName: 'Tag',
+                            props: {
+                              text: 'Most Popular',
+                              icon: null,
+                              size: 'sm',
+                              variant: 'info',
+                            },
+                            partial: false,
+                            hasDynamicProps: false,
+                            statementId: 'proTag',
+                          },
+                          {
+                            type: 'element',
+                            typeName: 'CardHeader',
+                            props: {
+                              title: 'Pro',
+                              subtitle:
+                                'Great for growing teams and businesses',
+                            },
+                            partial: false,
+                            hasDynamicProps: false,
+                            statementId: 'proHeader',
+                          },
+                          {
+                            type: 'element',
+                            typeName: 'Stack',
+                            props: {
+                              children: [
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '$29', size: 'large-heavy' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'proAmount',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '/ month', size: 'small' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'proPeriod',
+                                },
+                              ],
+                              direction: 'row',
+                              gap: 'baseline',
+                              align: 'start',
+                            },
+                            partial: false,
+                            hasDynamicProps: false,
+                            statementId: 'proPrice',
+                          },
+                          {
+                            type: 'element',
+                            typeName: 'Separator',
+                            props: {
+                              orientation: 'horizontal',
+                              decorative: true,
+                            },
+                            partial: false,
+                            hasDynamicProps: false,
+                            statementId: 'proSep',
+                          },
+                          {
+                            type: 'element',
+                            typeName: 'Stack',
+                            props: {
+                              children: [
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✓  Unlimited Projects' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'pf1',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✓  100 GB Storage' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'pf2',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✓  Priority Support' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'pf3',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✓  Custom Domain' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'pf4',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✓  Analytics Dashboard' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'pf5',
+                                },
+                              ],
+                              direction: 'column',
+                              gap: 's',
+                            },
+                            partial: false,
+                            hasDynamicProps: false,
+                            statementId: 'proFeatures',
+                          },
+                          {
+                            type: 'element',
+                            typeName: 'Buttons',
+                            props: {
+                              buttons: [
+                                {
+                                  type: 'element',
+                                  typeName: 'Button',
+                                  props: {
+                                    label: 'Get Started',
+                                    action: {
+                                      k: 'Comp',
+                                      name: 'Action',
+                                      args: [
+                                        {
+                                          k: 'Arr',
+                                          els: [
+                                            {
+                                              k: 'Comp',
+                                              name: 'ToAssistant',
+                                              args: [
+                                                {
+                                                  k: 'Str',
+                                                  v: 'I\'d like the Pro plan',
+                                                },
+                                              ],
+                                            },
+                                          ],
+                                        },
+                                      ],
+                                    },
+                                    variant: 'primary',
+                                  },
+                                  partial: false,
+                                  hasDynamicProps: true,
+                                },
+                              ],
+                            },
+                            partial: false,
+                            hasDynamicProps: true,
+                            statementId: 'proBtn',
+                          },
+                        ],
+                        variant: 'card',
+                        direction: 'column',
+                        gap: 'stretch',
+                        align: 'between',
+                      },
+                      partial: false,
+                      hasDynamicProps: true,
+                      statementId: 'proCard',
+                    },
+                    {
+                      type: 'element',
+                      typeName: 'Card',
+                      props: {
+                        children: [
+                          {
+                            type: 'element',
+                            typeName: 'CardHeader',
+                            props: {
+                              title: 'Enterprise',
+                              subtitle: 'For large-scale operations and teams',
+                            },
+                            partial: false,
+                            hasDynamicProps: false,
+                            statementId: 'enterpriseHeader',
+                          },
+                          {
+                            type: 'element',
+                            typeName: 'Stack',
+                            props: {
+                              children: [
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '$99', size: 'large-heavy' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'enterpriseAmount',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '/ month', size: 'small' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'enterprisePeriod',
+                                },
+                              ],
+                              direction: 'row',
+                              gap: 'baseline',
+                              align: 'start',
+                            },
+                            partial: false,
+                            hasDynamicProps: false,
+                            statementId: 'enterprisePrice',
+                          },
+                          {
+                            type: 'element',
+                            typeName: 'Separator',
+                            props: {
+                              orientation: 'horizontal',
+                              decorative: true,
+                            },
+                            partial: false,
+                            hasDynamicProps: false,
+                            statementId: 'enterpriseSep',
+                          },
+                          {
+                            type: 'element',
+                            typeName: 'Stack',
+                            props: {
+                              children: [
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✓  Unlimited Projects' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'ef1',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✓  1 TB Storage' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'ef2',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✓  24/7 Dedicated Support' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'ef3',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✓  Custom Domain' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'ef4',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✓  Advanced Analytics' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'ef5',
+                                },
+                                {
+                                  type: 'element',
+                                  typeName: 'TextContent',
+                                  props: { text: '✓  SSO & Security Audit' },
+                                  partial: false,
+                                  hasDynamicProps: false,
+                                  statementId: 'ef6',
+                                },
+                              ],
+                              direction: 'column',
+                              gap: 's',
+                            },
+                            partial: false,
+                            hasDynamicProps: false,
+                            statementId: 'enterpriseFeatures',
+                          },
+                          {
+                            type: 'element',
+                            typeName: 'Buttons',
+                            props: {
+                              buttons: [
+                                {
+                                  type: 'element',
+                                  typeName: 'Button',
+                                  props: {
+                                    label: 'Contact Sales',
+                                    action: {
+                                      k: 'Comp',
+                                      name: 'Action',
+                                      args: [
+                                        {
+                                          k: 'Arr',
+                                          els: [
+                                            {
+                                              k: 'Comp',
+                                              name: 'ToAssistant',
+                                              args: [
+                                                {
+                                                  k: 'Str',
+                                                  v: 'I\'d like to learn about the Enterprise plan',
+                                                },
+                                              ],
+                                            },
+                                          ],
+                                        },
+                                      ],
+                                    },
+                                    variant: 'secondary',
+                                  },
+                                  partial: false,
+                                  hasDynamicProps: true,
+                                },
+                              ],
+                            },
+                            partial: false,
+                            hasDynamicProps: true,
+                            statementId: 'enterpriseBtn',
+                          },
+                        ],
+                        variant: 'card',
+                        direction: 'column',
+                        gap: 'stretch',
+                        align: 'between',
+                      },
+                      partial: false,
+                      hasDynamicProps: true,
+                      statementId: 'enterpriseCard',
+                    },
+                  ],
+                  direction: 'row',
+                  gap: 'l',
+                  align: 'center',
+                },
+                partial: false,
+                hasDynamicProps: true,
+                statementId: 'cards',
+              },
+            ],
+            direction: 'column',
+            gap: 'l',
+            align: 'center',
+          },
+          partial: false,
+          hasDynamicProps: true,
+          statementId: 'root',
         },
-        header: {
-          type: 'TextContent',
-          text: 'Choose Your Plan',
-          variant: 'large-heavy',
-        },
-        cards: {
-          type: 'Stack',
-          direction: 'row',
-          spacing: 'l',
-          align: 'stretch',
-          children: ['freeCard', 'proCard', 'enterpriseCard'],
+        meta: {
+          incomplete: false,
+          unresolved: [],
+          orphaned: [],
+          statementCount: 43,
+          errors: [],
         },
+        stateDeclarations: {},
+        queryStatements: [],
+        mutationStatements: [],
       },
       null,
       2,
diff --git a/packages/genui/a2ui-playground/src/pages/OpenUIDemosPage.tsx b/packages/genui/a2ui-playground/src/pages/OpenUIDemosPage.tsx
index b7fbbcf8ac..c046960498 100644
--- a/packages/genui/a2ui-playground/src/pages/OpenUIDemosPage.tsx
+++ b/packages/genui/a2ui-playground/src/pages/OpenUIDemosPage.tsx
@@ -73,6 +73,8 @@ export function OpenUIDemosPage(_props: { protocol: Protocol }) {
   const [renderUrl, setRenderUrl] = useState('');
   const [lynxDevUrl, setLynxDevUrl] = useState('');
   const [lynxDevCopied, setLynxDevCopied] = useState(false);
+  const [renderCopied, setRenderCopied] = useState(false);
+  const [renderCopyFailed, setRenderCopyFailed] = useState(false);
   const [, setRenderQrError] = useState('');
   const [lynxDevQrError, setLynxDevQrError] = useState('');
   const [speed, setSpeed] = useState(1);
@@ -125,6 +127,8 @@ export function OpenUIDemosPage(_props: { protocol: Protocol }) {
     (rawText: string) => {
       const url = buildOpenUIRenderUrl(rawText, networkBaseUrl, speed);
       setRenderUrl(url);
+      setRenderCopied(false);
+      setRenderCopyFailed(false);
 
       // Native Lynx dev URL
       const seq = ++lynxUrlSeqRef.current;
@@ -146,7 +150,48 @@ export function OpenUIDemosPage(_props: { protocol: Protocol }) {
         setFullscreen(true);
       }
 
-      void seq; // suppress unused warning
+      // Try to shorten URLs via payload store for scannable QR codes
+      void (async () => {
+        if (!rspeedyDevUrl) return;
+        try {
+          const rspeedyOrigin = new URL(rspeedyDevUrl).origin;
+          const res = await window.fetch(`${rspeedyOrigin}/__openui_payload`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ rawText }),
+          });
+          if (!res.ok) return;
+          const data = (await res.json()) as { rawTextUrl?: string };
+
+          if (seq !== lynxUrlSeqRef.current) return;
+
+          if (typeof data.rawTextUrl === 'string') {
+            const rawTextUrlAbs = `${rspeedyOrigin}${data.rawTextUrl}`;
+
+            // Shorten native dev URL
+            const u = new URL(rspeedyDevUrl);
+            u.pathname = u.pathname.replace('a2ui.lynx', 'openui.lynx');
+            u.searchParams.set('rawTextUrl', rawTextUrlAbs);
+            u.searchParams.delete('rawText');
+            if (speed !== 1) {
+              u.searchParams.set('speed', String(speed));
+            }
+            setLynxDevUrl(u.toString());
+
+            // Shorten web render URL
+            const r = new URL('render.html', networkBaseUrl);
+            r.searchParams.set('protocol', 'openui');
+            r.searchParams.set('demoUrl', './openui.web.js');
+            r.searchParams.set('rawTextUrl', rawTextUrlAbs);
+            if (speed !== 1) {
+              r.searchParams.set('speed', String(speed));
+            }
+            setRenderUrl(r.toString());
+          }
+        } catch {
+          // Fall back to inline URLs — QR may show "URL too long"
+        }
+      })();
     },
     [networkBaseUrl, rspeedyDevUrl, speed],
   );
@@ -402,12 +447,36 @@ export function OpenUIDemosPage(_props: { protocol: Protocol }) {
                           type='button'
                           className='previewQrCopyBtn'
                           aria-label='Copy render URL'
-                          title='Copy URL'
+                          title={renderCopied
+                            ? 'Copied'
+                            : (
+                              renderCopyFailed ? 'Copy failed' : 'Copy URL'
+                            )}
                           onClick={() => {
-                            void copyToClipboard(renderUrl);
+                            void copyToClipboard(renderUrl).then((ok) => {
+                              setRenderCopyFailed(false);
+                              if (!ok) {
+                                setRenderCopied(false);
+                                setRenderCopyFailed(true);
+                                window.setTimeout(
+                                  () => setRenderCopyFailed(false),
+                                  1200,
+                                );
+                                return;
+                              }
+                              setRenderCopied(true);
+                              window.setTimeout(
+                                () => setRenderCopied(false),
+                                1200,
+                              );
+                            });
                           }}
                         >
-                          Copy
+                          {renderCopied
+                            ? 'Copied'
+                            : (
+                              renderCopyFailed ? 'Failed' : 'Copy'
+                            )}
                         </button>
                       </div>
                     </div>
diff --git a/packages/genui/openui/package.json b/packages/genui/openui/package.json
new file mode 100644
index 0000000000..9b62bf3bd6
--- /dev/null
+++ b/packages/genui/openui/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@lynx-js/openui-reactlynx",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/core/index.ts",
+      "default": "./src/core/index.ts"
+    },
+    "./catalog": {
+      "types": "./src/catalog/index.ts",
+      "default": "./src/catalog/index.ts"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@openuidev/lang-core": "^0.2.4",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@lynx-js/react": "workspace:*",
+    "@lynx-js/types": "3.7.0",
+    "@types/react": "^18.3.28"
+  }
+}
diff --git a/packages/genui/openui/src/catalog/Action/index.tsx b/packages/genui/openui/src/catalog/Action/index.tsx
new file mode 100644
index 0000000000..e000de6c35
--- /dev/null
+++ b/packages/genui/openui/src/catalog/Action/index.tsx
@@ -0,0 +1,37 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { tagSchemaId } from '@openuidev/lang-core';
+import type { ActionEvent, ActionPlan } from '@openuidev/lang-core';
+import { z } from 'zod/v4';
+
+/** Shared action prop schema — shows as `ActionExpression` in prompt signatures. */
+export interface LegacyActionConfig {
+  type?: ActionEvent['type'];
+  params?: Record<string, unknown>;
+  url?: string;
+  context?: string;
+}
+
+export type ActionLike = ActionPlan | LegacyActionConfig;
+
+const actionStepSchema = z.looseObject({
+  type: z.string(),
+});
+
+const actionPlanSchema = z.object({
+  steps: z.array(actionStepSchema),
+});
+
+const legacyActionSchema = z.object({
+  type: z.string().optional(),
+  params: z.record(z.string(), z.any()).optional(),
+  url: z.string().optional(),
+  context: z.string().optional(),
+});
+
+export const actionPropSchema = z.union([
+  actionPlanSchema,
+  legacyActionSchema,
+]);
+tagSchemaId(actionPropSchema, 'ActionExpression');
diff --git a/packages/genui/openui/src/catalog/Button/index.tsx b/packages/genui/openui/src/catalog/Button/index.tsx
new file mode 100644
index 0000000000..1e5b0a3094
--- /dev/null
+++ b/packages/genui/openui/src/catalog/Button/index.tsx
@@ -0,0 +1,114 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { BuiltinActionType } from '@openuidev/lang-core';
+import { z } from 'zod/v4';
+
+import type { ReactNode } from '@lynx-js/react';
+
+import {
+  useFormName,
+  useIsStreaming,
+  useTriggerAction,
+} from '../../core/context.js';
+import { useFormValidation } from '../../core/hooks/index.js';
+import { defineComponent } from '../../core/library.js';
+import { actionPropSchema } from '../Action/index.jsx';
+import { asArray } from '../utils.js';
+
+const CONTINUE_CONVERSATION_ACTION = String(
+  BuiltinActionType.ContinueConversation,
+);
+const OPEN_URL_ACTION = String(BuiltinActionType.OpenUrl);
+
+const buttonPropsSchema = z.object({
+  label: z.string(),
+  action: actionPropSchema,
+  variant: z.enum(['primary', 'secondary', 'tertiary']).optional(),
+  type: z.enum(['normal', 'destructive']).optional(),
+  size: z.enum(['extra-small', 'small', 'medium', 'large']).optional(),
+});
+
+type ButtonProps = z.infer<typeof buttonPropsSchema>;
+
+function ButtonRenderer({ props }: { props: ButtonProps }) {
+  const triggerAction = useTriggerAction();
+  const formName = useFormName();
+  const isStreaming = useIsStreaming();
+  const formValidation = useFormValidation();
+
+  const label = String(props.label ?? '');
+  const variant = props.variant ?? 'primary';
+  const action = props.action;
+
+  let className = 'OpenUIButton OpenUIButtonPrimary';
+  if (variant === 'secondary') {
+    className = 'OpenUIButton OpenUIButtonSecondary';
+  } else if (variant === 'tertiary') {
+    className = 'OpenUIButton OpenUIButtonGhost';
+  }
+
+  const onTap = () => {
+    const legacyAction = action && !('steps' in action) ? action : undefined;
+    const actionType = legacyAction?.type ?? CONTINUE_CONVERSATION_ACTION;
+
+    if (
+      formValidation && variant === 'primary'
+      && actionType === CONTINUE_CONVERSATION_ACTION
+    ) {
+      const valid = formValidation.validateForm();
+      if (!valid) return;
+    }
+
+    const actionParams = actionType === OPEN_URL_ACTION
+      ? { url: legacyAction?.url }
+      : {
+        ...(legacyAction?.params ?? {}),
+        ...(legacyAction?.context ? { context: legacyAction.context } : {}),
+      };
+
+    void triggerAction(label, formName, {
+      type: actionType,
+      params: actionParams,
+    });
+  };
+
+  return (
+    <view
+      className={className}
+      {...(isStreaming ? {} : ({ bindtap: onTap }))}
+    >
+      <text className='OpenUIButtonText'>{label}</text>
+    </view>
+  );
+}
+
+export const Button = defineComponent({
+  name: 'Button',
+  props: buttonPropsSchema,
+  description: 'Clickable button',
+  component: ButtonRenderer,
+});
+
+function ButtonsRenderer(
+  { props, renderNode }: {
+    props: { buttons: unknown[] };
+    renderNode: (v: unknown) => ReactNode;
+  },
+) {
+  return (
+    <view className='OpenUIButtonGroup'>
+      {renderNode(asArray(props.buttons))}
+    </view>
+  );
+}
+
+export const Buttons = defineComponent({
+  name: 'Buttons',
+  props: z.object({
+    buttons: z.array(Button.ref),
+  }),
+  description: 'Button group',
+  component: ButtonsRenderer,
+});
diff --git a/packages/genui/openui/src/catalog/Card/index.tsx b/packages/genui/openui/src/catalog/Card/index.tsx
new file mode 100644
index 0000000000..1897e713c2
--- /dev/null
+++ b/packages/genui/openui/src/catalog/Card/index.tsx
@@ -0,0 +1,80 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { z } from 'zod/v4';
+
+import { defineComponent } from '../../core/library.js';
+import { GAP_CLASS, asArray } from '../utils.js';
+
+function getAlignClass(align: 'start' | 'center' | 'end' | 'stretch'): string {
+  switch (align) {
+    case 'start':
+      return 'OpenUIAlignStart';
+    case 'center':
+      return 'OpenUIAlignCenter';
+    case 'end':
+      return 'OpenUIAlignEnd';
+    default:
+      return 'OpenUIAlignStretch';
+  }
+}
+
+function getJustifyClass(
+  justify: 'start' | 'center' | 'end' | 'between',
+): string {
+  switch (justify) {
+    case 'center':
+      return 'OpenUIJustifyCenter';
+    case 'end':
+      return 'OpenUIJustifyEnd';
+    case 'between':
+      return 'OpenUIJustifyBetween';
+    default:
+      return 'OpenUIJustifyStart';
+  }
+}
+
+export const Card = defineComponent({
+  name: 'Card',
+  props: z.object({
+    children: z.array(z.any()),
+    variant: z.enum(['card', 'sunk', 'clear']).optional(),
+    direction: z.enum(['row', 'column']).optional(),
+    wrap: z.boolean().optional(),
+    gap: z.enum(['none', 'xs', 's', 'm', 'l', 'xl']).optional(),
+    align: z.enum(['start', 'center', 'end', 'stretch']).optional(),
+    justify: z.enum(['start', 'center', 'end', 'between']).optional(),
+  }),
+  description:
+    'Styled container (card/sunk/clear). Accept Stack layout parameters.',
+  component: ({ props, renderNode }) => {
+    const variant = props.variant ?? 'card';
+    let variantClass = 'OpenUICardVariantCard';
+    if (variant === 'sunk') {
+      variantClass = 'OpenUICardVariantSunk';
+    } else if (variant === 'clear') {
+      variantClass = 'OpenUICardVariantClear';
+    }
+
+    const direction = props.direction ?? 'column';
+    const gap = props.gap ?? 'm';
+    const align = props.align ?? 'stretch';
+    const justify = props.justify ?? 'start';
+
+    const layoutClassName = [
+      direction === 'row' ? 'OpenUIStackRow' : 'OpenUIStackColumn',
+      props.wrap ? 'OpenUIStackWrap' : '',
+      GAP_CLASS[gap] ?? GAP_CLASS['m'],
+      getAlignClass(align),
+      getJustifyClass(justify),
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <view className={`OpenUICard ${variantClass} ${layoutClassName}`}>
+        {renderNode(asArray(props.children))}
+      </view>
+    );
+  },
+});
diff --git a/packages/genui/openui/src/catalog/CardHeader/index.tsx b/packages/genui/openui/src/catalog/CardHeader/index.tsx
new file mode 100644
index 0000000000..e1bd7571df
--- /dev/null
+++ b/packages/genui/openui/src/catalog/CardHeader/index.tsx
@@ -0,0 +1,23 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { z } from 'zod/v4';
+
+import { defineComponent } from '../../core/library.js';
+
+export const CardHeader = defineComponent({
+  name: 'CardHeader',
+  props: z.object({
+    title: z.string(),
+    subtitle: z.string().optional(),
+  }),
+  description: 'Card header with title and optional subtitle.',
+  component: ({ props }) => (
+    <view className='OpenUICardHeader'>
+      <text className='OpenUICardHeaderTitle'>{props.title}</text>
+      {props.subtitle
+        ? <text className='OpenUICardHeaderSubtitle'>{props.subtitle}</text>
+        : null}
+    </view>
+  ),
+});
diff --git a/packages/genui/openui/src/catalog/Separator/index.tsx b/packages/genui/openui/src/catalog/Separator/index.tsx
new file mode 100644
index 0000000000..78cfed5fe1
--- /dev/null
+++ b/packages/genui/openui/src/catalog/Separator/index.tsx
@@ -0,0 +1,13 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { z } from 'zod/v4';
+
+import { defineComponent } from '../../core/library.js';
+
+export const Separator = defineComponent({
+  name: 'Separator',
+  props: z.object({}),
+  description: 'Separator',
+  component: () => <view className='OpenUISeparator' />,
+});
diff --git a/packages/genui/openui/src/catalog/Stack/index.tsx b/packages/genui/openui/src/catalog/Stack/index.tsx
new file mode 100644
index 0000000000..f85a758328
--- /dev/null
+++ b/packages/genui/openui/src/catalog/Stack/index.tsx
@@ -0,0 +1,69 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { z } from 'zod/v4';
+
+import { defineComponent } from '../../core/library.js';
+import { GAP_CLASS, asArray } from '../utils.js';
+
+function getAlignClass(align: 'start' | 'center' | 'end' | 'stretch'): string {
+  switch (align) {
+    case 'start':
+      return 'OpenUIAlignStart';
+    case 'center':
+      return 'OpenUIAlignCenter';
+    case 'end':
+      return 'OpenUIAlignEnd';
+    default:
+      return 'OpenUIAlignStretch';
+  }
+}
+
+function getJustifyClass(
+  justify: 'start' | 'center' | 'end' | 'between',
+): string {
+  switch (justify) {
+    case 'center':
+      return 'OpenUIJustifyCenter';
+    case 'end':
+      return 'OpenUIJustifyEnd';
+    case 'between':
+      return 'OpenUIJustifyBetween';
+    default:
+      return 'OpenUIJustifyStart';
+  }
+}
+
+export const Stack = defineComponent({
+  name: 'Stack',
+  props: z.object({
+    children: z.array(z.any()),
+    direction: z.enum(['row', 'column']).optional(),
+    wrap: z.boolean().optional(),
+    gap: z.enum(['none', 'xs', 's', 'm', 'l', 'xl']).optional(),
+    align: z.enum(['start', 'center', 'end', 'stretch']).optional(),
+    justify: z.enum(['start', 'center', 'end', 'between']).optional(),
+  }),
+  description: 'Flex layout container',
+  component: ({ props, renderNode }) => {
+    const direction = props.direction ?? 'column';
+    const gap = props.gap ?? 'm';
+    const align = props.align ?? 'stretch';
+    const justify = props.justify ?? 'start';
+
+    const className = [
+      'OpenUIStack',
+      direction === 'row' ? 'OpenUIStackRow' : 'OpenUIStackColumn',
+      props.wrap ? 'OpenUIStackWrap' : '',
+      GAP_CLASS[gap] ?? GAP_CLASS['m'],
+      getAlignClass(align),
+      getJustifyClass(justify),
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <view className={className}>{renderNode(asArray(props.children))}</view>
+    );
+  },
+});
diff --git a/packages/genui/openui/src/catalog/Tag/index.tsx b/packages/genui/openui/src/catalog/Tag/index.tsx
new file mode 100644
index 0000000000..1e6a0f8884
--- /dev/null
+++ b/packages/genui/openui/src/catalog/Tag/index.tsx
@@ -0,0 +1,19 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { z } from 'zod/v4';
+
+import { defineComponent } from '../../core/library.js';
+
+export const Tag = defineComponent({
+  name: 'Tag',
+  props: z.object({
+    text: z.string(),
+  }),
+  description: 'Tag',
+  component: ({ props }) => (
+    <view className='OpenUITag'>
+      <text className='OpenUITagText'>{props.text}</text>
+    </view>
+  ),
+});
diff --git a/packages/genui/openui/src/catalog/TextContent/index.tsx b/packages/genui/openui/src/catalog/TextContent/index.tsx
new file mode 100644
index 0000000000..77095319b1
--- /dev/null
+++ b/packages/genui/openui/src/catalog/TextContent/index.tsx
@@ -0,0 +1,35 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { z } from 'zod/v4';
+
+import { defineComponent } from '../../core/library.js';
+
+export const TextContent = defineComponent({
+  name: 'TextContent',
+  props: z.object({
+    text: z.union([z.string(), z.number(), z.boolean()]),
+    size: z.enum(['small', 'default', 'large', 'small-heavy', 'large-heavy'])
+      .optional(),
+  }),
+  description: 'Text content with optional size.',
+  component: ({ props }) => {
+    const size = props.size ?? 'default';
+    let sizeClass = 'OpenUITextContentDefault';
+    if (size === 'small') {
+      sizeClass = 'OpenUITextContentSmall';
+    } else if (size === 'large') {
+      sizeClass = 'OpenUITextContentLarge';
+    } else if (size === 'small-heavy') {
+      sizeClass = 'OpenUITextContentSmallHeavy';
+    } else if (size === 'large-heavy') {
+      sizeClass = 'OpenUITextContentLargeHeavy';
+    }
+
+    return (
+      <text className={`OpenUITextContent ${sizeClass}`}>
+        {String(props.text ?? '')}
+      </text>
+    );
+  },
+});
diff --git a/packages/genui/openui/src/catalog/index.ts b/packages/genui/openui/src/catalog/index.ts
new file mode 100644
index 0000000000..3a1a40082a
--- /dev/null
+++ b/packages/genui/openui/src/catalog/index.ts
@@ -0,0 +1,10 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+export { Button, Buttons } from './Button/index.jsx';
+export { Card } from './Card/index.jsx';
+export { CardHeader } from './CardHeader/index.jsx';
+export { Separator } from './Separator/index.jsx';
+export { Stack } from './Stack/index.jsx';
+export { Tag } from './Tag/index.jsx';
+export { TextContent } from './TextContent/index.jsx';
diff --git a/packages/genui/openui/src/catalog/utils.ts b/packages/genui/openui/src/catalog/utils.ts
new file mode 100644
index 0000000000..1c5aec63da
--- /dev/null
+++ b/packages/genui/openui/src/catalog/utils.ts
@@ -0,0 +1,16 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+export const GAP_CLASS: Record<string, string> = {
+  none: 'OpenUIGapNone',
+  xs: 'OpenUIGapXs',
+  s: 'OpenUIGapS',
+  m: 'OpenUIGapM',
+  l: 'OpenUIGapL',
+  xl: 'OpenUIGapXl',
+};
+
+export function asArray<T>(value: T | T[] | null | undefined): T[] {
+  if (value === null || value === undefined) return [];
+  return Array.isArray(value) ? value : [value];
+}
diff --git a/packages/genui/openui/src/core/context.tsx b/packages/genui/openui/src/core/context.tsx
new file mode 100644
index 0000000000..7736baa190
--- /dev/null
+++ b/packages/genui/openui/src/core/context.tsx
@@ -0,0 +1,203 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import type {
+  ActionPlan,
+  EvaluationContext,
+  Library,
+  OpenUIError,
+  Store,
+} from '@openuidev/lang-core';
+
+import type { ReactNode } from '@lynx-js/react';
+import { createContext, useContext, useEffect } from '@lynx-js/react';
+
+export interface OpenUIContextValue {
+  /** The active component library (schema + renderers). */
+  library: Library;
+
+  /**
+   * Render any value (element, array, primitive) into React nodes.
+   */
+  renderNode: (value: unknown) => ReactNode;
+
+  /**
+   * Trigger an action. Accepts either:
+   * - ActionPlan (v0.5): runs steps sequentially (Run, Set, ToAssistant, OpenUrl)
+   * - Legacy action config (v0.1): { type?: string, params?: Record<string, any> }
+   * - Nothing: fires ContinueConversation with the label
+   */
+  triggerAction: (
+    userMessage: string,
+    formName?: string,
+    // biome-ignore lint/suspicious/noExplicitAny: form values are dynamically typed
+    action?: ActionPlan | { type?: string; params?: Record<string, any> },
+  ) => void | Promise<void>;
+
+  /** Whether the LLM is currently streaming content. */
+  isStreaming: boolean;
+
+  /** Get a field value. Top-level for $bindings, nested under formName for form fields. */
+  // biome-ignore lint/suspicious/noExplicitAny: form values are dynamically typed
+  getFieldValue: (formName: string | undefined, name: string) => any;
+
+  /**
+   * Set a form field value.
+   *
+   * @param formName  The form's name prop
+   * @param componentType  The component type (e.g. "Input", "Select") — optional
+   * @param name  The field's name prop
+   * @param value  The new value
+   * @param shouldTriggerSaveCallback  When true, persists state via onStateUpdate.
+   *   Text inputs should pass `false` on change and `true` on blur.
+   *   Discrete inputs (Select, RadioGroup, etc.) should always pass `true`.
+   */
+  setFieldValue: (
+    formName: string | undefined,
+    componentType: string | undefined,
+    name: string,
+    value: unknown,
+    shouldTriggerSaveCallback?: boolean,
+  ) => void;
+
+  /** Reactive binding store for $variables and form data. */
+  store: Store;
+
+  /** AST evaluation context used by runtime expression evaluation. */
+  evaluationContext: EvaluationContext;
+
+  /** Report a structured error (used internally by error boundary). */
+  reportError?: (error: OpenUIError) => void;
+}
+
+export const OpenUIContext = createContext<OpenUIContextValue | null>(null);
+
+/**
+ * Access the full OpenUI context. Throws if used outside a <Renderer />.
+ */
+export function useOpenUI(): OpenUIContextValue {
+  const ctx = useContext(OpenUIContext);
+  if (!ctx) {
+    throw new Error('useOpenUI must be used within a <Renderer /> component.');
+  }
+  return ctx;
+}
+
+/**
+ * Get the renderNode function for rendering nested component values.
+ */
+export function useRenderNode() {
+  return useOpenUI().renderNode;
+}
+
+/**
+ * Get the triggerAction function for firing structured action events.
+ *
+ * @example
+ * ```tsx
+ * const triggerAction = useTriggerAction();
+ * <button onClick={() => triggerAction("Submit", "myForm")}>
+ * ```
+ */
+export function useTriggerAction() {
+  return useOpenUI().triggerAction;
+}
+
+/**
+ * Whether the LLM is currently streaming content.
+ */
+export function useIsStreaming() {
+  return useOpenUI().isStreaming;
+}
+
+/**
+ * Get a form field value from the form state context.
+ *
+ * @example
+ * ```tsx
+ * const getFieldValue = useGetFieldValue();
+ * const name = getFieldValue("contactForm", "name");
+ * ```
+ */
+export function useGetFieldValue() {
+  return useOpenUI().getFieldValue;
+}
+
+/**
+ * Get the setFieldValue function for updating form field values.
+ *
+ * @example
+ * ```tsx
+ * const setFieldValue = useSetFieldValue();
+ * <input onChange={(e) => setFieldValue("contactForm", "Input", "name", e.target.value, false)} />
+ * ```
+ */
+export function useSetFieldValue() {
+  return useOpenUI().setFieldValue;
+}
+
+// ─── FormName context ───
+
+export const FormNameContext = createContext<string | undefined>(undefined);
+
+/**
+ * Get the current form name (set by the nearest parent Form component).
+ * Returns undefined if not inside a Form.
+ */
+export function useFormName(): string | undefined {
+  return useContext(FormNameContext);
+}
+
+// ─── Default value helper ───
+
+/**
+ * Persists a component's default/initial value into form state once streaming
+ * finishes — but only if the user hasn't already set a value.
+ *
+ * Call this inside any form component that has a `defaultValue` or
+ * `defaultChecked` prop. It is a no-op during streaming so that LLM
+ * prop changes don't fight with partial state.
+ *
+ * @param shouldTriggerSaveCallback — defaults to `false` (only local state, no message persistence)
+ */
+export function useSetDefaultValue({
+  formName,
+  componentType,
+  name,
+  existingValue,
+  defaultValue,
+  shouldTriggerSaveCallback = false,
+}: {
+  formName?: string;
+  componentType?: string;
+  name: string;
+  existingValue: unknown;
+  defaultValue: unknown;
+  shouldTriggerSaveCallback?: boolean;
+}) {
+  const setFieldValue = useSetFieldValue();
+  const isStreaming = useIsStreaming();
+
+  useEffect(() => {
+    if (
+      !isStreaming && existingValue === undefined && defaultValue !== undefined
+    ) {
+      setFieldValue(
+        formName,
+        componentType,
+        name,
+        defaultValue,
+        shouldTriggerSaveCallback,
+      );
+    }
+  }, [
+    defaultValue,
+    existingValue,
+    formName,
+    componentType,
+    name,
+    isStreaming,
+    setFieldValue,
+    shouldTriggerSaveCallback,
+  ]);
+}
diff --git a/packages/genui/openui/src/core/createLibrary.tsx b/packages/genui/openui/src/core/createLibrary.tsx
new file mode 100644
index 0000000000..d8b5622eef
--- /dev/null
+++ b/packages/genui/openui/src/core/createLibrary.tsx
@@ -0,0 +1,31 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { createLibrary } from './library.js';
+import type { Library } from './library.js';
+import * as c from '../catalog/index.js';
+
+export function createOpenUiLibrary(): Library {
+  return createLibrary({
+    root: 'Stack',
+    components: [
+      c.Stack,
+      c.Card,
+      c.CardHeader,
+      c.TextContent,
+      c.Separator,
+      c.Button,
+      c.Buttons,
+      c.Tag,
+    ],
+    componentGroups: [
+      { name: 'Layout', components: ['Stack'] },
+      {
+        name: 'Content',
+        components: ['Card', 'CardHeader', 'TextContent', 'Separator'],
+      },
+      { name: 'Buttons', components: ['Button', 'Buttons'] },
+      { name: 'Data Display', components: ['Tag'] },
+    ],
+  });
+}
diff --git a/packages/genui/openui/src/core/hooks/index.ts b/packages/genui/openui/src/core/hooks/index.ts
new file mode 100644
index 0000000000..f6d2d642ea
--- /dev/null
+++ b/packages/genui/openui/src/core/hooks/index.ts
@@ -0,0 +1,12 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+export { useOpenUIState } from './useOpenUIState.js';
+export type { OpenUIState, UseOpenUIStateOptions } from './useOpenUIState.js';
+
+export {
+  FormValidationContext,
+  useCreateFormValidation,
+  useFormValidation,
+} from './useFormValidation.js';
+export type { FormValidationContextValue } from './useFormValidation.js';
diff --git a/packages/genui/openui/src/core/hooks/useFormValidation.ts b/packages/genui/openui/src/core/hooks/useFormValidation.ts
new file mode 100644
index 0000000000..431ef16f9b
--- /dev/null
+++ b/packages/genui/openui/src/core/hooks/useFormValidation.ts
@@ -0,0 +1,128 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { validate } from '@openuidev/lang-core';
+import type { ParsedRule } from '@openuidev/lang-core';
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from '@lynx-js/react';
+
+export interface FormValidationContextValue {
+  errors: Record<string, string | undefined>;
+  getFieldError: (name: string) => string | undefined;
+  validateField: (name: string, value: unknown, rules: ParsedRule[]) => boolean;
+  registerField: (
+    name: string,
+    rules: ParsedRule[],
+    getValue: () => unknown,
+  ) => void;
+  unregisterField: (name: string) => void;
+  validateForm: () => boolean;
+  clearFieldError: (name: string) => void;
+}
+
+export const FormValidationContext = createContext<
+  FormValidationContextValue | null
+>(null);
+
+export function useFormValidation(): FormValidationContextValue | null {
+  return useContext(FormValidationContext);
+}
+
+interface FieldRegistration {
+  rules: ParsedRule[];
+  getValue: () => unknown;
+}
+
+export function useCreateFormValidation(): FormValidationContextValue {
+  const [errors, setErrors] = useState<Record<string, string | undefined>>({});
+  const errorsRef = useRef(errors);
+  errorsRef.current = errors;
+  const fieldsRef = useRef<Record<string, FieldRegistration>>({});
+
+  const getFieldError = useCallback(
+    (name: string) => errorsRef.current[name],
+    [],
+  );
+
+  const validateField = useCallback(
+    (name: string, value: unknown, rules: ParsedRule[]): boolean => {
+      const error = validate(value, rules);
+      setErrors((prev) => {
+        if (prev[name] === error) return prev;
+        return { ...prev, [name]: error };
+      });
+      return !error;
+    },
+    [],
+  );
+
+  const registerField = useCallback(
+    (name: string, rules: ParsedRule[], getValue: () => unknown) => {
+      fieldsRef.current[name] = { rules, getValue };
+    },
+    [],
+  );
+
+  const unregisterField = useCallback((name: string) => {
+    delete fieldsRef.current[name];
+  }, []);
+
+  const validateForm = useCallback((): boolean => {
+    let allValid = true;
+    const newErrors: Record<string, string | undefined> = {};
+
+    for (const [name, reg] of Object.entries(fieldsRef.current)) {
+      let value = reg.getValue();
+      // Normalize: form state stores { value, componentType }; extract actual value if needed
+      if (
+        value != null
+        && typeof value === 'object'
+        && 'value' in value
+        && 'componentType' in value
+      ) {
+        value = (value as { value: unknown }).value;
+      }
+      const error = validate(value, reg.rules);
+      newErrors[name] = error;
+      if (error) allValid = false;
+    }
+
+    setErrors(newErrors);
+    return allValid;
+  }, []);
+
+  const clearFieldError = useCallback((name: string) => {
+    setErrors((prev) => {
+      if (prev[name] === undefined) return prev;
+      return { ...prev, [name]: undefined };
+    });
+  }, []);
+
+  return useMemo<FormValidationContextValue>(
+    () => ({
+      errors,
+      getFieldError,
+      validateField,
+      registerField,
+      unregisterField,
+      validateForm,
+      clearFieldError,
+    }),
+    [
+      errors,
+      getFieldError,
+      validateField,
+      registerField,
+      unregisterField,
+      validateForm,
+      clearFieldError,
+    ],
+  );
+}
diff --git a/packages/genui/openui/src/core/hooks/useOpenUIState.ts b/packages/genui/openui/src/core/hooks/useOpenUIState.ts
new file mode 100644
index 0000000000..4a9632fdf7
--- /dev/null
+++ b/packages/genui/openui/src/core/hooks/useOpenUIState.ts
@@ -0,0 +1,597 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import {
+  ACTION_STEPS,
+  BuiltinActionType,
+  createQueryManager,
+  createStore,
+  createStreamingParser,
+  enrichErrors,
+  evaluate,
+  evaluateElementProps,
+} from '@openuidev/lang-core';
+import type {
+  ActionEvent,
+  ActionPlan,
+  EvalContext,
+  EvaluationContext,
+  OpenUIError,
+  ParseResult,
+  QueryManager,
+  Store,
+  ToolProvider,
+} from '@openuidev/lang-core';
+import type React from 'react';
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+} from '@lynx-js/react';
+
+import type { LegacyActionConfig } from '../../catalog/Action/index.jsx';
+import type { OpenUIContextValue } from '../context.js';
+import type { Library } from '../library.js';
+
+/** Unwrap { value, componentType } wrapper from form field entries. Returns raw value. */
+function unwrapFieldValue(v: unknown): unknown {
+  if (
+    v
+    && typeof v === 'object'
+    && !Array.isArray(v)
+    && 'value' in (v as Record<string, unknown>)
+  ) {
+    return (v as Record<string, unknown>)['value'];
+  }
+  return v;
+}
+
+function evaluateString(
+  ast: Parameters<typeof evaluate>[0],
+  evaluationContext: EvaluationContext,
+): string {
+  const evaluated = evaluate(ast, evaluationContext);
+  return typeof evaluated === 'string' ? evaluated : '';
+}
+
+function evaluateNumber(
+  ast: Parameters<typeof evaluate>[0],
+  evaluationContext: EvaluationContext,
+): number | undefined {
+  const evaluated = evaluate(ast, evaluationContext);
+  return typeof evaluated === 'number' ? evaluated : undefined;
+}
+
+function evaluateRecord(
+  ast: Parameters<typeof evaluate>[0],
+  evaluationContext: EvaluationContext,
+): Record<string, unknown> {
+  const evaluated = evaluate(ast, evaluationContext);
+  return (
+      typeof evaluated === 'object'
+      && evaluated !== null
+      && !Array.isArray(evaluated)
+    )
+    ? (evaluated as Record<string, unknown>)
+    : {};
+}
+
+export interface UseOpenUIStateOptions {
+  response: string | null;
+  library: Library;
+  isStreaming: boolean;
+  onAction?: (event: ActionEvent) => void;
+  onStateUpdate?: (state: Record<string, unknown>) => void;
+  initialState?: Record<string, unknown>;
+  /** ToolProvider for Query data fetching — MCP, REST, GraphQL, or any backend. */
+  toolProvider?: ToolProvider | null;
+  /** Callback for structured, LLM-friendly errors. See OpenUIError type. */
+  onError?: (errors: OpenUIError[]) => void;
+}
+
+export interface OpenUIState {
+  /** Evaluated result (props resolved to concrete values). Used by Renderer. */
+  result: ParseResult | null;
+  /** Raw parse result (AST nodes in props). Used by onParseResult callback. */
+  parseResult: ParseResult | null;
+  contextValue: OpenUIContextValue;
+  /** Whether any Query is currently fetching data. */
+  isQueryLoading: boolean;
+}
+
+/**
+ * Core state hook — extracts all form state, action handling, parser
+ * management, and context assembly out of the Renderer component.
+ *
+ * Store holds everything: $bindings as top-level keys, form fields nested
+ * under formName as plain values.
+ */
+export function useOpenUIState(
+  {
+    response,
+    library,
+    isStreaming,
+    onAction,
+    onStateUpdate,
+    initialState,
+    toolProvider,
+    onError,
+  }: UseOpenUIStateOptions,
+  renderDeep: (value: unknown) => React.ReactNode,
+): OpenUIState {
+  // ─── Streaming parser (incremental — caches completed statements) ───
+  const sp = useMemo(
+    () => createStreamingParser(library.toJSONSchema(), library.root),
+    [library],
+  );
+
+  // ─── Parse result ───
+  const parseExceptionRef = useRef<OpenUIError | null>(null);
+  const result = useMemo<ParseResult | null>(() => {
+    parseExceptionRef.current = null;
+    if (!response) return null;
+    try {
+      return sp.set(response);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      parseExceptionRef.current = {
+        source: 'parser',
+        code: 'parse-exception',
+        message: `Parser crashed: ${msg}`,
+        hint: 'The response may contain syntax the parser cannot handle',
+      };
+      return null;
+    }
+  }, [sp, response]);
+
+  // ─── Store (holds everything: $bindings + form fields) ───
+  const store = useMemo<Store>(() => createStore(), []);
+
+  // ─── QueryManager ───
+  const queryManager = useMemo<QueryManager>(
+    () => createQueryManager(toolProvider ?? null),
+    [toolProvider],
+  );
+
+  useEffect(() => {
+    queryManager.activate();
+    return () => queryManager.dispose();
+  }, [queryManager]);
+
+  // ─── Initialize Store ───
+  const storeInitKeyRef = useRef<unknown>(Symbol());
+  useEffect(() => {
+    if (!result?.stateDeclarations && !initialState) return;
+    const key = `${JSON.stringify(result?.stateDeclarations)}::${
+      JSON.stringify(initialState)
+    }`;
+    if (storeInitKeyRef.current === key) return;
+    storeInitKeyRef.current = key;
+
+    // Split initialState: $-prefixed keys are bindings, everything else is form state
+    const bindingDefaults: Record<string, unknown> = {};
+    if (initialState) {
+      for (const [key, value] of Object.entries(initialState)) {
+        if (key.startsWith('$')) {
+          bindingDefaults[key] = value;
+        } else {
+          // Form state — restore as-is (preserves { value, componentType } wrapper)
+          store.set(key, value);
+        }
+      }
+    }
+    store.initialize(result?.stateDeclarations ?? {}, bindingDefaults);
+  }, [result?.stateDeclarations, store, initialState]);
+
+  // ─── Subscribe to Store and QueryManager for re-renders ───
+  const storeSnapshot = useSyncExternalStore(
+    (listener) => store.subscribe(listener),
+    () => store.getSnapshot(),
+    () => store.getSnapshot(),
+  );
+  const querySnapshot = useSyncExternalStore(
+    (listener) => queryManager.subscribe(listener),
+    () => queryManager.getSnapshot(),
+    () => queryManager.getSnapshot(),
+  );
+
+  // ─── Build EvaluationContext ───
+  const evaluationContext = useMemo<EvaluationContext>(
+    () => ({
+      getState: (name: string) => unwrapFieldValue(store.get(name)),
+      resolveRef: (name: string) => {
+        const mutResult = queryManager.getMutationResult(name);
+        if (mutResult) return mutResult;
+        return queryManager.getResult(name);
+      },
+    }),
+    [store, queryManager],
+  );
+
+  // ─── Evaluate and submit queries ───
+  useEffect(() => {
+    if (isStreaming) return;
+
+    const queryStmts = result?.queryStatements ?? [];
+    const evaluatedNodes = queryStmts.map((qn) => {
+      const relevantDeps: Record<string, unknown> = {};
+      if (qn.deps) {
+        for (const ref of qn.deps) {
+          relevantDeps[ref] = storeSnapshot[ref];
+        }
+      }
+      const node: {
+        statementId: string;
+        toolName: string;
+        args: unknown;
+        defaults: unknown;
+        deps: unknown;
+        complete: boolean;
+        refreshInterval?: number;
+      } = {
+        statementId: qn.statementId,
+        toolName: qn.toolAST
+          ? evaluateString(qn.toolAST, evaluationContext)
+          : '',
+        args: qn.argsAST ? evaluate(qn.argsAST, evaluationContext) : null,
+        defaults: qn.defaultsAST
+          ? evaluate(qn.defaultsAST, evaluationContext)
+          : null,
+        deps: Object.keys(relevantDeps).length > 0 ? relevantDeps : undefined,
+        complete: qn.complete,
+      };
+      if (qn.refreshAST) {
+        const interval = evaluateNumber(qn.refreshAST, evaluationContext);
+        if (interval !== undefined) {
+          node.refreshInterval = interval;
+        }
+      }
+      return node;
+    });
+
+    // Always call — empty array clears removed queries and their errors
+    queryManager.evaluateQueries(evaluatedNodes);
+  }, [
+    isStreaming,
+    result?.queryStatements,
+    evaluationContext,
+    queryManager,
+    storeSnapshot,
+  ]);
+
+  // ─── Register mutations ───
+  useEffect(() => {
+    if (isStreaming) return;
+
+    const mutStmts = result?.mutationStatements ?? [];
+    const nodes = mutStmts.map((mn) => ({
+      statementId: mn.statementId,
+      toolName: mn.toolAST ? evaluateString(mn.toolAST, evaluationContext) : '',
+    }));
+    // Always call — empty array clears removed mutations and their errors
+    queryManager.registerMutations(nodes);
+  }, [
+    isStreaming,
+    result?.mutationStatements,
+    evaluationContext,
+    queryManager,
+  ]);
+
+  // ─── Ref for stable callbacks ───
+  const propsRef = useRef({ onAction, onStateUpdate, onError });
+  propsRef.current = { onAction, onStateUpdate, onError };
+
+  const resultRef = useRef(result);
+  resultRef.current = result;
+
+  // ─── Fire onStateUpdate when Store changes ───
+  const lastInitSnapshotRef = useRef<Record<string, unknown> | null>(null);
+  useEffect(() => {
+    lastInitSnapshotRef.current = store.getSnapshot();
+    const unsub = store.subscribe(() => {
+      const currentSnapshot = store.getSnapshot();
+      if (currentSnapshot === lastInitSnapshotRef.current) return;
+      lastInitSnapshotRef.current = null;
+      propsRef.current.onStateUpdate?.(currentSnapshot);
+    });
+    return unsub;
+  }, [store]);
+
+  // ─── getFieldValue ───
+  const getFieldValue = useCallback(
+    (formName: string | undefined, name: string) => {
+      if (!formName) return unwrapFieldValue(store.get(name));
+      const formData = store.get(formName);
+      if (
+        !formData || typeof formData !== 'object' || Array.isArray(formData)
+      ) return undefined;
+      return unwrapFieldValue((formData as Record<string, unknown>)[name]);
+    },
+    [store],
+  );
+
+  // ─── setFieldValue ───
+  const setFieldValue = useCallback(
+    (
+      formName: string | undefined,
+      componentType: string | undefined,
+      name: string,
+      value: unknown,
+      shouldTriggerSaveCallback: boolean = true,
+    ) => {
+      const wrapped = { value, componentType };
+      if (formName) {
+        const raw = store.get(formName);
+        const formData = raw && typeof raw === 'object' && !Array.isArray(raw)
+          ? (raw as Record<string, unknown>)
+          : {};
+        store.set(formName, { ...formData, [name]: wrapped });
+      } else {
+        store.set(name, wrapped);
+      }
+      if (shouldTriggerSaveCallback) {
+        propsRef.current.onStateUpdate?.(store.getSnapshot());
+      }
+    },
+    [store],
+  );
+
+  // ─── Materialize form payload ───
+  const getFormPayload = useCallback(
+    (formName?: string): Record<string, unknown> | undefined => {
+      if (formName) {
+        const raw = store.get(formName);
+        if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
+          return { [formName]: raw };
+        }
+      }
+      return store.getSnapshot();
+    },
+    [store],
+  );
+
+  // ─── triggerAction ───
+  const triggerAction = useCallback(
+    async (
+      userMessage: string,
+      formName?: string,
+      action?: ActionPlan | LegacyActionConfig,
+    ) => {
+      const formPayload = getFormPayload(formName);
+      const { onAction: handler } = propsRef.current;
+
+      function buildEvent(
+        type: ActionEvent['type'],
+        params: Record<string, unknown>,
+        humanFriendlyMessage: string,
+      ): ActionEvent {
+        const event: ActionEvent = { type, params, humanFriendlyMessage };
+        if (formPayload !== undefined) event.formState = formPayload;
+        if (formName !== undefined) event.formName = formName;
+        return event;
+      }
+
+      // Legacy action config path (v0.1 compat) — { type?, params? }
+      if (action && !('steps' in action)) {
+        const actionType = action.type
+          ?? BuiltinActionType.ContinueConversation;
+        const params = { ...(action.params ?? {}) };
+        // v0.1 compat — url and context were top-level, not in params
+        if (action.url) params['url'] = action.url;
+        if (action.context) params['context'] = action.context;
+        handler?.(buildEvent(actionType, params, userMessage));
+        return;
+      }
+
+      // ActionPlan path (v0.5) — sequential steps with halt-on-mutation-failure
+      const actionPlan = action;
+      if (actionPlan?.steps) {
+        for (const step of actionPlan.steps) {
+          switch (step.type) {
+            case ACTION_STEPS.Run: {
+              if (step.refType === 'mutation') {
+                const mn = resultRef.current?.mutationStatements?.find(
+                  (m) => m.statementId === step.statementId,
+                );
+                const evaluatedArgs = mn?.argsAST
+                  ? evaluateRecord(mn.argsAST, evaluationContext)
+                  : {};
+                const ok = await queryManager.fireMutation(
+                  step.statementId,
+                  evaluatedArgs,
+                );
+                if (!ok) return; // halt on failure
+              } else {
+                queryManager.invalidate([step.statementId]);
+              }
+              break;
+            }
+            case ACTION_STEPS.ToAssistant:
+              handler?.(buildEvent(
+                BuiltinActionType.ContinueConversation,
+                step.context ? { context: step.context } : {},
+                step.message,
+              ));
+              break;
+            case ACTION_STEPS.OpenUrl:
+              handler?.(buildEvent(
+                BuiltinActionType.OpenUrl,
+                { url: step.url },
+                '',
+              ));
+              break;
+            case ACTION_STEPS.Set: {
+              const value = evaluate(step.valueAST, evaluationContext);
+              store.set(step.target, value);
+              break;
+            }
+            case ACTION_STEPS.Reset: {
+              const decls = resultRef.current?.stateDeclarations ?? {};
+              for (const target of step.targets) {
+                store.set(target, decls[target] ?? null);
+              }
+              break;
+            }
+          }
+        }
+        return;
+      }
+
+      // Default — ContinueConversation with label
+      handler?.(buildEvent(
+        BuiltinActionType.ContinueConversation,
+        {},
+        userMessage,
+      ));
+    },
+    [queryManager, evaluationContext, getFormPayload, store],
+  );
+
+  // ─── reportError (for error boundary) ───
+  const renderErrorsRef = useRef<OpenUIError[]>([]);
+  const isStreamingRef = useRef(isStreaming);
+  isStreamingRef.current = isStreaming;
+  const reportError = useCallback((error: OpenUIError) => {
+    // Skip during streaming — render errors are transient and onError won't fire until streaming stops
+    if (isStreamingRef.current) return;
+    renderErrorsRef.current.push(error);
+  }, []);
+
+  // ─── Context value ───
+  const contextValue = useMemo<OpenUIContextValue>(
+    () => ({
+      library,
+      renderNode: renderDeep,
+      triggerAction,
+      isStreaming,
+      getFieldValue,
+      setFieldValue,
+      store,
+      evaluationContext,
+      reportError,
+    }),
+    [
+      library,
+      renderDeep,
+      isStreaming,
+      triggerAction,
+      getFieldValue,
+      setFieldValue,
+      store,
+      evaluationContext,
+      reportError,
+    ],
+  );
+
+  // ─── Evaluate props ───
+  const runtimeErrorsRef = useRef<OpenUIError[]>([]);
+
+  const evaluatedResult = useMemo<ParseResult | null>(() => {
+    if (!result?.root) return result;
+    // Fresh errors array each pass — avoids mutating memoized context
+    const errors: OpenUIError[] = [];
+    const evalCtx: EvalContext = {
+      ctx: evaluationContext,
+      library,
+      store,
+      errors,
+    };
+    try {
+      const evaluatedRoot = evaluateElementProps(result.root, evalCtx);
+      runtimeErrorsRef.current = errors;
+      return { ...result, root: evaluatedRoot };
+    } catch (e) {
+      // Safety net — per-prop catch in evaluateElementProps handles most cases
+      const msg = e instanceof Error ? e.message : String(e);
+      errors.push({
+        source: 'runtime',
+        code: 'runtime-error',
+        message: `Prop evaluation failed: ${msg}`,
+      });
+      runtimeErrorsRef.current = errors;
+      return result;
+    }
+  }, [result, evaluationContext, library, store, storeSnapshot, querySnapshot]);
+
+  const isQueryLoading = querySnapshot.__openui_loading.length > 0;
+
+  // ─── Collect and fire onError ───
+  const lastErrorKeyRef = useRef<string>('');
+  useEffect(() => {
+    if (isStreaming) {
+      // Clear stale errors from previous session so the correction loop
+      // gets a clean signal when this streaming session completes.
+      if (lastErrorKeyRef.current !== '') {
+        lastErrorKeyRef.current = '';
+        propsRef.current.onError?.([]);
+      }
+      return;
+    }
+    const errors: OpenUIError[] = [];
+
+    // Parser exception (parser itself crashed)
+    if (parseExceptionRef.current) {
+      errors.push(parseExceptionRef.current);
+    }
+
+    // Parse failure — response exists but produced no renderable root
+    if (response && !result?.root && !parseExceptionRef.current) {
+      errors.push({
+        source: 'parser',
+        code: 'parse-failed',
+        message: result
+          ? 'Code parsed but produced no renderable root component'
+          : 'Response could not be parsed as valid openui-lang',
+        hint:
+          `The entire response must be valid openui-lang code starting with root = ${
+            library.root ?? 'Root'
+          }(...)`,
+      });
+    }
+
+    // Parser validation errors → enriched OpenUIError (with hints)
+    if (result?.meta?.errors?.length) {
+      errors.push(
+        ...enrichErrors(
+          result.meta.errors,
+          library.toJSONSchema(),
+          Object.keys(library.components),
+        ),
+      );
+    }
+
+    // Runtime eval errors (collected per-prop by evaluateElementProps)
+    errors.push(...runtimeErrorsRef.current);
+
+    // Render errors (collected by error boundary via reportError)
+    errors.push(...renderErrorsRef.current);
+    renderErrorsRef.current = [];
+
+    // Query/mutation tool errors — already OpenUIError, pass through directly
+    errors.push(...(querySnapshot.__openui_errors ?? []));
+
+    // Deduplicate — only fire when errors actually change
+    const key = JSON.stringify(errors);
+    if (key === lastErrorKeyRef.current) return;
+    lastErrorKeyRef.current = key;
+
+    // Fire onError or fall back to console.warn
+    if (propsRef.current.onError) {
+      propsRef.current.onError(errors);
+    } else if (errors.length > 0) {
+      for (const e of errors) {
+        console.warn(`[openui] ${e.source}/${e.code}: ${e.message}`);
+      }
+    }
+  }, [isStreaming, response, result, evaluatedResult, querySnapshot, library]);
+
+  return {
+    result: evaluatedResult,
+    parseResult: result,
+    contextValue,
+    isQueryLoading,
+  };
+}
diff --git a/packages/genui/openui/src/core/hooks/useStateField.ts b/packages/genui/openui/src/core/hooks/useStateField.ts
new file mode 100644
index 0000000000..5637c5d6dd
--- /dev/null
+++ b/packages/genui/openui/src/core/hooks/useStateField.ts
@@ -0,0 +1,25 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { resolveStateField } from '@openuidev/lang-core';
+import type { InferStateFieldValue, StateField } from '@openuidev/lang-core';
+
+import { useFormName, useOpenUI } from '../context.js';
+
+export function useStateField<T = unknown>(
+  name: string,
+  value?: T,
+): StateField<InferStateFieldValue<T>> {
+  const ctx = useOpenUI();
+  const formName = useFormName();
+
+  return resolveStateField<InferStateFieldValue<T>>(
+    name,
+    value,
+    ctx.store ?? null,
+    ctx.evaluationContext ?? null,
+    (fieldName) => ctx.getFieldValue(formName, fieldName),
+    (fieldName, nextValue) =>
+      ctx.setFieldValue(formName, undefined, fieldName, nextValue),
+  );
+}
diff --git a/packages/genui/openui/src/core/index.ts b/packages/genui/openui/src/core/index.ts
new file mode 100644
index 0000000000..1bb76bcb7b
--- /dev/null
+++ b/packages/genui/openui/src/core/index.ts
@@ -0,0 +1,14 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+export { createParser, createStreamingParser } from '@openuidev/lang-core';
+
+export type {
+  ActionEvent,
+  LibraryJSONSchema,
+  ParseResult,
+  StreamParser,
+} from '@openuidev/lang-core';
+
+export { createOpenUiLibrary } from './createLibrary.js';
+export { OpenUiRenderer } from './renderer.js';
diff --git a/packages/genui/openui/src/core/library.tsx b/packages/genui/openui/src/core/library.tsx
new file mode 100644
index 0000000000..2cfdbafe00
--- /dev/null
+++ b/packages/genui/openui/src/core/library.tsx
@@ -0,0 +1,68 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import {
+  createLibrary as coreCreateLibrary,
+  defineComponent as coreDefineComponent,
+} from '@openuidev/lang-core';
+import type {
+  ActionEvent as CoreActionEvent,
+  DefinedComponent as CoreDefinedComponent,
+  Library as CoreLibrary,
+  LibraryDefinition as CoreLibraryDefinition,
+  ComponentRenderProps as CoreRenderProps,
+} from '@openuidev/lang-core';
+import type { z } from 'zod/v4';
+import type { $ZodObject } from 'zod/v4/core';
+
+import type { ReactNode } from '@lynx-js/react';
+
+// Re-export framework-agnostic types unchanged
+export type {
+  ComponentGroup,
+  LibraryJSONSchema,
+  PromptOptions,
+  SubComponentOf,
+  ToolDescriptor,
+} from '@openuidev/lang-core';
+
+// ─── React-specific types ───────────────────────────────────────────────────
+
+export interface ComponentRenderProps<P = Record<string, unknown>>
+  extends CoreRenderProps<P, ReactNode>
+{
+  onAction?: (event: CoreActionEvent) => void;
+}
+
+export type ComponentRenderer<P = Record<string, unknown>> = React.FC<
+  ComponentRenderProps<P>
+>;
+
+export type DefinedComponent<T extends $ZodObject = $ZodObject> =
+  CoreDefinedComponent<
+    T,
+    ComponentRenderer<z.infer<T>>
+  >;
+
+export type Library = CoreLibrary<ComponentRenderer<any>>;
+
+export type LibraryDefinition = CoreLibraryDefinition<ComponentRenderer<any>>;
+
+// ─── defineComponent (React) ────────────────────────────────────────────────
+
+export function defineComponent<T extends $ZodObject>(config: {
+  name: string;
+  props: T;
+  description: string;
+  component: ComponentRenderer<z.infer<T>>;
+}): DefinedComponent<T> {
+  return coreDefineComponent<T, ComponentRenderer<z.infer<T>>>(config);
+}
+
+// ─── createLibrary (React) ──────────────────────────────────────────────────
+
+export function createLibrary(input: LibraryDefinition): Library {
+  return coreCreateLibrary<ComponentRenderer<any>>(input) as Library;
+}
+
+export type RenderOutput = JSX.Element | JSX.Element[] | null;
diff --git a/packages/genui/openui/src/core/renderer.css b/packages/genui/openui/src/core/renderer.css
new file mode 100644
index 0000000000..772921a057
--- /dev/null
+++ b/packages/genui/openui/src/core/renderer.css
@@ -0,0 +1,271 @@
+/* ===== Stack ===== */
+.OpenUIStack {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.OpenUIStackRow {
+  flex-direction: row;
+}
+
+.OpenUIStackColumn {
+  flex-direction: column;
+}
+
+.OpenUIStackWrap {
+  flex-wrap: wrap;
+}
+
+.OpenUIGapNone {
+  gap: 0;
+}
+
+.OpenUIGapXs {
+  gap: 6rpx;
+}
+
+.OpenUIGapS {
+  gap: 10rpx;
+}
+
+.OpenUIGapM {
+  gap: 12rpx;
+}
+
+.OpenUIGapL {
+  gap: 16rpx;
+}
+
+.OpenUIGapXl {
+  gap: 24rpx;
+}
+
+.OpenUIAlignStart {
+  align-items: flex-start;
+}
+
+.OpenUIAlignCenter {
+  align-items: center;
+}
+
+.OpenUIAlignEnd {
+  align-items: flex-end;
+}
+
+.OpenUIAlignStretch {
+  align-items: stretch;
+}
+
+.OpenUIJustifyStart {
+  justify-content: flex-start;
+}
+
+.OpenUIJustifyCenter {
+  justify-content: center;
+}
+
+.OpenUIJustifyEnd {
+  justify-content: flex-end;
+}
+
+.OpenUIJustifyBetween {
+  justify-content: space-between;
+}
+
+/* ===== Card ===== */
+.OpenUICard {
+  width: 100%;
+  padding: 14rpx;
+  border-radius: 14rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.OpenUICardVariantCard {
+  background-color: #ffffff;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.08);
+}
+
+.OpenUICardVariantSunk {
+  background-color: rgba(0, 0, 0, 0.02);
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.06);
+}
+
+.OpenUICardVariantClear {
+  background-color: transparent;
+}
+
+/* ===== CardHeader ===== */
+.OpenUICardHeader {
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+}
+
+.OpenUICardHeaderTitle {
+  color: rgba(0, 0, 0, 0.88);
+  font-size: 30rpx;
+  font-weight: 700;
+}
+
+.OpenUICardHeaderSubtitle {
+  color: rgba(0, 0, 0, 0.55);
+  font-size: 24rpx;
+}
+
+/* ===== TextContent ===== */
+.OpenUITextContent {
+  color: rgba(0, 0, 0, 0.78);
+  font-size: 26rpx;
+  line-height: 36rpx;
+}
+
+.OpenUITextContentSmall {
+  font-size: 24rpx;
+  line-height: 34rpx;
+}
+
+.OpenUITextContentDefault {
+  font-size: 26rpx;
+  line-height: 36rpx;
+}
+
+.OpenUITextContentLarge {
+  font-size: 28rpx;
+  line-height: 38rpx;
+}
+
+.OpenUITextContentSmallHeavy {
+  font-size: 24rpx;
+  line-height: 34rpx;
+  font-weight: 700;
+}
+
+.OpenUITextContentLargeHeavy {
+  font-size: 28rpx;
+  line-height: 38rpx;
+  font-weight: 700;
+}
+
+/* ===== Separator ===== */
+.OpenUISeparator {
+  width: 100%;
+  height: 1rpx;
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+/* ===== Tag ===== */
+.OpenUITag {
+  padding: 6rpx 10rpx;
+  border-radius: 999rpx;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.OpenUITagText {
+  color: rgba(0, 0, 0, 0.72);
+  font-size: 22rpx;
+}
+
+/* ===== Button ===== */
+.OpenUIButtonGroup {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10rpx;
+}
+
+.OpenUIButton {
+  padding: 10rpx 14rpx;
+  border-radius: 12rpx;
+  border-width: 1rpx;
+  border-style: solid;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.OpenUIButtonPrimary {
+  background-color: rgba(59, 130, 246, 0.1);
+  border-color: rgba(59, 130, 246, 0.2);
+}
+
+.OpenUIButtonSecondary {
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.OpenUIButtonGhost {
+  background-color: transparent;
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.OpenUIButtonText {
+  color: rgba(0, 0, 0, 0.88);
+  font-size: 22rpx;
+  font-weight: 600;
+}
+
+/* ===== Dark theme overrides ===== */
+.dark .OpenUICard {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.dark .OpenUICardVariantCard {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.dark .OpenUICardVariantSunk {
+  background-color: rgba(255, 255, 255, 0.03);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.dark .OpenUICardHeaderTitle {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.dark .OpenUICardHeaderSubtitle {
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.dark .OpenUITextContent {
+  color: rgba(255, 255, 255, 0.88);
+}
+
+.dark .OpenUISeparator {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.dark .OpenUITag {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.dark .OpenUITagText {
+  color: rgba(255, 255, 255, 0.86);
+}
+
+.dark .OpenUIButtonPrimary {
+  background-color: rgba(59, 130, 246, 0.18);
+  border-color: rgba(59, 130, 246, 0.22);
+}
+
+.dark .OpenUIButtonSecondary {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.dark .OpenUIButtonGhost {
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.dark .OpenUIButtonText {
+  color: rgba(255, 255, 255, 0.92);
+}
diff --git a/packages/genui/openui/src/core/renderer.css.d.ts b/packages/genui/openui/src/core/renderer.css.d.ts
new file mode 100644
index 0000000000..854d38abcd
--- /dev/null
+++ b/packages/genui/openui/src/core/renderer.css.d.ts
@@ -0,0 +1,4 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+declare module './renderer.css' {}
diff --git a/packages/genui/openui/src/core/renderer.tsx b/packages/genui/openui/src/core/renderer.tsx
new file mode 100644
index 0000000000..cfa054c7ab
--- /dev/null
+++ b/packages/genui/openui/src/core/renderer.tsx
@@ -0,0 +1,279 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import type {
+  ActionEvent,
+  ActionPlan,
+  ElementNode,
+  EvaluationContext,
+  ParseResult,
+  Store,
+} from '@openuidev/lang-core';
+import { BuiltinActionType } from '@openuidev/lang-core';
+
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from '@lynx-js/react';
+
+import { OpenUIContext } from './context.js';
+import type { Library, RenderOutput } from './library.js';
+import { keyFrom } from './utils.js';
+import type { LegacyActionConfig } from '../catalog/Action/index.jsx';
+
+import './renderer.css';
+
+export type { Library, RenderOutput };
+
+interface FieldEntry {
+  value: unknown;
+  componentType?: string;
+}
+
+type FormStateValue = FieldEntry | Record<string, FieldEntry>;
+type FormState = Record<string, FormStateValue>;
+
+function isElementNode(value: unknown): value is ElementNode {
+  return (
+    typeof value === 'object'
+    && value !== null
+    && 'type' in value
+    && 'typeName' in value
+    && (value as Record<string, unknown>)['type'] === 'element'
+  );
+}
+
+function createFieldEntry(
+  value: unknown,
+  componentType: string | undefined,
+): FieldEntry {
+  return componentType === undefined ? { value } : { value, componentType };
+}
+
+function isFieldEntry(value: unknown): value is FieldEntry {
+  return (
+    typeof value === 'object'
+    && value !== null
+    && !Array.isArray(value)
+    && 'value' in value
+  );
+}
+
+function isFieldMap(value: unknown): value is Record<string, FieldEntry> {
+  return (
+    typeof value === 'object'
+    && value !== null
+    && !Array.isArray(value)
+    && Object.values(value).every((entry) => isFieldEntry(entry))
+  );
+}
+
+function getFieldEntry(
+  state: FormState,
+  formName: string | undefined,
+  name: string,
+): FieldEntry | undefined {
+  if (!formName) {
+    const value = state[name];
+    return isFieldEntry(value) ? value : undefined;
+  }
+
+  const formValue = state[formName];
+  if (!isFieldMap(formValue)) return undefined;
+  return formValue[name];
+}
+
+function renderValue(
+  value: unknown,
+  library: Library,
+  onAction?: (event: ActionEvent) => void,
+): RenderOutput {
+  if (value === null || value === undefined) return null;
+
+  if (
+    typeof value === 'string' || typeof value === 'number'
+    || typeof value === 'boolean'
+  ) {
+    return <text>{String(value)}</text>;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((v, i) => (
+      <Fragment key={keyFrom(v, i)}>
+        {renderValue(v, library, onAction)}
+      </Fragment>
+    ));
+  }
+
+  if (isElementNode(value)) {
+    const stableKey = value.statementId ?? keyFrom(value);
+    return (
+      <RenderNode
+        key={stableKey}
+        stableKey={stableKey}
+        node={value}
+        library={library}
+        {...(onAction ? { onAction } : {})}
+      />
+    );
+  }
+
+  return null;
+}
+
+function RenderNode(
+  props: {
+    key?: string;
+    stableKey?: string;
+    node: ElementNode;
+    library: Library;
+    onAction?: (event: ActionEvent) => void;
+  },
+) {
+  const { stableKey, node, library, onAction } = props;
+  const Comp = library.components[node.typeName]?.component;
+
+  if (!Comp) return null;
+
+  const renderNode = (value: unknown) => renderValue(value, library, onAction);
+
+  return (
+    <Comp
+      key={stableKey}
+      props={node.props}
+      renderNode={renderNode}
+      {...(onAction ? { onAction } : {})}
+    />
+  );
+}
+
+export function OpenUiRenderer(props: {
+  result: ParseResult | null;
+  library: Library;
+  onAction?: (event: ActionEvent) => void;
+  isStreaming?: boolean;
+}) {
+  const { result, library, onAction, isStreaming = false } = props;
+  const [formState, setFormState] = useState<FormState>({});
+  const formStateRef = useRef(formState);
+  const onActionRef = useRef(onAction);
+
+  useEffect(() => {
+    formStateRef.current = formState;
+  }, [formState]);
+
+  useEffect(() => {
+    onActionRef.current = onAction;
+  }, [onAction]);
+
+  const getFieldValue = useCallback(
+    (formName: string | undefined, name: string) => {
+      return getFieldEntry(formStateRef.current, formName, name)?.value;
+    },
+    [formStateRef],
+  );
+
+  const setFieldValue = useCallback(
+    (
+      formName: string | undefined,
+      componentType: string | undefined,
+      name: string,
+      value: unknown,
+      _shouldTriggerSaveCallback: boolean = true,
+    ) => {
+      const currentState = formStateRef.current;
+      const newState = { ...currentState };
+
+      if (formName) {
+        const currentFormValue = currentState[formName];
+        newState[formName] = {
+          ...(isFieldMap(currentFormValue) ? currentFormValue : {}),
+          [name]: createFieldEntry(value, componentType),
+        };
+      } else {
+        newState[name] = createFieldEntry(value, componentType);
+      }
+
+      setFormState(newState);
+      formStateRef.current = newState;
+    },
+    [formStateRef, setFormState],
+  );
+
+  const triggerAction = useCallback(
+    (
+      userMessage: string,
+      formName?: string,
+      action?: ActionPlan | LegacyActionConfig,
+    ) => {
+      const currentState = formStateRef.current;
+      const handler = onActionRef.current;
+
+      const legacyAction: LegacyActionConfig | undefined =
+        action && !('steps' in action)
+          ? action
+          : undefined;
+      const actionType = legacyAction?.type
+        ?? BuiltinActionType.ContinueConversation;
+      const actionParams = legacyAction?.params ?? {};
+
+      let relevantState: Record<string, unknown> | undefined;
+      const formValue = formName ? currentState[formName] : undefined;
+      if (formName && formValue !== undefined) {
+        relevantState = { [formName]: formValue };
+      } else if (Object.keys(currentState).length > 0) {
+        relevantState = currentState;
+      }
+
+      handler?.({
+        type: actionType,
+        params: actionParams,
+        humanFriendlyMessage: userMessage,
+        ...(relevantState ? { formState: relevantState } : {}),
+        ...(formName ? { formName } : {}),
+      });
+    },
+    [formStateRef, onActionRef],
+  );
+
+  const renderNode = useCallback(
+    (value: unknown) => renderValue(value, library, onAction),
+    [library, onAction],
+  );
+  const contextValue = useMemo(
+    () => ({
+      library,
+      renderNode,
+      triggerAction,
+      isStreaming,
+      getFieldValue,
+      setFieldValue,
+      store: {} as Store,
+      evaluationContext: {} as EvaluationContext,
+    }),
+    [
+      library,
+      renderNode,
+      triggerAction,
+      isStreaming,
+      getFieldValue,
+      setFieldValue,
+    ],
+  );
+
+  if (!result?.root) return null;
+
+  return (
+    <OpenUIContext.Provider value={contextValue}>
+      <RenderNode
+        node={result.root}
+        library={library}
+        {...(onAction ? { onAction } : {})}
+      />
+    </OpenUIContext.Provider>
+  );
+}
diff --git a/packages/genui/openui/src/core/utils.ts b/packages/genui/openui/src/core/utils.ts
new file mode 100644
index 0000000000..c4d8239ff1
--- /dev/null
+++ b/packages/genui/openui/src/core/utils.ts
@@ -0,0 +1,86 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+function generateRandomKey(): string {
+  return `key-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+function getScalarLabel(value: unknown): string | null {
+  if (typeof value === 'string' || typeof value === 'number') {
+    const text = String(value);
+    return text.length > 0 ? text : null;
+  }
+  return null;
+}
+
+function appendFallback(prefix: string, fallback: string): string {
+  return prefix + '-' + fallback;
+}
+
+export function keyFrom(value: unknown, fallbackIndex?: number): string {
+  const getFallback = () =>
+    fallbackIndex === undefined ? generateRandomKey() : String(fallbackIndex);
+
+  if (value === null || value === undefined) {
+    return getFallback();
+  }
+
+  const t = typeof value;
+  if (t === 'string') {
+    const str = getScalarLabel(value);
+    if (str && str.length > 0) {
+      return appendFallback(str, getFallback());
+    }
+    return getFallback();
+  }
+
+  if (t === 'number') {
+    const str = getScalarLabel(value);
+    if (str && str.length > 0) {
+      return appendFallback(str, getFallback());
+    }
+    return getFallback();
+  }
+
+  if (t === 'boolean') {
+    const str = value ? 'true' : 'false';
+    if (str && str.length > 0) {
+      return appendFallback(str, getFallback());
+    }
+    return getFallback();
+  }
+
+  if (Array.isArray(value)) {
+    const parts = value.map((v, i) => keyFrom(v, i)).filter(Boolean);
+    return `arr-${parts.join('-')}-${getFallback()}`;
+  }
+
+  if (t === 'object') {
+    const obj = value as Record<string, unknown>;
+    if (obj['type'] === 'element') {
+      const typeName = typeof obj['typeName'] === 'string'
+        ? obj['typeName']
+        : 'element';
+      const props = (obj['props'] as Record<string, unknown> | undefined) ?? {};
+      const label = props['label'] ?? props['title'] ?? props['text']
+        ?? props['value']
+        ?? props['name'];
+      const labelStr = getScalarLabel(label);
+      if (labelStr) {
+        return `${typeName}:${labelStr}-${getFallback()}`;
+      }
+      return `${typeName}-${getFallback()}`;
+    }
+
+    try {
+      const str = JSON.stringify(obj);
+      if (str && str.length > 0 && str !== '{}') {
+        const base = str.length > 50 ? str.slice(0, 50) : str;
+        return `obj-${base}-${getFallback()}`;
+      }
+    } catch {}
+    return `obj-${getFallback()}`;
+  }
+
+  return getFallback();
+}
diff --git a/packages/genui/openui/tsconfig.json b/packages/genui/openui/tsconfig.json
new file mode 100644
index 0000000000..8f498425c9
--- /dev/null
+++ b/packages/genui/openui/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "isolatedDeclarations": false,
+    "composite": true,
+    "outDir": "./dist",
+    "target": "esnext",
+    "jsx": "preserve",
+    "jsxImportSource": "@lynx-js/react",
+    "noEmit": true,
+  },
+  "include": ["src"],
+  "references": [],
+}
diff --git a/packages/genui/tsconfig.json b/packages/genui/tsconfig.json
index 7c00a7fc35..44a78b6a94 100644
--- a/packages/genui/tsconfig.json
+++ b/packages/genui/tsconfig.json
@@ -6,12 +6,12 @@
     "module": "ESNext",
     "lib": ["DOM", "ESNext"],
     "moduleResolution": "Bundler",
-    "esModuleInterop": false,
   },
   "references": [
     /** packages-start */
     { "path": "./a2ui-catalog-extractor/tsconfig.json" },
     { "path": "./a2ui/tsconfig.build.json" },
+    { "path": "./openui/tsconfig.json" },
     /** packages-end */
   ],
   "include": [],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3c0e4be6eb..39f5061880 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -636,6 +636,9 @@ importers:
       '@lynx-js/lynx-core':
         specifier: 0.1.3
         version: 0.1.3
+      '@lynx-js/openui-reactlynx':
+        specifier: workspace:*
+        version: link:../openui
       '@lynx-js/react':
         specifier: workspace:*
         version: link:../../react
@@ -689,6 +692,25 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
+  packages/genui/openui:
+    dependencies:
+      '@openuidev/lang-core':
+        specifier: ^0.2.4
+        version: 0.2.4(@modelcontextprotocol/sdk@1.25.2(hono@4.12.12)(zod@3.25.76))(zod@3.25.76)
+      zod:
+        specifier: ^3.25.76
+        version: 3.25.76
+    devDependencies:
+      '@lynx-js/react':
+        specifier: workspace:*
+        version: link:../../react
+      '@lynx-js/types':
+        specifier: 3.7.0
+        version: 3.7.0
+      '@types/react':
+        specifier: ^18.3.28
+        version: 18.3.28
+
   packages/i18n/i18next-translation-dedupe:
     devDependencies:
       '@lynx-js/react':
@@ -4012,6 +4034,15 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@openuidev/lang-core@0.2.4':
+    resolution: {integrity: sha512-HfY5nb6kAEWjdHL+3pBjw2TLc7TWwVMllaKtTY9itncJJjiPA0dj7mEJmcDpoMJ+NWPv+UbhWhOkmUtqpGOwDQ==}
+    peerDependencies:
+      '@modelcontextprotocol/sdk': '>=1.0.0'
+      zod: ^3.25.0 || ^4.0.0
+    peerDependenciesMeta:
+      '@modelcontextprotocol/sdk':
+        optional: true
+
   '@parcel/watcher-android-arm64@2.5.1':
     resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
     engines: {node: '>= 10.0.0'}
@@ -13335,6 +13366,12 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
+  '@openuidev/lang-core@0.2.4(@modelcontextprotocol/sdk@1.25.2(hono@4.12.12)(zod@3.25.76))(zod@3.25.76)':
+    dependencies:
+      zod: 3.25.76
+    optionalDependencies:
+      '@modelcontextprotocol/sdk': 1.25.2(hono@4.12.12)(zod@3.25.76)
+
   '@parcel/watcher-android-arm64@2.5.1':
     optional: true