Integrating with Electron

This guide will walk you through the process of setting up and utilizing the Module within your project.

info

Don't forget to generate your AI Gateway Module API Key and download Module from Developers dashboard first.

Installation

First, ensure you have Node.js and npm installed on your development environment. Then, use npm to install the AI Gateway Electron module from the AI Gateway package archive:

npm install ./aigw-electron-module-v*.tgz

Integration Steps

1. Create a module instance

Initialize the AI Gateway Electron module by creating a new instance with your api key:

import { AIGW } from '@aigw/electron-module';

const instance = new AIGW({
  apiKey: '<your api key here>',
});

2. Bind Methods in Main Process

Within your Electron main process (typically in your main.js or main.ts file), bind methods to handle module operations and events using Electron's ipcMain (ensure mainWindow below is replaced with your actual BrowserWindow instance):

import { ipcMain } from 'electron';

ipcMain.handle('aigw:start', () => instance.start());
ipcMain.handle('aigw:stop', () => instance.stop());
ipcMain.handle('aigw:request-consent', () => instance.requestConsent());
ipcMain.handle('aigw:is-running', () => instance.isRunning);
ipcMain.handle('aigw:is-opted-in', () => instance.isOptedIn);
ipcMain.handle('aigw:opt-in', () => instance.optIn());
ipcMain.handle('aigw:opt-out', () => instance.optOut());
ipcMain.handle('aigw:identify', () => instance.identify());

instance.on('is-running', (isRunning) => {
  if (
    !mainWindow ||
    mainWindow.isDestroyed() ||
    !mainWindow.webContents ||
    mainWindow.webContents.isDestroyed()
  ) {
    return;
  }
  mainWindow.webContents.send('aigw:is-running', isRunning);
});

instance.on('is-opted-in', (isOptedIn) => {
  if (
    !mainWindow ||
    mainWindow.isDestroyed() ||
    !mainWindow.webContents ||
    mainWindow.webContents.isDestroyed()
  ) {
    return;
  }
  mainWindow.webContents.send('aigw:is-opted-in', isOptedIn);
});

3. Bind Methods in Preload Script (Renderer Process)

In the preload script of your Electron renderer process (typically a script linked in your Electron BrowserWindow settings), expose the module functionality to the frontend using Electron's contextBridge:

import { contextBridge, ipcRenderer } from 'electron';

const AIGWBridge = {
  start: () => ipcRenderer.invoke('aigw:start'),
  stop: () => ipcRenderer.invoke('aigw:stop'),
  requestConsent: () => ipcRenderer.invoke('aigw:request-consent'),
  isRunning: () => ipcRenderer.invoke('aigw:is-running'),
  isOptedIn: () => ipcRenderer.invoke('aigw:is-opted-in'),
  optIn: () => ipcRenderer.invoke('aigw:opt-in'),
  optOut: () => ipcRenderer.invoke('aigw:opt-out'),
  identify: () => ipcRenderer.invoke('aigw:identify'),

  onIsRunningChange: (callback: (status: boolean) => void) => {
    ipcRenderer.on('aigw:is-running', (_event, isRunning) => {
      callback(isRunning);
    });
  },
  onIsOptedInChange: (callback: (status: boolean) => void) => {
    ipcRenderer.on('aigw:is-opted-in', (_event, isOptedIn) => {
      callback(isOptedIn);
    });
  },
};

contextBridge.exposeInMainWorld('AIGWBridge', AIGWBridge);

4. Usage in Renderer Process (Frontend)

Now you can use the exposed AIGWBridge object in your renderer process to interact with the AI Gateway Electron module instance:

window.AIGWBridge.start(); // Start
window.AIGWBridge.stop(); // Stop
window.AIGWBridge.isRunning(); // Check run status
window.AIGWBridge.isOptedIn(); // Check if consent is given
window.AIGWBridge.optIn(); // Give consent
window.AIGWBridge.optOut(); // Revoke consent
window.AIGWBridge.identify(); // Identify the instance
window.AIGWBridge.requestConsent(); // Open the consent window if needed

window.AIGWBridge.onIsRunningChange((status) => {
  console.log('AI Gateway status changed:', status);
}); // Listen for status changes
window.AIGWBridge.onIsOptedInChange((status) => {
  console.log('Opt in changed:', status);
}); // Listen for consent changes

Additional Notes

• Consent Management: Ensure that you handle consent appropriately based on user interactions and local regulations.
• Error Handling: Wrap instance operations in error handlers to provide a smooth user experience.
• Customization: Contact the AI Gateway team for customization requests or further assistance with the module integration.

Conclusion

By following these steps, you'll successfully integrate and utilize the AI Gateway Electron module in your Electron application. If you have any questions or encounter issues during the integration, please reach out to us at [email protected] for support. Happy coding!