KOS UI SDK

A comprehensive TypeScript SDK for building sophisticated user interfaces and applications that interact with KOS devices. The KOS UI SDK provides reactive data models, real-time synchronization, internationalization support, and a rich ecosystem of utilities for creating device control applications.

Core Capabilities

Reactive Data Models

The SDK provides a collection of reactive models that automatically synchronize with KOS devices, handling real-time updates via WebSocket topics and maintaining consistent state across your application.

• Configuration Management - Live configuration updates with schema validation
• Device Logging - Real-time log streaming with efficient block-based storage
• Network Interface Management - Dynamic network configuration and monitoring
• Region & Internationalization - Comprehensive localization with unit conversion
• State Management - Persistent application state with automatic synchronization
• Storage & File Management - Device storage monitoring and file operations

Real-time Communication

Built-in WebSocket integration provides seamless real-time communication with KOS devices, enabling live updates and responsive user experiences.

• Topic-based Messaging - Subscribe to device events and configuration changes
• Automatic Reconnection - Robust connection handling with automatic recovery
• Event Filtering - Efficient event processing with flow control and batching
• Async Iterator Support - Modern async/await patterns for streaming data

Internationalization & Localization

Complete internationalization system supporting multiple languages, regional settings, and intelligent unit conversion between measurement systems.

• Multi-language Support - Dynamic translation loading with fallback chains
• Regional Settings - Time zones, date/time formatting, and cultural preferences
• Unit Conversion - Intelligent conversion between metric, imperial, and custom unit systems
• Precision Control - Configurable decimal places and formatting per measurement type

Device Integration

Seamless integration with KOS device services, providing type-safe APIs for device control and monitoring.

• Service Discovery - Automatic discovery and connection to device services
• API Generation - Type-safe service interfaces with OpenAPI integration
• Configuration Schema - Dynamic schema loading with validation and documentation
• Error Handling - Robust error handling with automatic retry and fallback strategies

UI Components & Hooks

React-specific utilities and hooks that make it easy to integrate KOS functionality into your user interfaces.

• Model Hooks - React hooks for accessing and subscribing to model data
• Translation Hooks - Internationalization hooks with automatic locale switching
• Component Utilities - Higher-order components and utilities for KOS integration
• Context Providers - React context providers for dependency injection and state sharing

Data Management

Sophisticated data management capabilities including key-value storage, structured logging, and efficient caching mechanisms.

• Key-Value Store - Namespaced persistent storage for application data
• Log Management - Structured logging with filtering, searching, and export capabilities
• Caching Layer - Intelligent caching with automatic invalidation and refresh
• Data Transformation - Utilities for converting between API and UI data formats

Architecture

The KOS UI SDK is built around a clean, modular architecture that promotes separation of concerns and maintainability:

• Models - Reactive business logic and state management
• Services - Low-level API communication and data fetching
• Core - Framework utilities, decorators, and base classes
• UI - React-specific hooks, components, and context providers
• Types - Comprehensive TypeScript definitions and interfaces

Key Benefits

• Type Safety - Comprehensive TypeScript support with auto-generated types
• Real-time Reactivity - Automatic UI updates when device state changes
• Offline Resilience - Intelligent caching and synchronization for offline scenarios
• Developer Experience - Rich debugging tools, comprehensive documentation, and IntelliSense support
• Performance Optimized - Efficient data structures and lazy loading for optimal performance
• Extensible - Plugin architecture and extension points for custom functionality

Getting Started

The SDK is designed to work seamlessly with modern React applications and provides both low-level APIs for advanced use cases and high-level abstractions for rapid development.

import {
  DeviceConfig,
  useKosModel,
  kosComponent,
} from "@kosdev-code/kos-ui-sdk";

// Access reactive device configuration
const MyComponent = kosComponent(() => {
  const config = useKosModel(DeviceConfig, "device-settings");

  return (
    <div>
      <h2>Device Status: {config.status}</h2>
      <button onClick={() => config.updateProperty("debugMode", true)}>
        Enable Debug Mode
      </button>
    </div>
  );
});
Copy

For detailed usage examples, API references, and integration guides, explore the comprehensive documentation included with this SDK.