SettingsForm
ShellsBuild settings forms from data with validation, radio buttons, and checkboxes.
Fill prompt variables, preview substitutions live, and copy the resulting AI prompt.
bun add @reopt-ai/opt-uiimport { PromptTemplate } from "@reopt-ai/opt-ui";Change the width and theme, then interact with the components.
AI에게 대시보드를 생성하도록 요청하는 프롬프트
@reopt-ai/opt-ui와 @reopt-ai/opt-cli registry blocks를 사용해서 이커머스 대시보드 Surface를 만들어줘. 요구사항: - BlockLayout으로 루트 래핑 (loading prop 포함) - SummaryRow로 핵심 지표 4개 표시 - TrendChart로 시계열 추이 - DataTable로 상세 목록 - 시맨틱 스페이싱 토큰 사용 (gap-section, gap-group, gap-element)
이 컴포넌트를 opt-ui 가이드라인에 맞게 리뷰해줘. 체크리스트: - Surface는 BlockLayout 래퍼 사용하는가 - loading prop 지원하는가 - 시맨틱 스페이싱 토큰 사용하는가 - Tab 순서가 논리적인가
Build settings forms from data with validation, radio buttons, and checkboxes.
Switch between sign-in and sign-up forms with email and password validation and a remember-me option.
Guide sequential input with field definitions, per-step validation, an associated progress indicator, and a review step.
Add and remove fields at runtime with count limits, individual validation, and dynamic store updates.
Select files with metadata, image previews, size limits, and description input.
Edit key-value pairs with dynamic rows, secret-value visibility, and validation.