Skip to content

Vibe Admin Generator

💡 TL;DR - instant multi-page, multi-table apps

The generated Admin App is a standard react app, fully customizable using GenAI Vibe tools and/or your IDE.

  • With minimal background on html, javascript etc, you can begin using Vibe/Natural Language tools to create custom User Interfaces

Contrast this to the automated Admin App, which focuses on speed and simplicity.

It provides:

Feature Provides Example
Multi-Page List/Show pages for each table
Built-in search, sort, export		 Customer Page, Order Page, etc
Multi-Table Tab Sheet for related child data
Page Transitions for related data		 Customer page has OrderList
Click --> Order/OrderDetails
Automatic Joins for Parent Data Product Name - not just the Id
Lookups for foreign keys Find Product for OrderDetail
Customize Use GenAI Vibe tools and/or your IDE Add new pages, controls, etc

See status, at end.


Generation

Once your project is created, you can create a UI Application like this (e.g., use the Terminal Window of your project):

als genai-app
cd react-admin
npm install
npm start

This can take a while (e.g., 6 min for northwind sample). Enjoy your favorite warm beverage.


Generated App

The GenAI process uses these to drive creation:

  1. You projects' ui/admin/admin.yaml (click here), which provides information about the schema and basic layout
  2. Admin-App-Learning - this page describes the functionality and architecture of the generated app

It creates applications like this:

genai-app-run


Running App

The running app looks like this:

genai-app-run


Vibe Customization

Not a bad app, but the objective here is that we can customize - simply, with Natural Language. Let's try it.

Here, we are using the Claude preview of VsCode, and make the request:

I wanted a gui control so the user could see list or cards (but not both).

ask-for-card

And we get:

get-card


Or, Update the training

This customization example was a one-off.

Since the app learning is a part of your project, you can alter it to create apps with lists / cards, automatically.


Appendix: Status

As of June 17 2025, this is under construction. Please contact us at support@genai-logic.com for more information and early access. We are actively seeking collaboration.

We have tested this on the basic_demo project. It creates runnable apps, but "ai can make errors" - these often require minor corrections to imports, etc. We are tuning the learning to reduce these.

ToDo:

  • Grid for multi-field rows on show page
  • Validation errors
  • Security (disable with als add-auth --provider-type=None)
  • Use standard dataProvider



Appendix: Explore

The quickest way to get going...

Pre-reqs:

  1. An OpenAI API Key (click here)
  2. Node

Then:

  1. Install GenAI-Logic and the Manager (click here), and
  2. In the Manager, open a terminal window and create Basic Demo (Info here) as described in the Readme:
ApiLogicServer create --project_name=basic_demo --db_url=basic_demo
  1. Open the created app, and run it (F5) to explore the Automatic Admin App and the API
  2. Execute the Generation procedure as described above
  3. Proceed with the readme to explore business logic, MCP, customization, and integration