ChatAgentCard

Data Display

에이전트 이름·역할·스킬을 보여주는 소개 카드.

Usage

에이전트 이름·제공자·버전·스킬 같은 정체성 정보를 소개할 때 사용한다.

import

import { ChatAgentCard } from '@mildang/design-system/unofficial/Chat';

API Reference

ChatAgentCard Props

Prop

Type

Default

name

필수

ReactNode

지정 안 함

avatarSrc

string

지정 안 함

connected

boolean

지정 안 함

description

ReactNode

지정 안 함

endpoint

ReactNode

지정 안 함

icon

ReactNode

지정 안 함

labels

Partial<ChatAgentCardLabels>

지정 안 함

model

ReactNode

지정 안 함

onConnect

() => void

지정 안 함

provider

ReactNode

지정 안 함

skills

readonly ChatAgentSkill[]

지정 안 함

version

ReactNode

지정 안 함

같은 패밀리

@mildang/design-system/unofficial/Chat 에서 같이 내보내는 컴포넌트다.

Attachment

메시지에 첨부된 파일을 보여주는 카드.

ChainOfThought

AI 사고 과정을 접고 펼치는 타임라인.

ChatAgentPlan

진행 단계를 순서대로 보여주는 체크리스트.

ChatCodeDiff

파일 변경 내용을 줄 단위로 보여주는 뷰어.

ChatCodeRunner

코드와 실행 결과를 함께 보여주는 블록.

ChatDiffStat

추가·삭제 줄 수를 요약하는 표시.

ChatDocumentReference

업로드 문서의 페이지·인용 구간을 보여주는 카드.

ChatInlineCitation

본문 안에 삽입하는 출처 각주 마커.

ChatResultSummaryCard

작업 결과 요약과 후속 액션 카드.

ChatRetrievalChunks

검색으로 찾은 청크 목록과 점수 표시.

ChatTerminalBlock

명령과 실행 결과를 보여주는 읽기 전용 터미널 블록.

ChatTodoList

항목별 상태를 보여주는 할 일 목록.

Markdown

스트리밍 마크다운 본문 렌더러.

Message

assistant-ui 메시지를 감싸는 역할별 버블 컨테이너.

SwapLabel

두 라벨을 폭 애니메이션과 함께 교차 전환하는 표시부.

SystemMessage

대화 흐름 중간에 넣는 저채도 시스템 안내.

Tool

도구 호출 렌더 컴포넌트의 네임스페이스.

ToolFallback

등록되지 않은 도구 호출을 보여주는 기본 카드.

ToolGroup

연속된 도구 호출을 하나로 묶어 접는 래퍼.

ToolGroupByIndices

구 버전 ToolGroup 계약을 위한 인덱스 기반 어댑터.

예제

전부 채운 카드

연결 전 카드 예시다.

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ChatAgentCard } from '@mildang/design-system/unofficial/Chat';

type Props = ComponentProps<typeof ChatAgentCard>;
const DEFAULT_ARGS: Props = {
  name: '코드 리뷰 에이전트', version: 'v2.4.0', provider: '플랫폼팀',
  description: '변경분을 읽고 회귀 위험을 짚어 준 다음, 필요하면 테스트까지 돌립니다.',
  skills: [
    { name: 'search_docs', description: '사내 문서에서 근거를 찾아옵니다' },
    { name: 'run_tests', description: '변경된 패키지의 테스트를 돌립니다' },
    { name: 'open_pr', description: '리뷰어를 지정해 PR 을 엽니다' },
  ], endpoint: 'https://agents.internal/review', model: 'claude-opus-4', connected: false,
  onConnect: () => undefined, className: undefined,
};
export default function AgentCardFullExample(props: Partial<Props> = {}) { return <ChatAgentCard {...DEFAULT_ARGS} {...props} />; }

연결됨

연결된 카드 예시다.

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ChatAgentCard } from '@mildang/design-system/unofficial/Chat';
type Props = ComponentProps<typeof ChatAgentCard>;
const DEFAULT_ARGS: Props = { name: '코드 리뷰 에이전트', version: 'v2.4.0', provider: '플랫폼팀', description: '변경분을 읽고 회귀 위험을 짚어 준 다음, 필요하면 테스트까지 돌립니다.', skills: [{ name: 'search_docs', description: '사내 문서에서 근거를 찾아옵니다' }], connected: true, onConnect: () => undefined, className: undefined };
export default function AgentCardConnectedExample(props: Partial<Props> = {}) { return <ChatAgentCard {...DEFAULT_ARGS} {...props} />; }

최소 카드

이름만 전달한 예시다.

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ChatAgentCard } from '@mildang/design-system/unofficial/Chat';
type Props = ComponentProps<typeof ChatAgentCard>;
const DEFAULT_ARGS: Props = { name: '검색 도우미', className: undefined };
export default function AgentCardNameOnlyExample(props: Partial<Props> = {}) { return <ChatAgentCard {...DEFAULT_ARGS} {...props} />; }

정적 소개

연결 개념이 없는 예시다.

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ChatAgentCard } from '@mildang/design-system/unofficial/Chat';
type Props = ComponentProps<typeof ChatAgentCard>;
const DEFAULT_ARGS: Props = { name: '문서 요약 에이전트', provider: '지식관리팀', description: '긴 문서를 읽고 핵심만 다시 씁니다.', skills: [{ name: 'search_docs', description: '사내 문서에서 근거를 찾아옵니다' }, { name: 'run_tests', description: '변경된 패키지의 테스트를 돌립니다' }], model: 'claude-haiku-4', className: undefined };
export default function AgentCardNoConnectionExample(props: Partial<Props> = {}) { return <ChatAgentCard {...DEFAULT_ARGS} {...props} />; }