OpenUI – 생성형 UI를 위한 스트리밍 우선 UI 언어와 런타임

왜 필요한가
동작 방식
패키지 구성
시작
JSON 기반 생성형 UI와의 차이
A2UI와 비교
관련 문서
참고 자료

OpenUI는 생성형 UI(generative UI)를 위한 풀스택 프레임워크다. 핵심은 LLM이 JSON 덩어리나 임의 HTML을 내보내는 대신, 컴포넌트 라이브러리에서 허용된 UI를 OpenUI Lang이라는 compact한 스트리밍 언어로 생성하고, 런타임이 이를 점진적으로 렌더링하는 구조다.

왜 필요한가

채팅형 AI 제품은 텍스트 답변만으로 부족한 경우가 많다. 견적 비교는 표가 필요하고, 분석 결과는 차트가 필요하며, 설정 변경은 폼과 버튼이 필요하다. 문제는 LLM이 임의 UI를 생성하게 두면 디자인 시스템, 타입 안정성, 렌더링 일관성, 스트리밍 UX가 무너진다는 점이다. OpenUI는 모델이 만들 수 있는 컴포넌트와 props를 개발자가 먼저 정의하고, 모델은 그 안에서 UI를 조립하게 한다.

동작 방식

Component Library
  -> System Prompt
  -> LLM
  -> OpenUI Lang Stream
  -> Renderer
  -> Live UI

팀이 사용할 컴포넌트 라이브러리를 정의한다.
OpenUI가 해당 라이브러리에서 모델용 시스템 프롬프트를 만든다.
LLM은 OpenUI Lang 형식으로 UI 스트림을 출력한다.
React·Vue·Svelte 런타임이 토큰 도착에 맞춰 UI를 점진 렌더링한다.

패키지 구성

패키지	용도
`@openuidev/lang-core`	프레임워크 독립 파서, 프롬프트 생성, 타입 계층
`@openuidev/react-lang`	React 컴포넌트 정의와 스트리밍 렌더링
`@openuidev/react-ui`	빠르게 시작하는 React 채팅 UI와 기본 컴포넌트 라이브러리
`@openuidev/react-headless`	자체 채팅 UI를 붙이기 위한 상태·스트리밍 어댑터
`@openuidev/vue-lang`, `@openuidev/svelte-lang`	Vue·Svelte 런타임 바인딩
`@openuidev/cli`	앱 스캐폴딩과 프롬프트·스키마 생성

시작

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

기존 React 앱에 붙이는 경우:

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

프레임워크 독립 백엔드나 Edge 런타임에서 프롬프트·파서만 쓰려면:

npm install @openuidev/lang-core

JSON 기반 생성형 UI와의 차이

OpenUI README는 GPT-5 encoder 기준 7개 UI 시나리오에서 OpenUI Lang이 두 JSON 기반 스트리밍 포맷보다 전체 토큰을 약 52% 줄였다고 제시한다. 예를 들어 contact form 시나리오는 849-893토큰 JSON 표현이 294토큰 OpenUI Lang으로 줄었다. 생성형 UI에서 토큰 절감은 단순 비용 문제가 아니라 첫 렌더링 지연과 스트리밍 체감 속도에 직접 영향을 준다.

항목	OpenUI 방향
스트리밍	토큰 도착에 맞춰 구조화 UI를 점진 렌더링
제어	개발자가 허용한 컴포넌트와 Zod props 계약 안에서 생성
멀티프레임워크	React, Vue, Svelte, 브라우저 번들, 이메일 생성 지원
개발 보조	OpenUI 전용 에이전트 스킬 제공

A2UI와 비교

a2ui는 기존 디자인 시스템과 여러 클라이언트 렌더러 사이의 이식성을 강조하는 표준에 가깝고, OpenUI는 OpenUI Lang과 실제 런타임·패키지·채팅 UI까지 제공하는 프레임워크에 가깝다. 제품 팀은 “공통 의도 스키마”가 우선이면 A2UI를, “바로 렌더링 가능한 생성형 UI 앱”이 우선이면 OpenUI를 먼저 검토할 수 있다.

참고 자료

thesysdev/openui — GitHub 공식 저장소
OpenUI Docs — 공식 문서

Like?

AI Sparkup