Configuration Schema

The Vertical Template uses a JSON-based configuration system to define layouts, components, data bindings, and application behavior. This reference documents the complete EAIConfig TypeScript type.

EAIConfig

Root configuration object for a vertical application.

interface EAIConfig {
  version: string;
  layout: LayoutConfig;
  store?: StoreConfig;
  theme?: ThemeConfig;
  features?: FeatureFlags;
  metadata?: ConfigMetadata;
}

Example

{
  "version": "1.0",
  "layout": {
    "header": {
      "component": "Header",
      "props": {
        "logo": "/logo.png",
        "title": "CRM Platform"
      }
    },
    "sidebar": {
      "component": "Sidebar",
      "props": {
        "items": [
          { "label": "Dashboard", "path": "/" },
          { "label": "Projects", "path": "/projects" }
        ]
      }
    },
    "slots": [
      {
        "id": "main",
        "component": "ResourceList",
        "store": {
          "binding": "resources.projects"
        }
      }
    ]
  }
}

LayoutConfig

Defines the application layout structure.

interface LayoutConfig {
  header?: ComponentConfig;
  sidebar?: ComponentConfig;
  footer?: ComponentConfig;
  slots: SlotConfig[];
  gridTemplate?: GridTemplate;
}

Properties

Property	Type	Required	Description
header	ComponentConfig	No	Header component configuration
sidebar	ComponentConfig	No	Sidebar component configuration
footer	ComponentConfig	No	Footer component configuration
slots	SlotConfig[]	Yes	Content slot configurations
gridTemplate	GridTemplate	No	CSS Grid layout template

Example

{
  "layout": {
    "header": {
      "component": "Header",
      "props": { "title": "My App" }
    },
    "sidebar": {
      "component": "Sidebar",
      "props": { "collapsed": false }
    },
    "slots": [
      {
        "id": "main",
        "component": "Dashboard"
      }
    ],
    "gridTemplate": {
      "areas": [
        "header header",
        "sidebar main",
        "footer footer"
      ],
      "columns": "250px 1fr",
      "rows": "auto 1fr auto"
    }
  }
}

ComponentConfig

Configuration for a single component instance.

interface ComponentConfig {
  component: string;
  props?: Record<string, any>;
  store?: StoreBinding;
  children?: ComponentConfig[];
  conditional?: ConditionalConfig;
}

Properties

Property	Type	Required	Description
component	string	Yes	Component name from registry
props	object	No	Component props
store	StoreBinding	No	Data binding configuration
children	ComponentConfig[]	No	Child component configurations
conditional	ConditionalConfig	No	Conditional rendering rules

Example

{
  "component": "ResourceList",
  "props": {
    "title": "Active Projects",
    "variant": "grid"
  },
  "store": {
    "binding": "resources.projects",
    "filter": { "status": "active" }
  }
}

SlotConfig

Defines a content slot in the layout.

interface SlotConfig extends ComponentConfig {
  id: string;
  className?: string;
  style?: React.CSSProperties;
}

Example

{
  "id": "main",
  "component": "Dashboard",
  "className": "main-content",
  "style": {
    "padding": "20px"
  }
}

StoreBinding

Binds a component to data from the global store.

interface StoreBinding {
  binding: string;
  filter?: Record<string, any>;
  sort?: SortOptions;
  transform?: string;
  refetchInterval?: number;
}

Properties

Property	Type	Required	Description
binding	string	Yes	Store path (e.g., "resources.projects")
filter	object	No	Filter criteria
sort	SortOptions	No	Sorting configuration
transform	string	No	Transform function name
refetchInterval	number	No	Auto-refetch interval (ms)

Example

{
  "store": {
    "binding": "resources.projects",
    "filter": {
      "status": "active",
      "budget.gte": 100000
    },
    "sort": {
      "field": "createdAt",
      "order": "desc"
    },
    "refetchInterval": 30000
  }
}

StoreConfig

Global store configuration.

interface StoreConfig {
  resources?: ResourceStoreConfig;
  initialData?: Record<string, any>;
  persistence?: PersistenceConfig;
}

interface ResourceStoreConfig {
  [resourceType: string]: {
    endpoint?: string;
    cache?: CacheConfig;
    refetchOnMount?: boolean;
  };
}

Example

{
  "store": {
    "resources": {
      "project": {
        "cache": {
          "staleTime": 300000,
          "cacheTime": 600000
        },
        "refetchOnMount": true
      }
    },
    "persistence": {
      "enabled": true,
      "storage": "localStorage",
      "key": "eai-app-state"
    }
  }
}

ThemeConfig

Theme and styling configuration.

interface ThemeConfig {
  mode?: 'light' | 'dark' | 'auto';
  primary?: string;
  secondary?: string;
  colors?: Record<string, string>;
  fonts?: FontConfig;
  spacing?: SpacingConfig;
}

Example

{
  "theme": {
    "mode": "dark",
    "primary": "#3b82f6",
    "secondary": "#10b981",
    "colors": {
      "background": "#1a1a1a",
      "surface": "#2a2a2a",
      "text": "#ffffff"
    },
    "fonts": {
      "heading": "Inter, sans-serif",
      "body": "Inter, sans-serif"
    }
  }
}

ConditionalConfig

Conditional rendering configuration.

interface ConditionalConfig {
  when: string;
  operator?: 'eq' | 'ne' | 'gt' | 'lt' | 'in' | 'exists';
  value?: any;
  fallback?: ComponentConfig;
}

