Quick Start

This guide walks you through creating your first content model, attaching it to a page, and generating your first app.

1. Create a model

In the Underpeaks console, navigate to Models and click New Model.

Give it a name — for example, Product — and add some fields. Each field has a type (the underlying data type) and a ui_type (how it's rendered in the form):

Field	Type	UI Type
title	String	Text field
price	Float	Text field
hero	String	Image
published	Boolean	Select

2. Create a page and attach your model

Models aren't automatically browsable — you connect them to your app by creating a page and attaching the model to it. Navigate to Pages, create a new page, and select your Product model as its data source.

3. Add a menu item (optional)

If you want this page to appear in the console sidebar for admin use, navigate to Menus and create a menu item pointing to the page you just created.

4. Add content

With the page created, go to it to add and manage Product entries.

5. Install the CLI

Code generation runs through the nxf CLI on both products.

npm install -g underpeaks-nxf

Hosted

nxf login

This opens your browser to sign in to Studio and links the CLI to your account. Credentials are saved locally.

If you have access to more than one project:

nxf project list
nxf project switch PROJECT_ID

Self-Hosted (Core)

nxf login

Generate your app

nxf doctor
nxf generate flutter
nxf generate nextjs

By default this generates your entire project. To regenerate just part of it:

nxf generate flutter --model Product
nxf generate flutter --models Product,Order
nxf generate flutter --page product-list
nxf generate flutter --out ./my-app
nxf generate flutter --state riverpod

This produces a zip file in ./nxf-output (or your --out directory).

Run your generated app

cd generated-app
npm install
npm run dev

Your app is connected to Underpeaks out of the box — no extra configuration needed.