Choosing the Right AI for Each Job

Scaffold the project

# Create project folder
mkdir my-ai-app && cd my-ai-app
npm init -y

# Install Electron
npm install --save-dev electron electron-builder

# Install Claude SDK + dotenv for secrets
npm install @anthropic-ai/sdk dotenv

# Install electron-store for persistent settings
npm install electron-store

Recommended folder structure

my-ai-app/
├── main.js          ← Electron main process (Node.js)
├── preload.js       ← Bridge between main & renderer
├── renderer/
│   ├── index.html   ← App UI
│   ├── style.css
│   └── app.js       ← UI logic (no Node APIs here)
├── assets/
│   └── icon.ico     ← Windows app icon (256×256)
├── .env             ← ANTHROPIC_API_KEY (never commit!)
├── .gitignore
└── package.json

package.json scripts

"scripts": {
  "start":   "electron .",
  "build":   "electron-builder --win",
  "dist":    "electron-builder --win --publish never"
},
"main": "main.js"

main.js — Main process with Claude handler

const { app, BrowserWindow, ipcMain } = require('electron')
const Anthropic = require('@anthropic-ai/sdk')
const path      = require('path')
require('dotenv').config()

const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY })

function createWindow() {
  const win = new BrowserWindow({
    width: 1000, height: 700,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,   // security: MUST be true
      nodeIntegration:  false   // security: MUST be false
    }
  })
  win.loadFile('renderer/index.html')
}

// Handle Claude API call from renderer
ipcMain.handle('ask-claude', async (event, messages) => {
  const response = await anthropic.messages.create({
    model:      'claude-3-5-sonnet-20241022',
    max_tokens: 1024,
    messages:   messages
  })
  return response.content[0].text
})

app.whenReady().then(createWindow)

preload.js — Secure bridge

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('api', {
  // Renderer calls: await window.api.askClaude([...])
  askClaude: (messages) => ipcRenderer.invoke('ask-claude', messages)
})

Streaming responses (better UX)

// In main.js — stream tokens back to renderer in real-time
ipcMain.handle('ask-claude-stream', async (event, messages) => {
  const stream = await anthropic.messages.stream({
    model: 'claude-3-5-sonnet-20241022',
    max_tokens: 2048,
    messages
  })

  for await (const chunk of stream) {
    if (chunk.type === 'content_block_delta') {
      // Push each token to the renderer window
      event.sender.send('stream-token', chunk.delta.text)
    }
  }
  return 'done'
})

renderer/app.js — Calling Claude from the UI

const chatHistory = []

async function sendMessage(userText) {
  chatHistory.push({ role: 'user', content: userText })

  // Show typing indicator
  showTyping()

  const reply = await window.api.askClaude(chatHistory)

  chatHistory.push({ role: 'assistant', content: reply })
  renderMessage('assistant', reply)
}

// Streaming version — listen for tokens
window.api.onStreamToken((token) => {
  appendToLastMessage(token)
})

system: "You are an expert SEO analyst
specialising in affiliate niche research.
When given a keyword, return:
1. Niche viability score (1-10)
2. Top 3 sub-niches
3. Estimated monthly search volume
4. Monetisation angle
Always respond in JSON."

electron-builder config in package.json

"build": {
  "appId":       "com.yourname.myaiapp",
  "productName": "My AI App",
  "win": {
    "target": ["nsis"],
    "icon":   "assets/icon.ico"
  },
  "nsis": {
    "oneClick":            false,   // show install wizard
    "allowToChangeInstallationDirectory": true,
    "createDesktopShortcut": true,
    "createStartMenuShortcut": true,
    "installerIcon":  "assets/icon.ico",
    "uninstallerIcon": "assets/icon.ico"
  },
  "files": [
    "main.js", "preload.js", "renderer/**", "assets/**"
  ],
  "extraResources": [
    { "from": "assets/", "to": "assets" }
  ]
}

Build the installer

# Build for Windows (run on Windows or use CI)
npm run build

# Output: dist/My AI App Setup 1.0.0.exe
# That .exe IS the installer — ready to distribute

Full build & release workflow

1. Develop & test locally

   Run npm start to launch the app in dev mode. Use Chrome DevTools (Ctrl+Shift+I) to debug the renderer.

2. Bump version in package.json

   Update "version": "1.0.0" — this becomes the installer filename and auto-update version.

3. Run npm run build

   electron-builder compiles, packages, and creates the NSIS .exe in the dist/ folder.

4. Test the installer on a clean Windows machine

   Double-click the .exe, verify install, launch, and uninstall all work correctly.

5. Upload to GitHub Releases / your website

   Attach the .exe to a GitHub Release or host it on your own server. Link to it from your sales page.

