Skip to content

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

Open
adamsardo wants to merge 1 commit into
thesysdev:mainfrom
adamsardo:article/chakra-openui-design-system
Open

[Article] Chakra UI + OpenUI: Building a Design-System-Aware Generative UI App#24
adamsardo wants to merge 1 commit into
thesysdev:mainfrom
adamsardo:article/chakra-openui-design-system

Conversation

@adamsardo

Copy link
Copy Markdown

Summary

Addresses #2 with a written tutorial showing how to use Chakra UI as the rendering layer for OpenUI Lang output.

The article includes:

  • a runnable companion repo: https://github.com/adamsardo/openui-chakra-demo
  • a Chakra-backed OpenUI component library using defineComponent and createLibrary
  • a chart component example
  • action handling with useTriggerAction and Renderer.onAction
  • desktop, action-state, and mobile screenshots in assets/

Verification

Companion repo checks run locally:

  • npm run lint
  • npm run build
  • Playwright smoke test against http://127.0.0.1:4319/

The Playwright smoke test verified the page loaded, the dashboard/chart content rendered, the primary action button emitted state, the mobile viewport rendered, and no console errors were captured.

@zahlekhan zahlekhan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor comments. Rest LGTM


![OpenUI action event rendered after clicking a Chakra button](../assets/chakra-openui-action.png)

The same component library also works on a narrow viewport:

@zahlekhan zahlekhan May 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not write mobile instead of narrow viewport?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants