openui

OpenUI는 AI 모델이 일반 텍스트 대신 구조화되고 상호작용 가능한 사용자 인터페이스를 생성하는 생성 UI 애플리케이션을 구축하기 위한 오픈소스 프레임워크입니다. 핵심에는 모델 생성 UI 출력을 위해 특별히 설계된 간결하고 스트리밍 우선 언어인 OpenUI Lang이 있습니다. 이 프레임워크는 렌더러에 구애받지 않아 단일 프론트엔드 프레임워크에 얽매이지 않지만, 공식 React 지원과 Vue 3 및 Svelte 5용 커뮤니티 유지 바인딩을 제공합니다. 중앙 워크플로우는 간단합니다. 개발자가 컴포넌트 라이브러리(차트, 폼, 테이블, 레이아웃 등)를 정의하거나 재사용하면, OpenUI가 해당 라이브러리에서 시스템 프롬프트를 생성하고, 프롬프트가 LLM에 전송되며, 모델이 OpenUI Lang 출력을 클라이언트로 스트리밍하여 렌더러가 토큰이 도착할 때 UI를 점진적으로 파싱하고 렌더링합니다. 이 스트리밍 우선 설계는 사용자가 완전한 응답을 기다리는 대신 인터페이스가 실시간으로 구축되는 것을 볼 수 있게 합니다. 주요 차별점은 토큰 효율성입니다. 일곱 가지 UI 시나리오에서 tiktoken(GPT-5 인코더)으로 측정한 벤치마크에 따르면, OpenUI Lang은 동등한 JSON 기반 형식보다 최대 67% 적은 토큰을 사용하며, Vercel의 JSON-Render 대비 평균 약 52.8%, Thesys C1 JSON 대비 51.7% 감소했습니다. 낮은 토큰 수는 지연 시간 감소, API 비용 절감, 첫 픽셀까지의 시간 단축으로 이어집니다. 프로젝트는 여러 패키지로 구성된 모노레포로 구성됩니다. @openuidev/lang-core는 React, Vue, Svelte 의존성 없이 프레임워크에 구애받지 않는 파싱, 프롬프트 생성, 런타임 평가를 제공합니다. @openuidev/react-lang는 React 렌더링 런타임, 컴포넌트 라이브러리 정의, 프롬프트 생성을 처리합니다. @openuidev/react-headless는 자체 UI를 원하는 팀을 위한 헤드리스 채팅 상태 관리 및 스트리밍 어댑터를 제공합니다. @openuidev/react-ui는 사전 구축된 채팅 레이아웃과 두 가지 내장 컴포넌트 라이브러리를 제공하여 가장 빠른 경로로 작동하는 채팅 경험을 구현합니다. @openuidev/react-email는 모델 생성 이메일용 React Email 컴포넌트 정의를 추가합니다. @openuidev/langchain는 LangChain 및 LangGraph 에이전트와 통합되어 AG-UI를 통해 OpenUI를 스트리밍합니다. @openuidev/browser-bundle는 CDN, iframe, 빌드 없는 임베드를 위한 사전 빌드된 스크립트 태그 번들을 제공합니다. @openuidev/cli는 새 프로젝트를 스캐폴딩하고 라이브러리 정의에서 시스템 프롬프트 또는 JSON 스키마를 생성합니다. 컴포넌트 계약은 Zod 스키마로 정의되어 사전에 타입이 지정된 props와 구조를 제공합니다. 프레임워크는 내장 데이터 페칭, 다중 플랫폼 출력(웹, 모바일, 이메일), 일관된 출력 형식을 지원합니다. 기본 컴포넌트 라이브러리로 실시간 실험을 위한 Playground가 openui.com/playground에서 제공됩니다. OpenUI는 또한 Claude Code, Codex, Cursor, Copilot과 같은 AI 코딩 어시스턴트와 통합되는 에이전트 스킬을 제공하며, 컴포넌트 라이브러리 설계, OpenUI Lang 구문, 시스템 프롬프트 생성, 렌더러, SDK 패키지, 잘못된 LLM 출력 디버깅을 다룹니다. 프로젝트는 MIT 라이선스로 Thesys가 유지 관리하며, 활발한 Discord 커뮤니티와 증가하는 채택자 목록을 보유하고 있습니다.