6. Submit to download sites

   Submit to Softpedia, FileHippo, MajorGeeks, and SnapFiles. Free organic traffic for years — this is the Tier 3 growth engine.

The Hybrid Architecture — Desktop Shell + Cloud Brain

The most powerful pattern is a desktop front-end (Electron) backed by a cloud back-end (your own web app or SaaS). The desktop app handles the UI, local file access, and the native Windows feel. The cloud handles auth, data storage, licensing, and shared AI logic. Users get the best of both worlds: a fast, offline-capable desktop app that stays in sync with the web.

1. Calling Any REST API from the Desktop App

Node.js’s built-in fetch (or the axios library) lets the main process call any web API. This is how you connect to Stripe, Airtable, Google Sheets, OpenAI, Twilio, Mailchimp, or your own backend — all from inside the desktop app.

// main.js — call any REST API from the main process
ipcMain.handle('fetch-data', async (event, endpoint) => {
  const res = await fetch(endpoint, {
    headers: {
      'Authorization': `Bearer ${process.env.MY_API_KEY}`,
      'Content-Type': 'application/json'
    }
  })
  return res.json()
})

// Renderer calls it like this:
const data = await window.api.fetchData('https://api.yourapp.com/leads')

// Check subscription on app start
const status = await fetch(
  'https://yourapp.com/api/subscription',
  { headers: { 'Authorization': `Bearer ${token}` } }
).then(r => r.json())

if (!status.active) {
  showUpgradeScreen() // lock the app
}

// Fire a Zapier webhook from main.js
await fetch('https://hooks.zapier.com/hooks/catch/xxx/yyy', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    email: user.email,
    action: 'lead_generated',
    data: result
  })
})

// npm install puppeteer
const puppeteer = require('puppeteer')

ipcMain.handle('scrape-page', async (_, url) => {
  const browser = await puppeteer.launch()
  const page    = await browser.newPage()
  await page.goto(url)
  const html    = await page.content()
  await browser.close()
  return html
})

2. Embedding a Web App or SaaS Dashboard Inside the Desktop App

Electron can load any URL — including your own hosted web app — directly inside the desktop window using a <webview> tag or a second BrowserWindow. This means your desktop app can literally wrap your SaaS dashboard, giving users a native-feeling app while you maintain a single web codebase.

// Option A: Load your web app in a second window
const dashWin = new BrowserWindow({ width: 1200, height: 800 })
dashWin.loadURL('https://app.yourwebsite.com/dashboard')

// Option B: Use webview tag in renderer HTML
<!-- renderer/index.html -->
<webview src="https://app.yourwebsite.com"
         style="width:100%;height:600px"
         partition="persist:main"></webview>

// Pass auth token from desktop app into the web app
dashWin.webContents.on('did-finish-load', () => {
  dashWin.webContents.executeJavaScript(
    `localStorage.setItem('token', '${userToken}')`
  )
})

3. Popular SaaS Services You Can Integrate Directly

4. Real-Time Sync with WebSockets

For apps that need live data — a shared dashboard, a collaborative tool, or real-time notifications — the main process can open a persistent WebSocket connection to your server. Data pushed from the server appears in the desktop UI instantly, just like a web app.

// main.js — open a WebSocket to your server
const WebSocket = require('ws')  // npm install ws
const ws = new WebSocket('wss://yourapp.com/ws')

ws.on('message', (data) => {
  const msg = JSON.parse(data)
  // Forward live update to the renderer UI
  mainWindow.webContents.send('live-update', msg)
})

// Send data back to server from the desktop app
ws.send(JSON.stringify({ type: 'user_action', payload: data }))

5. Hybrid Business Model Patterns

🏆 Tier 1 — Enterprise Giants ($100M – $36B/yr)

These are the category kings. Study their model — every one started as a focused tool solving one problem.

💼 Tier 2 — Mid-Market Independents ($5M – $100M/yr)

Small teams, bootstrapped, often running for 10–25 years on SEO and download site traffic alone. This is the sweet spot to study.

⚡ Tier 3 — Micro-Niche & Solo Developer ($500K – $10M/yr) — Your Target Zone

1–5 person teams. One problem. One audience. One-time pricing. SEO + download sites = $0 CAC. This is the most replicable model in software. Add AI and the value ceiling doubles.

🤖 AI Tools Already Earning — The New Wave

These are AI-native products launched 2020–2024 that are already at serious revenue. Every one of them proves the category. Every one of them has a micro-niche version waiting to be built.

🎯 10 Open AI Windows Opportunities — No Dominant Incumbent Yet

These are the specific gaps identified in the 2026 report. Each one follows the exact Tier 3 formula. Build any of these with Claude + Electron and you have a real product.