wandb/openui

OpenUI let's you describe UI using your imagination, then see it rendered live.

What it solves

사용자 인터페이스(UI) 컴포넌트를 수동으로 만드는 것은 종종 느리고 번거로운 작업입니다. OpenUI는 사용자가 원하는 인터페이스를 자연어로 설명하고 즉시 렌더링을 확인할 수 있게 함으로써 이 과정을 단순화하고, 애플리케이션 개발의 프로토타이핑 및 디자인 단계 속도를 높여줍니다.

How it works

OpenUI는 대규모 언어 모델(LLM)을 사용해 자연어 설명을 UI 코드로 변환합니다. LiteLLM을 통해 다양한 모델 제공자와 통합되며, OpenAI, Groq, Gemini, Anthropic 및 Ollama를 통한 로컬 모델을 지원합니다. 사용자는 UI를 설명하고 반복적인 변경을 요청하며, 생성된 HTML을 React, Svelte, Web Components와 같은 다양한 프레임워크로 변환할 수 있습니다.

Who it’s for

AI를 활용해 UI 컴포넌트를 빠르게 프로토타이핑하고자 하는 개발자와 디자이너, 그리고 v0와 같은 도구의 오픈소스 대안을 찾는 팀을 위한 도구입니다.

Highlights

  • Live Rendering: 텍스트 설명을 기반으로 UI 컴포넌트를 실시간으로 렌더링합니다.
  • Multi-Framework Support: 생성된 HTML을 React, Svelte, Web Components로 변환합니다.
  • Broad Model Compatibility: 전용 API와 Ollama를 통한 로컬 모델을 포함한 다양한 LLM을 지원합니다.
  • Iterative Design: 렌더링된 UI에 대해 구체적인 변경을 요청하여 디자인을 정교화할 수 있습니다.

관련

  • 프로젝트
    thesysdev/openui

    OpenUI는 LLM이 간결한 언어(OpenUI Lang)를 사용하여 UI 구성 요소를 생성할 수 있게 해주는 프레임워크에 구애받지 않고 스트리밍 우선인 UI 라이브러리입니다. React, Vue, Svelte, Angular용 파서, 프롬프트 생성기, 런타임 바인딩과 앱 스캐폴딩용 CLI를 제공합니다. 이 언어는 JSON보다 토큰 사용량을 약 50% 줄여 모델 생성 인터페이스의 점진적 렌더링을 가능하게 합니다.

  • 프로젝트
    AGenUI/AGenUI

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

  • 프로젝트
    assistant-ui/assistant-ui

    assistant‑ui는 AI 어시스턴트를 위한 합성 가능하고 프로덕션 준비된 채팅 UI 구성 요소를 제공하는 TypeScript/React 라이브러리입니다. 타입이 지정된 런타임을 통해 다양한 LLM 백엔드와 함께 작동하며, 스트리밍, 마크다운, 도구 호출 렌더링을 처리하고 Next.js 프로젝트에 UI를 스캐폴딩하거나 주입하는 CLI를 제공합니다. MIT 라이선스이며 Y Combinator의 지원을 받습니다.

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

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