@agentdog/react

AgentDog React 채팅 SDK입니다. 워크스페이스 Public SDK Key로 Agent 서버에 연결해 실제 답변을 받습니다. 관리자 화면의 사이트에 설치에서 연결 코드를 복사할 수 있습니다.

"use client";
import { AgentChat } from "@agentdog/react";

<AgentChat apiKey="pk_워크스페이스_키" apiBaseUrl="http://localhost:4000" />;

apiKey는 AgentDog Public SDK Key이며 OpenAI 키가 아닙니다. 운영 사이트의 apiBaseUrl에는 고객 브라우저가 접근 가능한 HTTPS Agent 서버 주소를 넣습니다. onAction은 예약된 옵션으로 현재 실행하지 않습니다.

현재 저장소의 SDK를 다른 프로젝트에 설치하려면 다음 명령으로 패키지를 만듭니다.

pnpm --filter @agentdog/react build
pnpm --filter @agentdog/react pack --pack-destination /tmp/agentdog-sdk

생성된 agentdog-react-0.0.0.tgz를 사이트 프로젝트에 복사한 다음 pnpm add ./agentdog-react-0.0.0.tgz를 실행합니다. 같은 pnpm 워크스페이스에서는 workspace:* 의존성을 사용합니다.

React/React DOM 18.2 또는 19가 필요합니다. 필요한 CSS는 번들에 포함되어 자동 렌더링됩니다. Tailwind 설치/설정 변경과 별도 CSS import가 필요하지 않습니다. Next.js에서 handler를 전달하는 컴포넌트는 "use client"를 선언하세요.

화면 동작

• 채팅 열기 시 홈 화면에 이전 세션 목록을 표시합니다. 세션이 없으면 목록 영역을 숨깁니다.
• 새로운 채팅에서 추천 질문을 누르거나 직접 질문을 입력하면 첫 세션이 생성됩니다.
• 대화 요청에 응답하면 서버가 발급한 세션 ID와 제목을 반영합니다.
• 마지막 메시지를 전송한 세션이 목록 맨 위로 이동합니다. 각 행 오른쪽 × 버튼은 위젯의 목록에서만 제거하며 서버에 저장된 대화를 삭제하지 않습니다.
• 닫기 후 다시 열면 보던 화면, 대화 내용과 입력 중인 질문을 유지합니다. 상태는 컴포넌트 메모리에만 보관하며 새로고침이나 언마운트 시 초기화됩니다.
• Enter는 전송, Shift + Enter는 줄바꿈입니다. 한글 조합 중 Enter는 전송하지 않습니다.
• Authorization: Bearer <apiKey>로 POST /api/chat에 질문·이미지·세션 ID를 전송합니다. 실제 모델 사용 비용이 발생할 수 있으며 서버 오류는 대화에 표시합니다.

구현 구조

• Tailwind CSS / CLI 4.3.3: JSX의 ag: 접두사 유틸리티로 디자인과 반응형 스타일을 구성합니다. styles.css에는 Tailwind 진입점과 위젯 내부의 기본 요소 초기화만 둡니다. 전역 Preflight는 적용하지 않습니다.
• Zustand 5.0.15: src/chat-store.ts가 패널 열림, 화면, 세션, 선택된 대화, 입력 초안과 관련 액션을 관리합니다. 각 AgentChat은 독립적인 스토어를 생성합니다. React의 useState는 스토어 인스턴스의 초기 생성에만 사용합니다.
• src/mock-chat.ts: 추천 질문을 제공합니다. 실제 답변 요청은 src/chat-store.ts에서 처리합니다.

검증: pnpm --filter @agentdog/react test, pnpm --filter @agentdog/react typecheck, pnpm --filter @agentdog/react lint, pnpm --filter @agentdog/react build.