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

AI 챗봇은 이제 텍스트를 꽤 잘 만듭니다.
하지만 점점 더 중요한 건 “얼마나 잘 말하느냐”보다 얼마나 잘 보여주느냐가 되고 있습니다.

어떤 정보는 문장보다 시각화가 훨씬 빠릅니다.
알고리듬 동작 과정, 데이터 비교, 프로세스 설명, 3D 구조, 인터랙티브 도구 같은 것들은 긴 텍스트보다 직접 보이는 UI가 훨씬 이해하기 쉽습니다.

이 지점에서 흥미로운 프로젝트가 하나 나왔습니다.
바로 OpenGenerativeUI입니다.

이 프로젝트는 Claude의 인터랙티브 시각 자료 생성 경험을 떠올리게 하는 형태를 오픈소스로 구현한 프레임워크입니다.
단순한 데모가 아니라, AI 에이전트가 필요에 따라 차트·다이어그램·애니메이션·위젯을 생성해서 보여주는 구조를 실제로 어떻게 만들 수 있는지 보여준다는 점에서 꽤 재미있습니다.

OpenGenerativeUI는 무엇인가요?

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

핵심은 단순합니다.

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

즉, 이 프로젝트는 “AI가 말을 잘한다”를 넘어서
AI가 상황에 맞는 인터페이스를 직접 만든다는 방향을 실험합니다.

왜 이게 중요한가요?

요즘 AI 제품은 점점 더 비슷해지고 있습니다.
모델 성능만으로 차별화하기가 점점 어려워지고 있기 때문입니다.

그래서 앞으로 더 중요해질 질문은 이런 것들입니다.

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

OpenGenerativeUI가 흥미로운 이유는 바로 이 지점에 있습니다.
이 프로젝트는 “챗봇 답변”을 만들기보다, 대화형 결과물을 만든다는 발상을 전면에 둡니다.

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

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

이때 텍스트만 던지는 대신,
AI가 아예 보는 방식의 답변을 생성하는 겁니다.

어떤 걸 만들 수 있나요?

공개된 설명을 보면 OpenGenerativeUI는 꽤 다양한 형태를 다룹니다.

알고리듬 시각화
- 이진 탐색
- BFS / DFS
- 정렬 알고리듬
차트 및 다이어그램
- 바 차트
- 파이 차트
- 네트워크 다이어그램
- 플로우차트
3D 애니메이션
- WebGL / CSS3D 기반 장면
위젯 및 시뮬레이션
- 수학 그래프
- 폼 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 키와 모델 이름을 실제 값으로 채웁니다.

README에서 강조하는 대로, 생성형 UI는 한 번에 잘 짜인 HTML/SVG를 뽑아야 해서 작은 모델보다 상위 모델을 쓰는 편이 낫습니다. 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 안에 렌더링합니다. 로딩 중에는 스켈레톤이 뜨고, 로드 후 높이 자동 조정 같은 UX가 붙어 있습니다.

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

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

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 안에서 렌더링한다는 점입니다.

이건 생각보다 중요합니다.

생성형 UI는 본질적으로 위험할 수 있습니다.
AI가 만든 HTML이나 스크립트를 그대로 페이지에 주입하면 보안 문제가 생길 수 있기 때문입니다.

OpenGenerativeUI는 이 문제를 피하기 위해 다음 같은 방향을 택합니다.

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

즉, “그럴듯한 데모”가 아니라
실제 제품에 가까운 렌더링 경험을 의식하고 있다는 점이 좋습니다.

Tip 생성형 UI에서 가장 중요한 건 예쁜 결과물이 아니라 안전한 렌더링 경계입니다. OpenGenerativeUI가 iframe sandbox를 선택한 건 꽤 현실적인 판단으로 보입니다.

기술 선택도 꽤 납득이 갑니다

OpenGenerativeUI는 요청 유형에 따라 적절한 기술을 고르는 방식도 강조합니다.

예를 들어:

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

이 방식이 중요한 이유는,
모든 시각화에 같은 도구를 들이대면 결과가 금방 어색해지기 때문입니다.

즉, 이 프로젝트는 단순히 “생성”만이 아니라
어떤 요청에 어떤 시각 표현이 적절한가까지 고민하고 있습니다.

이건 앞으로 Generative UI가 더 발전할 때 핵심이 될 가능성이 높습니다.

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

OpenGenerativeUI를 단순 오픈소스 데모로만 보면 아깝습니다.
이 프로젝트가 보여주는 더 큰 흐름은 따로 있습니다.

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

