OpenGenerativeUI 살펴보기: Claude식 인터랙티브 시각화를 직접 구현하는 오픈소스

AI 챗봇은 텍스트 답변을 잘 만듭니다. 하지만 어떤 정보는 문장보다 시각 자료로 볼 때 더 빨리 이해됩니다.
알고리듬 동작 과정, 데이터 비교, 프로세스 설명, 3D 구조, 인터랙티브 도구가 그렇습니다. 이런 내용은 긴 텍스트보다 화면에 직접 보이는 UI로 전달할 때 이해하기 쉽습니다.

OpenGenerativeUI는 Claude의 인터랙티브 시각 자료 생성 경험과 비슷한 기능을 오픈소스로 구현한 프레임워크입니다.
이 프로젝트는 AI 에이전트가 필요에 따라 차트·다이어그램·애니메이션·위젯을 생성해서 보여주는 구조를 실제 코드로 보여줍니다.

OpenGenerativeUI는 무엇인가요?

OpenGenerativeUI는 AI가 대화 중에 생성형 UI(Generative UI) 를 직접 만들어 보여주는 오픈소스 쇼케이스입니다.
기반 스택은 CopilotKit과 LangChain Deep Agents(스킬 기반 에이전트, LangGraph 계열 스택)입니다.

동작 순서는 다음과 같습니다.

사용자가 프롬프트를 입력합니다
에이전트가 어떤 응답 형식이 적절한지 판단합니다
텍스트로 답할지,
도구를 호출할지,
아니면 시각 컴포넌트를 생성할지 결정합니다
생성된 결과를 프런트엔드가 렌더링합니다

이 프로젝트는 AI가 상황에 맞는 인터페이스를 직접 만드는 방식을 실험합니다.

왜 생성형 UI를 살펴보나요?

모델 성능만으로 AI 제품을 차별화하기가 어려워지고 있습니다.
그래서 다음 질문이 제품을 비교하는 기준에 추가됩니다.

이 AI는 답을 어떻게 보여주는가
텍스트를 넘어서 도구처럼 작동하는가
사용자의 이해 비용을 얼마나 줄여주는가

OpenGenerativeUI는 챗봇 답변 대신 대화형 결과물을 만드는 방식을 전면에 둡니다.

예를 들어 사용자가 이런 요청을 했다고 해봅시다.

“이진 탐색 과정을 보여줘”
“BFS와 DFS 차이를 시각적으로 설명해줘”
“막대 차트로 비교해줘”
“간단한 3D 장면으로 보여줘”
“대화형 계산기 형태로 만들어줘”

이때 AI는 텍스트 대신 화면으로 보는 답변을 생성합니다.

어떤 걸 만들 수 있나요?

공개된 설명에 따르면 OpenGenerativeUI는 다음 형태를 다룹니다.

알고리듬 시각화
- 이진 탐색
- BFS / DFS
- 정렬 알고리듬
차트 및 다이어그램
- 바 차트
- 파이 차트
- 네트워크 다이어그램
- 플로우차트
3D 애니메이션
- WebGL / CSS3D 기반 장면
위젯 및 시뮬레이션
- 수학 그래프
- 폼 UI
- 대화형 도구

차트뿐 아니라 폼 UI와 대화형 도구까지 포함하므로, 프롬프트로 인터페이스를 생성하는 도구에 가깝습니다.

구조는 어떻게 되어 있나

이 저장소는 Turborepo 모노레포이고, 공식 README 기준으로 앱은 세 갈래로 나뉩니다.

경로	역할
`apps/app`	Next.js 16, React 19, Tailwind 4, CopilotKit v2 프런트
`apps/agent`	Deep Agent(스킬 온디맨드 로딩), CopilotKit 미들웨어
`apps/mcp`	디자인 시스템·스킬·문서 조립을 노출하는 자체 호스팅 MCP 서버

요청이 흘러가는 순서는 아래와 같습니다. 모바일에서도 읽히도록 위에서 아래로 배치했습니다.

