Build & Operate

Bridge Integration

각 opt 모듈은 page-local hook으로 snapshot을 등록하고, opt-devtool는 이를 하나의 overlay registry로 합칩니다.

reopt designUpdated Jun 26, 2026

1. Bridge contract

bridge hook은 ` inspect ` 콜백을 반환하고, 화면은 그 콜백을 각 엔진/provider의 `inspect` prop에 그대로 전달합니다. overlay 쪽은 hook이 mount될 때 자동으로 탭을 등록합니다. `opt-editor`와 `brandapp-sdk` bridge는 각각 전용 상단 탭에 연결됩니다.

모듈	Hook	주요 snapshot
opt-datagrid	useDataGridDevtoolBridge	activeCell, selection, editingCell, overlayOpen, visibleRegion, history, draftError
opt-editor	useEditorDevtoolBridge	mode, specVersion, selectedBlockIds/types, rootCount, elementCount, undo/redo, lastChangedIds, focusTarget, externalStreaming, feature flags
brandapp-sdk	useBrandappDevtoolBridge	brandappId, masked clientId, env presence, auth/EAV/AI status, route wiring, schema hash
opt-shell	useShellDevtoolBridge	manifest, density, contentWidth, navigationMode, stateBoundary, adapter chrome

2. DataGrid 연결

tsx

"use client";

import { DataGrid } from "@reopt-ai/opt-datagrid";
import { useDataGridDevtoolBridge } from "@reopt-ai/opt-devtool/datagrid";

export function AccountsGrid() {
  const { inspect } = useDataGridDevtoolBridge({
    id: "accounts-grid",
    label: "Accounts Grid",
  });

  return (
    <DataGrid
      rows={rows}
      columns={columns}
      getRowId={(row) => row.id}
      inspect={inspect}
    />
  );
}

3. Editor 연결

tsx

"use client";

import { Editor, useEditorStream } from "@reopt-ai/opt-editor";
import { useEditorDevtoolBridge } from "@reopt-ai/opt-devtool/editor";

export function ArticleEditor() {
  const stream = useEditorStream(store);
  const { inspect } = useEditorDevtoolBridge({
    id: "article-editor",
    label: "Article Editor",
    streamStatus: stream.status,
  });

  return (
    <Editor
      store={store}
      catalog={catalog}
      mode="edit"
      inspect={inspect}
    />
  );
}

4. Brandapp SDK 연결

tsx

"use client";

import { useBrandappDevtoolBridge } from "@reopt-ai/opt-devtool/brandapp";
import type { BrandappDevtoolSnapshot } from "@reopt-ai/opt-devtool/brandapp";

export function BrandappIntegrationDebug({
  snapshot,
}: {
  snapshot: BrandappDevtoolSnapshot;
}) {
  useBrandappDevtoolBridge({
    id: "brandapp",
    label: "Brandapp",
    snapshot,
  });

  return null;
}

5. Harness 연결

tsx

"use client";

import { ShellProvider } from "@reopt-ai/opt-shell";
import { useShellDevtoolBridge } from "@reopt-ai/opt-devtool/harness";

export function InspectableBuilderHarness({
  children,
}: {
  children: React.ReactNode;
}) {
  const { inspect } = useShellDevtoolBridge({
    id: "builder-harness",
    label: "Builder Harness",
  });

  return (
    <ShellProvider manifest={builderHarness} inspect={inspect}>
      {children}
    </ShellProvider>
  );
}

1. Bridge contract

모듈	Hook	주요 snapshot
opt-datagrid	useDataGridDevtoolBridge	activeCell, selection, editingCell, overlayOpen, visibleRegion, history, draftError
opt-editor	useEditorDevtoolBridge	mode, specVersion, selectedBlockIds/types, rootCount, elementCount, undo/redo, lastChangedIds, focusTarget, externalStreaming, feature flags
brandapp-sdk	useBrandappDevtoolBridge	brandappId, masked clientId, env presence, auth/EAV/AI status, route wiring, schema hash
opt-shell	useShellDevtoolBridge	manifest, density, contentWidth, navigationMode, stateBoundary, adapter chrome

2. DataGrid 연결

tsx

"use client";

import { DataGrid } from "@reopt-ai/opt-datagrid";
import { useDataGridDevtoolBridge } from "@reopt-ai/opt-devtool/datagrid";

export function AccountsGrid() {
  const { inspect } = useDataGridDevtoolBridge({
    id: "accounts-grid",
    label: "Accounts Grid",
  });

  return (
    <DataGrid
      rows={rows}
      columns={columns}
      getRowId={(row) => row.id}
      inspect={inspect}
    />
  );
}

3. Editor 연결

tsx

"use client";

import { Editor, useEditorStream } from "@reopt-ai/opt-editor";
import { useEditorDevtoolBridge } from "@reopt-ai/opt-devtool/editor";

export function ArticleEditor() {
  const stream = useEditorStream(store);
  const { inspect } = useEditorDevtoolBridge({
    id: "article-editor",
    label: "Article Editor",
    streamStatus: stream.status,
  });

  return (
    <Editor
      store={store}
      catalog={catalog}
      mode="edit"
      inspect={inspect}
    />
  );
}

4. Brandapp SDK 연결

tsx

"use client";

import { useBrandappDevtoolBridge } from "@reopt-ai/opt-devtool/brandapp";
import type { BrandappDevtoolSnapshot } from "@reopt-ai/opt-devtool/brandapp";

export function BrandappIntegrationDebug({
  snapshot,
}: {
  snapshot: BrandappDevtoolSnapshot;
}) {
  useBrandappDevtoolBridge({
    id: "brandapp",
    label: "Brandapp",
    snapshot,
  });

  return null;
}

5. Harness 연결

tsx

"use client";

import { ShellProvider } from "@reopt-ai/opt-shell";
import { useShellDevtoolBridge } from "@reopt-ai/opt-devtool/harness";

export function InspectableBuilderHarness({
  children,
}: {
  children: React.ReactNode;
}) {
  const { inspect } = useShellDevtoolBridge({
    id: "builder-harness",
    label: "Builder Harness",
  });

  return (
    <ShellProvider manifest={builderHarness} inspect={inspect}>
      {children}
    </ShellProvider>
  );
}