opt-chat

Skip the docs hub and look at real chat UI examples. Starter chat, tool transcripts, approval UX, agent workspaces — combinations that drop straight into product chat.

6 opt-chat examples. Each card includes a live preview and detailed code samples.

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

Starter Chat

Conversation + Message + PromptInput

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

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

Starteropt-chat

Starter Conversation

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

conversationprompt-inputcore

ConversationConversationContentMessageMessageContent+5

Open

Auto Mapping

MessageParts maps reasoning, tool output, and sources in one pass

이번 배포 이후 주요 회귀를 찾아줘

매개변수

json

{
  "releaseId": "rel_2026_04_10",
  "regions": [
    "Seoul",
    "Tokyo",
    "Virginia"
  ]
}

결과

json

{
  "regressions": [
    "billing-sync latency +82ms",
    "session-cache error rate 2.4%",
    "webhook-relay failed job retries x3"
  ]
}

가장 큰 회귀는 billing-sync latency 증가입니다. 이어서 session-cache error rate, webhook-relay 재시도 증가가 보입니다.

Transcriptopt-chat

Tool Transcript

MessageParts가 reasoning, tool output, source-url을 자동 매핑해 transcript 하나로 렌더링하는 예제입니다.

message-partstoolsources

MessageMessageContentMessageParts

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

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 후보를 좁히고 필요한 패치를 제안합니다.

출력

billing-sync latency regression identified. queue drain patch generated.

Latency diff analysed

Failing routes isolated

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

Release Soak

Install smoke · fresh app import/render/build

릴리즈 후보 스모크 결과 요약

매개변수

json

{
  "package": "@reopt-ai/opt-chat",
  "consumers": [
    "next-app",
    "vite-app"
  ],
  "imports": [
    ".",
    "./flow",
    "./styles.css"
  ]
}

결과

json

{
  "status": "passed",
  "checks": [
    "root import renders Conversation",
    "flow subpath stays optional-peer safe",
    "production build resolves workspace dependency ranges"
  ]
}

Install smoke가 통과하면 packaging 축은 release gate를 통과합니다.

Readinessopt-chat

Release Soak

install smoke, browser matrix, streaming soak를 하나의 결정적 fixture로 묶어 릴리즈 직전 검증 흐름을 보여줍니다.

releasesoakproduction

ConversationConversationContentMessageMessageContent+5

Open

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> ); }