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

xguru · 2026-03-17T09:36:02+09:00

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 라이선스

(github.com/CopilotKit)

35P by xguru 3달전 | ★ favorite | 댓글 3개

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 라이선스