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/opt-chat/Starter Conversation
Starteropt-chat example

Starter Conversation

Conversation, Message, PromptInput 조합만으로 첫 채팅 surface를 붙이는 가장 짧은 시작점입니다.

Core compound example for a basic chat loop without extra chrome.

conversationprompt-inputcore
bun add @reopt-ai/opt-chat
ConversationConversationContentMessageMessageContentMessageResponsePromptInputPromptInputTextareaPromptInputFooterPromptInputSubmit
1024px
Starter Chat
Conversation + Message + PromptInput

Conversation, Message, PromptInput만으로도 첫 채팅 surface를 빠르게 만들 수 있습니다.

프롬프트를 입력하면 아래 루프가 그대로 이어집니다. 서버 없이도 compound 구조를 먼저 맞출 수 있습니다.

core compound

Related Examples

Agent Surface
Agent, Queue, Artifact, Terminal, TestResults in one workspace

회귀 분석을 마친 뒤 코드 패치와 검증 결과를 함께 보여주는 agent workspace 예제입니다.

Release Investigatorgpt-5.4

rollout 이후 billing, cache, relay 경로를 우선 조사합니다.

지침
에러율, latency, failed jobs를 묶어서 root cause 후보를 좁히고 필요한 패치를 제안합니다.
{
  "query": "string",
  "since": "1h"
}
{
  "branch": "string"
}
출력
billing-sync latency regression identified. queue drain patch generated.
Latency diff analysed
Failing routes isolated
Patch billing retry backoff
Re-run release smoke tests

release-summary-card.tsx

Generated patch preview

tsx
export function ReleaseSummaryCard() {
  return (
    <section className="rounded-2xl border p-5 shadow-sm">
      <h2 className="text-lg font-semibold">Release Summary</h2>
      <p className="mt-2 text-sm text-muted-foreground">
        Billing sync latency increased after the latest rollout.
      </p>
    </section>
  );
}
Agentopt-chat

Agent Workspace

Agent, Queue, Artifact, Terminal, TestResults를 묶어 multi-step agent run surface를 구성하는 예제입니다.

agentartifactqueue
AgentQueueArtifactCodeBlock+2
Open
Ops Agentsonnet

3 tools active

AgentOps is connected to BrandApp AI, EAV records, deployment notes, and the approval queue. Pick a runbook or ask for a status sweep.

What is blocking the spring launches right now?

Three launches are blocked: two are waiting on legal copy and one is missing a BrandApp EAV segment mapping. Owners are assigned on all three. I drafted a guarded patch you can review in the Approval gate before any EAV write runs.

audit export readyeval readyrelease blocked
Appopt-chat

AI Agent Ops App

opt-chat의 Conversation, Agent, Tool, Queue, Context, Sources를 묶고 agent memory, approval-gated EAV patch, rollback audit, replay audit export, eval suite, release gate, brandapp-sdk AI route를 전제로 한 운영 에이전트 앱입니다.

appagenttoolauditevals+2
ConversationPromptInputAgentTool+5
Open
Approval UX
Confirmation compound around a risky tool call

프로덕션 마이그레이션을 실행하려고 합니다. 실행 전에 사용자의 명시적 승인을 요청합니다.

매개변수

json
{
  "target": "production",
  "migration": "20260410_add_release_flags",
  "dryRun": false
}

`run_migration` 도구를 실행할까요?

대상은 production database이며, 롤백 플랜 없이 바로 실행됩니다.

승인 대기 중입니다. 이 상태에서 기본 승인/거부 버튼을 그대로 사용할 수 있습니다.
Approvalopt-chat

Approval Flow

Confirmation compound로 위험한 도구 호출의 승인 대기, 승인 완료, 거부 상태를 UX로 나눈 예제입니다.

confirmationtoolworkflow
ConfirmationConfirmationActionsConfirmationRequestConfirmationAccepted+6
Open
PreviousAI Agent Ops AppNextTool Transcript