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