@enterpriseaigroup/demo — Enterprise AI Packages

Overview

The demo package is a copy-and-rename starting point for building new vertical applications on top of @enterpriseaigroup/core. It demonstrates the patterns every vertical should follow: example components, hooks, providers, and a config-driven component registry.

Install

Add to .npmrc in your project root:

@enterpriseaigroup:registry=https://enterpriseaigroup.github.io/enterpriseai-packages/registry

npm install @enterpriseaigroup/demo

Requires @enterpriseaigroup/core as a dependency (installed automatically).

Exports

Components

ExampleCard

Demo card component built with core UI primitives (Card, Button). Accepts title, description, onAction, actionLabel, and children.

DemoPage

Minimal page component that renders the config-driven layout. Handles auth loading state and supports componentOverrides.

Hooks

useExample(options?)

Demo hook showing the standard hook pattern. Returns { value, setValue, reset }. Accepts optional initialValue.

Providers

ExampleProvider

Simple React Context provider demonstrating the provider pattern. Wraps children with exampleState + setExampleState.

useExampleContext()

Hook to consume the ExampleProvider context. Throws if used outside the provider.

DemoProvider

All-in-one root provider combining session, query, config, auth, and toast providers. Props include tenants (required), authProvider, runtimeConfigEndpoint, tenantResolver, loadingComponent, queryClientOptions.

useAuth()

Auth hook from DemoProvider. Returns { isAuthenticated, isSessionLoading, onLogin, onLogout }.

Config

createDemoRegistry()

Factory that creates a component registry extending core's default registry with Card, Alert, and ExampleCard components. Returns Map<string, ComponentType>.

Create a New Vertical

Follow these steps to scaffold a new domain-specific package from the demo template.

Step-by-Step

1 Copy the demo package

cp -r packages/demo packages/your-vertical

2 Update package.json

Change name, description, and add domain-specific dependencies:

{
  "name": "@enterpriseaigroup/your-vertical",
  "description": "Your vertical description",
  "dependencies": {
    "@enterpriseaigroup/core": "*"
  }
}

3 Build your components

Replace the example files with your domain components:

src/
  components/   # Domain-specific UI components
  hooks/        # Custom hooks
  providers/    # Context providers
  config/       # Component registry, config helpers
  index.ts      # Re-export everything

4 Update exports (if adding sub-paths)

// package.json
"exports": {
  ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js", "require": "./dist/index.cjs" },
  "./your-feature": { "types": "./dist/your-feature/index.d.ts", "import": "./dist/your-feature/index.js" }
}

5 Register in monorepo tooling

Update sync-local.sh and .github/workflows/publish.yml to include your new package.

Importing from Core

Verticals depend on @enterpriseaigroup/core. Here's how to use core within your vertical package:

// Use core UI components
import { Button, Card, CardContent, Input } from '@enterpriseaigroup/core';

// Use core hooks
import { useConfig, useApiEndpoints, useAuth } from '@enterpriseaigroup/core';

// Use the config system
import { defineConfig, registerTenant } from '@enterpriseaigroup/core/config';

// Use utilities
import { cn } from '@enterpriseaigroup/core/utils';

Setting Up Your Provider

Model your root provider after DemoProvider. It composes core's providers into a single wrapper:

// your-vertical/src/providers/YourProvider.tsx
import { EAIConfigProvider, QueryProvider, AuthProvider } from '@enterpriseaigroup/core/providers';
import { Toaster } from '@enterpriseaigroup/core';

export function YourProvider({ children, tenants }) {
  return (
    <QueryProvider>
      <EAIConfigProvider tenants={tenants}>
        <AuthProvider>
          {children}
          <Toaster />
        </AuthProvider>
      </EAIConfigProvider>
    </QueryProvider>
  );
}

Creating a Component Registry

// your-vertical/src/config/registry.ts
import { createDefaultRegistry } from '@enterpriseaigroup/core/config';
import { YourDashboard } from '../components/YourDashboard';
import { YourSidebar } from '../components/YourSidebar';

export function createYourRegistry() {
  const registry = createDefaultRegistry();
  registry.set('YourDashboard', YourDashboard);
  registry.set('YourSidebar', YourSidebar);
  return registry;
}

Package Structure

packages/demo/
  src/
    components/
      ExampleCard.tsx       # Demo card component
      DemoPage.tsx          # Config-driven page
      index.ts
    hooks/
      useExample.ts         # Demo hook
      index.ts
    providers/
      ExampleProvider.tsx    # Simple context provider
      DemoProvider.tsx       # All-in-one root provider
      index.ts
    config/
      registry.ts           # createDemoRegistry()
      index.ts
    index.ts                # Main entry point
  dist/                     # Built output (tsup)
  tsup.config.ts
  package.json