Skip to main content

Configuration Schema Reference

Complete TypeScript type definitions for tenant configuration.

EAIConfig​

The root configuration type for a tenant.

interface EAIConfig {
  // Required
  tenantId: string;
  displayName: string;
  store: Record<string, StoreSlice>;
  layout: LayoutConfig;

  // Optional
  theme?: ThemeConfig;
  features?: FeatureFlags;
}

tenantId​

Type: string

Unique identifier for the tenant. Used in URLs and API calls.

tenantId: 'my-tenant'  // Access via ?tenant=my-tenant

Constraints:

  • Lowercase letters, numbers, and hyphens only
  • Must be unique across all registered tenants

displayName​

Type: string

Human-readable name displayed in the UI.

displayName: 'My Application'

store​

Type: Record<string, StoreSlice>

Defines the global state structure. See StoreSlice.

layout​

Type: LayoutConfig

Defines component placement. See LayoutConfig.

StoreSlice​

Defines a slice of global state.

interface StoreSlice {
  initialState: Record<string, unknown>;
  persist: boolean;
}

initialState​

Type: Record<string, unknown>

Default values for this slice when the store is created.

initialState: {
  name: null,
  email: null,
  preferences: {
    theme: 'light',
    notifications: true,
  },
}

persist​

Type: boolean

Whether to persist this slice to sessionStorage.

  • true: Survives page refresh, cleared on tab close
  • false: Resets to initialState on page refresh

LayoutConfig​

Defines the four layout slots for component placement.

interface LayoutConfig {
  header: ComponentConfig[];
  leftPane: ComponentConfig[];
  middlePane: ComponentConfig[];
  rightPane: ComponentConfig[];
}

Slot Descriptions​

SlotPositionTypical Use
headerTop of pageNavigation, user menu, branding
leftPaneLeft sidebarNavigation, filters, progress
middlePaneMain contentPrimary features, forms
rightPaneRight sidebarContext panels, help, chat

ComponentConfig​

Configures a component within a layout slot.

interface ComponentConfig {
  component: string;
  priority: number;
  props?: Record<string, unknown>;
  storeBindings?: StoreBinding[];
  showWhen?: (state: GlobalState) => boolean;
}

component​

Type: string

Name of the component as registered in ComponentRegistry.

component: 'Header'  // Must match registry key exactly

priority​

Type: number

Render order within the slot. Lower numbers render first.

priority: 1   // Renders before priority: 2

props​

Type: Record<string, unknown> (optional)

Static props passed to the component.

props: {
  title: 'Welcome',
  showLogo: true,
  variant: 'primary',
}

storeBindings​

Type: StoreBinding[] (optional)

Maps store values to component props. See StoreBinding.

showWhen​

Type: (state: GlobalState) => boolean (optional)

Conditional rendering based on store state.

showWhen: (state) => state.user?.isAuthenticated === true

If omitted, component always renders.

StoreBinding​

Maps a store path to a component prop.

interface StoreBinding {
  prop: string;
  storePath: string;
}

prop​

Type: string

The prop name on the component.

storePath​

Type: string

Dot-notation path in the store.

storeBindings: [
  { prop: 'userName', storePath: 'user.name' },
  { prop: 'email', storePath: 'user.profile.email' },
]
// Component receives: { userName: 'John', email: 'john@example.com' }

ThemeConfig​

Optional theme customization.

interface ThemeConfig {
  primaryColor?: string;
  secondaryColor?: string;
  accentColor?: string;
  logo?: string;
  logoAlt?: string;
  logoWidth?: number;
  favicon?: string;
  fontFamily?: string;
  headingFontFamily?: string;
  rootClassName?: string;
}

Example​

theme: {
  primaryColor: '#6366f1',
  logo: '/tenants/my-tenant/logo.svg',
  logoAlt: 'My Company',
  rootClassName: 'tenant-my-tenant',
}

FeatureFlags​

Optional feature toggles.

interface FeatureFlags {
  [key: string]: boolean;
}

Example​

features: {
  chat: true,
  aiAssistant: false,
  analytics: true,
  experimentalFeatures: false,
}

GlobalState​

The full store state structure (dynamically created from store slices).

type GlobalState = {
  [sliceName: string]: SliceState;
};

Access via dot notation:

// Reading
useStoreValue('user.name')
useStoreValue('projects.list')
useStoreValue('ui.sidebarOpen')

// Writing
setStore('user.name', 'John', 'MyComponent')

Complete Example​

import type { EAIConfig } from '../types';

export const exampleConfig: EAIConfig = {
  tenantId: 'example',
  displayName: 'Example Application',

  store: {
    user: {
      initialState: {
        name: null,
        email: null,
        isAuthenticated: false,
      },
      persist: true,
    },
    ui: {
      initialState: {
        theme: 'light',
        sidebarOpen: true,
      },
      persist: false,
    },
  },

  layout: {
    header: [
      {
        component: 'Header',
        priority: 1,
        props: { title: 'Example' },
        storeBindings: [
          { prop: 'userName', storePath: 'user.name' },
        ],
      },
    ],
    leftPane: [],
    middlePane: [
      {
        component: 'WelcomeCard',
        priority: 1,
        showWhen: (state) => !state.user?.isAuthenticated,
      },
      {
        component: 'Dashboard',
        priority: 2,
        showWhen: (state) => state.user?.isAuthenticated,
      },
    ],
    rightPane: [],
  },

  theme: {
    primaryColor: '#6366f1',
    logo: '/logo.svg',
  },

  features: {
    chat: true,
    analytics: false,
  },
};