Gan-Tu/Widgets

해결하는 문제

이 프로젝트는 채팅 인터페이스 내에서 컴팩트하고 구조화된 UI 위젯을 렌더링하는 방법을 제공합니다. 개발자들이 단순한 텍스트 응답을 넘어서, 템플릿과 데이터를 사용한 표준화된 시스템을 통해 차트, 폼, 에이전트 전용 프리미티브와 같은 풍부하고 상호작용 가능한 컴포넌트를 렌더링할 수 있게 해줍니다.

작동 방식

시스템은 WidgetRenderer를 사용하며, 주로 세 가지 입력을 받습니다: UI 템플릿 문자열(엄격한 JSX 유사 언어로 작성), 선택적 Zod 스키마(데이터 검증용), 실제 데이터 객체입니다.

안전성과 예측 가능성을 보장하기 위해, 렌더러는 선언적 로직(바인딩, 조건, 반복)을 지원하지만 임의의 JavaScript 실행을 금지하는 보수적인 템플릿 엔진을 사용합니다. 기본 레이아웃 및 타이포그래피부터 ThinkingReasoning 및 StreamingText와 같은 복잡한 에이전트 네이티브 프리미티브에 이르기까지 총 142개의 사전 등록된 컴포넌트 라이브러리가 포함되어 있습니다. 상호작용은 로컬 클라이언트 액션(예: 텍스트 복사, URL 열기) 또는 onAction 콜백을 통해 호스트 애플리케이션으로 전달됩니다.

대상 사용자

AI 채팅 UI 또는 에이전트 기반 애플리케이션을 개발하고 있으며, 모든 가능한 AI 출력에 대해 고유한 React 컴포넌트를 수동으로 구축하지 않고도 구조화되고 상호작용 가능한 시각적 응답을 제공하고자 하는 개발자들.

주요 특징

• 풍부한 컴포넌트 라이브러리: 차트, 폼, 워크스페이스 프리미티브를 포함한 142개의 내장 컴포넌트.
• 스키마 검증: 렌더링 전에 위젯에 전달된 데이터가 유효한지 보장하기 위한 선택적 Zod 통합.
• 안전한 템플릿: 임의의 JS 실행을 방지하면서도 반복과 조건부 렌더링을 지원하는 제한된 JSX 유사 언어.
• 에이전트 네이티브 프리미티브: 추론 블록 및 승인 카드와 같은 AI 상호작용에 특화된 컴포넌트.
• 테마 지원: CSS 디자인 토큰을 통해 완전히 사용자 정의 가능하며, 내장된 라이트 모드 및 다크 모드 지원.