생성형 UI

// CopilotKit — useCopilotAction + render 패턴
useCopilotAction({
  name: 'showWeather',
  description: '날씨 정보를 카드로 표시',
  parameters: [
    { name: 'city', type: 'string', description: '도시 이름' },
  ],
  render: ({ args, status }) => {
    if (status === 'executing') return <WeatherSkeleton />
    return <WeatherCard city={args.city} />
  },
  handler: async ({ city }) => {
    return await fetchWeather(city)
  },
})

// Vercel AI SDK — streamUI 패턴
const result = await streamUI({
  model: openai('gpt-4o'),
  messages,
  tools: {
    showWeather: {
      description: '날씨 정보를 카드로 표시',
      parameters: z.object({ city: z.string() }),
      generate: async function* ({ city }) {
        yield <WeatherSkeleton />
        const data = await fetchWeather(city)
        return <WeatherCard data={data} />
      },
    },
  },
})

// component-registry.ts
import { z } from 'zod'

interface RegistryEntry<T extends z.ZodType> {
  component: React.ComponentType<z.infer<T>>
  props: T
  description: string
  tags: string[]
}

const registry = {
  'weather-card': {
    component: WeatherCard,
    props: z.object({
      city: z.string(),
      temperature: z.number(),
      condition: z.enum(['sunny', 'cloudy', 'rainy', 'snowy']),
    }),
    description: '날씨 정보를 카드 형태로 표시',
    tags: ['data-display', 'card'],
  },
  'stock-chart': {
    component: StockChart,
    props: z.object({
      symbol: z.string(),
      period: z.enum(['1d', '1w', '1m', '3m', '1y']),
    }),
    description: '주식 시세를 차트로 시각화',
    tags: ['data-display', 'chart'],
  },
  'booking-form': {
    component: BookingForm,
    props: z.object({
      serviceType: z.enum(['hotel', 'flight', 'restaurant']),
      defaultDate: z.string().optional(),
    }),
    description: '예약 양식을 렌더링',
    tags: ['form', 'interactive'],
  },
} satisfies Record<string, RegistryEntry<z.ZodType>>

// validate-registry.ts

function validateRegistryComponent(name: string) {
  const entry = registry[name]
  const testElement = render(<entry.component {...mockProps(entry.props)} />)

  return {
    // 디자인 토큰 사용 여부
    usesDesignTokens: !containsHardcodedValues(testElement),
    // 접근성 준수 여부
    a11yCompliant: await runAxeCheck(testElement),
    // 반응형 대응 여부
    responsive: checkResponsiveBreakpoints(testElement),
  }
}

// components/copilot-actions.tsx
'use client'

import { useCopilotAction } from '@copilotkit/react-core'

export function useDashboardActions() {
  useCopilotAction({
    name: 'renderChart',
    description: '데이터를 차트로 시각화합니다',
    parameters: [
      { name: 'type', type: 'string', description: 'bar | line | pie' },
      { name: 'title', type: 'string', description: '차트 제목' },
      { name: 'data', type: 'object[]', description: '차트 데이터 배열' },
    ],
    render: ({ args, status }) => {
      // status: 'executing' → 'inProgress' → 'complete'
      if (status === 'executing') return <ChartSkeleton />
      return <ChartCard type={args.type} title={args.title} data={args.data} />
    },
    handler: async ({ type, title, data }) => {
      return { success: true, rendered: true }
    },
  })
}

// lint-generated-ui.ts

function lintGeneratedUI(element: React.ReactElement): LintResult {
  const violations: Violation[] = []

  // 하드코딩된 색상 값 감지
  if (containsHardcodedColors(element)) {
    violations.push({ rule: 'no-hardcoded-colors', severity: 'error' })
  }
  // 비표준 간격 값 감지
  if (containsNonStandardSpacing(element)) {
    violations.push({ rule: 'standard-spacing', severity: 'warning' })
  }

  return { passed: violations.length === 0, violations }
}

// a11y-gate.ts
import { axe } from 'axe-core'

async function validateA11y(container: HTMLElement) {
  const results = await axe.run(container)
  if (results.violations.length > 0) {
    return { valid: false, fallback: <DefaultFallbackUI /> }
  }
  return { valid: true }
}

// security-guardrails.ts

const ALLOWED_COMPONENTS = new Set(Object.keys(registry))

function sanitizeGeneratedUI(spec: GeneratedUISpec): SafeUISpec {
  // 1. 허용된 컴포넌트만 통과
  if (!ALLOWED_COMPONENTS.has(spec.component)) {
    throw new SecurityError(`허용되지 않은 컴포넌트: ${spec.component}`)
  }

  // 2. Props를 Zod 스키마로 검증
  const entry = registry[spec.component]
  const validatedProps = entry.props.parse(spec.props)

  // 3. XSS 방지: 문자열 props 이스케이프
  const sanitizedProps = sanitizeStringProps(validatedProps)

  return { component: spec.component, props: sanitizedProps }
}

{
  "type": "card",
  "title": "서울 날씨",
  "content": [
    { "type": "metric", "label": "현재 기온", "value": "24°C" },
    {
      "type": "chart",
      "chartType": "line",
      "data": { "labels": ["06시", "12시", "18시"], "values": [18, 24, 20] }
    }
  ],
  "actions": [
    { "label": "상세 보기", "action": "navigate", "target": "/weather/seoul" }
  ]
}