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 Chat
AI Chatbrandapp-ui 예제

Reopt AI Chat

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

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,
  createUIMessageStreamResponse,
  streamText,
  toUIMessageStream,
} 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: await convertToModelMessages(messages),
  });
  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}
이 데모는 네트워크 왕복을 setTimeout으로 대체한 로컬 시뮬레이션입니다. 실제 Surface는 useChatSession({transport})로 SSE 스트림을 그대로 렌더링합니다.

관련 예제

brandapp-ui

BrandApp Control Center

brandapp-ui - Control

Examples
createReoptEavClientcreateReoptTermsClient
brandapp-ui

Reopt AI Image Studio

brandapp-ui - AI Image

Examples
ReoptAiImageStudio
brandapp-ui

Reopt Record Table

brandapp-ui - Data Table

Examples
ReoptRecordTable
이전Session Expired Dialog다음Reopt AI Image Studio