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

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • 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 Chat
AI Chatbrandapp-ui example

Reopt AI Chat

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,
  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 스트림을 그대로 렌더링합니다.

Related Examples

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
PreviousSession Expired DialogNextReopt AI Image Studio