LLM Wiki

Open Generative UI: AI 에이전트가 대화로 인터랙티브 UI를 생성하는 오픈소스 프로젝트

Properties2
descriptionPyTorchKR 9bow 게시글의 핵심 내용과 실무적 의미를 원문에 근거해 정리한다.
tagsai-models, open-source, research

5 min read

출처

개요

Open Generative UI는 AI 에이전트가 사용자의 대화형 요청을 바탕으로 차트, 다이어그램, 애니메이션, 3D 장면, 위젯 등 인터랙티브 UI를 생성하는 오픈소스 프로젝트입니다. CopilotKit과 LangChain Deep Agents를 결합하며, 생성된 HTML/SVG 컴포넌트를 샌드박스 iframe에서 렌더링합니다. 에이전트는 요청의 성격에 따라 텍스트, SVG, Chart.js, Three.js 등 적절한 표현 방식을 선택합니다. 프로젝트는 프런트엔드, 에이전트, MCP 서버를 포함한 Turborepo 모노레포 형태로 구성되어 있습니다.

핵심 포인트

  • 사용자의 자연어 요청에 따라 알고리즘 시각화, 차트, 3D 애니메이션, 폼, 시뮬레이션 등의 UI를 생성합니다.
  • generateSandboxedUi 도구가 CSS, HTML, JavaScript 함수를 스트리밍하고, 프런트엔드는 이를 미리보기 iframe에 실시간 반영합니다.
  • 생성된 UI는 샌드박스 iframe에서 실행되며, 브리지 함수와 ResizeObserver를 통해 호스트 애플리케이션과 통신하고 크기를 자동 조정합니다.
  • LangChain Deep Agents의 계획 수립, 파일시스템 도구, 서브 에이전트 기능과 함께 apps/agent/skills/의 SKILL.md 기반 점진적 공개 방식을 사용합니다.
  • apps/app은 Next.js·CopilotKit 기반 프런트엔드, apps/agent는 에이전트, apps/mcp는 디자인 시스템과 HTML 조립 기능을 제공하는 독립 MCP 서버입니다.
  • MCP 서버의 assemble_document 도구를 통해 Claude Desktop, Claude Code, Cursor 등 MCP 호환 클라이언트에서 생성형 UI 기능을 활용할 수 있습니다.
  • MIT 라이선스로 공개되어 개인 및 상업적 용도로 사용할 수 있으며, 복잡한 HTML/SVG 생성을 위해 성능이 높은 모델이 필요하다고 설명합니다.

왜 중요한가

Open Generative UI는 AI 응답을 텍스트에 한정하지 않고, 질문의 성격에 맞는 시각적이고 조작 가능한 결과물로 확장하는 참조 구현입니다. 특히 에이전트, 생성형 UI, MCP 서버, 샌드박스 렌더링을 하나의 프로젝트에서 연결해 보여주므로 대화형 애플리케이션 설계와 재사용 가능한 UI 생성 구조를 검토할 때 참고할 수 있습니다. 다만 생성 품질은 사용 모델에 영향을 받으며, 원문에서도 작은 모델이나 성능이 낮은 모델은 레이아웃이 깨지거나 시각화가 불완전할 수 있다고 설명합니다.

실행 정보

make setup
# apps/agent/.env에 Anthropic API 키 입력
 
make dev
  • 프런트엔드: http://localhost:3000
  • 에이전트: http://localhost:8123
  • 기본 모델 및 지원 모델 설정은 저장소의 환경 변수와 문서를 확인해야 합니다.

후속 링크 및 키워드

관련 위키

원문 보존 위치

원문 전체는 raw source: 2026-07-27-pytorchkr-topic-11345-open-generative-ui-ai-ui에 source_url 및 HTML 원문과 함께 저장되어 있습니다.