Skip to content

App Learning

The GenAI process uses this for learning. It is part of the Manager so you can customize it:

genai-app-run

Context

Generate a full React Admin application using the following instructions.
The result must be a runnable React app (npm start) that connects to the supplied JSON:API, with fully implemented components (no placeholders or empty files).

App Features

Multi-Page

For each resource:

  • Create a List page showing 7 user-friendly columns
  • Add pagination, sorting, and filtering
  • Link each row to a Display (Show) page

Multi-Resource

Each Display Page should:

  • Show all fields in a multi-column layout
  • Include a tab sheet (<TabbedShowLayout>) for each related resource using <ReferenceManyField>
  • Link child rows to their own display page

Example:

  • Customer Display has tab for OrderList

  • The tab (with OrderList) is shown below all the Customer fields.

  • Each Order in the tab links to Order Display

Automatic Joins

For foreign keys:

  • Display joined value (e.g., product.name instead of product_id)
  • Use first string field from parent table containing name, title, or description

Numeric Primary key fields:

  • Display at the end of forms/lists

Lookups (Foreign Keys)

For foreign key fields:

  • Provide auto-complete dropdown (<ReferenceInput>)
  • For numeric foreign keys, use the joined string field as lookup text

Cascade Add

When adding a child row as a detail in a Master / Detail, default the Foreign Key to the Parent (Master) Primary Key.

Implementation

Architecture

  • Framework: React 18 + react-admin 4.x
  • Data Provider: Custom dataProvider.js using fetchUtils (no external ra-jsonapi-client)

  • Must support: getList, getOne, getMany, getManyReference, create, update, delete

  • Must support: filters, joins, sorting, pagination

  • Backend: JSON:API per mcp_discovery.json

  • CORS: Ensure API allows http://localhost:3000

  from flask_cors import CORS  
  CORS(app, origins='*')  # or restrict to localhost:3000
- Project Setup:

  • Use create-react-app
  • Include: react-admin, @mui/material, @emotion/react, @emotion/styled, react-router-dom
  • Do not use any deprecated or unmaintained libraries
  • Include complete and correct App.js, index.js, dataProvider.js, and index.html

Per-Resource Files (Required)

For each resource (Customer, Order etc):

  • Create a source file under src/, e.g., Customer.js
  • Each file must fully implement:
    • CustomerList
    • CustomerShow
    • CustomerCreate
    • CustomerEdit

Use:

  • <ReferenceField> for foreign key displays
  • <ReferenceInput> for foreign key input
  • <ReferenceManyField> for tabbed child lists
  • For show pages

  • Always start with <SimpleShowLayout>, followed by a <TabbedShowLayout> for related data

    • DO NOT start with <TabbedShowLayout>

Be sure to include all required imports. ALWAYS use the following AS IS, plus whatever else is required:

import { List, FunctionField, Datagrid, TextField, DateField, NumberField, ReferenceField, ReferenceManyField, Show, TabbedShowLayout, Tab, SimpleShowLayout, TextInput, NumberInput, DateTimeInput, ReferenceInput, SelectInput, Create, SimpleForm, Edit, Filter, Pagination, BooleanField, BooleanInput } from 'react-admin';
You may add other imports, but be sure all those are included.

DO NOT use <EmailInput> - use <TextInput>.

DO NOT put <ReferenceField> in <Datagrid>.

Do not leave any file empty.


App Wiring

Sample code for App.js:

import React from 'react';
import { Admin, Resource } from 'react-admin';
import { createTheme } from '@mui/material/styles';

// import each resource
import { CustomerList, CustomerShow, CustomerCreate, CustomerEdit } from './Customer';
...
// import the data provider
import { dataProvider } from './dataProvider';

const theme = createTheme({
    palette: {
        primary: { main: '#1976d2' },    // Material-UI default blue
        secondary: { main: '#1565c0' },  // A darker blue, or choose another color
    },
    typography: { fontSize: 14 },
});

const App = () => {
    return (
        <Admin dataProvider={dataProvider}>  // register each resource...
            <Resource name="Customer" list={CustomerList} show={CustomerShow} edit={CustomerEdit} create={CustomerCreate} />
...
        </Admin>
    );
};

export default App;

For dataProvider:

  1. be sure it includes the braces: import { dataProvider }
  2. Do Not generate either:
import jsonServerProvider from 'ra-data-json-server'
const dataProvider = jsonServerProvider('http://api.example.com');

Response Format

Format the response as a JSResponseFormat:

class JSResponseFormat(BaseModel): # must match system/genai/prompt_inserts/response_format.prompt code : str # generated javascript code (only)