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

> Clean Markdown view of GeekNews topic #27570. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=27570](https://news.hada.io/topic?id=27570)
- GeekNews Markdown: [https://news.hada.io/topic/27570.md](https://news.hada.io/topic/27570.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2026-03-17T09:36:02+09:00
- Updated: 2026-03-17T09:36:02+09:00
- Original source: [github.com/CopilotKit](https://github.com/CopilotKit/OpenGenerativeUI)
- Points: 35
- Comments: 3

## Summary

클로드가 이 기능 출시한지 얼마 되지도 않았는데, 바로 오픈소스로 구현했네요. AI가 텍스트뿐 아니라 **차트·다이어그램·3D 장면 등 시각 자료를 직접 생성**하도록 설계된 오픈소스 프레임워크입니다. CopilotKit과 LangGraph를 결합해 사용자의 프롬프트를 분석하고, 적절한 시각화 기술(SVG·Chart.js·Three.js 등)을 자동 선택해 **샌드박스 iframe** 안에서 안전하게 렌더링합니다.

## Topic Body

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

## Comments



### Comment 53220

- Author: beoks
- Created: 2026-03-17T15:01:29+09:00
- Points: 1

생성한 html을 iframe 안에서 렌더링하는 방식이군요

### Comment 53181

- Author: xguru
- Created: 2026-03-17T10:17:38+09:00
- Points: 1

클로드가 이 기능 출시한지 얼마 되지도 않았는데, 바로 오픈소스로 구현했네요.   
  
컨트리뷰터에 클로드가 있는 것도 재미나네요 ㅎㅎ  
클로드가 출시한 기능을 그대로 구현하는데 도움주는 클로드..

### Comment 53189

- Author: kissdesty
- Created: 2026-03-17T10:59:23+09:00
- Points: 2
- Parent comment: 53181
- Depth: 1

클로드코드를 사용해서 commit 하면 기본설정으로 컨트리뷰터에 자동으로 붙어서 나온다고 하더라고요.