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 Record Table
Data Tablebrandapp-ui example

Reopt Record Table

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

EAV record table surface wiring a server-side sdk.eav proxy to opt-ui DataTable with auto-inferred columns.

eavdatatablebrandapp-sdk
opt surface add reopt-record-table
ReoptRecordTable
1024px

EAV 레코드 — customers

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

Server route (required)

sdk.eav는 clientSecret이 필요한 서버 전용 클라이언트입니다. 서버 라우트가 records(entityId).list()를 프록시하면 Surface는 그 endpoint를 fetch해 DataTable로 렌더합니다.

// app/api/records/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 GET(req: Request) {
  const entityId = new URL(req.url).searchParams.get("entityId");
  if (!entityId) return Response.json({ data: [] });
  const page = await sdk.eav.records(entityId).list({ page: 1, pageSize: 50 });
  return Response.json(page); // { data: EavRecord[], total, page, pageSize }
}
이 데모는 mock 레코드로 렌더한 로컬 시뮬레이션입니다. 실제 Surface는 recordsEndpoint를 fetch하며, columns 미지정 시 레코드 values 키로 컬럼을 자동 추론합니다.

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

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
PreviousReopt AI Image Studio