reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui205opt-charts40opt-datagrid9opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
reopt designreopt design

A design system for the AI era

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

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

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

Reopt AI Image Studio

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(generateEndpoint)로 아래 라우트를 호출합니다.sdk.ai.generateImage는 Vercel Blob URL과 크레딧 사용량을 반환합니다.

// app/api/brandapp-image/route.ts
import "server-only";
import { createLazySDK, isReoptSDKError } from "@reopt-ai/brandapp-sdk";
import type { ReoptImageGenerateRequest } from "@/components/reopt-ai-image-studio";

const sdk = createLazySDK(() => ({
  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()) as ReoptImageGenerateRequest;
  try {
    return Response.json(await sdk.ai.generateImage(body));
  } catch (error) {
    // typed 에러 code를 내려주면 Surface가 친화 메시지로 매핑합니다.
    if (isReoptSDKError(error)) {
      return Response.json(
        { error: { code: error.code, message: error.message } },
        { status: error.status },
      );
    }
    throw error;
  }
}
이 데모는 네트워크 요청 없는 seeded SVG placeholder를 사용합니다. 실제 Surface는generateImage 응답의 Vercel Blob URL을 그대로 렌더합니다.

Related Examples

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