%%{init: {'flowchart': {'curve': 'basis', 'padding': 12}}}%%
flowchart TB
    subgraph in["입력"]
        A["사용자 프롬프트"]
    end
    subgraph fe["프런트 · apps/app"]
        B["CopilotKit 채팅 UI"]
    end
    subgraph ag["에이전트 · apps/agent"]
        C["Deep Agent<br/>스킬 참조·도구 선택"]
    end
    subgraph out["출력"]
        D{"응답 방식"}
        E["텍스트 답변"]
        F["도구 / Action"]
        G["HTML·SVG 등 시각 UI"]
        H["iframe sandbox<br/>widgetRenderer"]
    end
    A --> B
    B --> C
    C --> D
    D -->|텍스트| E
    D -->|도구| F
    D -->|시각화| G
    G --> H

프런트는 에이전트가 넘긴 마크업을 useComponent 등 CopilotKit 패턴으로 받아, 샌드박스 iframe에 그립니다.
에이전트는 apps/agent/skills/ 아래 SKILL.md를 필요할 때만 읽는 방식(프로그레시브 디스클로저)으로 프롬프트 비용을 줄입니다.

에이전트는 무엇을 그릴지 정하고, 프런트는 결과를 안전하게 표시하는 방법을 맡습니다.

설치 및 로컬 실행

공식 저장소는 Make + pnpm 조합으로 한 번에 실행하도록 구성되어 있습니다. 순서는 다음과 같습니다.

1. 저장소 받기

git clone https://github.com/CopilotKit/OpenGenerativeUI.git
cd OpenGenerativeUI

2. 의존성과 환경 파일 준비

make setup

make setup은 워크스페이스 의존성을 설치하고, 에이전트용 .env 템플릿을 만듭니다.
이후 **apps/agent/.env**를 열어 API 키와 모델 이름을 실제 값으로 채웁니다.

생성형 UI는 한 번에 잘 짜인 HTML/SVG를 만들어야 합니다. 그래서 README는 작은 모델보다 상위 모델을 쓰라고 권장합니다. LLM_MODEL에는 OpenAI의 gpt-5.4 계열, Anthropic claude-opus-4-6, Google gemini-3.1-pro 같은 고역량 모델을 지정합니다.

3. 개발 서버 실행

make dev

기본 주소는 다음과 같습니다.

서비스	URL
웹 앱(Next.js)	http://localhost:3000 ↗
에이전트 API	http://localhost:8123 ↗

자주 쓰는 Make 타깃은 다음과 같습니다.

명령	설명
`make setup`	의존성 설치 + `.env` 템플릿 생성
`make dev`	프런트 + 에이전트 + MCP 등 전부 기동
`make dev-app`	Next.js(`apps/app`)만
`make dev-agent`	에이전트(`apps/agent`)만
`make dev-mcp`	MCP 서버(`apps/mcp`)만
`make build` / `make lint` / `make clean`	빌드·린트·정리
`make help`	나머지 타깃 확인

Turbo 루트에서 pnpm dev, pnpm dev:app, **pnpm dev:agent**처럼 pnpm을 직접 써도 됩니다.

사용법

웹 앱에서 시각화 요청하기

make dev로 서버를 실행한 뒤 브라우저에서 http://localhost:3000 ↗ 으로 접속합니다.
CopilotKit 채팅에 원하는 산출물을 구체적으로 적습니다. 저장소 예시와 비슷한 요청이 잘 동작합니다.
- “이진 탐색 과정을 단계별로 보여줘”
- “BFS와 DFS를 같은 화면에서 비교해줘”
- “막대 차트로 A·B·C 지표를 비교해줘”
- “간단한 3D 장면으로 설명해줘”
에이전트가 텍스트, 도구, HTML/SVG 위젯 중 하나를 고릅니다. 프런트는 결과를 샌드박스 iframe 안에 렌더링합니다. 로딩 중에는 스켈레톤이 표시되고, 로드 후에는 높이가 자동으로 조정됩니다.

