[Article] Chakra UI + OpenUI: Building a Design-System-Aware Generative UI App

[manja316]

Closes #2

Summary

A hands-on tutorial showing how to integrate Chakra UI with OpenUI's generative UI rendering pipeline. The article covers:

• How OpenUI's three-layer architecture (lang-core parser, react-lang bindings, react-ui components) separates concerns
• Using defineComponent to register Chakra UI components (Card, TextContent, Button) with Zod prop schemas
• Assembling a custom library with createLibrary and wiring it to the Renderer
• Theme integration — Chakra's ChakraProvider + extendTheme works seamlessly with OpenUI's component resolution
• How missing components are handled (graceful fallback + structured error reporting)
• The component categories needed for production generative UI apps

~2,200 words. Code examples based on actual OpenUI source code patterns from react-lang/src/library.ts and react-ui/src/genui-lib/.

All code samples reference current OpenUI API versions (defineComponent, createLibrary, Renderer from @openuidev/react-lang).

[entelligence-ai-pr-reviews]

EntelligenceAI PR Summary

Introduces a new article detailing how to integrate Chakra UI as a custom component library in OpenUI's generative UI framework.

• Documents the three-layer architecture: lang-core, react-lang, and react-ui
• Covers step-by-step implementation of defineComponent and createLibrary for Chakra-based Card, TextContent, and Button components
• Includes Zod schema-based prop validation for each component
• Explains wiring the Renderer with ChakraProvider for theme-aware, LLM-driven UI rendering

---

Confidence Score: 5/5 - Safe to Merge

Safe to merge — this PR makes purely additive documentation changes to an article about Chakra UI and OpenUI, adding a componentGroups configuration example with Layout, Content, and Actions groups to the createLibrary code snippet and expanding prose around how notes values are injected into the model's system prompt. No logic, runtime code, or executable paths are modified; the changes are entirely confined to documentation content. The additions are coherent, self-consistent, and accurately describe the feature being documented.

Key Findings:

• The componentGroups field addition to the createLibrary snippet is a documentation-only change with no executable code impact — it illustrates API usage without modifying any library or runtime behavior.
• The expanded prose correctly clarifies that notes values are injected verbatim into the model's system prompt, which is an accurate and useful clarification for readers building generative UI applications.
• No review comments were generated by automated analysis, and there are no unresolved pre-existing concerns flagged against this PR.
• The three named groups (Card under Layout, TextContent under Content, Button under Actions) form a coherent and pedagogically sound example that aligns with typical design system component categorization.

[entelligence-ai-pr-reviews]

Walkthrough

Adds a new technical article documenting the integration of Chakra UI as a custom component library within OpenUI's generative UI framework. The article covers the three-layer architecture, step-by-step implementation of Chakra-based components (Card, TextContent, Button) using defineComponent and createLibrary with Zod prop validation, and wiring the Renderer with ChakraProvider for theme-aware LLM-driven UI rendering.

Changes

File(s)	Summary
articles/chakra-ui-openui-design-system.md	New article documenting Chakra UI integration with OpenUI's generative UI framework, covering three-layer architecture (lang-core, react-lang, react-ui), defineComponent/createLibrary usage for Card, TextContent, and Button components with Zod validation, and Renderer setup with ChakraProvider.

Sequence Diagram

This diagram shows the interactions between components:

sequenceDiagram
    participant Dev as Developer
    participant CL as chakraLibrary
    participant DC as defineComponent
    participant LLM as LLM / AI Model
    participant R as Renderer
    participant LC as lang-core (Parser)
    participant RL as react-lang (Binding)
    participant CC as Chakra Components
    participant CT as Chakra Theme

    %% Registration Phase
    Note over Dev, CL: Registration Phase (App Startup)
    Dev->>DC: defineComponent({ name, props (Zod), description, component })
    DC-->>Dev: ChakraCard / ChakraTextContent / ChakraButton
    Dev->>CL: createLibrary({ components: [...] })
    CL-->>Dev: chakraLibrary (schemas + render fns packaged)

    %% Prompt Generation
    Note over CL, LLM: Prompt Construction
    CL->>LLM: System prompt includes component descriptions + prop schemas

    %% LLM Generation
    LLM-->>R: Raw openui-lang text (streaming or complete)

    %% Rendering Phase
    Note over R, CC: Rendering Phase (Per Response)
    activate R
    R->>LC: Parse raw openui-lang text
    LC-->>R: Typed AST (element nodes with component names + props)

    R->>RL: Resolve each AST node against chakraLibrary
    activate RL

    loop For each AST node
        RL->>DC: Lookup component by name (e.g. "Card")

        alt Component found
            RL->>DC: Validate props against Zod schema
            DC-->>RL: Validated props
            RL->>CC: Call component render fn (props, renderNode)
            CC->>CT: Apply Chakra theme tokens (colors, spacing, fonts)
            CT-->>CC: Themed React element
            CC-->>RL: Rendered Chakra element
        else Component not registered
            RL-->>R: null + onError({ code: "unknown-component" })
        end
    end

    deactivate RL
    R-->>Dev: Fully rendered Chakra UI tree

    deactivate R

    Note over CC, CT: ChakraProvider wraps Renderer,<br/>ensuring all components inherit the custom theme

Loading

---

🔗 Cross-Repository Impact Analysis

Enable automatic detection of breaking changes across your dependent repositories. → Set up now

Learn more about Cross-Repository Analysis

What It Does

• Automatically identifies repositories that depend on this code
• Analyzes potential breaking changes across your entire codebase
• Provides risk assessment before merging to prevent cross-repo issues

How to Enable

1. Visit Settings → Code Management
2. Configure repository dependencies
3. Future PRs will automatically include cross-repo impact analysis!

Benefits

• 🛡️ Prevent breaking changes across repositories
• 🔍 Catch integration issues before they reach production
• 📊 Better visibility into your multi-repo architecture

---

[entelligence-ai-pr-reviews]

LGTM 👍 No issues found.