App Builder

Write real code.
Ship governed tools.

Code-first builder with real TypeScript or Python (FastAPI) projects, container-backed preview, and pinned build artifacts for governed deployment.

Start building See It In Action
App Builder
Live
OrderForm.tsx
OrderService.ts
relpin.config.ts
1import { executeQuery } from '@app-builder-platform/data'
2import { Button, Card, Input } from '@app-builder-platform/ui'
3
4export function CreateOrder() {
5 const orders = await executeQuery(
6 'orders.create'
7 )
8
9 return (
10 <Form onSubmit={mutate}>
11 <TextInput name="customer" required />
12 <Select name="priority"
13 options={['low', 'normal', 'urgent']}
14 />
Code Editor

Code-first. Not config-first.

Write real TypeScript and React inside a TanStack Start project graph. The generated app uses workspace packages such as @app-builder-platform/ui and @app-builder-platform/data rather than a browser-only DSL.

01
Hot reload

Container-backed HMR reloads against the live project graph as you save.

02
Starter UI

shadcn-based App template and platform packages ready to extend in real React code.

03
Type-checked

Container TypeScript diagnostics surface errors inline — no untyped binding strings.

Code Editor
StockLevels.tsx
AlertService.ts
relpin.config.ts
1import { useQuery } from '@app-builder-platform/data'
2import { TableView, Badge } from '@app-builder-platform/ui'
3
4export function StockLevels() {
5 const { data } = useQuery(
6 'inventory.stock_levels',
7 { where: { quantity: { lt: 100 } } }
8 )
9
10 return (
11 <TableView
12 rows={data}
13 columns={[
14 { key: 'sku', header: 'SKU' },
15 { key: 'name', header: 'Product' },
16 { key: 'qty', header: 'Qty' },
17 { key: 'status', render: (r) => (
18 <Badge variant={r.qty < 20 ?
19 'critical' : 'warning'}>
Real React components — not drag-and-drop widgets
Template-backed UI primitives with shadcn support
Governed data calls route through server/runtime APIs
TypeScript diagnostics come from the container-backed project
React + TypeScript · shadcn starter · runtime APIs · HMR
Live Preview

Preview on real data. Not mocks.

Preview runs through the same project files and server-authoritative pipeline as the draft. Data access stays governed and server-side instead of becoming a browser-local fallback.

01
Preview authority

Preview runs through the same container-backed pipeline as the draft — not a browser fallback.

02
Real data access

Server-authorized runtime APIs feed the preview from your governed data plane.

03
Auditable updates

Schema and table connection changes route through reviewed platform operations.

Live Preview
Code ChangeUpdate WHERE clause, table filters instantly
1const { data } = useQuery(
2 'inventory.stock_levels',
3 { where: {
4 quantity: { lt: 50 },
5 status: 'active'
6 } }
7)
Preview is container-backed and server-authorized
Code changes sync through the governed preview pipeline
Data access uses runtime/server paths with scoped grants
Schema and table connection changes remain auditable platform operations
Container preview · Runtime APIs · Governed data · HMR
AI Agent

Describe it. Agent builds it.

Agent-assisted authoring is being wired through the same governed workspace, credential proxy, and patch paths as human edits.

01
Scoped sessions

Agent runs are scoped to org, workspace, capsule, app, environment, and user.

02
Governed patch path

Generated edits converge through the same patch pipeline as human commits.

03
Credential proxy

Provider keys stay encrypted and proxied server-side — never exposed to the browser.

Agent CLI
$relpin agent "create order management table"
~Analyzing workspace...
~Found schema: orders (PostgreSQL)
+Created OrderTable.tsx (52 lines)
+Created OrderService.ts (38 lines)
+Created OrderTable.test.ts (24 lines)
~Running tests...
✓Tests: 8/8 passed
→Component ready. Pin as v2.4.0?
Agent sessions are scoped to org, workspace, capsule, app, and user
Provider credentials stay encrypted and proxied server-side
Authoring runs under active Studio lease and addon checks
Generated changes still converge through the governed project files
Scoped sessions · Credential proxy · Studio lease · Governed patches Explore OpenCode
Component Library

Building blocks. Ready to compose.

Relpin starts from a shadcn-based app template and platform UI packages, then lets teams extend the actual React project.

01
Starter surface

Assignment-oriented tables, forms, and layout scaffolding included in the App template.

02
shadcn baseline

Governed shadcn primitives shipped via the platform UI package — extend in real React.

03
Typed project

Container diagnostics power IDE-style editing across the live TypeScript graph.

@app-builder-platform/ui
Orders1-6 of 1,847
Order IDCustomerAmountStatusDate
ORD-1847Acme Corp$12,400Shipped2025-04-02
ORD-1846TechStart Inc$8,750Processing2025-04-02
ORD-1845Global Mfg$24,100Delivered2025-04-01
ORD-1844FastParts Co$3,200Pending2025-04-01
ORD-1843BoltWorks$15,600Shipped2025-03-31
ORD-1842Metro Supply$6,800Delivered2025-03-31
Page 1 of 308
Prev123Next
Starter UI includes assignment-oriented tables, forms, and layout structure
shadcn support is part of the governed template package
Typed React project with container diagnostics and IDE-style editing
Consistent design tokens — colors, spacing, typography from your theme config
shadcn starter · TypeScript · Platform UI packages · Themed
Use Cases

What teams build with it.

Relpin targets common ops tooling such as queues, CRUD workflows, approval flows, dashboards, and exception triage.

Admin Panels

User & system administration

Role-scoped admin interfaces with audit-backed operations and operational status views.

CRUD Apps

Data management tools

Full create-read-update-delete workflows with validation, search, and pagination built in.

Approval Workflows

Multi-step review processes

Configurable approval chains with role gates, escalation rules, and complete audit trails.

Operational Dashboards

Real-time system monitoring

Operational metrics, alerting thresholds, and drill-down views connected through governed data paths.

Intake Forms

Intake and data collection

Validated intake forms with workflow triggers, connector calls, and tenant audit events.

Exception Triage

Exception and queue management

Work-item queues with server-side filtering, priority sorting, and assignment workflows.

Ops use cases supported · Assignment starter available · Governed internal tooling
App Builder

Stop configuring.
Start coding.

Real TypeScript projects. Container-backed preview. Server-side data paths. Pinned build artifacts for governed deploys.

Start building Explore the platform

Open beta · Demo workspace included · Governance-focused

Code-first · Governed releases · Server-side queries · Built to operate