Assemble project screens directly in Builder
Choose a starter, connect blocks and data sources on the page canvas, then verify screen quality against the active shell preset. Builder is the workspace for creating internal tools one real screen at a time.
app/orders/page.tsxacme-admin
1import { ShellWorkspace } from "@reopt-ai/opt-shell";
2import { OrdersTable } from "@/blocks/orders-table";
3import { OrdersSummary } from "@/blocks/orders-summary";
4
5export default function OrdersPage() {
6 return (
7 <ShellWorkspace recipe="console">
8 <OrdersTable density="compact" />
9 <OrdersSummary range="30d" />
10 </ShellWorkspace>
11 );
12}
Your project
opt sync — zshzsh
$opt sync --watch
✓linked acme-admin
→push OrdersTable
←pull OrdersSummary
✓in sync · 2 blocks
→Code to Builder
←Builder to code
OPT-CLIWorks with Claude, ChatGPT, Gemini
/builder/projects/acme/orders
CanvasDataUX Flow
Orders tableDataGridRemote source · filters · batched save
Filter barBlocksRange, status, owner
Summary cardChartMetric block added in Builder
Densitycompact
Recipeconsole
reopt design
Choose where authoring starts by project
New projects, proven starters, shell preset management, and experiment tools are arranged around the project authoring flow.
Open projectsMove from canvas to verification in one flow like a builder
Template selection, screen composition, shell preset verification, and agent edits all stay on the same project structure.
Open shell presets01
Choose a starter or blank project
Pick the right screen structure and add the pages the project needs.
Choose a starter or blank project
02
Verify against the active shell
Match width, density, states, and accessibility policy to the active shell preset.
Verify against the active shell
03
Extend with agents
Continue into the next screen from the same node tree and data contract.
Extend with agents