Inside the template

How modules are used

A developer playground pairs live BrandApp SDK workspaces with integration code. Data editing, rich-content rendering, and file browsing modules are composed into a shared UI.

4 modules

opt-ui

Navigation and demo/code layouts

Sidebar navigates SDK modules and tabs separate server and client code. Cards, alerts, badges, and inputs provide consistent connection settings, results, and error states.

AlertBadgeButtonCardCardDescriptionCardHeader+7 more

View APIs and 4 source files

CardTitleInputSidebarTabTabListTabPanelTabsRoot

components/sidebar.tsx@reopt-ai/opt-ui
app/auth/page.tsx@reopt-ai/opt-ui
app/connection/connection-form.tsx@reopt-ai/opt-ui
app/page.tsx@reopt-ai/opt-ui

opt-datagrid

EAV record editing

DataGrid columns are built from entity attributes, and cell edits feed the EAV bulk-update flow. Surrounding controls and SDK calls handle search, create, and delete actions.

DataGrid

View APIs and 1 source file

app/eav/records/record-demo.tsx@reopt-ai/opt-datagrid

opt-editor

Rich CMS and terms content

StaticRenderer displays CMS posts and terms from contentRich documents. These screens adapt SDK documents at the renderer boundary without instantiating an editor.

StaticRenderer

View APIs and 2 source files

app/cms/posts/[slug]/post-body.tsx@reopt-ai/opt-editor
app/terms/terms-body.tsx@reopt-ai/opt-editor

opt-filemanager

SDK-backed file browser

FileManager uses createBrandappFilesConnector for folder navigation, uploads, and file actions. A browser-safe client communicates with the server’s BrandApp Files API.

createBrandappFilesConnectorFileManager

View APIs and 1 source file

app/files/browser/file-browser-demo.tsx@reopt-ai/opt-filemanager

Dependency graph

Start with the packages used by this template. Depth 2 reveals components and adapter connections; depth 3 expands their catalog dependencies.

Graph depth