# ADS v2 — AI Usage Guide

This site is a component library. An AI agent can freely render any component
by encoding JSX into the /render endpoint. Just give an AI this site URL and
it can compose UIs using the components listed below.

## Render API

GET  /render?code=<url-encoded JSX>
GET  /render?code=<url-encoded JSX>&shell=1   (adds page padding)

Or postMessage into an <iframe src="/render">:
  iframe.contentWindow.postMessage({ type: "ads:render", code: "<Button>Hi</Button>" }, "*")

The code must be a single JSX expression (or multiple siblings; they will be
wrapped in a fragment). All components below are pre-imported in scope, plus
React and COLORS.

## Components

Button        <Button variant="primary|secondary|ghost|danger" size="sm|md|lg" color="#3182F6" radius={14} full>버튼</Button>
FloatingInput <FloatingInput id="x" label="이름" value="" variant="text|password|number|email" error errorMessage="..." helperText="..." color="#3182F6" />
Textarea      <Textarea id="x" label="메모" value="" error />
AnimatedCheckbox <AnimatedCheckbox label="동의" checked color="#3182F6" onChange={()=>{}} />
RadioGroup    <RadioGroup options={[{label:"A",value:"a"}]} value="a" color="#3182F6" onChange={()=>{}} />
SegmentedControl <SegmentedControl options={[{label:"입금",value:"in"}]} value="in" onChange={()=>{}} />
Switch        <Switch checked size="sm|md|lg" color="#3182F6" onChange={()=>{}} />
Dropdown      <Dropdown options={["A","B"]} value="" placeholder="선택" onChange={()=>{}} />
Modal         <Modal isOpen onClose={()=>{}} title="안내">본문</Modal>
PinPadScreen  <PinPadScreen isOpen onClose={()=>{}} onSuccess={()=>{}} />  // 정답 123456
ImageUpload   <ImageUpload />
Loading       <Loading variant="spinner|bar|dots" size={40} />
ProgressBar   <ProgressBar value={40} color="#3182F6" showLabel variant="linear|circular" size={140} thickness={12} />
Slider        <Slider value={50} min={0} max={100} color="#3182F6" onChange={()=>{}} />
Badge         <Badge variant="primary|success|warning|danger|neutral">NEW</Badge>
Card          <Card title="제목" description="설명"><Button size="sm">액션</Button></Card>
Toast         <Toast message="저장됨" variant="default|success|error" />
Tabs          <Tabs items={[{label:"개요",value:"o"}]} value="o" onChange={()=>{}} />
Tooltip       <Tooltip text="도움말"><Button>호버</Button></Tooltip>
SlidingPanels <SlidingPanels index={0}>{[<div/>,<div/>]}</SlidingPanels>

## Colors (COLORS token)

blue #3182F6, blueLight #E8F3FF, red #F04452, green #12B886, yellow #F59F00,
gray100 #F2F4F6, gray200 #E5E8EB, gray300 #D1D6DB, gray600 #8B95A1,
gray700 #4E5968, gray900 #191F28.

## Example

/render?code=%3CCard%20title%3D%22Hi%22%3E%3CButton%3EOK%3C%2FButton%3E%3C%2FCard%3E

## Machine-readable manifest

GET /api/components   -> JSON manifest of every component and its props.