App IPC

Overview

The App IPC namespace provides APIs for accessing application information, clipboard operations, default browser settings, and other system-level functionality. These APIs are available through the window.flow.app object.

App API

Core application information and utilities.

Source Files

Interface: src/shared/flow/interfaces/app/app.ts
Handler: src/main/ipc/app/app.ts
Preload: src/preload/index.ts:630-665

Methods

getAppInfo

() => Promise<AppInfo>

Gets comprehensive information about the Flow Browser application.

Usage
Implementation

const appInfo = await window.flow.app.getAppInfo();
console.log("Flow version:", appInfo.app_version);
console.log("Running on:", appInfo.os);
console.log("Chrome version:", appInfo.chrome_version);
console.log("Update channel:", appInfo.update_channel);

// src/preload/index.ts:632-650
getAppInfo: async () => {
  const appInfo = await ipcRenderer.invoke("app:get-info");
  const appVersion = appInfo.version;
  const updateChannel = appInfo.packaged ? "Stable" : "Development";
  const os = getOSFromPlatform(process.platform);
  
  return {
    app_version: appVersion,
    build_number: appVersion,
    node_version: process.versions.node,
    chrome_version: process.versions.chrome,
    electron_version: process.versions.electron,
    os: os,
    update_channel: updateChannel
  };
}

app_version

string

Flow Browser version (e.g., “1.0.0”)

build_number

string

Build number (same as app_version)

node_version

string

Node.js version used by Electron

chrome_version

string

Chromium version used by Electron

electron_version

string

Electron version

string

Operating system (“macOS”, “Windows”, “Linux”, or “Unknown”)

update_channel

'Stable' | 'Beta' | 'Alpha' | 'Development'

Update channel - “Stable” for packaged builds, “Development” for dev mode

getPlatform

() => string

Gets the platform of the current device.

const platform = window.flow.app.getPlatform();
// Returns: "darwin" | "win32" | "linux" | etc.

This method returns Node.js platform identifiers from process.platform. It’s available to all pages everywhere (permission level: “all”).

Common return values:

"darwin" - macOS
"win32" - Windows
"linux" - Linux

writeTextToClipboard

(text: string) => void

Writes text to the system clipboard.

Usage
Handler

window.flow.app.writeTextToClipboard("Hello, World!");

// src/main/ipc/app/app.ts:12-14
ipcMain.on("app:write-text-to-clipboard", (_event, text: string) => {
  clipboard.writeText(text);
});

text

string

required

The text to copy to the clipboard

setDefaultBrowser

() => Promise<boolean>

Sets Flow Browser as the default browser for the system.

Usage
Handler

const success = await window.flow.app.setDefaultBrowser();
if (success) {
  console.log("Flow is now the default browser");
} else {
  console.log("Failed to set as default browser");
}

// src/main/ipc/app/app.ts:16-18
ipcMain.handle("app:set-default-browser", async () => {
  return await defaultBrowserController.setDefaultBrowser();
});

This operation may require user interaction on some operating systems. The behavior varies by platform:

macOS: Opens System Preferences for the user to confirm
Windows: May open Windows Settings
Linux: Implementation varies by desktop environment

getDefaultBrowser

() => Promise<boolean>

Checks whether Flow Browser is currently set as the default browser.

const isDefault = await window.flow.app.getDefaultBrowser();
if (!isDefault) {
  // Prompt user to set Flow as default
}

Example: About Dialog

Here’s an example of building an “About” dialog using the App API:

import { useEffect, useState } from "react";

function AboutDialog() {
  const [appInfo, setAppInfo] = useState(null);
  const [isDefaultBrowser, setIsDefaultBrowser] = useState(false);
  
  useEffect(() => {
    // Load app info
    window.flow.app.getAppInfo().then(setAppInfo);
    
    // Check if Flow is the default browser
    window.flow.app.getDefaultBrowser().then(setIsDefaultBrowser);
  }, []);
  
  const handleSetDefault = async () => {
    const success = await window.flow.app.setDefaultBrowser();
    if (success) {
      setIsDefaultBrowser(true);
    }
  };
  
  const handleCopyVersion = () => {
    if (appInfo) {
      window.flow.app.writeTextToClipboard(
        `Flow Browser ${appInfo.app_version}\n` +
        `Electron ${appInfo.electron_version}\n` +
        `Chromium ${appInfo.chrome_version}\n` +
        `Node.js ${appInfo.node_version}\n` +
        `OS: ${appInfo.os}`
      );
    }
  };
  
  if (!appInfo) return <div>Loading...</div>;
  
  return (
    <div className="about-dialog">
      <h1>Flow Browser</h1>
      <p className="version">Version {appInfo.app_version}</p>
      <p className="channel">{appInfo.update_channel} Channel</p>
      
      <div className="technical-info">
        <h2>Technical Information</h2>
        <dl>
          <dt>Electron:</dt>
          <dd>{appInfo.electron_version}</dd>
          
          <dt>Chromium:</dt>
          <dd>{appInfo.chrome_version}</dd>
          
          <dt>Node.js:</dt>
          <dd>{appInfo.node_version}</dd>
          
          <dt>Operating System:</dt>
          <dd>{appInfo.os}</dd>
        </dl>
        
        <button onClick={handleCopyVersion}>
          Copy Version Info
        </button>
      </div>
      
      <div className="default-browser">
        {isDefaultBrowser ? (
          <p>Flow is your default browser</p>
        ) : (
          <button onClick={handleSetDefault}>
            Set as Default Browser
          </button>
        )}
      </div>
    </div>
  );
}

