Registering the Dispense SDK

Registration

When you create your workspace, you’ll notice that the training-zero4-ui package is scaffolded with the necessary plumbing to kick off a kOS UI application. The application is pre-configured for React, with app.tsx serving as the root.

Every kOS application must specify the available services, extensions, models, and features at runtime. This setup is accomplished through a registration process. One of the first steps in app.tsx is importing a registration module:

// apps/training-zero4-ui/src/app/app.tsx
import { KosCoreContextProvider } from './registration';

Registration Code Breakdown

The kosui tooling creates a basic registration setup configured for essential dispense operations. Let’s review the key parts of the registration code in registration.ts:

// apps/training-zero4-ui/src/app/registration.ts
import { KosModelRegistry } from '@kosdev-code/kos-dispense-sdk';
import { initKosProvider } from '@kosdev-code/kos-ui-sdk';
// Register all core and dispense SDK models and their dependencies.
KosModelRegistry.dispense.models();
// Initialize kOS services and expose them via a React context provider.
const { KosCoreContextProvider } = initKosProvider();
export { KosCoreContextProvider };

What’s Happening?

Model Registration

KosModelRegistry.dispense.models();
Purpose:
  • Registers the intent to use models and services without executing any model code immediately.
  • Makes all core and dispense models available for the application.
  • Returns the KosModelRegistry, allowing you to register additional custom models using a builder pattern, e.g., KosModelRegistry.dispense.models().model(MyModel);.

Initializing the KOS Provider

const { KosCoreContextProvider } = initKosProvider();
Purpose:
  • Configures kOS services and creates a React context provider.
  • Encapsulates the registered models and services, making them accessible throughout your application.

Exporting the Provider

export { KosCoreContextProvider };
Purpose:
  • Ensures that the rest of your application can access the kOS infrastructure by wrapping the app with this context provider.

Using the KosCoreContextProvider

The KosCoreContextProvider wraps your application, providing kOS services to all underlying components. It initializes and manages key functionalities such as the Event Bus and WebSocket transport layer, which facilitate communication between the UI and the Zero4 System Application. Additionally, it handles model caching and lifecycle management.

Here’s how the provider is used in app.tsx:

// apps/training-zero4-ui/src/app/app.tsx
<KosCoreContextProvider>
  <KosTranslationProvider>
    {/* Your application content goes here */}
  </KosTranslationProvider>
</KosCoreContextProvider>

KosTranslationProvider

Because kOS devices are often used in multiple regions, internationalization (i18n) and localization (l10n) are critical. The kOS framework includes built-in support for hierarchical translation services that integrate with the kOS Region Service. The KosTranslationProvider comes pre-configured to manage translations throughout your application.

Conclusion

With the registration complete, your application is now fully wired to use the kOS services, models, and extensions provided by the Dispense SDK. The KosCoreContextProvider and KosTranslationProvider ensure that the framework is properly initialized and that all components have access to the underlying kOS infrastructure.

You’re now ready to start adding content to your application!