Skip to content

OpenGenerativeUI

AI기반 생성형 UI 프레임워크 오픈소스

About

  • Claude가 출시한 인터랙티브 시각 자료 생성 기능을 그대로 구현
  • 단순 텍스트 응답이 아닌 차트, 다이어그램, 시각화 등의 자료를 자동 생성하는 Generative UI
    • 알고리듬 시각화: 이진 탐색, BFS/DFS, 정렬 등
    • 3D 애니메이션: WebGL/CSS3D 기반 인터랙티브 장면
    • 차트 및 다이어그램: 파이차트, 바차트, 네트워크 다이어그램 등
    • 위젯 및 시뮬레이션: 폼, 수학 그래프, 대화형 도구 등
  • 모든 시각 요소는 샌드박스 iframe 내에서 렌더링되어 보안성과 독립성 확보
    • 자동 라이트/다크 테마, 점진적 애니메이션, 반응형 크기 조정 지원
  • CopilotKit과 LangGraph 기반으로 대화형 시각 콘텐츠를 실시간으로 생성
    • Turborepo 기반 모노레포 구조로 구성
    • apps/app: Next.js 16, React 19, Tailwind 4 기반 프런트엔드
    • apps/agent: LangGraph와 CopilotKit 미들웨어를 사용하는 Python 에이전트
  • 작동 방식
    • 사용자가 CopilotKit 채팅 UI를 통해 프롬프트 입력
    • 에이전트가 텍스트, 도구 호출, 또는 시각 컴포넌트 중 적절한 응답 형태를 결정
    • 프런트엔드의 widgetRenderer 훅이 HTML을 받아 iframe으로 렌더링
    • Skeleton 로딩 후 부드러운 페이드인 처리 및 자동 높이 조정 수행
  • 시각화 결정 매트릭스 제공
    • 요청 유형에 따라 SVG, HTML, Chart.js, Three.js, D3.js 등 적합한 기술 자동 선택
    • 예: 프로세스 설명은 Flowchart, 데이터 비교는 Bar chart, 3D 표현은 Three.js 활용
  • MIT 라이선스

See also

Favorite site