Electron GUI — Desktop Shell & Browser Farm Architecture

📘 General javascript v1

Architecture of the Electron GUI (main.js, 677 lines): BrowserWindow management, WebSocket server on Port 5001, AI browser automation, system tray, splash screen, Dynamic Component Discovery, and the preload.js bridge API.

The Electron Shell

The Electron GUI (gui.exe) is the visual interface of Flowork OS. Built with Electron 28, it provides a Chromium-based desktop window that loads the Flowork website and adds native OS capabilities.

Key Features

WebSocket Server (Port 5001)

The most critical feature. A WebSocket server runs on Port 5001 to enable the AI assistant to control browser tabs:
  • open_ai_tab — Create a new browser window
  • capture_browser — Screenshot any tab as Base64
  • execute_browser_script — Inject JavaScript into any tab
  • list_browsers — Get all open tabs with URLs
  • get_console_logs — Read console output from any tab

Browser Farm

Multiple BrowserView/BrowserWindow instances are managed in a browserViews{} dictionary. Each tab can be independently controlled, screenshotted, and scripted — enabling automated browsing and scraping.

Preload Bridge

preload.js uses Electron contextBridge to safely expose IPC methods as window.floworkDesktop. This gives the Vue SPA access to native features like file dialogs, app tab management, and AI browser control.

Dynamic Component Discovery

Modules placed in flowork_modules/ are automatically scanned and loaded at startup. Each module exports an init() function that receives ipcMain, FloworkState, and node.js modules.