AXIS
Agentic UI/SurfaceRenderer

SurfaceRenderer

에이전트가 돌려준 Surface 데이터를 type 에 맞는 화면으로 렌더링하는 컴포넌트입니다. text · code · table 은 바로 그리고, custom 은 renderCustom 으로 그립니다.

Installation

bash
npx @axis-ds/cli add surface-renderer

Usage

요약

데이터 수집이 완료되었습니다. 총 42개의 세미나가 발견되었습니다.

세미나 목록

세미나 목록
제목날짜참석자
AI 에이전트 설계2026-11-03120
디자인 시스템 운영2026-11-1085
tsx
import { SurfaceRenderer, type Surface } from '@axis-ds/agentic-ui'

const textSurface: Surface = {
  id: 'surface-text',
  type: 'text',
  title: '요약',
  content: '데이터 수집이 완료되었습니다. 총 42개의 세미나가 발견되었습니다.',
}

const tableSurface: Surface = {
  id: 'surface-table',
  type: 'table',
  title: '세미나 목록',
  content: {
    headers: ['제목', '날짜', '참석자'],
    rows: [
      ['AI 에이전트 설계', '2026-11-03', '120'],
      ['디자인 시스템 운영', '2026-11-10', '85'],
    ],
  },
}

export function Example() {
  return (
    <div className="space-y-4">
      <SurfaceRenderer surface={textSurface} />
      <SurfaceRenderer surface={tableSurface} />
    </div>
  )
}

Code Surface

생성된 쿼리

SELECT title, date FROM seminars WHERE status = 'open'

Custom Surface

사용자 정의

전체 42개 중 30개 모집 중

tsx
const customSurface: Surface = {
  id: 'surface-custom',
  type: 'custom',
  title: '사용자 정의',
  content: { total: 42, open: 30 },
}

<SurfaceRenderer
  surface={customSurface}
  renderCustom={(surface) => {
    const { total, open } = surface.content as { total: number; open: number }
    return <p className="text-sm">전체 {total}개 중 {open}개 모집 중</p>
  }}
/>

Surface Types

아래 6가지 type 만 렌더링합니다. 그 밖의 값은 아무것도 그리지 않습니다.

text문자열 내용을 그대로 표시
code문자열 내용을 고정폭 코드 블록으로 표시
table{ headers: string[]; rows: string[][] } 를 표로 표시
chart자리 표시자만 표시 (차트는 직접 그려야 함)
form자리 표시자만 표시 (폼은 직접 그려야 함)
customrenderCustom 이 돌려준 내용을 표시

Props

surfaceRequired
Type:Surface
Default:-

렌더링할 Surface 데이터

renderCustom
Type:(surface: Surface) => React.ReactNode
Default:-

type 이 "custom" 일 때 내용을 그리는 함수

className
Type:string
Default:-

추가 CSS 클래스

Surface Type

idRequired
Type:string

Surface 고유 식별자

typeRequired
Type:SurfaceType

Surface 종류

title
Type:string
Default:-

머리 제목 (table 은 caption 으로도 쓰임)

contentRequired
Type:unknown

type 에 맞는 내용

metadata
Type:Record<string, unknown>
Default:-

추가 정보

tsx
type SurfaceType = 'text' | 'code' | 'table' | 'chart' | 'form' | 'custom'

Accessibility

table surface 는 role="table" 과 scope="col" 머리글로 마크업되고, title 이 있으면 화면에 보이지 않는 caption 으로도 전달됩니다.

  • custom surface 의 접근성은 renderCustom 이 그린 내용이 책임집니다.