OpenUI: 프레임워크 독립형 스트리밍 생성형 UI 프레임워크와 OpenUI Lang

이미지 출처: thesysdev / OpenUI

OpenUI는 컴팩트한 스트리밍 우선 언어를 중심으로 구축된 오픈소스 프레임워크 독립형 생성형 UI 프레임워크입니다. 코어는 React, Vue, Svelte, Angular용 일등 런타임을 지원하며, 제공된 GitHub 저장소 스냅샷에는 스타 14,596개가 기록돼 있습니다.

이미지 출처: thesysdev / OpenUI

OpenUI의 중심에는 모델 생성 UI를 위한 컴팩트한 스트리밍 우선 언어 OpenUI Lang이 있습니다. 렌더러는 모델 출력이 도착하는 동안 구조화된 UI를 점진적으로 파싱하고 렌더링합니다.

프레임워크 독립형 코어와 멀티 프레임워크 런타임 지원

OpenUI는 핵심 파서 및 타입 레이어인 @openuidev/lang-core를 중심으로 React, Vue, Svelte, Angular 등 주요 프레임워크에 일등석(First-class) 런타임을 제공합니다.

• 범용 런타임 바인딩: @openuidev/react-lang, @openuidev/vue-lang, @openuidev/svelte-lang, @openuidev/angular-lang 패키지를 통해 개발자는 익숙한 프레임워크 환경에서 컴포넌트 라이브러리를 정의하고 스트리밍 출력을 연동할 수 있습니다.
• 컴포넌트 기반 프롬프트 생성: 개발자가 정의한 컴포넌트 세트를 기반으로 LLM 시스템 프롬프트를 자동 생성하여, 모델이 허용된 컴포넌트 규격 내에서 UI를 구성하도록 제어합니다.
• 빠른 프로젝트 스캐폴딩: 아래 명령어를 통해 스트리밍과 OpenUI Lang이 설정된 프로젝트를 즉시 생성할 수 있습니다.

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

OpenUI Lang을 통한 토큰 절감과 벤치마크 결과

OpenUI Lang은 구조화된 모델 생성 UI를 위해 설계된 컴팩트한 스트리밍 우선 언어입니다.

• 토큰 효율성: @Ryrenz는 프로젝트가 tiktoken으로 테스트한 7개 UI 시나리오에서 OpenUI Lang이 Vercel의 json-render 대비 52.8%, Thesys C1 JSON 대비 51.7% 적은 토큰을 사용했다고 전했습니다. 프로젝트 README는 별도로 JSON 대비 최대 67% 적은 토큰을 사용한다고 설명합니다.
• 점진적 스트리밍 렌더링: 렌더러는 토큰이 도착하는 대로 모델 출력을 점진적으로 파싱하고 렌더링합니다.

도입 시 유의 사항 및 라이선스

• 커스텀 문법 지시: X 답글에서 @zookmas1314는 모델이 기본적으로 컴포넌트 코드를 생성하지 않고 OpenUI Lang을 출력하도록 출력 형식과 타겟 런타임을 명시하라고 조언합니다.
• 버전 정합성: @zookmas1314는 코어와 런타임 버전을 확인하라고도 조언하며, 구형 코어와 신형 런타임을 혼용하면 렌더링 불일치가 생길 수 있다고 경고합니다.
• 라이선스: 본 프로젝트는 MIT 라이선스로 배포되며, 저장소 관련 공식 암호화폐나 토큰 발행은 존재하지 않습니다.

출처

• GitHub: thesysdev/openui