[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-181":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":9,"totalLinesOfCode":9,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":9,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":36,"lastSyncTime":37,"discoverSource":38},181,"openui","thesysdev\u002Fopenui","thesysdev","The Open Standard for Generative UI",null,"https:\u002F\u002Fgithub.com\u002Fthesysdev\u002Fopenui","TypeScript",6907,520,26,33,0,230,368,621,690,39.15,false,"main",[25,26,27,28,29,30,31,32],"agents","generative-ui","ai","agent","javascript","llm","help-wanted","looking-for-contributors","2026-06-12 02:00:09","\u003Cdiv align=\"center\">\n\n\u003Ca href=\"https:\u002F\u002Fwww.openui.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n  \u003Cimg \n    src=\".\u002Fassets\u002Fbanner.png\" \n    alt=\"OpenUI — The Open Standard for Generative UI\" \n    width=\"100%\" \n    style=\"cursor: pointer;\"\n  >\n\u003C\u002Fa>\n\n# OpenUI — The Open Standard for Generative UI\n\n[![Build](https:\u002F\u002Fgithub.com\u002Fthesysdev\u002Fopenui\u002Factions\u002Fworkflows\u002Fbuild-js.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fthesysdev\u002Fopenui\u002Factions\u002Fworkflows\u002Fbuild-js.yml)\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-blue.svg)](.\u002FLICENSE)\n[![Discord](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDiscord-Chat-7289da?logo=discord&logoColor=white)](https:\u002F\u002Fdiscord.com\u002Finvite\u002FPbv5PsqUSv)\n\n\u003Ca href=\"https:\u002F\u002Ftrendshift.io\u002Frepositories\u002F22357\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Ftrendshift.io\u002Fapi\u002Fbadge\u002Frepositories\u002F22357\" alt=\"thesysdev%2Fopenui | Trendshift\" style=\"width: 250px; height: 55px;\" width=\"250\" height=\"55\"\u002F>\u003C\u002Fa>\n\n\u003C\u002Fdiv>\n\n\nOpenUI is a full-stack Generative UI framework — a compact streaming-first language, a React runtime with built-in component libraries, and ready-to-use chat interfaces — that is up to 67% more token-efficient than JSON.\n\n\n\n---\n\n\n\n[Docs](https:\u002F\u002Fopenui.com) · [Playground](https:\u002F\u002Fwww.openui.com\u002Fplayground) · [Sample Chat App](.\u002Fexamples\u002Fopenui-chat) · [Discord](https:\u002F\u002Fdiscord.com\u002Finvite\u002FPbv5PsqUSv) · [Contributing](.\u002FCONTRIBUTING.md) · [Code of Conduct](.\u002FCODE_OF_CONDUCT.md) · [Security](.\u002FSECURITY.md) · [License](.\u002FLICENSE)\n\n\n---\n\n## What is OpenUI\n\n\u003Cdiv align=\"center\">\n\n\u003Cimg src=\".\u002Fassets\u002Fdemo.gif\" alt=\"OpenUI Demo\" width=\"100%\">\n\u003C\u002Fdiv>\n\nAt the center of OpenUI is **OpenUI Lang**: a compact, streaming-first language for model-generated UI. Instead of treating model output as only text, OpenUI lets you define components, generate prompt instructions from that component library, and render structured UI as the model streams.\n\n**Core capabilities:**\n\n- **OpenUI Lang** — A compact language for structured UI generation designed for streaming output.\n- **Built-in component libraries** — Charts, forms, tables, layouts, and more — ready to use or extend.\n- **Prompt generation from your component library** — Generate model instructions directly from the components you allow.\n- **Streaming renderer** — Parse and render model output progressively in React as tokens arrive.\n- **Chat and app surfaces** - Use the same foundation for assistants, copilots, and broader interactive product flows.\n\n\n## Quick Start\n\n```bash\nnpx @openuidev\u002Fcli@latest create --name genui-chat-app\ncd genui-chat-app\necho \"OPENAI_API_KEY=sk-your-key-here\" > .env\nnpm run dev\n```\n\nThis is the fastest way to start with OpenUI. The scaffolded app gives you an end-to-end starting point with streaming, built-in UI, and OpenUI Lang support.\n\nWhat this gives you:\n\n- **OpenUI Lang support** - Start with structured UI generation built into the app flow.\n- **Library-driven prompts** - Generate instructions from your allowed component set.\n- **Streaming support** - Update the UI progressively as output arrives.\n- **Working app foundation** - Start from a ready-to-run example instead of wiring everything manually.\n\n\n\n## How it works\n\nYour components define what the model can generate.\n\n```mermaid\nflowchart LR\n    A[\"Component Library\"] --> B[\"System Prompt\"]\n    B --> C[\"LLM\"]\n    C --> D[\"OpenUI Lang Stream\"]\n    D --> E[\"Renderer\"]\n    E --> F[\"Live UI\"]\n```\n\n1. Define or reuse a component library.\n2. Generate a system prompt from that library.\n3. Send that prompt to your model.\n4. Stream OpenUI Lang output back to the client.\n5. Render the output progressively with Renderer.\n\nTry it yourself in the [Playground](https:\u002F\u002Fwww.openui.com\u002Fplayground) — generate UI live with the default component library.\n\n## Packages\n\n| Package | Description |\n| :--- | :--- |\n| [`@openuidev\u002Freact-lang`](.\u002Fpackages\u002Freact-lang) | Core runtime — component definitions, parser, renderer, prompt generation |\n| [`@openuidev\u002Freact-headless`](.\u002Fpackages\u002Freact-headless) | Headless chat state, streaming adapters, message format converters |\n| [`@openuidev\u002Freact-ui`](.\u002Fpackages\u002Freact-ui) | Prebuilt chat layouts and two built-in component libraries |\n| [`@openuidev\u002Fcli`](.\u002Fpackages\u002Fopenui-cli) | CLI for scaffolding apps and generating system prompts |\n\n```bash\nnpm install @openuidev\u002Freact-lang @openuidev\u002Freact-ui\n```\n\n## Why OpenUI Lang\n\nOpenUI Lang is designed for model-generated UI that needs to be both structured and streamable.\n\n- **Streaming output** — Emit UI incrementally as tokens arrive.\n- **Token efficiency** — Up to 67% fewer tokens than equivalent JSON (see [benchmarks](.\u002Fbenchmarks)).\n- **Controlled rendering** — Restrict output to the components you define and register.\n- **Typed component contracts** — Define component props and structure up front with Zod schemas.\n\n### Token efficiency benchmarks\n\nMeasured with `tiktoken` (GPT-5 encoder). OpenUI Lang vs two JSON-based streaming formats across seven UI scenarios:\n\n| Scenario           | Vercel JSON-Render | Thesys C1 JSON | OpenUI Lang |  vs Vercel |      vs C1 |\n| ------------------ | -----------------: | -------------: | ----------: | ---------: | ---------: |\n| simple-table       |                340 |            357 |         148 |     -56.5% |     -58.5% |\n| chart-with-data    |                520 |            516 |         231 |     -55.6% |     -55.2% |\n| contact-form       |                893 |            849 |         294 |     -67.1% |     -65.4% |\n| dashboard          |               2247 |           2261 |        1226 |     -45.4% |     -45.8% |\n| pricing-page       |               2487 |           2379 |        1195 |     -52.0% |     -49.8% |\n| settings-panel     |               1244 |           1205 |         540 |     -56.6% |     -55.2% |\n| e-commerce-product |               2449 |           2381 |        1166 |     -52.4% |     -51.0% |\n| **TOTAL**          |          **10180** |       **9948** |    **4800** | **-52.8%** | **-51.7%** |\n\nFull methodology and reproduction steps in [`benchmarks\u002F`](.\u002Fbenchmarks).\n\n## Documentation\n\nDetailed documentation is available at [openui.com](https:\u002F\u002Fopenui.com).\n\n## Repository structure\n\n```\nopenui\u002F\n├── packages\u002F\n│   ├── react-lang\u002F       # Core runtime (parser, renderer, prompt generation)\n│   ├── react-headless\u002F   # Headless chat state & streaming adapters\n│   ├── react-ui\u002F         # Prebuilt chat layouts & component libraries\n│   └── openui-cli\u002F       # CLI for scaffolding & prompt generation\n├── skills\u002F\n│   └── openui\u002F           # Claude Code skill for AI-assisted development\n├── examples\u002F\n│   └── openui-chat\u002F      # Full working example app (Next.js)\n├── docs\u002F                 # Documentation site (openui.com)\n└── benchmarks\u002F           # Token efficiency benchmarks\n```\n\nGood places to start:\n\n- [openui.com](https:\u002F\u002Fopenui.com) for the full docs\n- [`examples\u002Fopenui-chat`](.\u002Fexamples\u002Fopenui-chat) for a working app\n- [`CONTRIBUTING.md`](.\u002FCONTRIBUTING.md) if you want to contribute\n\n## Community\n\n- [Discord](https:\u002F\u002Fdiscord.com\u002Finvite\u002FPbv5PsqUSv) — Ask questions, share what you're building\n- [GitHub Issues](https:\u002F\u002Fgithub.com\u002Fthesysdev\u002Fopenui\u002Fissues) — Report bugs or request features\n\n\n## Contributing\n\nContributions are welcome. See [`CONTRIBUTING.md`](.\u002FCONTRIBUTING.md) for contribution guidelines and ways to get involved.\n\n## Agent Skill\n \nOpenUI ships an [Agent Skill](https:\u002F\u002Fagentskills.io) so AI coding assistants (Claude Code, Codex, Cursor, Copilot, etc.) can help you scaffold, build, and debug Generative UI apps using OpenUI Lang.\n \n### Install\n \n```bash\n# With the skills CLI (works across all agents)\nnpx skills add thesysdev\u002Fopenui --skill openui\n \n# Manual — copy into your project\ncp -r skills\u002Fopenui .claude\u002Fskills\u002Fopenui\n```\n \nThe skill covers component library design, OpenUI Lang syntax, system prompt generation, the Renderer, SDK packages, and debugging malformed LLM output.\n\n## Star History\n\n\u003Ca href=\"https:\u002F\u002Fwww.star-history.com\u002F?repos=thesysdev%2Fopenui&type=date&legend=top-left\">\n \u003Cpicture>\n   \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=thesysdev\u002Fopenui&type=date&theme=dark&legend=top-left\" \u002F>\n   \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=thesysdev\u002Fopenui&type=date&legend=top-left\" \u002F>\n   \u003Cimg alt=\"Star History Chart\" src=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=thesysdev\u002Fopenui&type=date&legend=top-left\" \u002F>\n \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n## License\n\nThis project is available under the terms described in [`LICENSE`](.\u002FLICENSE).\n","OpenUI 是一个全栈生成式用户界面框架，旨在通过紧凑的流优先语言、内置组件库和即用型聊天界面来提高UI生成效率。其核心技术包括OpenUI Lang——一种专为流输出设计的紧凑型结构化UI生成语言；丰富的内置组件库，如图表、表单、表格等，可以直接使用或扩展；以及从组件库生成模型指令的能力。此外，它还支持在React中逐步解析和渲染模型输出。该框架适用于需要高效生成交互式UI的应用场景，特别是基于AI助手、协作工具及其他互动产品流程开发时。",2,"2026-06-11 02:31:20","trending"]