@ui-self-healer/client

Lightweight Self-Healing UI Client SDK - Automatically detects and fixes UI issues using AI vision models.

Installation

npm install @ui-self-healer/client html2canvas

Quick Start

import { HealerSDK } from '@ui-self-healer/client';

const healer = new HealerSDK({
  apiEndpoint: 'https://your-api.com/analyze',
  enabled: true,
  debug: true
});

Configuration

interface HealerConfig {
  apiEndpoint: string;        // Required: Your API endpoint URL
  enabled?: boolean;          // Default: true
  captureOnLoad?: boolean;   // Default: true
  captureOnResize?: boolean; // Default: true
  captureDelay?: number;     // Default: 2000ms
  idleTimeout?: number;      // Default: 1000ms
  debug?: boolean;           // Default: false
}

Usage

Basic Usage

import { HealerSDK } from '@ui-self-healer/client';

const healer = new HealerSDK({
  apiEndpoint: 'http://localhost:3001/analyze',
  enabled: true
});

Manual Trigger

const result = await healer.triggerCapture();
if (result?.hasFix) {
  console.log('Fixes applied:', result.patches);
}

Enable/Disable

healer.enable();
healer.disable();

Next.js Integration

See NEXTJS_INTEGRATION.md for detailed Next.js setup instructions.

License

MIT