Example: Platform-Specific UI

Use getPlatform() to conditionally render platform-specific UI:

import { useEffect, useState } from "react";

function PlatformSpecificUI() {
  const [platform, setPlatform] = useState("");
  
  useEffect(() => {
    setPlatform(window.flow.app.getPlatform());
  }, []);
  
  const getShortcutKey = () => {
    return platform === "darwin" ? "⌘" : "Ctrl";
  };
  
  const getShortcutText = (action: string) => {
    const key = getShortcutKey();
    switch (action) {
      case "copy":
        return `${key}+C`;
      case "paste":
        return `${key}+V`;
      case "new-tab":
        return `${key}+T`;
      default:
        return "";
    }
  };
  
  return (
    <div>
      <h2>Keyboard Shortcuts</h2>
      <ul>
        <li>New Tab: {getShortcutText("new-tab")}</li>
        <li>Copy: {getShortcutText("copy")}</li>
        <li>Paste: {getShortcutText("paste")}</li>
      </ul>
      
      {platform === "darwin" && (
        <div className="macos-specific">
          <p>macOS-specific features enabled</p>
        </div>
      )}
      
      {platform === "win32" && (
        <div className="windows-specific">
          <p>Windows-specific features enabled</p>
        </div>
      )}
    </div>
  );
}

Implement a “Copy Link” feature in a custom context menu:

function LinkContextMenu({ url, onClose }) {
  const handleCopyLink = () => {
    window.flow.app.writeTextToClipboard(url);
    onClose();
  };
  
  return (
    <div className="context-menu">
      <button onClick={handleCopyLink}>
        Copy Link Address
      </button>
      <button onClick={() => {
        window.flow.navigation.goTo(url);
        onClose();
      }}>
        Open Link
      </button>
      <button onClick={() => {
        window.flow.tabs.newTab(url, false);
        onClose();
      }}>
        Open Link in New Tab
      </button>
    </div>
  );
}

Permissions

The App API uses the following permission levels:

getAppInfo

app

Available to Flow internal protocols and extension pages

getPlatform

all

Available to all pages everywhere (special exception)

writeTextToClipboard

app

Available to Flow internal protocols and extension pages

setDefaultBrowser

app

Available to Flow internal protocols and extension pages

getDefaultBrowser

app

Available to Flow internal protocols and extension pages

See the IPC Overview for more information about the permission system.

Type Definitions

AppInfo

interface AppInfo {
  app_version: string;           // Flow Browser version
  build_number: string;          // Build number (same as app_version)
  node_version: string;          // Node.js version
  chrome_version: string;        // Chromium version
  electron_version: string;      // Electron version
  os: string;                    // Operating system
  update_channel: "Stable" | "Beta" | "Alpha" | "Development";
}

UpdateChannel

type UpdateChannel = "Stable" | "Beta" | "Alpha" | "Development";

Stable: Production builds installed from official releases
Beta: Pre-release builds for testing
Alpha: Early pre-release builds
Development: Unpackaged builds running in dev mode

Window IPC

Window management and controls

Browser IPC

Browser profiles and tab management

IPC Overview

Learn about Flow’s IPC architecture

Updates API

Auto-update functionality (coming soon)

Core APIs

Controllers

Extensions

IPC

Overview

App API

Source Files

Methods

Example: About Dialog

Example: Platform-Specific UI

Example: Copy Link Context Menu

Permissions

Type Definitions

AppInfo

UpdateChannel

Window IPC

Browser IPC

IPC Overview

Updates API

Build docs developers (and LLMs) love

Core APIs

Controllers

Extensions

IPC

​Overview

​App API

​Source Files

​Methods

​Example: About Dialog

​Example: Platform-Specific UI

​Example: Copy Link Context Menu

​Permissions

​Type Definitions

​AppInfo

​UpdateChannel

​Related APIs

Window IPC

Browser IPC

IPC Overview

Updates API

Build docs developers (and LLMs) love

Overview

App API

Source Files

Methods

Example: About Dialog

Example: Platform-Specific UI

Example: Copy Link Context Menu

Permissions

Type Definitions

AppInfo

UpdateChannel

Related APIs