TIP

You already know what a Rabetbase project workspace can do and how to prompt AI in your Vibe Coding tool. This page handles step one: getting the project up.

Tell the AI to create the project

Open the directory where you want the project, in Claude Code, Codex, Trae, or Cursor, and just say:

INFO

Say this to the AI:

帮我创建一个 Rabetbase 项目。
项目名是 my-project，绑定到应用 app-xxxx，环境用 production。

The AI runs rabetbase project create automatically and generates the full project scaffold and config files. If you don't know which app to bind yet, have the AI check first:

帮我看看我账号下有哪些可用的 Lovrabet 应用，列出名称和 appcode。

Once created, the project root contains a .rabetbase.json recording the bound app and environment. All later operations (pulling data models, pushing SQL, syncing menus) default to this app — no need to specify it every time.

INFO

If you prefer typing commands yourself: use rabetbase project create my-project --appcode app-xxxx --env production. With parameters omitted, the CLI guides you interactively. For an existing directory that only needs config, use rabetbase project init instead of create.

Demo

🎬 Video coming soon: rabetbase-cli-project-create.mp4

What you get after creation

Running rabetbase project create gives you a complete project directory:

.
├── index.html                          # 入口 HTML（CDN 依赖声明）
├── package.json                        # 项目依赖与脚本
├── vite.config.ts                      # Vite 构建 + 微前端配置
├── tsconfig.json                       # TypeScript 配置
├── .rabetbase.json                     # 项目配置（AppCode、环境）
├── docs/
│   ├── quick-start.md                  # 快速开始指南
│   └── API_RULE_CHANGE.md              # API 变更说明
├── public/
│   ├── logo.svg
│   └── vite.svg
└── src/
    ├── main.tsx                        # 微前端入口（导出 mount/unmount）
    ├── style.css                       # 全局样式
    ├── api/
    │   ├── api.ts                      # CLI 生成的 SDK 模型配置
    │   └── client.ts                   # 统一导出的 SDK 客户端实例
    ├── layouts/
    │   └── MainLayout.tsx              # 主布局（侧边栏/头部/面包屑）
    ├── pages/
    │   ├── index.tsx                   # / — 首页：项目概述 + 开发指引
    │   ├── sdk-demo/index.tsx          # /sdk-demo — SDK CRUD 操作示例
    │   ├── sdk-bff/index.tsx           # /sdk-bff — Backend Function 示例
    │   ├── sdk-sql/index.tsx           # /sdk-sql — SQL 查询示例
    │   ├── sdk-aggregate/index.tsx     # /sdk-aggregate — 聚合查询示例
    │   ├── sdk-health/index.tsx        # /sdk-health — 连接状态检查
    │   ├── workbench/index.tsx         # /workbench — 工作台页面示例
    │   ├── dashboard/index.tsx         # /dashboard — 数据看板示例
    │   └── data-screen/index.tsx       # /data-screen — 数据大屏示例
    ├── router/
    │   └── index.tsx                   # React Router + icestark basename
    └── utils/
        ├── api.ts                      # API 请求封装
        └── sdk-test-utils.ts           # SDK 测试工具

Tech stack:

Layer	Technology
Frontend framework	React 18 + TypeScript
Build tooling	Vite 7
Routing	React Router v6 + vite-plugin-pages (convention-based routing)
UI components	Ant Design v5
Micro-frontend	@ice/stark-app (icestark)
Platform SDK	@lovrabet/sdk
Charts	ECharts + echarts-for-react

The workspace ships with example pages you can preview locally:

Page	Route	What it shows
Home	/	Project overview, MCP config, CLI commands, doc links
SDK demo	/sdk-demo	Model list, CRUD operations (filter/create/update/delete)
BFF example	/sdk-bff	Backend Function call demo
SQL example	/sdk-sql	Custom SQL query demo
Aggregate queries	/sdk-aggregate	Aggregation query demo
Health check	/sdk-health	SDK connection status check
Workbench	/workbench	Stat cards, task lists, progress tracking
Dashboard	/dashboard	Charts and metrics
Data wall	/data-screen	Full-screen data display

What you can build after creation

With the project in place, all of the following live in this one workspace:

Category	Description
Custom frontend pages	Workbenches, dashboards, data walls, complex forms, cross-dataset pages — built on React + SDK
Smart list pages	Standard CRUD pages with the AI-generated four-piece set (list/create/edit/detail)
Backend Functions	Encapsulate validation, transactions, multi-table writes, data masking, external system integration
Custom SQL	Complex queries, statistical reports, cross-table aggregation
Data API calls	SDK client generated automatically — just import and use

Whichever you build, the flow is the same: map the data models → develop → preview locally → build → integrate with the parent app. For prompts at each step, see Using Rabetbase in your Vibe Coding tool.

Run it locally

Once the project is created, have the AI start it:

INFO

Say this to the AI:

启动当前项目的本地开发环境，告诉我访问地址。

The default URL is https://dev.lovrabet.com:5173. If the port is taken, the AI picks another one for you.

Build a production bundle:

帮我做一次生产构建，检查 dist 目录和产物是否正常。

Next steps

The project exists and runs locally. Next, have the AI pull the platform data models into the project and map out dataset fields and relations — see APIs and datasets: pull config, see your data clearly.