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

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

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

© 2026 reopt-ai. All rights reserved.

Explore/brandapp-ui/Reopt AI Chat
AI Chatbrandapp-ui 예제

Reopt AI Chat

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

Full chat surface wiring brandapp-sdk AI provider to opt-chat Conversation + PromptInput with streaming.

aichatstreamingbrandapp-sdk
opt surface add reopt-ai-chat
ReoptAiChat
1024px

Reopt AI Chat

brandapp-sdk × opt-chat

8,420 / 10,000
EH

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

streaming demo

Server route (required)

Surface는 DefaultChatTransport로 아래 라우트를 호출합니다.@reopt-ai/brandapp-sdk/ai-provider가 BrandApp AI 크레딧을 Vercel AI SDK streamText에 연결합니다.

// app/api/chat/route.ts
import { createBrandappProvider } from "@reopt-ai/brandapp-sdk/ai-provider";
import { convertToModelMessages, streamText } from "ai";

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

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: brandapp("anthropic/claude-haiku-4.5"),
    messages: convertToModelMessages(messages),
  });
  return result.toUIMessageStreamResponse();
}
이 데모는 네트워크 왕복을 setTimeout으로 대체한 로컬 시뮬레이션입니다. 실제 Surface는 useChatSession({transport})로 SSE 스트림을 그대로 렌더링합니다.

관련 예제

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
열기

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
열기

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
열기
이전Session Expired Dialog다음Reopt AI Image Studio