openai/openai-chatkit-advanced-samples

해결하는 문제

이 저장소는 OpenAI ChatKit SDK를 사용하여 복잡한 AI 챗 인터페이스를 구축하는 고급 시나리오 기반의 데모 모음입니다. 단순한 챗봇과 완전히 통합된 애플리케이션 경험 사이의 격차를 메우며, AI 에이전트를 실시간 UI 상태, 외부 데이터, 인터랙티브 위젯과 동기화하는 방법을 보여줍니다.

작동 방식

각 예제는 ChatKit Python SDK를 사용하는 FastAPI 백엔드와 ChatKit.js를 사용하는 Vite + React 프론트엔드로 구성됩니다. 이 시스템은 양방향 정보 흐름을 가능하게 합니다:

• 서버 → 클라이언트: 백엔드는 UI를 업데이트(예: 지도 업데이트 또는 고양이 스탯 변경)하기 위해 "클라이언트 효과"를 스트리밍하고, 액션 설정이 포함된 인터랙티브 위젯을 전송할 수 있습니다.
• 클라이언트 → 서버: 프론트엔드는 클라이언트 도구 호출을 통해 현재 UI 상태(예: 선택된 지도 노드)를 에이전트에 제공하고, 특정 명령어 또는 엔티티 언급(@-멘션)을 전송할 수 있습니다.
• 에이전트 통합: 에이전트는 함수 도구를 사용하여 애플리케이션 데이터를 검색하고, 세션 상태를 관리하며 UI 변경을 트리거합니다. 또한 전용 "타이틀 에이전트"는 대화 이름을 자동으로 지정합니다.

대상 사용자

고도로 발전된 AI 기반 애플리케이션을 개발하고 있으며, LLM을 인터랙티브한 프론트엔드, 상태 관리, 복잡한 UI 컴포넌트와 통합하는 프로덕션 준비된 패턴을 보고 싶은 개발자들입니다.

주요 특징

• 인터랙티브 위젯: 클라이언트 측과 서버 측 모두에서 액션 핸들러를 갖춘 위젯 구현으로 사용자 상호작용을 원활하게 합니다.
• UI 상태 동기화: 에이전트가 프론트엔드 상태를 읽고 수정할 수 있습니다(예: 지하철 지도 캔버스 또는 고객 프로필 동기화).
• 컨텍스트 인식: 요청 헤더를 사용하여 현재 페이지 콘텐츠에 따라 AI 응답의 범위를 제한하는 페이지 인식 응답.
• 풍부한 미디어 지원: 이미지 첨부, 음성에서 텍스트로 변환, 이미지 생성 진행 상황을 통합적으로 추적하는 엔드투엔드 지원.
• 고급 탐색: 엔티티(기사, 역 등)에 대한 @-멘션과 컴포저 명령어(/care 또는 /find-events 등)를 지원하여 사용자 입력을 간소화합니다.