LLM Wiki

OpenUI: JSON보다 적은 토큰으로 UI를 스트리밍하는 생성형 UI 오픈 표준

Properties2
descriptionOpenUI는 Thesys가 공개한 풀스택 생성형 UI 프레임워크로, JSON 대신 스트리밍에 최적화된 전용 언어(OpenUI Lang)로 UI를 표현해 토큰 사용량을 50% 이상 절감한다.
tagsai-agents, ui, generative-ui, openui, llm

5 min read

출처

개요

OpenUI는 Thesys가 공개한 풀스택 생성형 UI 프레임워크로, JSON 대신 스트리밍에 최적화된 전용 언어(OpenUI Lang)로 UI를 표현해 토큰 사용량을 50% 이상 절감한다. 컴포넌트 라이브러리를 먼저 정의하면 OpenUI가 모델용 시스템 프롬프트를 자동 생성하고, LLM이 출력한 OpenUI Lang 스트림을 React 런타임이 토큰 도착 즉시 점진적으로 렌더링한다. MIT 라이선스로 공개되었으며 React, Vue 3, Svelte 5, 브라우저 번들을 지원한다. 2024년 12월 공개 후 2026년 7월 기준 GitHub 7,700+ 스타를 받았다.

핵심 포인트

  • OpenUI Lang의 토큰 효율성: tiktoken(GPT-5 인코더) 기준 7개 UI 시나리오 벤치마크에서 OpenUI Lang은 Vercel json-render 대비 평균 52.8%, Thesys C1 JSON 대비 51.7% 적은 토큰 사용. 시나리오별로 최대 67.1%(문의 폼) 절감. 전체 합산 10,180→4,800 토큰.
  • 데이터 흐름: Component Library → System Prompt → LLM → OpenUI Lang Stream → Renderer → Live UI. 개발자가 허용 컴포넌트 라이브러리를 정의하면 시스템 프롬프트가 자동 생성되고, LLM은 그 범위 안에서만 결과를 OpenUI Lang 스트림으로 출력. Renderer가 토큰 도착 즉시 파싱해 점진적 렌더링.
  • 패키지 구성: 프레임워크 독립적 파서/프롬프트 생성 레이어(lang-core), React/Vue 3/Svelte 5 바인딩, 헤드리스 채팅 상태 관리(react-headless), 내장 UI(react-ui), 스크립트 태그 하나로 붙이는 브라우저 번들, CLI 도구. 용도별로 분리된 패키지 모음.
  • 내장 컴포넌트 라이브러리: 차트, 폼, 테이블, 레이아웃 등 기본 컴포넌트 제공. Zod 스키마로 컴포넌트 props와 구조 타입 정의 가능. 직접 확장하거나 커스텀 라이브러리로 대체 가능.
  • 설치 및 사용법: npx @openuidev/cli@latest create로 예제 앱 스캐폴딩하거나, 기존 React 프로젝트에 npm install @openuidev/react-lang @openuidev/react-ui로 통합. 공식 Playground(openui.com/playground)에서 체험 가능.
  • 라이선스: MIT 라이선스로 개인 및 상업적 목적 자유롭게 사용 가능.

왜 중요한가

생성형 UI 구현 시 JSON의 중괄호·따옴표·키 이름 반복이 토큰 비용과 응답 시간을 증가시키는 근본적인 문제를, 스트리밍 네이티브 전용 언어를 도입해 해결했다. 스트리밍 방식 덕분에 모델 출력이 끝나기 전에도 UI가 점진적으로 렌더링되어 사용자 체감 지연 시간을 줄인다. React 외에도 Vue 3, Svelte 5, 브라우저 번들을 지원해 특정 프레임워크에 종속되지 않고 도입할 수 있으며, MIT 라이선스로 진입 장벽이 낮다. 생성형 UI의 토큰 비용 문제를 계량적으로 측정·공개한 점도 실무 채택에 유용한 기준점을 제공한다.

관련 링크 및 키워드

백링크