Agentic UI/AgentAvatar

AgentAvatar

AI 에이전트를 나타내는 아바타 컴포넌트입니다. 상태 표시와 에이전트 타입별 색상을 지원합니다.

Installation

bash
npx axis-cli add agent-avatar --agentic

Sizes

S

sm

M

md

L

lg

X

xl

Types

C
Assistant
C
Tool
S
System

Status

O
Online
B
Busy
O
Offline

Usage

tsx
import { AgentAvatar } from '@axis-ds/agentic-ui'

export function Example() {
  return (
    <div className="flex items-center gap-4">
      <AgentAvatar name="Claude" type="assistant" status="online" />
      <AgentAvatar name="Code Tool" type="tool" status="busy" />
      <AgentAvatar name="System" type="system" status="offline" />
    </div>
  )
}

Props

nameRequired
Type:string

에이전트 이름

src
Type:string
Default:-

이미지 URL

size
Type:"sm" | "md" | "lg" | "xl"
Default:"md"

아바타 크기

status
Type:"online" | "busy" | "offline"
Default:-

상태 표시

type
Type:"assistant" | "tool" | "system"
Default:"assistant"

에이전트 타입

className
Type:string
Default:-

추가 CSS 클래스