Using macOS Apple Intelligence Writing Tools from an Electron App

Electron 36.0.0 was released at the end of last month.

• Electron 36.0.0 | Electron

The highlight feature is that you can now use macOS Apple Intelligence’s Writing Tools via the context menu.

Apple Intelligence is an AI platform provided on Apple’s devices, available from iOS 18.1, iPadOS 18.1, and macOS Sequoia 15.1 onward. It also supports Japanese. When you enable Apple Intelligence, you can use image generation apps, Siri can integrate with ChatGPT to become smarter, and as a general-purpose feature, you can use Writing Tools in regular applications^[1].

You enable it from Settings under “Apple Intelligence & Siri”^[2].

Once Apple Intelligence is enabled, you can select text in any native application that displays or edits text and invoke Writing Tools features from the app’s “Edit” menu or the context menu to summarize or proofread the text.

• MacのApple Intelligenceで作文ツールを使用する

Here is how you invoke Writing Tools in the TextEdit application. You can call the desired feature from the “Writing Tools” submenu in the context menu.

The feature request to enable Writing Tools in the context menu was discussed in the following issue.

The feature released in Electron v36 appears to have been implemented by the following PR, which adds OS-level menu item support.

This is enabled by an option that accepts a WebFrameMain class instance when building menus.

• webFrameMain | Electron

Here’s a sample showing how to enable Writing Tools in the context menu of a basic Electron app that simply loads web content in the main window.

What you do is, in the normal context menu display, get the focusedFrame property (an instance of WebFrameMain) from WebContents, and specify it in the frame option of contextMenu.popup. See the comments in the code for details.

import { app, BrowserWindow, Menu } from 'electron';
import path from 'node:path';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

let mainWindow;

app.whenReady().then(() => {
  createWindow(); // Create the main window

  // Context menu handling
  mainWindow.webContents.on('context-menu', (e, params) => {
    // Get the WebFrameMain class of the main window
    const focusedFrame = mainWindow.webContents.focusedFrame;

    // Build the menu template
    const menuTemplate = buildMenuTemplate(params);
    // The visible attribute should normally be handled by Electron, but it hasn’t been recently, so we filter it ourselves
    const visibleItems = menuTemplate.filter(item => item.visible);

    // Build the context menu
    const contextMenu = Menu.buildFromTemplate(visibleItems);
    contextMenu.popup({
      window: mainWindow.webContents,
      frame: focusedFrame, // Set the instance of WebFrameMain
    });
  });
});

// Create the main window
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800, height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    }
  });
  mainWindow.loadFile('index.html');
}

// Build the menu template
function buildMenuTemplate(params) {
  const menuTemplete = [
     {
      label: 'Copy', // Copy text (using role)
      role: 'copy',
      visible: params.selectionText.trim().length > 0
    }
  ];
  return menuTemplete;
}

Result of running this. From the “Writing Tools” menu you can pass the app’s text data to Writing Tools and get results. It works particularly well in text areas.

I also integrated this into my Scrapbox app.

Since Scrapbox’s edit screen is different from a regular text area, the “Replace” function did not work properly^[3].

Electron allows you to build cross-platform apps, and it’s great to be able to incorporate convenient OS-native features into your app. The integration of each OS with generative AI will continue to progress, and Electron apps will also become more convenient in line with platform evolution.