설명
Claude와 ChatGPT, Cursor, Vercel AI SDK에서 자리 잡은 에이전트 UI 방식입니다. 에이전트가 웹 검색이나 코드 실행, 파일 읽기, DB 쿼리 같은 도구를 부르면 그 과정을 검은 박스로 두지 않고 어떤 도구를 어떤 인자로 호출했는지, 결과가 무엇인지를 접을 수 있는 칩이나 카드로 펼쳐 보여 줘요. 진행 중에는 스피너가 돌고 완료되면 결과 미리보기가, 실패하면 에러 메시지가 자리에 들어옵니다. 에이전트가 안에서 무엇을 하고 있는지 사용자에게 그대로 보여 주기 때문에 자연스럽게 신뢰가 쌓여요.
🖼️ 미니어처
💬 AI에게 이렇게 말하세요
- 에이전트가 도구를 부를 때 표시할 카드를 만들어 주세요. 좌측 도구 아이콘 + 가운데 도구명·인자 한 줄 요약 + 우측 진행 상태(스피너/체크/X).
- 카드는 기본 접힌 상태이고, 클릭하면 펼쳐서 전체 입력 인자(JSON) + 결과를 코드 블록으로 보여줍니다.
- 여러 도구가 순차 호출되면 카드를 세로로 stack. AI 답변과 같은 메시지 영역 안에 inline.
3가지 상태 시각
- Pending: 스피너와 도구명, 인자 미리보기 1줄로 표시해요.
- Success: 체크와 도구명, 결과 미리보기 1줄을 보여줍니다.
- Error: X(빨강)와 도구명, 에러 메시지를 띄우고 옵션으로 재시도 버튼을 둘 수 있어요.
⚡ 사용 예 (한 줄)
<Collapsible><CollapsibleTrigger>{toolName} <Loader2 className="animate-spin" /></CollapsibleTrigger><CollapsibleContent><pre>{JSON.stringify(args)}</pre></CollapsibleContent></Collapsible>🧩 컴포넌트 매핑
Vercel AI SDK의 ToolUI 패턴을 권장해요. 접힘은 shadcn/ui Collapsible로 처리합니다. lucide-react Loader2, Check, X 아이콘과 Tailwind animate-spin을 함께 씁니다.
도구 호출을 사용자에게 숨기고 '답변 생성 중…' 스피너만 보여 주면 에이전트가 무엇을 하는지 모르는 사용자는 신뢰를 잃습니다. 결과가 어떻게 나왔는지 확인할 방법도 없어져요.
도구명은 web_search나 run_python처럼 영어 그대로 두는 게 표준이지만, 그 옆에 '웹 검색'이나 '파이썬 실행' 같은 짧은 한국어 라벨을 부제로 적어 주면 한국 사용자에게 훨씬 친숙해요. 인자로 들어간 JSON은 접힘 안에 두고, 펼쳐도 너무 길면 '… 더 보기'로 잘라 줍니다.
도구 호출 영역에는 role="status"와 aria-live="polite"를 둡니다. 진행 중, 완료, 실패를 시각만 아니라 텍스트("검색 중", "완료", "실패")로도 명시해요. Collapsible은 aria-expanded 상태와 동기화합니다.