App Builder

실제 코드를 작성하고.
통제된 도구를 출시하세요.

실제 TypeScript 또는 Python(FastAPI) 프로젝트, 컨테이너 지원 프리뷰 및 통제형 배포를 위한 고정된 빌드 아티팩트를 갖춘 코드 우선 빌더입니다.

빌드 시작 실제 동작 보기
App Builder
라이브
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 />
코드 편집기

코드 우선. 구성 우선이 아닙니다.

TanStack Start 프로젝트 그래프 안에 실제 TypeScript 및 React를 작성합니다. 생성된 앱은 브라우저 전용 DSL 대신 @app-builder-platform/ui 및 @app-builder-platform/data와 같은 작업 공간 패키지를 사용합니다.

01
핫 리로드

컨테이너 지원 HMR는 저장 시 실시간 프로젝트 그래프에 대해 다시 로드됩니다.

02
스타터 UI

실제 React 코드로 확장할 준비가 된 shadcn 기반 앱 템플릿 및 플랫폼 패키지입니다.

03
유형 확인됨

컨테이너 TypeScript 진단 표면 오류는 인라인으로 표시되며 형식화되지 않은 바인딩 문자열은 없습니다.

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'}>
드래그 앤 드롭 위젯이 아닌 실제 React 구성 요소
shadcn을 지원하는 템플릿 기반 UI 기본 요소
통제된 데이터 호출은 서버/런타임 API를 통해 라우팅됩니다.
TypeScript 진단은 컨테이너 지원 프로젝트에서 제공됩니다.
React + TypeScript · shadcn 스타터 · 런타임 API · HMR
실시간 프리뷰

실제 데이터로 프리뷰합니다. 목업이 아닙니다.

미리보기는 초안과 동일한 프로젝트 파일 및 서버 권한 파이프라인을 통해 실행됩니다. 데이터 액세스는 브라우저-로컬 폴백이 되는 대신 서버 측에서 관리됩니다.

01
미리보기 권한

미리보기는 브라우저 대체가 아닌 초안과 동일한 컨테이너 지원 파이프라인을 통해 실행됩니다.

02
실제 데이터 액세스

서버 승인 런타임 API는 통제된 데이터 영역에서 미리보기를 제공합니다.

03
감사 가능한 업데이트

검토된 플랫폼 작업을 통해 스키마 및 테이블 연결 변경 경로가 변경됩니다.

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)
미리보기는 컨테이너 지원 및 서버 인증입니다.
통제된 미리보기 파이프라인을 통해 코드 변경 사항이 동기화됩니다.
데이터 액세스는 범위가 지정된 권한이 있는 런타임/서버 경로를 사용합니다.
스키마 및 테이블 연결 변경 사항은 감사 가능한 플랫폼 작업으로 유지됩니다.
컨테이너 미리보기 · 런타임 API · 통제된 데이터 · HMR
AI 에이전트

설명해보세요. 에이전트가 빌드합니다.

에이전트 지원 작성은 사람이 편집할 때와 동일한 통제된 작업 영역, 자격 증명 프록시 및 패치 경로를 통해 연결됩니다.

01
범위가 지정된 세션

에이전트 실행 범위는 조직, 작업 영역, 캡슐, 앱, 환경 및 사용자로 지정됩니다.

02
통제된 패치 경로

생성된 편집 내용은 사람이 커밋한 것과 동일한 패치 파이프라인을 통해 수렴됩니다.

03
자격 증명 프록시

공급자 키는 암호화된 상태로 서버 측에서 프록시 처리되어 브라우저에 노출되지 않습니다.

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?
에이전트 세션의 범위는 조직, 작업 영역, 캡슐, 앱 및 사용자로 지정됩니다.
제공자 자격 증명은 암호화된 상태로 유지되며 서버 측에서 프록시됩니다.
저작 작업은 활성 Studio 임대 및 애드온 확인에 따라 실행됩니다.
생성된 변경 사항은 여전히 ​​통제된 프로젝트 파일을 통해 수렴됩니다.
범위가 지정된 세션 · 자격 증명 프록시 · Studio 임대 · 통제된 패치 OpenCode 살펴보기
컴포넌트 라이브러리

조합할 준비가 된 빌딩 블록입니다.

Relpin은 shadcn 기반 앱 템플릿과 플랫폼 UI 패키지에서 시작한 다음 팀이 실제 React 프로젝트를 확장할 수 있도록 합니다.

01
스타터 표면

앱 템플릿에 포함된 할당 중심 테이블, 양식 및 레이아웃 스캐폴딩.

02
shadcn 기준선

플랫폼 UI 패키지를 통해 제공되는 통제된 shadcn 기본 요소는 실제 React로 확장됩니다.

03
형식화된 프로젝트

컨테이너 진단은 라이브 TypeScript 그래프 전반에 걸쳐 IDE 스타일 편집을 지원합니다.

@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
시작 UI에는 할당 중심의 테이블, 양식 및 레이아웃 구조가 포함되어 있습니다.
shadcn 지원은 통제된 템플릿 패키지의 일부입니다.
컨테이너 진단 및 IDE 스타일 편집 기능을 갖춘 형식화된 React 프로젝트
일관된 디자인 토큰 - 테마 구성의 색상, 간격, 타이포그래피
shadcn 스타터 · TypeScript · 플랫폼 UI 패키지 · 테마
사용 사례

팀이 실제로 만드는 것.

Relpin은 큐, CRUD 워크플로, 승인 흐름, 대시보드 및 예외 분류와 같은 일반적인 운영 도구를 대상으로 합니다.

관리자 패널

사용자 및 시스템 관리

감사 지원 작업 및 작업 상태 보기가 포함된 역할 범위의 관리 인터페이스입니다.

CRUD 앱

데이터 관리 도구

유효성 검사, 검색 및 페이지 매김 기능이 내장된 완전한 생성-읽기-업데이트-삭제 워크플로입니다.

승인 워크플로

다단계 검토 프로세스

역할 게이트, 에스컬레이션 규칙 및 전체 감사 추적을 갖춘 구성 가능한 승인 체인입니다.

운영 대시보드

실시간 시스템 모니터링

통제된 데이터 경로를 통해 연결된 운영 지표, 경고 임계값 및 드릴다운 보기.

접수 양식

섭취 및 데이터 수집

워크플로 트리거, 커넥터 호출 및 테넌트 감사 이벤트가 포함된 검증된 접수 양식입니다.

예외 심사

예외 및 큐 관리

서버 측 필터링, 우선 순위 정렬 및 할당 워크플로가 포함된 작업 항목 큐.

운영 사용 사례 지원 · 업무 시작 가능 · 통제된 내부 도구
App Builder

설정을 멈추고.
코딩을 시작하세요.

실제 TypeScript 프로젝트. 컨테이너 지원 미리보기. 서버 측 데이터 경로. 통제형 배포를 위한 고정된 빌드 아티팩트입니다.

빌드 시작 플랫폼 살펴보기

오픈 베타 · 데모 작업 공간 포함 · 거버넌스 중심

코드 우선 · 통제된 릴리스 · 서버 측 쿼리 · 작동하도록 구축