thesysdev/openui

The Open Standard for Generative UI

OpenUI – 생성형 UI 프레임워크

OpenUI는 대규모 언어 모델(LLM)에 의해 생성되고 토큰 단위로 클라이언트에 스트리밍되는 사용자 인터페이스를 구축할 수 있게 해주는 풀스택, 프레임워크에 구애받지 않는 라이브러리입니다. 이 라이브러리는 JSON보다 UI 구성 요소를 더 효율적으로 설명하는(최대 67% 적은 토큰) 간결하고 스트리밍 우선 언어인 OpenUI Lang을 도입합니다. 핵심은 모델의 출력을 파싱하여 실시간 UI로 변환하며, React, Vue, Svelte, Angular 또는 일반 브라우저 번들에서도 사용할 수 있습니다.

작동 방식

  1. 컴포넌트 라이브러리 – (Zod를 사용하여) 타입이 지정된 props로 UI 구성 요소(차트, 폼, 테이블 등) 집합을 정의합니다.
  2. 시스템 프롬프트 생성 – OpenUI는 LLM에 어떤 구성 요소를 생성할 수 있는지 알려주는 프롬프트를 만듭니다.
  3. LLM 호출 – 프롬프트를 모델에 보냅니다.
  4. OpenUI Lang 스트림 – 모델이 간결한 UI 설명을 스트리밍합니다.
  5. 렌더러 – 적절한 런타임(React, Vue 등)이 스트림을 파싱하고 토큰이 도착함에 따라 UI를 점진적으로 렌더링합니다.

이 흐름은 README의 Mermaid 다이어그램에 시각화되어 있습니다.

주요 패키지(모노레포)

패키지 제공 기능 일반적인 용도
@openuidev/lang-core 파서, 프롬프트 생성기, 런타임 평가, 타입 레이어 – 프레임워크 의존성 없음 백엔드 서비스, 엣지 함수, 사용자 정의 런타임
@openuidev/react-lang OpenUI Lang 파싱 및 렌더링을 위한 React 바인딩 스트리밍 UI를 원하는 모든 React 앱
@openuidev/react-ui 사전 구축된 채팅 UI, 컴포넌트 라이브러리, 바로 사용 가능한 레이아웃 전체 채팅 인터페이스를 가장 빠르게 구현
@openuidev/react-headless 헤드리스 채팅 상태 및 스트리밍 어댑터 스트리밍 로직 위에 자체 UI 구축
@openuidev/vue-lang, @openuidev/svelte-lang, @openuidev/angular-lang 프레임워크별 바인딩 Vue / Svelte / Angular 프로젝트
@openuidev/langchain LangChain / LangGraph 에이전트가 OpenUI Lang을 스트리밍하도록 돕는 헬퍼 UI를 생성하는 LLM 에이전트 구축
@openuidev/browser-bundle CDN/iframe 임베드를 위한 단일 파일 번들(스크립트 + 스타일시트) 빌드 없이 모든 페이지에 임베드
@openuidev/a2ui OpenUI Lang 페이로드를 전달하는 A2UI 프로토콜 클라이언트 A2UI 호환 백엔드와 상호 운용
@openuidev/server 서버 유틸리티 및 게이트웨이 헬퍼 프롬프트 생성 또는 이벤트 관찰 가능성 호스팅
@openuidev/observability-cloud OpenUI 이벤트를 Thesys 콘솔로 전송하는 클라우드 싱크 프로덕션급 원격 측정
@openuidev/cli 앱 스캐폴딩, 프롬프트 생성, 스키마 변환을 위한 CLI npx @openuidev/cli@latest create …

빠른 시작(React 예제)

npx @openuidev/cli@latest create --name genui-chat-app

이 명령은 다음을 포함하는 React 앱을 스캐폴딩합니다:

  • OpenUI Lang 지원
  • 라이브러리 기반 프롬프트 생성
  • 스트리밍 UI 업데이트
  • 바로 실행 가능한 채팅 화면

백엔드 서비스용 핵심 파서만 설치할 수도 있습니다:

npm install @openuidev/lang-core

OpenUI Lang을 사용하는 이유는?

  • 스트리밍 우선 – 모델이 출력을 생성하는 동안 UI가 점진적으로 나타나 인지된 지연 시간을 줄입니다.
  • 토큰 효율성 – 벤치마크에 따르면 일반적인 UI 패턴에서 JSON 기반 스트리밍 형식보다 약 50% 적은 토큰을 사용합니다.
  • 제어된 출력 – 모델은 정의된 구성 요소만 생성할 수 있어 임의 마크업을 방지합니다.
  • 타입이 지정된 계약 – 구성 요소 props가 Zod 스키마로 설명되어 정적 보장과 쉬운 디버깅을 제공합니다.

문서 및 커뮤니티

라이선스

OpenUI는 MIT 라이선스로 배포됩니다.

요약

OpenUI는 간결한 스트리밍 언어와 프레임워크에 구애받지 않는 런타임 집합을 제공하여 LLM이 JSON보다 훨씬 적은 토큰으로 즉시 나타나는 UI를 생성할 수 있게 합니다. 백엔드 작업에는 핵심 파서를 설치하고, 전체 프론트엔드 경험을 위해 React/Vue/Svelte/Angular 바인딩을 가져오며, CLI를 사용하여 몇 초 만에 작동하는 앱을 스캐폴딩하세요.

관련

  • 프로젝트
    wandb/openui

    UI 컴포넌트를 자연어로 설명하고 실시간으로 렌더링을 확인하며, React, Svelte, Web Components 로 변환할 수 있는 오픈소스 도구입니다.

  • 프로젝트
    vercel-labs/json-render

    json-render는 AI가 프롬프트에서 인터페이스를 생성하면서도 안전하고 예측 가능하게 유지하는 생성형 UI 프레임워크입니다. AI 출력을 정의된 컴포넌트 및 액션 카탈로그로 제한한 다음 여러 플랫폼에서 렌더링하는 방식으로 작동합니다.

  • 프로젝트
    thesysdev/appless

    사용자 요청에 따라 실시간으로 생성되는 라이브 스트리밍 네이티브 모바일 인터페이스를 제공하는 실험적 생성형 UI 운영체제로, 전통적인 앱을 대체합니다.

  • 프로젝트
    AGenUI/AGenUI

    AGenUI는 Google의 A2UI v0.9 프로토콜을 구현하여 iOS, Android, HarmonyOS에서 LLM 생성 대화형 UI를 실시간으로 렌더링하는 프로덕션 등급 SDK입니다. 공유 C++ 코어는 구문 분석, 레이아웃, diff를 처리하고 네이티브 렌더러는 구성 요소를 그립니다. 22개의 내장 UI 구성 요소, 사용자 지정 구성 요소 등록, Function Call 지원, LLM 출력을 제한하는 자체 포함 JSON 카탈로그 스키마, 자연어를 UI 프로토콜 메시지로 변환하는 에이전트 스킬, 프로토타이핑용 로컬 Studio 워크벤치를 제공합니다.

  • 프로젝트
    thesysdev/open-intelligent-ui

    Open Intelligent UI는 ChatGPT의 "지능형 UI"(LLM이 생성한 지도, 사진, 일정, 대시보드 등 대화형 답변)를 재현하는 오픈소스 데모입니다. OpenUI 생성형 UI 표준을 기반으로 TypeScript 컴포넌트 라이브러리, 59개의 내장 함수, 상태 저장 입력을 제공하며 OpenUI Cloud, 모든 OpenAI 호환 API 또는 로컬 Ollama 모델에서 실행할 수 있습니다.