Skip to content

.. Vibe

vibe-cards


🤖 Bootstrap Copilot by pasting the following into the chat
Please load `.github/.copilot-instructions.md`


GenAI-Logic works works quite well with "vibe" tools:

  • Use GenAI-Logic to create your server and logic, and
  • Use vibe to create custom apps.

You can mix and match 2 alternatives for Vibe:

  1. Use popular vibe tools, such as Cursor.ai. For more information, click here
  2. GenAI-Logic provides Context Engineering you can use in IDEs such as VSCode - these include support for basic vibe creation. This page described those services.


Demo Overview:  1. Create from Existing DB   2. Vibe Apps   3. Add Logic  pre-reqs


Here we will use Vibe to:

  1. Create From Existing DB - Provides a MCP-enabled API and an Admin App - Project Opens: Run - Launch and verify your system

  2. Vibe Custom Apps - Vibe: Custom Apps from natural language

  3. Declare Business Logic - Add rules with natural language

Pre-reqs:

  1. Install
  2. OpenAI API Key is useful but not required; click here.


How to Use This Demo


This demo teaches AI-assisted development patterns. Each step is a natural language prompt you copy/paste into Copilot chat. The prompts are self-documenting - they explain what they do.

Vibe Philosophy: AI makes errors. That's expected. When something fails, tell Copilot: "Error X occurred, fix it". Copilot is exceptionally good at finding and correcting its own mistakes.

Recommended Path: If you're new to GenAI-Logic, start with the Standard Demo (creates basic_demo with guided tutor) to learn platform fundamentals. Then return here to explore AI-assisted development with basic_demo_vibe.


1. Create From Existing DB

In the Manager: Create a project from an existing database (probably already done)
Create a database project named basic_demo_vibe from samples/dbs/basic_demo.sqlite

This recreates the basic demo. We recommend this as your first project. For more information, click here.



2. Custom UI: GenAI, Vibe

The app above is suitable for collaborative iteration to nail down the requirements, and back office data maintenance. It's also easy to make simple customizations, using the yaml file.

For more custom apps, you get complete control by generating app source code, which you can then customize in your IDE, e.g. using Vibe Natural Language.

This will create a customized react-admin app, very much like the Admin App, but will full customizable source:

# create react source (requires OpenAI key)
genai-logic genai-add-app --vibe
cd ui/react-app
npm install
npm start

Customize using Natural Language:

Customize using Natural Language
In the ui/react app, Update the Product list to provide users an option to see results in a list, or in cards.

The screen shot above is an example from Northwind: for more information on vibe, click here


3. Declare Logic And Security

Declaring logic and security was described in the basic demo. The sections below provide context on how this relates to using vibe for custom apps.


Implications for the Team

Admin App - with custom apps

The Admin App is created when you create the project. It is automatic and simple to customize, but customizations are limited. You will find it convenient for getting started, prototyping, and data repair.

The Admin App is not instead of custom apps - is a complement to custom apps.


Distill Logic - no fat client

A common scenario is for schedule pressure to result in business logic built into apps. This "fat client" approach is not recommended, since it provides no sharing between apps, or with services.

Given that your vibe app is using the GenAI-Logic API, and that these are logic-enabled, you should rely on the API. This will greatly simplify vibe - focus on the user experience.


Parallel App / Logic Dev

A very common scenario in traditional app dev is that the UI team has to wait until APIs are ready. Such serialized development can be stressful for UI developers, and Business Users who want to try things out.

This unfortunate scenario is eliminated:

  1. Project creation creates the API, so App Dev can start immmediately with a real API and real data
  2. Backend dev (logic, custom APIs etc) can proceed in parallel. New logic will automatically be "inherited" for apps already built.