App Builder

Echten Code schreiben.
Kontrollierte Tools liefern.

Code-first Builder mit echten TypeScript- oder Python-Projekten (FastAPI), container-backed Preview und gepinnten Build-Artefakten für governed Deployments.

Jetzt starten In Aktion sehen
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. Nicht Config-first.

Echtes TypeScript und React im TanStack-Start-Projektgraph schreiben. Die generierte App nutzt Workspace-Packages wie @app-builder-platform/ui und @app-builder-platform/data statt eines browser-only DSL.

01
Hot Reload

Container-basiertes HMR lädt gegen den lebenden Projektgraphen, sobald Sie speichern.

02
Starter-UI

shadcn-basiertes App-Template und Plattform-Packages — sofort erweiterbar in echtem React.

03
Typechecked

Container-TypeScript-Diagnostics zeigen Fehler inline — keine 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'}>
Echte React-Komponenten — keine Drag-and-Drop-Widgets
Template-backed UI-Primitives mit shadcn-Support
Governed Data Calls laufen über Server-/Runtime-APIs
TypeScript-Diagnostics kommen aus dem container-backed Projekt
React + TypeScript · shadcn Starter · Runtime APIs · HMR
Live-Vorschau

Vorschau mit echten Daten. Nicht mit Mocks.

Preview läuft über dieselben Projektdateien und denselben server-authoritative Pipeline-Pfad wie der Draft. Datenzugriff bleibt governed und serverseitig.

01
Preview Authority

Preview läuft über dieselbe container-backed Pipeline wie der Draft — kein Browser-Fallback.

02
Echter Datenzugriff

Server-authorized Runtime-APIs speisen die Preview aus Ihrer governed Data Plane.

03
Auditierbare Updates

Schema- und Tabellenverbindungsänderungen laufen über geprüfte Plattformoperationen.

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 ist container-backed und server-authorized
Code-Änderungen synchronisieren über die governed Preview-Pipeline
Datenzugriff nutzt Runtime-/Serverpfade mit scoped Grants
Schema- und Tabellenverbindungsänderungen bleiben auditierbare Plattformoperationen
Container Preview · Runtime APIs · Governed Data · HMR
KI-Agent

Beschreiben. Agent baut.

Agent-assisted Authoring wird über dieselben governed Workspace-, Credential-Proxy- und Patch-Pfade wie menschliche Änderungen verdrahtet.

01
Scoped Sessions

Agent-Runs sind auf Org, Workspace, Capsule, App, Environment und User scoped.

02
Governed Patch-Pfad

Generierte Edits konvergieren über dieselbe Patch-Pipeline wie menschliche Commits.

03
Credential-Proxy

Provider-Keys bleiben verschlüsselt und serverseitig proxied — nie im Browser sichtbar.

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 sind auf Org, Workspace, Capsule, App und User scoped
Provider-Credentials bleiben verschlüsselt und serverseitig proxied
Authoring läuft unter aktiver Studio Lease und Addon Checks
Generierte Änderungen konvergieren weiter über governed Projektdateien
Scoped Sessions · Credential Proxy · Studio Lease · Governed Patches OpenCode ansehen
Komponentenbibliothek

Bausteine. Bereit zur Komposition.

Relpin startet aus einem shadcn-basierten App-Template und Plattform-UI-Packages, danach erweitern Teams das echte React-Projekt.

01
Starter-Surface

Assignment-orientierte Tabellen, Forms und Layout-Scaffolding im App-Template enthalten.

02
shadcn-Baseline

Governed shadcn-Primitives über das Plattform-UI-Package — erweiterbar in echtem React.

03
Typisiertes Projekt

Container-Diagnostics liefern IDE-artiges Editing über den lebenden TypeScript-Graphen.

@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 enthält assignment-orientierte Tabellen, Forms und Layout-Struktur
shadcn-Support ist Teil des governed Template-Packages
Typisiertes React-Projekt mit Container-Diagnostics und IDE-artigem Editing
Konsistente Design Tokens — Farben, Abstände, Typografie aus Ihrer Theme-Config
shadcn Starter · TypeScript · Plattform-UI-Packages · Themed
Anwendungsfälle

Was Teams damit bauen.

Relpin zielt auf typische Ops-Tools wie Queues, CRUD-Workflows, Approval-Flows, Dashboards und Exception Triage.

Admin-Panels

Benutzer- & Systemverwaltung

Rollen-scoped Admin-Oberflächen mit audit-gestützten Operationen und operativen Statusansichten.

CRUD-Apps

Datenverwaltungstools

Vollständige Create-Read-Update-Delete-Workflows mit Validierung, Suche und eingebauter Paginierung.

Genehmigungsworkflows

Mehrstufige Prüfprozesse

Review-Prozesse mit Rollen-Gates, Eskalationsregeln und Tenant-Audit-Events.

Operative Dashboards

Operative Systemüberwachung

Operative Metriken, Alerting-Schwellenwerte und Drill-down-Ansichten über governed Data Paths.

Intake-Formulare

Intake und Datenerfassung

Validierte Intake-Formulare mit Workflow-Triggern, Connector Calls und Tenant-Audit-Events.

Ausnahme-Triage

Ausnahme- und Warteschlangenverwaltung

Aufgaben-Warteschlangen mit serverseitiger Filterung, Prioritätssortierung und Zuweisungs-Workflows.

Ops Use Cases unterstützt · Assignment Starter verfügbar · Governed Internal Tooling
App Builder

Schluss mit Konfigurieren.
Anfangen zu coden.

Echte TypeScript-Projekte. Container-backed Preview. Serverseitige Datenpfade. Gepinnte Build-Artefakte für governed Deploys.

Jetzt starten Plattform erkunden

Offene Beta · Demo-Workspace enthalten · Governance-fokussiert

Code-first · Kontrollierte Releases · Serverseitige Abfragen · Gebaut für den Betrieb