thesysdev/openui

OpenUI 는 JSON 보다 최대 67% 더 토큰 효율적인, 컴팩트한 스트리밍 우선 언어, 내장 컴포넌트 라이브러리가 포함된 React 런타임, 그리고 즉시 사용할 수 있는 채팅 인터페이스를 갖춘 풀스택 Generative UI 프레임워크입니다.

문서 · 플레이그라운드 · 샘플 채팅 앱 · 디스코드 · 기여 · 행동 강령 · 보안 · 라이선스

OpenUI 의 중심에는 OpenUI Lang이 있습니다: 모델 생성 UI 를 위한 컴팩트한 스트리밍 우선 언어입니다. 모델 출력을 텍스트로만 취급하는 대신, OpenUI 는 컴포넌트를 정의하고 해당 컴포넌트 라이브러리에서 프롬프트 지시어를 생성하며, 모델이 스트림을 보내는 동안 구조화된 UI 를 렌더링할 수 있게 합니다.

핵심 기능:

OpenUI Lang— 구조화된 UI 생성을 위한 스트리밍 출력에 최적화된 컴팩트한 언어.내장 컴포넌트 라이브러리— 차트, 폼, 테이블, 레이아웃 등 — 즉시 사용 또는 확장 가능.컴포넌트 라이브러리 기반 프롬프트 생성— 허용된 컴포넌트에서 직접 모델 지시어를 생성합니다.스트리밍 렌더러— 토큰이 도착할 때 React 에서 점진적으로 모델 출력을 파싱하고 렌더링합니다.채팅 및 앱 표면— 보조자, 코필로터, 그리고 더 넓은 상호작용 제품 플로우에 동일한 기반을 사용합니다.

npx @openuidev/cli@latest create --name genui-chat-app
cd genui-chat-app
echo "OPENAI_API_KEY=sk-your-key-here" > .env
...

이것이 OpenUI 를 시작하는 가장 빠른 방법입니다. 스프로크된 앱은 스트리밍, 내장 UI, OpenUI Lang 지원이 포함된 엔드 투 엔드 시작점을 제공합니다.

이는 무엇을 제공하는지:

OpenUI Lang 지원- 앱 플로우에 구조화된 UI 생성을 통합합니다.라이브러리 기반 프롬프트- 허용된 컴포넌트 세트에서 지시어를 생성합니다.스트리밍 지원- 출력 도착 시 UI 를 점진적으로 업데이트합니다.작동하는 앱 기반- 수동으로 모든 것을 연결하는 대신 준비된 실행 가능한 예제부터 시작합니다.

컴포넌트는 모델이 생성할 내용을 정의합니다.

flowchart LR
A["Component Library"] --> B["System Prompt"]
B --> C["LLM"]
...

• 컴포넌트 라이브러리를 정의하거나 재사용합니다.
• 해당 라이브러리에서 시스템 프롬프트를 생성합니다.
• 해당 프롬프트를 모델에 전송합니다.
• 클라이언트로 OpenUI Lang 출력을 스트림으로 반환합니다.
• 렌더러로 점진적으로 출력을 렌더링합니다.

플레이그라운드에서 직접 시도해 보세요 — 기본 컴포넌트 라이브러리로 UI 를 실시간으로 생성하세요.

Package	Description
@openuidev/react-lang
Core runtime — component definitions, parser, renderer, prompt generation
@openuidev/react-headless
Headless chat state, streaming adapters, message format converters
@openuidev/react-ui
Prebuilt chat layouts and two built-in component libraries
@openuidev/cli
CLI for scaffolding apps and generating system prompts

npm install @openuidev/react-lang @openuidev/react-ui

OpenUI Lang 은 구조화되고 스트리밍 가능한 모델 생성 UI 를 위한 것입니다.

스트리밍 출력— 토큰이 도착할 때마다 UI 를 점진적으로 방출합니다.토큰 효율성— 동등한 JSON 과 비교하여 최대 67% 적은 토큰 사용 (벤치마크 참조).제어된 렌더링— 정의하고 등록한 컴포넌트만 출력에 제한합니다.타이핑된 컴포넌트 계약— Zod 스키마로 컴포넌트 속성과 구조를 사전에 정의합니다.

tiktoken(GPT-5 인코더) 로 측정. OpenUI Lang 과 두 가지 JSON 기반 스트리밍 형식을 7 개 UI 시나리오에서 비교:

Scenario	Vercel JSON-Render	Thesys C1 JSON	OpenUI Lang	vs Vercel	vs C1
simple-table	340	357	148	-56.5%	-58.5%
...	TOTAL
10180
9948
4800
-52.8%
-51.7%

benchmarks/ 에서 방법론과 재현 단계를 확인.

상세한 문서는 openui.com 에서 이용 가능합니다.

openui/
├── packages/
│ ├── react-lang/ # Core runtime (parser, renderer, prompt generation)
...

시작할 좋은 곳:

• openui.com 전체 문서
  examples/openui-chat

동작하는 앱
CONTRIBUTING.md

기여를 원한다면

• Discord — 질문하고 구축 중인 것을 공유하세요
• GitHub Issues — 버그 보고하거나 기능 요청

기여는 환영합니다. CONTRIBUTING.md
에서 기여 가이드와 참여 방법을 확인.

OpenUI 는 Agent Skill 을 제공하여 AI 코딩 어시스턴트 (Claude Code, Codex, Cursor, Copilot 등) 가 OpenUI Lang 을 사용하여 Generative UI 앱을 스프로크, 빌드, 디버깅할 수 있도록 도와줍니다.

# With the skills CLI (works across all agents)
npx skills add thesysdev/openui --skill openui
# Manual — copy into your project
...

이 스킬은 컴포넌트 라이브러리 설계, OpenUI Lang 문법, 시스템 프롬프트 생성, 렌더너, SDK 패키지와 변형된 LLM 출력 디버깅을 포함합니다.

이 프로젝트는 LICENSE 에서 설명된 조건에 따라 이용 가능합니다.