Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
본 오픈소스 프로젝트는 ChatGPT처럼 텍스트 외에도 차트, 지도, 계산기 등 다양한 인터랙티브 요소를 대화형 UI에 구현하는 방법을 제시합니다. 질문의 의도와 맥락에 따라 적절한 시각적 형식을 선택하고, 이를 앱 컴포넌트에 통합하여 확장 가능한 AI 사용자 인터페이스를 구축할 수 있습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GeekNews의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기ChatGPT처럼 질문에 차트와 지도, 계산기, 조작 가능한 설명으로 답하는 UI를 자신의 앱에 구현하는 오픈소스 프로젝트
질문에 따라
텍스트와 표, 차트, 다이어그램, 대화형 도구 중 적절한 형식을 선택해 대화 안에 표시
알고리즘을 단계별로 따라가는 설명, 슬라이더로 회전하는
3D 모델, 입력값에 따라 결과가 바뀌는 계산기, 여행 경로를 보여주는 지도 등 생성
“표로 비교해 줘” 다음에 “차트로 보여 줘”처럼 후속 요청으로 표현을 바꾸고, UI에서 선택한 값을 다음 에이전트 작업에 전달 가능
기존 컴포넌트와 즉석 생성 UI를 함께 사용. 기본 표는 A2UI로, 복잡한 시각화와 도구는 HTML/CSS/JavaScript로 생성
A2UI: Google이 공개한 UI 규격으로, AI가 화면 구성을 데이터로 전달하면 앱이 준비된 컴포넌트로 그리는 방식
생성 중인 화면을 스트리밍으로 표시하고,
격리된 iframe에서 버튼과 슬라이더, 계산 로직을 실행
CopilotKit과 AG-UI 기반으로 에이전트와 프런트엔드를 연결하며, 자체 앱의 컴포넌트와 디자인 시스템에 맞춰 확장 가능
TypeSafe의 Jev가 답변의 표현 형식을 결정하고 답변 모델이 내용을 구성
기본 실행에는 OpenAI와 TypeSafe API 키 및 이용 비용 필요
Next.js/React 프런트엔드와 Python Deep Agent/FastAPI 백엔드로 구성하며, 자체 앱에 적용하는 통합 가이드 제공
MIT 라이선스