brandapp-ui

brandapp-sdk와 opt-ui를 조립한 copy-paste Surface 블록입니다. 문서 허브 대신 실제 컴포넌트의 라이브 프리뷰를 먼저 확인하고, opt surface add 한 줄로 소비자 프로젝트에 소스를 복사해 자유롭게 개조하세요.

8 brandapp-ui examples. Each card includes a live preview and detailed code samples.

BrandApp Control

healthy

1,248

OAuth sessions

EAV entities

8,420

AI credits

3/4

Published terms

SDK verifierready

server-only clients · webhooks · terms

Controlbrandapp-ui

BrandApp Control Center

brandapp-sdk 인증, SDK verifier, OAuth secret rotation, EAV drift remediation, AI credit guard, webhook replay, 약관 publish 클라이언트를 한 화면에서 점검하는 운영 콘솔형 Surface입니다.

brandapp-sdkverifierautheavai+1

createReoptEavClientcreateReoptTermsClientcreateBrandappProviderSignInGate

Open

Auth Buttonbrandapp-ui

Sign In With Reopt Button

Reopt OAuth 로그인 트리거 버튼. 실패 시 useToast로 에러 메시지를 노출하고, 진행 중에는 Spinner + pendingLabel을 렌더합니다.

authoauthbutton

SignInWithReoptButton

Open

User Menubrandapp-ui

Reopt User Menu

세션 상태에 따라 Avatar + Dropdown(로그아웃) 또는 로그인 버튼을 렌더하는 사용자 메뉴. 로딩/비로그인/로그인 3-state 를 자동 분기합니다.

authsessiondropdownavatar

ReoptUserMenu

Open

로그인이 필요합니다

이 화면을 이용하려면 Reopt 계정으로 로그인해주세요.

Auth Gatebrandapp-ui

Sign In Gate

authClient.useSession() 상태에 따라 children/EmptyState/Skeleton 을 분기하는 게이트. 비로그인 시 인라인 안내와 SignInWithReoptButton CTA 가 노출됩니다.

authsessionempty-stategate

SignInGate

Open

Session Modalbrandapp-ui

Session Expired Dialog

한 번 로그인된 세션이 만료되거나 401 응답이 발생하면 전역 모달로 재로그인을 유도합니다. forceReauth=true 면 backdrop/ESC dismiss 가 비활성화됩니다.

authsessiondialogglobal

SessionExpiredDialogSESSION_EXPIRED_EVENT

Open

Reopt AI Chat

brandapp-sdk × opt-chat

안녕하세요! Reopt AI 크레딧으로 구동되는 채팅입니다. 프롬프트를 입력하면 BrandApp 기본 모델이 스트리밍으로 응답합니다.

AI Chatbrandapp-ui

Reopt AI Chat

brandapp-sdk ai-provider + opt-chat useChatSession을 조합한 풀스택 채팅 Surface. streamText 라우트 핸들러로 BrandApp 크레딧 스트리밍 응답이 나가고, 헤더에서 모델·에이전트 선택과 크레딧 잔액 배지를 제공합니다.

aichatstreamingbrandapp-sdk

ReoptAiChat

Open

Image Studio

brandapp-sdk × opt-ui

프롬프트

비율

AI Imagebrandapp-ui

Reopt AI Image Studio

brandapp-sdk ai.generateImage 결과를 Vercel Blob URL로 받아 opt-ui 컨트롤과 함께 렌더하는 text-to-image Surface. 프롬프트·비율·스타일 컨트롤과 최근 생성 썸네일을 함께 제공합니다.

aiimagegenerationbrandapp-sdk

ReoptAiImageStudio

Open

Data Table

레코드	세그먼트	유입	상태	생성일
봄 컬렉션 런칭	캠페인	127	활성	2026-03-12
친구 초대 이벤트	리퍼럴	84	활성	2026-03-09
얼리버드 할인	프로모션	213	보관	2026-02-28
신규 가입 웰컴	온보딩	56	초안	2026-03-15
VIP 사전 예약	로열티	31	활성	2026-03-01

Data Tablebrandapp-ui

Reopt Record Table

brandapp-sdk EAV 레코드를 opt-ui DataTable로 렌더하는 Surface. sdk.eav는 clientSecret이 필요한 서버 전용이라 서버 라우트가 records().list()를 프록시하고, columns 미지정 시 레코드 values 키로 컬럼을 자동 추론합니다.

eavdatatablebrandapp-sdk

ReoptRecordTable

Open

brandapp-ui

8 brandapp-ui examples. Each card includes a live preview and detailed code samples.

레코드

세그먼트

유입

상태

생성일

봄 컬렉션 런칭

캠페인

127

활성

2026-03-12

친구 초대 이벤트

리퍼럴

활성

2026-03-09

얼리버드 할인

프로모션

213

보관

2026-02-28

신규 가입 웰컴

온보딩

초안

2026-03-15

VIP 사전 예약

로열티

활성

2026-03-01