reopt designreopt design
DocsExploreToolsPricingBuilder
로그인
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/brandapp-ui/Reopt AI Image Studio
AI Imagebrandapp-ui 예제

Reopt AI Image Studio

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

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을 그대로 렌더합니다.

관련 예제

brandapp-ui

BrandApp Control Center

brandapp-ui - Control

Examples
createReoptEavClientcreateReoptTermsClient
brandapp-ui

Reopt AI Chat

brandapp-ui - AI Chat

Examples
ReoptAiChat
brandapp-ui

Reopt Record Table

brandapp-ui - Data Table

Examples
ReoptRecordTable
이전Reopt AI Chat다음Reopt Record Table