OpenGenerativeUI — Claude의 시각 자료 생성을 오픈소스로 재현한 구조

Claude가 대화 중에 차트나 다이어그램을 생성하는 기능을 출시하자마자, CopilotKit이 같은 걸 오픈소스로 만들었다. 출시부터 구현까지 걸린 시간이 짧다. 리포 컨트리뷰터에 Claude가 올라가 있다는 것도 재미있다 — Claude Code로 커밋하면 자동으로 붙는다.

핵심은 단순하다. 사용자가 프롬프트를 입력하면 AI 에이전트가 HTML을 생성하고, 그걸 iframe에서 렌더링한다.

모노레포 구조

Turborepo 기반으로 세 패키지가 들어있다.

apps/app — Next.js 16 + React 19 + Tailwind CSS 4 프론트엔드. CopilotKit의 채팅 UI(<CopilotChat>)로 사용자 입력을 받고, useComponent 훅으로 생성된 HTML을 샌드박스 iframe에 렌더링한다.

apps/agent — Python 에이전트. LangGraph + CopilotKit SDK를 사용한다. 여기서 "Deep Agents"라는 개념이 나오는데, 에이전트가 스킬 목록에서 적합한 시각화 방식을 선택하는 구조다.

apps/mcp — MCP(Model Context Protocol) 서버. 디자인 시스템과 스킬 정보를 에이전트에게 제공한다.

에이전트의 시각화 결정

프롬프트가 들어오면 에이전트가 판단한다. 텍스트로 답할지, 시각 컴포넌트를 만들지.

시각화가 필요하다고 판단하면, 요청 유형에 따라 기술을 선택한다. 프로세스 설명이면 SVG 플로우차트. 데이터 비교면 Chart.js 바차트. 알고리즘이면 Canvas 애니메이션. 3D 표현이면 Three.js. 네트워크 그래프면 D3.js. 이 결정 매트릭스가 에이전트 프롬프트에 내장되어 있다.

생성되는 건 완전한 HTML 문서다. <script> 태그로 CDN 라이브러리를 로드하고, 인라인 JavaScript로 시각화를 그린다. React 컴포넌트가 아니라 순수 HTML이다.

iframe 샌드박스 렌더링

생성된 HTML은 <iframe sandbox> 안에서 실행된다. 메인 페이지와 완전히 격리된다.

프론트엔드의 widgetRenderer 훅이 이 과정을 처리한다. 스켈레톤 로딩 → HTML 주입 → ResizeObserver로 자동 높이 조정 → 페이드인 애니메이션. 라이트/다크 테마도 자동 감지해서 적용한다.

iframe을 쓰는 건 보안 때문이다. AI가 생성한 코드를 메인 페이지 DOM에 직접 주입하면 XSS 위험이 있다. sandbox 속성으로 allow-scripts만 열고 나머지(top-navigation, same-origin 등)는 막는다.

beoks의 댓글이 핵심을 짚었다

"생성한 html을 iframe 안에서 렌더링하는 방식이군요." 맞다. 이게 전체 아키텍처의 핵심이다. AI가 무슨 기술을 쓰든(Chart.js든 Three.js든 D3든) 최종 산출물은 HTML 문자열이고, 그걸 격리된 iframe에 넣는다. 단순하지만 효과적인 설계다.

이 방식의 장점은 프론트엔드가 AI의 출력 형식을 미리 알 필요가 없다는 거다. HTML이기만 하면 된다. 새로운 시각화 유형을 추가할 때 프론트엔드 코드를 건드릴 필요가 없다.

지원하는 시각화 종류

알고리즘 시각화(이진 탐색, BFS/DFS, 정렬), 3D 애니메이션(Three.js/WebGL/CSS3D), 차트(Chart.js — 파이, 바, 라인), 다이어그램(SVG 플로우차트, 네트워크 그래프), 위젯(폼, 수학 그래프, 대화형 도구), 사운드(Tone.js 신디사이저).

범위가 넓다. 근데 결국 에이전트가 생성하는 건 HTML+JS 코드다. 품질은 LLM의 코드 생성 능력에 100% 의존한다.

솔직한 평가

아이디어 자체는 좋다. Claude의 기능을 오픈소스로 가져왔다는 점에서 가치가 있다.

근데 현실적인 한계가 보인다.

에이전트 품질이 LLM에 종속된다. 시각화 결정, HTML 생성, 에러 핸들링 — 전부 프롬프트 엔지니어링 수준에 달려있다. 모델이 바뀌면 결과가 달라진다.

Python 에이전트가 필수다. 프론트만 떼서 쓸 수 없다. LangGraph + CopilotKit Python SDK가 백엔드에 필요하다. 배포 복잡도가 올라간다.

Star 1.1K, 출시 직후. Claude 기능 출시와 거의 동시에 나왔으니 코드 성숙도는 아직 검증이 필요하다.

xguru가 말한 대로, "클로드가 출시한 기능을 그대로 구현하는데 도움주는 클로드" — 이 상황 자체가 현재 AI 생태계를 잘 보여준다.