reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

Explore/brandapp-ui/Reopt AI Image Studio
AI Imagebrandapp-ui example

Reopt AI Image Studio

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

Text-to-image studio combining brandapp-sdk image generation with opt-ui primitives.

aiimagegenerationbrandapp-sdk
opt surface add reopt-ai-image-studio
ReoptAiImageStudio
1024px

Image Studio

brandapp-sdk × opt-ui

비율
사용 크레딧
120
남은 크레딧
4,880
서울 한강 야경, 네온 감성 포스터

최근 생성

Server route (required)

Surface는 fetch(apiEndpoint)로 아래 라우트를 호출합니다.sdk.ai.generateImage는 Vercel Blob URL과 크레딧 사용량을 반환합니다.

// app/api/brandapp-image/route.ts
import { createReoptSDK } from "@reopt-ai/brandapp-sdk";

const sdk = createReoptSDK({
  clientId: process.env.BRANDAPP_CLIENT_ID!,
  clientSecret: process.env.BRANDAPP_CLIENT_SECRET!,
  brandappId: process.env.BRANDAPP_ID!,
});

export async function POST(req: Request) {
  const body = await req.json();
  const result = await sdk.ai.generateImage(body);
  return Response.json(result);
}
이 데모는 네트워크 요청 없는 seeded SVG placeholder를 사용합니다. 실제 Surface는generateImage 응답의 Vercel Blob URL을 그대로 렌더합니다.

Related Examples

BrandApp Control
healthy

1,248

OAuth sessions

18

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

Reopt AI Chat

brandapp-sdk × opt-chat

EH

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

AI Chatbrandapp-ui

Reopt AI Chat

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

aichatstreamingbrandapp-sdk
ReoptAiChat
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
PreviousReopt AI ChatNextReopt Record Table