Example

{
  "component": "AdminPanel",
  "conditional": {
    "when": "user.role",
    "operator": "eq",
    "value": "admin",
    "fallback": {
      "component": "AccessDenied"
    }
  }
}

FeatureFlags

Feature flag configuration for conditional features.

interface FeatureFlags {
  [featureName: string]: boolean | FeatureFlagConfig;
}

interface FeatureFlagConfig {
  enabled: boolean;
  rolloutPercentage?: number;
  allowedRoles?: string[];
}

Example

{
  "features": {
    "aiChat": true,
    "advancedAnalytics": {
      "enabled": true,
      "allowedRoles": ["admin", "analyst"]
    },
    "betaFeatures": {
      "enabled": true,
      "rolloutPercentage": 50
    }
  }
}

ConfigMetadata

Metadata about the configuration.

interface ConfigMetadata {
  name?: string;
  version?: string;
  description?: string;
  author?: string;
  tags?: string[];
  createdAt?: string;
  updatedAt?: string;
}

GridTemplate

CSS Grid layout template.

interface GridTemplate {
  areas: string[];
  columns: string;
  rows: string;
  gap?: string;
}

Example

{
  "gridTemplate": {
    "areas": [
      "header header header",
      "sidebar main aside",
      "footer footer footer"
    ],
    "columns": "250px 1fr 300px",
    "rows": "auto 1fr auto",
    "gap": "20px"
  }
}

Complete Example

Full configuration example:

{
  "version": "1.0",
  "metadata": {
    "name": "CRM Platform",
    "description": "Customer relationship management application",
    "version": "1.0.0"
  },
  "theme": {
    "mode": "light",
    "primary": "#3b82f6",
    "secondary": "#10b981"
  },
  "features": {
    "aiChat": true,
    "documentUpload": true,
    "advancedFilters": {
      "enabled": true,
      "allowedRoles": ["admin"]
    }
  },
  "store": {
    "resources": {
      "project": {
        "cache": {
          "staleTime": 300000
        }
      }
    }
  },
  "layout": {
    "header": {
      "component": "Header",
      "props": {
        "logo": "/logo.png",
        "title": "CRM Platform",
        "actions": [
          { "label": "Settings", "path": "/settings" }
        ]
      }
    },
    "sidebar": {
      "component": "Sidebar",
      "props": {
        "items": [
          { "label": "Dashboard", "path": "/", "icon": "dashboard" },
          { "label": "Projects", "path": "/projects", "icon": "folder" },
          { "label": "Clients", "path": "/clients", "icon": "users" },
          { "label": "Documents", "path": "/documents", "icon": "file" }
        ]
      }
    },
    "slots": [
      {
        "id": "main",
        "component": "SlotRenderer",
        "children": [
          {
            "component": "ResourceList",
            "props": {
              "title": "Active Projects",
              "variant": "grid",
              "columns": 3
            },
            "store": {
              "binding": "resources.projects",
              "filter": { "status": "active" },
              "sort": { "field": "updatedAt", "order": "desc" }
            }
          }
        ]
      },
      {
        "id": "aside",
        "component": "ChatPanel",
        "props": {
          "title": "AI Assistant",
          "collapsed": false
        },
        "conditional": {
          "when": "features.aiChat",
          "value": true
        }
      }
    ],
    "gridTemplate": {
      "areas": [
        "header header",
        "sidebar main",
        "footer footer"
      ],
      "columns": "250px 1fr",
      "rows": "auto 1fr auto",
      "gap": "0"
    }
  }
}

Type Definitions File

Complete TypeScript definitions:

// types/config.ts
export interface EAIConfig {
  version: string;
  layout: LayoutConfig;
  store?: StoreConfig;
  theme?: ThemeConfig;
  features?: FeatureFlags;
  metadata?: ConfigMetadata;
}

export interface LayoutConfig {
  header?: ComponentConfig;
  sidebar?: ComponentConfig;
  footer?: ComponentConfig;
  slots: SlotConfig[];
  gridTemplate?: GridTemplate;
}

export interface ComponentConfig {
  component: string;
  props?: Record<string, any>;
  store?: StoreBinding;
  children?: ComponentConfig[];
  conditional?: ConditionalConfig;
}

export interface SlotConfig extends ComponentConfig {
  id: string;
  className?: string;
  style?: React.CSSProperties;
}

export interface StoreBinding {
  binding: string;
  filter?: Record<string, any>;
  sort?: SortOptions;
  transform?: string;
  refetchInterval?: number;
}

export interface SortOptions {
  field: string;
  order: 'asc' | 'desc';
}

export interface StoreConfig {
  resources?: Record<string, ResourceStoreConfig>;
  initialData?: Record<string, any>;
  persistence?: PersistenceConfig;
}

export interface ThemeConfig {
  mode?: 'light' | 'dark' | 'auto';
  primary?: string;
  secondary?: string;
  colors?: Record<string, string>;
  fonts?: FontConfig;
}

export interface FeatureFlags {
  [key: string]: boolean | FeatureFlagConfig;
}

export interface ConditionalConfig {
  when: string;
  operator?: 'eq' | 'ne' | 'gt' | 'lt' | 'in' | 'exists';
  value?: any;
  fallback?: ComponentConfig;
}

Next Steps

• Learn about Components
• Explore Interactive Tools
• See Configuration guide
• Read Component development guide