이제 AI는 단순히 텍스트를 반환하는 존재가 아니라,
필요하면 UI를 직접 만들어주는 방향으로 가고 있습니다.

2. 에이전트 + UI가 붙기 시작함

에이전트가 판단하고,
그 결과를 텍스트가 아니라 실행 가능한 시각 인터페이스로 돌려준다는 점이 중요합니다.

3. 생성형 UI는 앞으로 별도 제품군이 될 수 있음

지금은 “기능 하나”처럼 보이지만,
앞으로는 생성형 UI 자체가 독립적인 앱 패턴이 될 가능성이 큽니다.

예를 들어:

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

OpenGenerativeUI는 이 방향을 미리 보여주는 프로젝트에 가깝습니다.

실제로 어디에 유용할까

이런 프로젝트는 보기에는 멋있지만,
실무에서 어디에 쓸 수 있느냐가 중요합니다.

제가 보기엔 아래 영역에서 특히 잘 맞습니다.

교육/학습

알고리듬, 수학, 과학 개념처럼
“설명보다 시각화가 더 중요한 주제”에 잘 맞습니다.

데이터 설명

숫자나 비교 중심 정보는
텍스트보다 차트나 인터랙티브 요소가 이해가 훨씬 빠릅니다.

온보딩/가이드

사용 방법, 프로세스 설명, 단계별 흐름 안내에 유용합니다.

AI 에이전트 제품

텍스트 답변만으로 차별화가 어려운 AI 제품은
이런 생성형 UI가 좋은 무기가 될 수 있습니다.

주의 생성형 UI는 데모에서는 매우 인상적이지만, 실서비스에 넣을 때는 렌더링 안정성, 보안 경계, 성능, 실패 시 fallback UX를 반드시 같이 설계해야 합니다.

한계도 분명합니다

물론 이런 접근이 만능은 아닙니다.

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

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

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

AI가 어떤 시각 표현이 적절한지 잘못 판단하면
오히려 텍스트보다 더 혼란스러운 결과가 나올 수 있습니다.

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

한두 번 멋진 데모가 나오는 것과,
항상 안정적으로 동작하는 제품을 만드는 건 완전히 다른 문제입니다.

즉, OpenGenerativeUI는 굉장히 흥미롭지만 동시에
실험과 제품화 사이의 거리도 분명히 보여주는 프로젝트입니다.

개인적으로 재미있는 이유

이 프로젝트가 특히 재미있는 건,
요즘 AI 제품의 경쟁 포인트가 어디로 이동하는지를 아주 잘 보여주기 때문입니다.

이전에는:

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

이런 질문이 중심이었습니다.

앞으로는 여기에 더해:

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

이런 질문이 붙게 될 것 같습니다.

OpenGenerativeUI는 바로 그 변화를 오픈소스 레벨에서 먼저 체험하게 해줍니다.

마무리

OpenGenerativeUI는 단순히 “멋진 AI 데모”가 아닙니다.
이 프로젝트는 AI가 텍스트를 넘어서 시각적 결과물과 인터페이스를 직접 생성하는 방향이 얼마나 빠르게 현실화되고 있는지를 보여줍니다.

CopilotKit, Deep Agent·스킬 구조, iframe sandbox, 시각화 결정 매트릭스 같은 요소를 조합한 방식도 꽤 설득력이 있습니다.
특히 “대화형 AI의 응답을 UI로 확장한다”는 발상은 앞으로 점점 더 자주 보게 될 가능성이 큽니다.

아직은 실험적인 면도 있지만,
적어도 이 프로젝트는 하나를 분명하게 보여줍니다.

앞으로의 AI 제품 경쟁은 답변 품질만이 아니라, 답변을 어떤 인터페이스로 보여주느냐의 경쟁이 될 수 있다는 점입니다.

그 기준에서 보면 OpenGenerativeUI는 꽤 흥미로운 출발점입니다.

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는 무엇인가요?

왜 이게 중요한가요?

어떤 걸 만들 수 있나요?

구조는 어떻게 되어 있나

설치 및 로컬 실행

1. 저장소 받기

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

3. 개발 서버 실행

사용법

웹 앱에서 시각화 요청하기

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

작동 방식이 꽤 잘 짜여 있습니다

기술 선택도 꽤 납득이 갑니다

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

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

2. 에이전트 + UI가 붙기 시작함

3. 생성형 UI는 앞으로 별도 제품군이 될 수 있음

실제로 어디에 유용할까

교육/학습

데이터 설명

온보딩/가이드

AI 에이전트 제품

한계도 분명합니다

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

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

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

개인적으로 재미있는 이유

마무리

관련 글

참고 자료