(선택) MCP 클라이언트에 붙이기

같은 모노레포의 **apps/mcp**는 디자인 시스템, 스킬 리소스, assemble_document 도구를 노출합니다.
Claude Desktop·Claude Code·Cursor 같은 MCP 호환 클라이언트에 연결할 수 있습니다.

stdio(Claude Desktop 예시): node dist/stdio.js를 실행하도록 claude_desktop_config.json에 서버를 등록하고, cwd를 본인 머신의 apps/mcp 경로로 맞춥니다.
HTTP: apps/mcp에서 pnpm dev로 서버를 실행한 뒤, 클라이언트 설정에 http://localhost:3100/mcp 같은 엔드포인트를 적습니다.

세부 옵션과 Docker 배포 방법은 저장소의 apps/mcp/README.md ↗에 있습니다.

생성된 UI는 iframe sandbox에서 렌더링됩니다

OpenGenerativeUI는 생성된 UI를 iframe sandbox 안에서 렌더링합니다.

AI가 만든 HTML이나 스크립트를 페이지에 그대로 주입하면 보안 문제가 생길 수 있습니다.
iframe sandbox는 생성된 코드를 호스트 페이지와 분리합니다.

OpenGenerativeUI의 렌더링 방식은 다음과 같습니다.

시각 요소를 샌드박스 iframe 안에서 렌더링
보안성과 독립성 확보
자동 높이 조정
Skeleton 로딩 후 자연스러운 페이드인
라이트/다크 테마 대응
반응형 크기 조정

자동 높이 조정, 로딩 상태, 테마 대응은 데모보다 실제 제품의 렌더링 요구 사항에 가깝습니다.

Tip 생성형 UI를 직접 만든다면 결과물의 모양보다 렌더링 경계를 먼저 정합니다. OpenGenerativeUI는 그 경계로 iframe sandbox를 사용합니다.

요청 유형에 따라 시각화 기술을 고릅니다

OpenGenerativeUI는 요청 유형에 따라 다른 기술을 사용합니다.

예를 들어:

프로세스 설명 → Flowchart
데이터 비교 → Bar chart
3D 표현 → Three.js
인터랙션 중심 → HTML 기반 위젯
관계 시각화 → SVG / D3 / 네트워크 그래프

모든 시각화에 같은 도구를 쓰면 결과가 어색해집니다.
이 프로젝트는 생성 기능과 함께 어떤 요청에 어떤 시각 표현이 맞는지를 규칙으로 정해 둡니다.

이 프로젝트가 보여주는 흐름

OpenGenerativeUI는 AI 제품의 다음 변화를 보여줍니다.

1. 챗봇에서 인터페이스로 이동

AI가 텍스트를 반환하는 데서 그치지 않고, 필요하면 UI를 직접 만듭니다.

2. 에이전트와 UI의 결합

에이전트가 판단한 결과를 실행 가능한 시각 인터페이스로 돌려줍니다.

3. 생성형 UI의 독립 앱 패턴 가능성

지금은 기능 하나로 보이지만, 생성형 UI가 독립적인 앱 패턴이 될 수도 있습니다.

예를 들어:

데이터 탐색 UI 자동 생성
교육용 시뮬레이터 자동 생성
시각 설명 도구 자동 생성
대화형 내부 업무 도구 자동 생성

그동안 AI 제품은 주로 다음 질문으로 비교됐습니다.

누가 더 똑똑한가
누가 더 긴 문맥을 처리하는가
누가 더 정확한 답을 말하는가

생성형 UI가 늘어나면 다음 질문이 추가될 수 있습니다.

누가 더 잘 보여주는가
누가 더 좋은 상호작용을 제공하는가
누가 더 자연스러운 UI를 생성하는가

OpenGenerativeUI로 이 방식을 로컬에서 직접 실행해 볼 수 있습니다.

