brandapp-sdk와 opt-ui를 조립한 copy-paste Surface 블록입니다. 문서 허브 대신 실제 컴포넌트의 라이브 프리뷰를 먼저 확인하고, opt surface add 한 줄로 소비자 프로젝트에 소스를 복사해 자유롭게 개조하세요.
brandapp-ui 활용 예제 8개. 각 카드에서 라이브 미리보기와 상세 코드 예제를 확인할 수 있습니다.
1,248
OAuth sessions
18
EAV entities
8,420
AI credits
3/4
Published terms
server-only clients · webhooks · terms
brandapp-sdk 인증, SDK verifier, OAuth secret rotation, EAV drift remediation, AI credit guard, webhook replay, 약관 publish 클라이언트를 한 화면에서 점검하는 운영 콘솔형 Surface입니다.
Reopt OAuth 로그인 트리거 버튼. 실패 시 useToast로 에러 메시지를 노출하고, 진행 중에는 Spinner + pendingLabel을 렌더합니다.
세션 상태에 따라 Avatar + Dropdown(로그아웃) 또는 로그인 버튼을 렌더하는 사용자 메뉴. 로딩/비로그인/로그인 3-state 를 자동 분기합니다.
이 화면을 이용하려면 Reopt 계정으로 로그인해주세요.
authClient.useSession() 상태에 따라 children/EmptyState/Skeleton 을 분기하는 게이트. 비로그인 시 인라인 안내와 SignInWithReoptButton CTA 가 노출됩니다.
한 번 로그인된 세션이 만료되거나 401 응답이 발생하면 전역 모달로 재로그인을 유도합니다. forceReauth=true 면 backdrop/ESC dismiss 가 비활성화됩니다.
Reopt AI Chat
brandapp-sdk × opt-chat
안녕하세요! Reopt AI 크레딧으로 구동되는 채팅입니다. 프롬프트를 입력하면 BrandApp 기본 모델이 스트리밍으로 응답합니다.
brandapp-sdk ai-provider + opt-chat useChatSession을 조합한 풀스택 채팅 Surface. streamText 라우트 핸들러로 BrandApp 크레딧 스트리밍 응답이 나가고, 헤더에서 모델·에이전트 선택과 크레딧 잔액 배지를 제공합니다.
Image Studio
brandapp-sdk × opt-ui
%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2258%25%22%20stop-color%3D%22hsl(84%2C%2072%25%2C%2048%25)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22hsl(224%2C%2052%25%2C%2024%25)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3CradialGradient%20id%3D%22glow%22%20cx%3D%2264%25%22%20cy%3D%2228%25%22%20r%3D%2256%25%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22rgba(255%2C255%2C255%2C0.7)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22rgba(255%2C255%2C255%2C0)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FradialGradient%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%22800%22%20height%3D%22800%22%20fill%3D%22url(%23bg)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%22800%22%20height%3D%22800%22%20fill%3D%22url(%23glow)%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%22224.00000000000003%22%20cy%3D%22280%22%20r%3D%22144%22%20fill%3D%22rgba(255%2C255%2C255%2C0.26)%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%22576%22%20cy%3D%22560%22%20r%3D%22176%22%20fill%3D%22rgba(0%2C0%2C0%2C0.18)%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M%2064%20624%20C%20224.00000000000003%20463.99999999999994%2C%20360%20720%2C%20544%20528%20S%20720%20480%2C%20768%20384%22%20fill%3D%22none%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.45)%22%20stroke-width%3D%2214.399999999999999%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%2264%22%20y%3D%22112.00000000000001%22%20fill%3D%22rgba(255%2C255%2C255%2C0.92)%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2248%22%20font-weight%3D%22700%22%3EReopt%20AI%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%2264%22%20y%3D%22168%22%20fill%3D%22rgba(255%2C255%2C255%2C0.78)%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2225.6%22%3E%EC%84%9C%EC%9A%B8%20%ED%95%9C%EA%B0%95%20%EC%95%BC%EA%B2%BD%2C%20%EB%84%A4%EC%98%A8%20%EA%B0%90%EC%84%B1%20%ED%8F%AC%EC%8A%A4%ED%84%B0%3C%2Ftext%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20)
brandapp-sdk ai.generateImage 결과를 Vercel Blob URL로 받아 opt-ui 컨트롤과 함께 렌더하는 text-to-image Surface. 프롬프트·비율·스타일 컨트롤과 최근 생성 썸네일을 함께 제공합니다.
| 레코드 | 세그먼트 | 유입 | 상태 | 생성일 |
|---|---|---|---|---|
| 봄 컬렉션 런칭 | 캠페인 | 127 | 활성 | 2026-03-12 |
| 친구 초대 이벤트 | 리퍼럴 | 84 | 활성 | 2026-03-09 |
| 얼리버드 할인 | 프로모션 | 213 | 보관 | 2026-02-28 |
| 신규 가입 웰컴 | 온보딩 | 56 | 초안 | 2026-03-15 |
| VIP 사전 예약 | 로열티 | 31 | 활성 | 2026-03-01 |
brandapp-sdk EAV 레코드를 opt-ui DataTable로 렌더하는 Surface. sdk.eav는 clientSecret이 필요한 서버 전용이라 서버 라우트가 records().list()를 프록시하고, columns 미지정 시 레코드 values 키로 컬럼을 자동 추론합니다.