Agentic UI/SurfaceRenderer

SurfaceRenderer

A2UI Surface를 React 컴포넌트로 렌더링하는 컴포넌트입니다. 허용된 카탈로그 컴포넌트만 렌더링하여 보안을 보장합니다.

Installation

bash

npx axis-cli add surface-renderer

Usage

데이터 수집이 완료되었습니다.

분석 결과

AI 분석 결과입니다.

총 42개의 세미나가 발견되었습니다.

tsx

import { SurfaceRenderer } from '@ax/ui'

const messageSurface = {
  id: 'msg-001',
  type: 'message',
  variant: 'info',
  content: '데이터 수집이 완료되었습니다.',
}

const cardSurface = {
  id: 'card-001',
  type: 'card',
  title: '분석 결과',
  description: 'AI 분석 결과입니다.',
  content: '총 42개의 세미나가 발견되었습니다.',
  badges: [{ label: 'AI', variant: 'secondary' }],
  actions: [
    { id: 'view', label: '상세 보기', type: 'primary' },
    { id: 'export', label: '내보내기', type: 'secondary' },
  ],
}

export function Example() {
  return (
    <div className="space-y-4">
      <SurfaceRenderer surface={messageSurface} />
      <SurfaceRenderer
        surface={cardSurface}
        context={{
          onAction: (surfaceId, actionId) => {
            console.log(`Action: ${actionId} on surface: ${surfaceId}`)
          }
        }}
      />
    </div>
  )
}

Message Variants

Info: 정보 메시지입니다.

Success: 작업이 성공적으로 완료되었습니다.

Warning: 주의가 필요한 상황입니다.

Error: 오류가 발생했습니다.

Progress Surface

데이터 수집 진행35 / 100

35개 완료, 65개 남음

tsx

const progressSurface = {
  id: 'progress-001',
  type: 'progress',
  title: '데이터 수집 진행',
  current: 35,
  total: 100,
  percentage: 35,
  status: 'active',
  message: '35개 완료, 65개 남음',
}

Allowed Surface Types

보안을 위해 허용된 Surface 타입만 렌더링됩니다.

form입력 폼 Surface

card일반 카드 Surface

table테이블 Surface

summary요약 Surface

action_buttons액션 버튼 그룹

progress진행률 표시

message메시지 (info/success/warning/error)

activity_previewActivity 미리보기

aar_templateAAR 템플릿

approval_request승인 요청

Props

Prop	Type	Default	Description
`surface*`	`A2UISurface`	-	A2UI Surface 데이터
`context`	`SurfaceRendererContext`	-	액션 콜백 컨텍스트
`className`	`string`	-	추가 CSS 클래스

SurfaceRendererContext

tsx

interface SurfaceRendererContext {
  onAction?: (surfaceId: string, actionId: string) => void
}

SurfaceType

tsx

type SurfaceType =
  | 'form'
  | 'card'
  | 'table'
  | 'summary'
  | 'action_buttons'
  | 'progress'
  | 'message'
  | 'activity_preview'
  | 'aar_template'
  | 'approval_request'