Open Generative UI 소개
AI 챗봇에게 무언가를 물어보면 대개 텍스트로 답이 돌아옵니다. 하지만 정렬 알고리즘의 동작, 분기별 매출 추이, 3D 구조처럼 글보다 그림과 상호작용으로 보는 편이 훨씬 이해가 빠른 주제가 많습니다. 이런 경우 답을 문단으로 설명하는 대신, 그 자리에서 차트나 다이어그램, 애니메이션을 만들어 보여줄 수 있다면 어떨까요?
Open Generative UI는 이 아이디어를 구현한 오픈소스 프로젝트로, CopilotKit과 LangChain Deep Agents를 결합해 생성형 UI(generative UI) 를 만듭니다. 사용자가 대화로 요청하면 에이전트가 텍스트 대신 살아있는 HTML/SVG 컴포넌트를 만들어 샌드박스 iframe 안에 렌더링 합니다. 알고리즘 시각화, 3D 장면, 차트, 인터랙티브 위젯 등이 모두 자동 라이트/다크 테마와 반응형 크기로 표시됩니다. CopilotKit 팀이 공개했으며, 이를 어떻게 구성하는지 보여주는 쇼케이스이자 재사용 가능한 참조 구현입니다.
이번 글에서는 Open Generative UI가 어떤 결과물을 만드는지, 대화가 화면으로 바뀌는 동작 흐름은 어떠한지, 그리고 저장소 구조와 실행 방법을 정리합니다. 프로젝트는 Turborepo 모노레포로 구성되며, 프런트엔드와 에이전트, 그리고 자체 호스팅 가능한 MCP 서버를 함께 담고 있습니다.
Open Generative UI가 만드는 결과물
Open Generative UI의 에이전트는 단순한 텍스트 응답이 아니라 완전히 상호작용하는 시각 컴포넌트를 만듭니다. 이진 탐색이나 BFS 대 DFS 같은 알고리즘 시각화, WebGL 기반 3D 애니메이션, 원형·막대·네트워크 차트, 그리고 폼이나 시뮬레이션 같은 위젯이 여기에 해당합니다. 모든 결과물은 샌드박스 iframe 안에서 렌더링되며, 점진적으로 나타나는 애니메이션과 반응형 크기 조정을 기본으로 합니다.
흥미로운 점은 에이전트가 요청의 성격에 따라 표현 방식을 스스로 고른다는 것입니다. 저장소의 결정 매트릭스를 보면, 과정 설명에는 SVG 순서도를, 시간에 따른 추세에는 Chart.js 선 그래프를, 3D 시각화에는 Three.js를, 그리고 단순한 사실 질문에는 그냥 텍스트를 고르는 식으로 출력 유형과 기술이 대응됩니다.
Open Generative UI의 동작 흐름
대화가 화면으로 바뀌는 과정은 여러 단계로 이어집니다. 아래 그림은 그 흐름을 정리한 것입니다.
사용자가 CopilotKit 채팅으로 프롬프트를 보내면, Deep Agent가 텍스트로 답할지, 도구를 호출할지, 시각 컴포넌트를 렌더링할지를 판단합니다. 시각 컴포넌트가 필요하면 generateSandboxedUi 도구가 css, html, jsFunctions 같은 파라미터를 순서대로 스트리밍하고, OpenGenerativeUIMiddleware 가 이 스트리밍 호출을 프런트엔드가 구독하는 활동 이벤트로 변환합니다. 프런트엔드는 스트리밍되는 HTML을 미리보기 iframe에 실시간으로 반영하다가, 최종적으로 디자인 시스템 CSS가 주입된 샌드박스 iframe을 띄웁니다. iframe 안의 UI는 검증된 브리지 함수로 호스트와 통신하고, 내부의 ResizeObserver가 콘텐츠 높이를 계속 보고해 화면 크기를 자동으로 맞춥니다.
에이전트 자체는 LangChain Deep Agents(create_deep_agent)를 기반으로 하며, 스킬 기반 구조를 씁니다. 모든 시각화 지침을 시스템 프롬프트에 밀어 넣는 대신, apps/agent/skills/ 아래에 SKILL.md 파일로 정의해 필요할 때만 불러오는 점진적 공개(progressive disclosure) 방식을 사용합니다. Deep Agents는 계획 수립(write_todos), 파일시스템 도구, 서브 에이전트 기능도 함께 제공합니다.
Open Generative UI의 구조와 MCP 서버
저장소는 Turborepo 모노레포로, 세 개의 앱으로 나뉩니다. apps/app 은 Next.js 16과 CopilotKit v2, React 19, Tailwind 4로 만든 프런트엔드이고, apps/agent 는 deepagents와 CopilotKit 미들웨어를 쓰는 에이전트, apps/mcp 는 독립 실행형 MCP 서버입니다.
이 MCP(Model Context Protocol) 서버는 디자인 시스템과 스킬 지침, HTML 문서 조립기를 다른 MCP 호환 클라이언트에 노출합니다. HTML 조각을 디자인 시스템 CSS와 브리지 JS로 감싸 iframe에서 바로 쓸 수 있는 문서로 만들어 주는 assemble_document 도구가 대표적이며, Claude Desktop, Claude Code, Cursor 같은 클라이언트에 붙여 쓸 수 있습니다.
Open Generative UI 설치와 실행
설치와 실행은 저장소의 Makefile로 진행합니다.
make setup # 의존성 설치 + .env 템플릿 생성
# apps/agent/.env 에 Anthropic API 키 입력
make dev # 전체 서비스 실행
실행하면 프런트엔드는 http://localhost:3000, 에이전트는 http://localhost:8123 에서 뜹니다. 한 가지 유의할 점은 생성형 UI가 한 번에 복잡하고 잘 구조화된 HTML/SVG를 만들어야 하므로 성능이 높은 모델이 필요하다 는 것입니다. 기본값은 Anthropic Claude(claude-fable-5)이고 claude-opus-4-6 을 강력한 대안으로 제시하며, LLM_MODEL 을 gpt-* 이름으로 바꾸면 OpenAI로 라우팅됩니다. 만든 이들은 작거나 약한 모델은 깨진 레이아웃이나 불완전한 시각화를 낼 수 있다고 밝히고 있습니다.
Open Generative UI의 라이선스
Open Generative UI는 MIT 라이선스로 공개되어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.
Open Generative UI 공식 홈페이지
Open Generative UI 프로젝트 GitHub 저장소
이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. 
파이토치 한국 사용자 모임
이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일
로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. 
아래
쪽에 좋아요
를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ 