📚

Generative UI 개발 리소스 — 프레임워크·라이브러리·SDK

Generative UI 개발에 필요한 프레임워크, AI UI 컴포넌트 라이브러리와 예제를 모았습니다. FastHTML·HTMX 튜토리얼, Google Research 글, Vercel AI SDK 가이드, OpenUI, json-render, A2UI와 MCP Apps를 살펴보세요.

51 개
📚개발 리소스

CopilotKit for Vue: Native Generative UI over AG-UI

CopilotKit's November 2026 guide to its native Vue 3 SDK documents tool-call rendering with Vue components, reactive shared context, and human approval flows over AG-UI. It includes provider/chat wiring and a concrete confirmation component example, with links to the Vue quickstart and API reference.

generative-uivuecopilotkit
작성자 Nathan Tarbert, CopilotKit · 2026-11-02
리소스 보기
📚개발 리소스

Cloudflare D1: AI 생성 앱을 위한 데이터베이스 확장

Cloudflare D1의 공식 엔지니어링 글은 AI 생성 앱과 바이브 코딩 플랫폼을 뒷받침하는 데이터베이스 인프라를 설명합니다. 사용자, 애플리케이션, 미리보기 또는 테넌트별로 다수의 소규모 데이터베이스를 운영하도록 제어 영역을 확장하면서, 라우팅과 사용량 집계를 쿼리의 핵심 실행 경로에서 분리하는 방법을 다룹니다. Generative UI 개발자에게는 생성된 애플리케이션을 지속적으로 운영하기 위한 백엔드 아키텍처 참고 자료입니다.

cloudflare-d1ai-generated-appsvibe-coding
작성자 Cloudflare · 2026-10-13
리소스 보기
📚개발 리소스

Genkit Dart 1.0: Flutter를 위한 스트리밍 A2UI 통합

Google의 Genkit Dart 1.0 발표는 안정 버전의 AI 백엔드 코어를 genkit_a2ui와 연결해, 에이전트가 생성한 폼, 날짜 선택기, 확인 카드를 네이티브 Flutter 위젯으로 스트리밍하는 방법을 소개합니다. 연결된 구현 가이드는 카탈로그 검증, 스트리밍 방식의 화면 메시지, 사용자 동작을 다룹니다. Agents API와 A2UI 플러그인은 아직 프리뷰 단계입니다.

generative-uia2uidart
작성자 Chris Gill / Google · 2026-10-08
리소스 보기
📚개발 리소스

assistant-ui: Generative UI를 위한 컴포넌트 어휘

모델이 present 도구를 통해 JSON 인터페이스 트리를 구성하도록 지원하는 오픈소스 런타임 @assistant-ui/react-generative-ui의 공식 구현 가이드입니다. 등록된 React 컴포넌트, Zod 속성 스키마, 선택적으로 활성화하는 스트리밍, 동작 핸들러, Slack·Teams·A2UI 어댑터를 다룹니다.

generative-uireactcomponent-catalog
작성자 assistant-ui · 2026-10
리소스 보기
📚개발 리소스

Harness4GenUI 2026: Generative UI의 소프트웨어 공학 기반

Generative UI의 소프트웨어 공학 기반을 다루는 공식 ASE 2026 워크숍입니다. Harness4GenUI는 동적 인터페이스를 런타임 시스템으로 보고, 생성 품질만이 아니라 안정적인 컨텍스트 모델, UI 스키마, 렌더링 계약, 테스트, 관측 가능성, 안전성, 거버넌스를 중심으로 연구와 실무 과제를 구성합니다.

genuiharness-engineeringsoftware-architecture
작성자 ASE 2026 · 2026-10
리소스 보기
📚개발 리소스

shinygenui: Catalog-Constrained Generative UI for R and Shiny

Nan Xiao's R package lets an LLM create, update, and remove developer-defined Shiny components through typed ellmer tool calls. Its documentation includes runnable data-explorer examples, custom reactive widgets, and saved interface traces, providing a native R implementation of catalog-constrained GenUI.

generative-uirshiny
작성자 Nan Xiao · 2026-09-22
리소스 보기
📚개발 리소스

W3C 정리: Generative UI와 WebSkill 표준 세미나

웹 및 AI 표준 세미나를 정리한 W3C의 2026년 9월 글입니다. Baidu의 2단계 검색 GenUI 배포 과정, 제안된 품질 평가 프레임워크, 상호운용성·접근성·보안·에이전트의 웹 상호작용에 관한 논의를 기록합니다. 연결된 발표와 슬라이드에서 자세한 내용을 확인할 수 있습니다.

generative-uiweb-standardsproduction-practice
작성자 W3C · 2026-09
리소스 보기
📚개발 리소스

Jetpack Compose A2UI 렌더러

에이전트가 생성한 A2UI를 네이티브 Jetpack Compose 인터페이스로 렌더링하는 공식 AndroidX 알파 릴리스입니다. a2ui-engine과 a2ui-model 아티팩트는 기기에서 임의의 에이전트 코드를 실행하지 않고 프로토콜 메시지 파싱, 스키마 검증, 기본 렌더러 API를 제공합니다.

a2uiandroidjetpack-compose
작성자 Android Developers · 2026-09
리소스 보기
📚개발 리소스

OUI-1: Generative UI를 위한 오픈 웨이트 모델

제공된 컴포넌트 카탈로그를 바탕으로 openui-lang 인터페이스를 생성하도록 특화해 미세 조정한 Apache-2.0 라이선스의 오픈 웨이트 DiffusionGemma 모델입니다. OUI-1은 전체 파라미터가 26B개, 활성 파라미터가 4B개이며, 로컬 vLLM 서빙 지침을 제공합니다. 여러 컴포넌트 라이브러리에 걸쳐 파서로 검증하는 구조 및 연결 관계 검사를 통해 평가되었습니다.

openuigenerative-ui-modeldiffusion-language-model
작성자 Thesys Engineering Team · 2026-09
리소스 보기
📚개발 리소스

ggui: MCP 기반 생성형 인터페이스 런타임

MCP를 통한 에이전트의 자연어 요청으로 일시적이면서 상호작용 가능한 인터페이스를 생성하는 Apache-2.0 라이선스의 프로토콜 및 참조 런타임입니다. ggui는 자체 호스팅 서버, 스키마 협상형 렌더링 계약, MCP Apps 호스트 헬퍼, 양방향 사용자 이벤트, 재사용 가능한 블루프린트와 가젯, Claude·OpenAI Agents SDK·Google ADK용 실행 가능한 통합을 제공합니다.

generative-uimcp-appsruntime-protocol
작성자 ggui contributors · 2026-08
리소스 보기
📚개발 리소스

moi: 에이전트가 생성하는 개인용 소프트웨어 작업 공간

AI 에이전트가 사용자 프로젝트에 맞춰 지속적으로 유지되는 UI를 만들고 재구성하는 소스 공개형 로컬 작업 공간입니다. moi는 Claude Code, Codex, OpenClaw, Hermes에 스킬 기반 인터페이스를 제공해 파일·명령·API·데이터베이스·MCP 서버와 연결된 라이브 위젯, 대시보드, 캔버스, 전체 화면을 만들도록 지원합니다. 생성된 소프트웨어는 작업 공간 파일 시스템에 저장됩니다.

generative-uiagent-workspacedynamic-widgets
작성자 Alexey Taktarov · 2026-08
리소스 보기
📚개발 리소스

dsh-genui: DeepSeek Harness의 스트리밍 상호작용 UI

구조화된 `dsh-ui` 코드 블록을 어시스턴트 응답 안에서 스트리밍되는 상호작용 인터페이스 요소로 변환하는 오픈소스 DeepSeek Harness 플러그인입니다. 허용 목록에 등록된 30개 이상의 컴포넌트, 양방향 동작, 지속적으로 유지되는 패널, 로컬 폼 및 퀴즈 동작, 접근성 지원, 보호 장치를 갖춘 렌더링을 제공하며 임의의 HTML이나 스크립트는 허용하지 않습니다.

genuideepseek-harnessstreaming-ui
작성자 omdsh-dev · 2026-08
리소스 보기
📚개발 리소스

AppLess: 앱 없이 사용하는 Generative UI 휴대전화

모든 모바일 화면을 필요할 때 생성해 네이티브 Cupertino 또는 Material 3 컴포넌트로 스트리밍하는 OpenUI 팀의 오픈소스 React Native 실험입니다. AppLess는 공유 컴포넌트 계약, 간결한 openui-lang DSL, 다음 화면을 예측하는 프리페치, 선택적으로 사용하는 웹 및 이미지 도구를 통해 앱 없는 Generative UI 운영체제의 사용 경험을 탐색합니다.

react-nativeopenuinative-ui
작성자 Thesys · 2026-07
리소스 보기
📚개발 리소스

OpenTiny GenUI SDK

Vue와 Angular 애플리케이션에 스키마 기반 Generative UI를 추가하는 오픈소스 풀스택 도구 모음입니다. 스트림 추출, 델타 패치, JSON 복구, 사용자 정의 가능한 컴포넌트 리소스와 동작, OpenAI 호환 모델 연결, MCP 도구, A2A 지원을 여러 프레임워크를 지원하는 라이브 플레이그라운드와 함께 제공합니다.

vueangularschema-driven-ui
작성자 OpenTiny · 2026-07
리소스 보기
📚개발 리소스

AGenUI/AGenUI

iOS, Android, HarmonyOS에서 스트리밍 Generative UI를 구축하는 오픈소스 네이티브 A2UI 렌더러입니다. AGenUI는 공통 C++ 파싱 및 차이 계산 코어와 플랫폼별 네이티브 렌더링 엔진을 사용하며, A2UI v0.9 컴포넌트 카탈로그, 사용자 정의 컴포넌트, 디자인 토큰, 함수 호출, 로컬 생성 스튜디오를 지원합니다.

a2uinative-uimobile
작성자 AGenUI Contributors · 2026-07
리소스 보기
📚개발 리소스

Generative UI(GenUI) 앱 만들기

Flutter, Firebase AI Logic, GenUI 패키지로 할 일 목록 앱을 만드는 Google의 공식 Codelab입니다. 텍스트 채팅을 생성형 화면으로 확장하고, A2UI 전송 계층과 위젯 카탈로그를 소개하며, 마지막에는 사용자와 에이전트가 함께 사용하는 사용자 정의 상호작용 컴포넌트를 구현합니다.

googlefluttera2ui
작성자 Andrew Brogdon (Google) · 2026-07
리소스 보기
📚개발 리소스

PrefectHQ/prefab

JSON으로 직렬화하고 함께 제공되는 React 클라이언트로 렌더링하는 선언형 컴포넌트 트리를 정의할 수 있는 Prefect의 Python 중심 Generative UI 프레임워크입니다. Prefab은 애플리케이션 작성자가 프런트엔드 코드를 작성하지 않아도 스트리밍 업데이트, 반응형 상태, 사용자 정의 컴포넌트, 대시보드, MCP Apps를 지원합니다.

pythonmcp-appsdeclarative-ui
작성자 Prefect · 2026-06
리소스 보기
📚개발 리소스

AG-UI 프로토콜로 Amazon Bedrock AgentCore의 AI 에이전트에 Generative UI 구축하기

Amazon Bedrock AgentCore에 AG-UI 에이전트 프런트엔드를 배포하는 AWS Machine Learning Blog의 공식 가이드입니다. Strands Agents와 LangGraph의 FAST 패턴을 보여 준 뒤, CopilotKit을 추가해 Cognito, Lambda, Amplify, AgentCore Runtime과 함께 응답 내 Generative UI, 공유 상태, 사람이 참여하는 워크플로를 구현합니다.

awsbedrock-agentcoreag-ui
작성자 AWS · 2026-06
리소스 보기
📚개발 리소스

AI SDK 애플리케이션에 MCP Apps 추가하기

AI SDK로 MCP Apps 호스트를 구축하는 Vercel Knowledge Base 가이드입니다. `@ai-sdk/mcp`와 `@ai-sdk/react`로 모델에 공개되는 도구와 앱 전용 도구를 분리하고, `ui://` 리소스를 읽으며, `experimental_MCPAppRenderer`를 사용해 샌드박스 iframe 안에 상호작용 도구 UI를 렌더링하는 방법을 보여 줍니다.

vercelai-sdkmcp-apps
작성자 Vercel · 2026-06
리소스 보기
📚개발 리소스

ag-ui-protocol/ag-ui

에이전트를 프런트엔드 애플리케이션에 연결하는 에이전트·사용자 상호작용 계층인 AG-UI 프로토콜의 공식 저장소입니다. 개별 앱 데모보다 한 단계 아래에서 작동한다는 점에서 특히 중요합니다. 에이전트 백엔드가 여러 클라이언트의 실제 제품에 메시지, 도구 활동, UI 업데이트를 스트리밍할 수 있도록 전송 방식과 이벤트 모델을 정의합니다.

protocolagent-uiopen-source
작성자 AG-UI Contributors · 2026-06
리소스 보기
📚개발 리소스

A2UI + MCP Apps: 선언형 UI와 사용자 정의 에이전트 UI 결합하기

A2UI와 MCP Apps를 결합하는 아키텍처를 다룬 Google Developers Blog의 공식 글입니다. 독립적인 프로토콜 발표를 넘어 세 가지 구체적인 통합 패턴을 보여 준다는 점에서 유용합니다. MCP를 통한 A2UI 페이로드 제공, A2UI 컴포넌트 안에 MCP Apps 삽입, MCP Apps 안에서 A2UI 렌더러 실행을 다룹니다.

googlea2uimcp-apps
작성자 Google A2UI Team · 2026-06
리소스 보기
📚개발 리소스

syntux: 웹용 Generative UI 만들기

Syntux는 전달된 값과 선택적인 UI 힌트로 웹 인터페이스를 생성하는 데 초점을 맞춘 오픈소스 React 라이브러리입니다. React Interface Schema라는 평탄한 구조의 JSON-DSL을 사용하며 스트리밍, 사용자 정의 컴포넌트, 캐싱, 반응형 재생성을 지원합니다. 채팅 전용 어시스턴트 화면보다 데이터를 인터페이스로 변환하는 GenUI를 살펴보는 데 유용합니다.

syntuxreactjson-dsl
작성자 Puffinsoft · 2026-05
리소스 보기
📚개발 리소스

Agent Framework와 AG-UI 통합

Agent Framework 에이전트를 AG-UI 프런트엔드에 연결하는 Microsoft Learn 문서입니다. Microsoft가 실서비스용 에이전트 앱에서 AG-UI를 어떻게 활용하는지 설명하며, 에이전트 기반 Generative UI, 도구 기반 UI, 백엔드 에이전트 런타임과 React 클라이언트 사이의 이벤트 연결 계층을 다룹니다.

microsoftagent-frameworkag-ui
작성자 Microsoft Learn · 2026-04
리소스 보기
📚개발 리소스

A2UI v0.9: 이식 가능한 프레임워크 독립형 Generative UI의 새 표준

A2UI v0.9에 관한 Google Developers Blog의 공식 업데이트입니다. A2UI를 선언형 에이전트 생성 UI를 위한 실서비스 지향 표준으로 소개하고 공식 React 렌더러를 추가합니다. 또한 에이전트가 임의의 프런트엔드 코드를 생성하지 않고도 웹과 모바일의 기존 컴포넌트 카탈로그를 대상으로 UI를 구성하는 방법을 설명합니다.

googlea2uistandard
작성자 Google A2UI Team · 2026-04
리소스 보기
📚개발 리소스

AI에 JSON 작성을 맡기지 않는 이유: OpenUI를 만든 배경

OpenUI 팀이 Generative UI를 위해 JSON 트리 방식을 넘어선 이유를 설명하는 공식 엔지니어링 글입니다. 에이전트가 생성하는 상호작용 인터페이스의 런타임 요구 사항을 정리하고, 상태를 유지하는 UI에서 중첩 JSON이 취약해지는 이유를 설명하며, 모델 생성 UI를 위한 스트리밍 중심 언어인 OpenUI Lang을 소개합니다.

openuiframeworkstreaming
작성자 Thesys Engineering Team · 2026-04
리소스 보기
📚개발 리소스

Tambo 1.0 소개

실서비스에 적용할 수 있는 React Generative UI 도구 모음을 소개하는 Tambo의 공식 출시 글입니다. 개발자가 기존 React 컴포넌트를 등록하면 에이전트가 이를 선택해 속성을 스트리밍하고, Tambo가 대화 상태, 오케스트레이션, 지속적으로 유지되는 상호작용 컴포넌트 동작을 처리하는 풀스택 모델을 설명합니다.

tamboreactsdk
작성자 Michael Milstead · 2026-02
리소스 보기
📚개발 리소스

MCP Apps: MCP 클라이언트에 UI 기능 제공하기

AI 클라이언트 안에서 상호작용 UI를 직접 반환하는 최초의 실서비스용 MCP 확장인 MCP Apps를 소개하는 Model Context Protocol 공식 발표입니다. 도구가 `_meta.ui.resourceUri`를 선언하는 방식, 호스트가 샌드박스 인터페이스를 렌더링하는 방식, 다양한 에이전트 작업에서 대시보드·폼·시각화·다단계 워크플로가 순수 텍스트보다 적합한 이유를 설명합니다.

mcpmcp-appsprotocol
작성자 MCP Core Maintainers · 2026-01
리소스 보기
📚개발 리소스

A2UI 소개: 에이전트 기반 인터페이스를 위한 개방형 프로젝트

에이전트 생성 인터페이스를 위한 이식 가능한 선언형 형식인 A2UI를 소개하는 Google Developers Blog의 공식 발표입니다. 원격 또는 로컬 에이전트가 임의의 HTML을 출력하는 대신 호스트 앱에 신뢰할 수 있는 UI 컴포넌트를 요청하는 방법을 설명합니다. 이를 통해 Generative UI의 안전성, 플랫폼 간 호환성, 점진적 업데이트를 지원합니다.

googlea2uiprotocol
작성자 Google A2UI Team · 2025-12
리소스 보기
📚개발 리소스

Google Research 블로그: Generative UI

Google Research 블로그의 "Generative UI: A rich, custom, visual interactive user experience for any prompt" 글입니다. Google Research의 선임 엔지니어들이 작성했으며, Generative UI의 구현 접근법과 실험 결과를 소개합니다. 이 글은 "Generative UI는 AI 모델이 콘텐츠뿐 아니라 전체 사용자 경험을 만들 수 있게 하는 새로운 기능"이라고 설명하고, 이 기능이 Gemini 앱과 Google 검색 AI 모드에 실험적으로 출시되었다고 밝힙니다.

googleblogofficial
작성자 Google Research · 2025-11
리소스 보기
📚개발 리소스

Google의 Gemini 3·Google Antigravity·Generative UI 기능 출시

Gemini 3 출시를 소개하고 Generative UI 기능을 강조하는 Constellation Research의 기술 분석 글입니다. Gemini 3가 "대화형 컴포넌트를 만들고, 여러 시나리오 선택지와 이미지, 표 및 텍스트를 제공"할 수 있다고 설명합니다. Visual Layout과 Dynamic View 실험을 자세히 다룹니다.

constellationanalysisgemini-3
작성자 Larry Dignan · 2025-11
리소스 보기
📚개발 리소스

9to5Google: Gemini 3 출시 분석

Gemini 3의 Generative UI 기능을 설명하는 9to5Google의 상세 분석입니다. 이 글에 따르면 Dynamic View는 Gemini 3가 각 프롬프트에 맞춰 "완전히 맞춤화된 대화형 응답을 설계하고 코딩"하도록 지원하며, Visual Layout은 "잡지 스타일"의 몰입형 멀티미디어 인터페이스를 생성합니다.

9to5googlegemini-3analysis
작성자 9to5Google · 2025-11
리소스 보기
📚개발 리소스

Google Generative UI 프로젝트

Google 팀의 Generative UI 프로젝트 웹사이트(generativeui.github.io)입니다. 연구 논문, 대화형 예제와 일부 코드를 제공하며, 팀의 GenUI 구현 접근 방식을 보여줍니다.

googleprojectdemo
작성자 Google · 2025-11
리소스 보기
📚개발 리소스

AIBase 뉴스: Google Generative UI

중국 기술 매체 AIBase가 2025년 11월에 "Generative UI는 AI가 질문에 답할 때 동작 가능한 동적 인터페이스를 생성하도록 지원한다"고 보도한 기사입니다.

aibasenewschinese
작성자 AIBase · 2025-11
리소스 보기
📚개발 리소스

AI와 Generative UI: 프런트엔드 웹 개발의 미래

AI를 활용한 Generative UI가 프런트엔드 개발을 어떻게 바꾸고 있는지 폭넓게 살펴보는 Pansofic의 글입니다. 실시간 UI 적응, 자연어를 통한 인터페이스 생성, 개인화된 경험, 빠른 프로토타이핑을 다룹니다. Builder.io, Vercel AI SDK, Figma AI Assistant의 활용 사례와 구현 모범 사례를 포함합니다.

pansoficfrontendweb-development
작성자 Pansofic · 2025-07
리소스 보기
📚개발 리소스

AI가 새로운 UI가 되는 방식: FastHTML로 만드는 Generative UI

150줄 미만의 코드로 FastHTML과 HTMX를 활용한 대화형 Generative UI 애플리케이션을 구현하는 과정을 보여 주는 Pol Alvarez Vecino의 심층 튜토리얼입니다. 텍스트 전용 채팅에서 표시 전용 GenUI, 완전한 대화형 GenUI로 발전하는 과정을 살펴봅니다. 또한 하이퍼미디어 접근 방식이 프론트엔드와 백엔드 사이의 "계약 결합"을 없애 LLM이 동적 인터페이스를 직접 생성하도록 하는 원리를 설명합니다.

mediumfasthtmlhtmx
작성자 Pol Alvarez Vecino · 2025-04
리소스 보기
📚개발 리소스

Generative UI: 지능형·의도 기반 AI 인터페이스

Daniel Ostrovsky가 비즈니스와 사용자 관점에서 Generative UI의 가능성을 설명하는 Medium·Design Bootcamp 글입니다. 이 글은 GenUI가 AI로 "완전히 새로운 컴포넌트를 처음부터 만드는 것"이 아니라, 사용자 의도에 따라 기존 인터페이스 요소를 지능적으로 선택하고 배치하는 방식이라고 주장합니다. 금융 서비스와 교육 애플리케이션 예제를 통해 GenUI가 효율성과 사용 경험을 개선할 수 있는 방식을 보여줍니다.

mediumdesignintent-based
작성자 Daniel Ostrovsky · 2025-02
리소스 보기
📚개발 리소스

Generative UI 입문

Mark O'Neill이 UX Collective에 기고한 Generative UI의 개념과 실제 사례를 소개하는 글입니다. 저자는 이 용어가 "2023년에 등장했다"고 설명하며, "생성형 AI로 맥락에 맞춰 인터페이스를 자동으로 구성하거나 조정하는 기술"로 정의합니다. 이 글은 GenUI를 통해 개인화된 경험을 제공하도록 사용자마다 UI 요소, 레이아웃과 스타일이 달라지는 방식을 보여줍니다.

uxdesignintroductionarticle
작성자 Mark O'Neill · 2024-08
리소스 보기
📚개발 리소스

Generative UI와 결과 중심 디자인

Generative UI가 디자인 패러다임에 미치는 영향을 다룬 Nielsen Norman Group의 글입니다. 저자는 Generative UI를 "AI를 통해 사용자별 맞춤 인터페이스를 실시간으로 동적 생성하는 기술"로 정의하며, 인터페이스 디자인이 다수를 만족시키는 방식에서 개인을 만족시키는 방식으로 전환될 것이라고 주장합니다. 이 글은 사용자 목표와 최종 경험에 초점을 맞춰, 기존 인터페이스 디자인에서 "결과 중심 디자인"으로 전환할 것을 제안합니다.

nngroupuxdesign
작성자 Nielsen Norman Group · 2024-03
리소스 보기
📚개발 리소스

MCP-UI-Org/mcp-ui

MCP를 통해 상호작용 UI를 구축하고 렌더링하는 MCP-UI SDK의 공식 저장소입니다. README는 표준화 이후 생태계의 모습을 문서화한다는 점에서 특히 유용합니다. 현재 `@mcp-ui/*`는 MCP Apps 표준을 구현하고, TypeScript·Python·Ruby 서버 구현을 지원하며, 풍부한 UI를 갖춘 에이전트 도구를 배포하는 팀에 실용적인 호스트·클라이언트 SDK를 제공합니다.

mcpmcp-appssdk
작성자 The MCP-UI Authors
리소스 보기
📚개발 리소스

CopilotKit 문서: Generative UI 개요

CopilotKit의 Generative UI 스택을 구성하는 핵심 요소를 설명하는 공식 문서 페이지입니다. 도구로서의 컴포넌트, 도구 호출 렌더링, 상태 렌더링, 샌드박스 MCP Apps, 선언형 UI 렌더러 등 구체적인 런타임 패턴으로 구분해 실서비스 구현 방식의 선택지를 파악하는 데 유용합니다.

copilotkitdocspatterns
작성자 CopilotKit
리소스 보기
📚개발 리소스

CopilotKit/generative-ui

세 가지 구체적인 Generative UI 패턴을 보여 주는 CopilotKit의 공식 예제 저장소입니다. 프런트엔드 도구를 사용하는 제어형 GenUI, A2UI/Open-JSON-UI를 사용하는 선언형 GenUI, 샌드박스 안에서 렌더링되는 개방형 UI 생성을 다룹니다. 일반적인 데모와 달리, 지속적으로 관리되는 하나의 예제 모음에서 여러 GenUI 접근법을 나란히 비교할 수 있다는 점이 유용합니다.

copilotkitexamplesa2ui
작성자 CopilotKit
리소스 보기
📚개발 리소스

CopilotKit/OpenGenerativeUI

개방형 Generative UI를 위한 CopilotKit의 공식 오픈소스 프레임워크입니다. 선언형 컴포넌트 명세 예제와 달리, 이 저장소는 차트, 다이어그램, 시뮬레이션, 3D 장면 등 샌드박스 안의 더 풍부한 HTML/SVG 경험에 초점을 맞춥니다. 에이전트가 제어된 iframe 런타임 안에서 완전한 상호작용 시각 응답을 생성하는 방법을 보여 줍니다.

copilotkitsandboxhtml
작성자 CopilotKit
리소스 보기
📚개발 리소스

thesysdev/openui

Thesys의 공식 OpenUI GitHub 저장소입니다. OpenUI 언어, 런타임, 컴포넌트 기반 React 통합을 한곳에 모아 팀의 설계 글과 함께 참고할 수 있는 구체적인 구현을 제공합니다. 단순한 JSON 스키마를 넘어 스트리밍 중심 GenUI 시스템을 검토하는 개발자에게 특히 유용합니다.

openuigithubreact
작성자 Thesys
리소스 보기
📚개발 리소스

google/A2UI

Google의 공식 A2UI 저장소입니다. 에이전트와 사용자 인터페이스를 연결하는 형식의 명세, 렌더러, 예제, 도구를 제공합니다. 신뢰할 수 있는 컴포넌트 카탈로그를 바탕으로 이식 가능한 선언형 Generative UI를 구현하는 가장 직접적인 참고 자료입니다.

googlea2uigithub
작성자 Google
리소스 보기
📚개발 리소스

Flutter GenUI SDK

Flutter 애플리케이션에 생성형 UI 기능을 통합하기 위한 Flutter 팀의 공식 라이브러리로, BSD 라이선스를 사용합니다. JSON 형식의 대화형 컴포넌트 정의와 상태 피드백 메커니즘을 제공해 채팅 출력을 실제로 조작할 수 있는 인터페이스로 바꿉니다. 현재 GitHub 스타 930+개를 기록하고 있으며, Flutter의 실험적 프로젝트입니다.

fluttersdkopen-source
작성자 Flutter
리소스 보기
📚개발 리소스

OpenAI Structured Outputs 예제: Generative UI

구조화된 출력으로 Generative UI를 구현하는 실용적인 방법을 보여주는 OpenAI 공식 예제 앱입니다. 이 데모는 재귀적 컴포넌트 스키마와 `generate_ui` 도구를 사용해, 모델 응답이 텍스트만이 아니라 신뢰할 수 있는 UI 정의를 스트리밍하도록 합니다. 동시에 여러 차례 이어지는 대화와 자동 도구 실행도 지원합니다.

openaistructured-outputssample
작성자 OpenAI
리소스 보기
📚개발 리소스

vercel-labs/json-render

Vercel Labs의 공식 오픈소스 Generative UI 프레임워크입니다. json-render는 개발자가 정의한 컴포넌트 카탈로그의 제약 안에서 모델이 프롬프트로 인터페이스를 생성하도록 지원하고, 생성된 명세를 웹·모바일 등 여러 런타임에서 점진적으로 렌더링합니다.

vercelframeworkschema-driven
작성자 Vercel Labs
리소스 보기
📚개발 리소스

Hashbrown: Generative UI를 위한 TypeScript 프레임워크

Hashbrown은 React와 Angular에서 브라우저 네이티브 에이전트와 Generative UI를 구축하는 오픈소스 프레임워크입니다. 이 리소스 모음에서 특히 중요한 부분은 컴포넌트 제어 모델입니다. 개발자가 신뢰할 수 있는 UI 컴포넌트를 공개하면, LLM은 동적 화면을 구성해 페이지로 스트리밍하고 클라이언트 도구를 호출하며 텍스트뿐 아니라 구조화된 데이터를 다룹니다.

hashbrownreactangular
작성자 LiveLoveApp
리소스 보기
📚개발 리소스

mdocUI: Markdoc 태그를 활용한 Generative UI

mdocUI는 LLM이 인라인 Markdoc 스타일 컴포넌트 태그가 포함된 일반 Markdown을 작성하도록 하는 알파 단계의 Generative UI 라이브러리입니다. 아직 초기 프로젝트이지만, JSON 트리 및 도구 호출과 구별되는 접근법이라는 점에서 유용합니다. 설명문과 상호작용 컴포넌트가 같은 스트림을 공유하고, 렌더러가 검증, 플레이스홀더, 오류 경계, 사용자 정의 컴포넌트 매핑을 처리합니다.

mdocuimarkdocmarkdown
작성자 mdocUI
리소스 보기
📚개발 리소스

LangUI: AI를 위한 UI

LangUI는 GPT 및 생성형 AI 애플리케이션에 맞춘 MIT 라이선스의 오픈소스 Tailwind CSS 컴포넌트 라이브러리입니다. 챗봇이나 콘텐츠 생성 도구 등 LLM 기반 프로젝트에 통합할 수 있는 다양한 UI 컴포넌트를 제공해 GenUI 개발을 간소화합니다.

languitailwindui-library
작성자 Langbase
리소스 보기
📚개발 리소스

Anilturaga/Generative-UI - Imagine with Claude

Claude의 Generative UI 기능을 보여 주는 오픈소스 "Imagine with Claude" 데모 프로젝트입니다.

claudedemoopen-source
작성자 Anil Turaga
리소스 보기

Generative UI와 Intelligent UI 리소스를 엄선한 모음입니다.

정성을 담아 ❤️ 커뮤니티가 만들었습니다