실제로 어디에 유용할까

제가 보기에 다음 영역에 잘 맞습니다.

교육/학습

알고리듬, 수학, 과학 개념처럼 설명보다 시각화가 이해에 더 도움이 되는 주제에 맞습니다.

데이터 설명

숫자나 비교 중심 정보는 텍스트보다 차트나 인터랙티브 요소로 볼 때 빨리 이해됩니다.

온보딩/가이드

사용 방법, 프로세스 설명, 단계별 흐름 안내에 쓸 수 있습니다.

AI 에이전트 제품

텍스트 답변만으로 차별화하기 어려운 AI 제품에 생성형 UI를 더할 수 있습니다.

주의 생성형 UI를 실서비스에 넣는다면 렌더링 안정성, 보안 경계, 성능, 실패 시 fallback UX를 함께 설계합니다.

한계

1. 유지보수 난도가 높습니다

UI 생성은 텍스트 답변보다 복잡합니다.
렌더링, 보안, 오류 처리, 상태 관리까지 함께 고려해야 합니다.

2. 요청 해석이 잘못되면 UI도 어색해집니다

AI가 시각 표현을 잘못 고르면 텍스트보다 더 혼란스러운 결과가 나올 수 있습니다.

3. 제품화하려면 품질 관리가 필요합니다

데모에서 좋은 결과가 한두 번 나오는 것과 항상 안정적으로 동작하는 제품을 만드는 것은 다른 문제입니다.
OpenGenerativeUI는 실험 단계의 쇼케이스이며, 제품에 쓰려면 이 차이를 직접 메워야 합니다.

마무리

OpenGenerativeUI는 AI가 시각적 결과물과 인터페이스를 직접 생성하는 방식을 오픈소스 코드로 보여줍니다.

구성 요소는 CopilotKit, Deep Agent·스킬 구조, iframe sandbox, 요청 유형별 시각화 규칙입니다.
아직 실험적인 프로젝트이지만, 대화형 AI의 응답을 UI로 확장하는 구조를 직접 실행하고 코드로 확인할 수 있습니다.

Vercel의 json-render 살펴보기 — JSON 카탈로그로 생성형 UI를 제한하기
Claude Show me 살펴보기 — 대화 속 시각화

참고 자료

OpenGenerativeUI GitHub: https://github.com/CopilotKit/OpenGenerativeUI ↗
MCP 패키지 README: https://github.com/CopilotKit/OpenGenerativeUI/blob/main/apps/mcp/README.md ↗
LangChain Deep Agents 개요: https://docs.langchain.com/oss/python/deepagents/overview ↗
GeekNews 소개: https://news.hada.io/topic?id=27570 ↗
CopilotKit GitHub: https://github.com/CopilotKit ↗

OpenGenerativeUI 살펴보기: Claude식 인터랙티브 시각화를 직접 구현하는 오픈소스

OpenGenerativeUI는 무엇인가요?

왜 생성형 UI를 살펴보나요?

어떤 걸 만들 수 있나요?

구조는 어떻게 되어 있나

설치 및 로컬 실행

1. 저장소 받기

2. 의존성과 환경 파일 준비

3. 개발 서버 실행

사용법

웹 앱에서 시각화 요청하기

(선택) MCP 클라이언트에 붙이기

생성된 UI는 iframe sandbox에서 렌더링됩니다

요청 유형에 따라 시각화 기술을 고릅니다

이 프로젝트가 보여주는 흐름

1. 챗봇에서 인터페이스로 이동

2. 에이전트와 UI의 결합

3. 생성형 UI의 독립 앱 패턴 가능성

실제로 어디에 유용할까

교육/학습

데이터 설명

온보딩/가이드

AI 에이전트 제품

한계

1. 유지보수 난도가 높습니다

2. 요청 해석이 잘못되면 UI도 어색해집니다

3. 제품화하려면 품질 관리가 필요합니다

마무리

관련 글

참고 자료