Electron 桌面 AI 助手开发教程 : 构建您的智能桌面应用

Bonjour à tous les développeurs ! Je m'appelle Thomas et je suis développeur full-stack depuis 8 ans. Aujourd'hui, je vais vous partager mon expérience concrète dans la création d'une application de bureau AI assistante avec Electron. Après avoir testé de nombreuses solutions d'API, j'ai trouvé que HolySheep AI offrait les meilleures performances avec un coût réduit de 85% par rapport aux solutions traditionnelles.

Comparaison des coûts d'API en 2026

Avant de commencer le développement, analysons la structure de coûts actuelle pour les principales API d'IA. Ces chiffres vérifiables datent de janvier 2026 :

• GPT-4.1 : 8 $/MTok (sortie)
• Claude Sonnet 4.5 : 15 $/MTok (sortie)
• Gemini 2.5 Flash : 2,50 $/MTok (sortie)
• DeepSeek V3.2 : 0,42 $/MTok (sortie)

Pour un usage de 10 millions de tokens par mois, voici la comparaison de coûts :

Provider	Coût mensuel (10M tokens)	Coût annuel
OpenAI GPT-4.1	80 $	960 $
Anthropic Claude Sonnet 4.5	150 $	1 800 $
Google Gemini 2.5 Flash	25 $	300 $
DeepSeek V3.2 (HolySheep)	4,20 $	50,40 $

Avec HolySheep AI, vous bénéficiez du taux de change avantageux ¥1=$1 (économie de 85%+), des méthodes de paiement WeChat et Alipay, d'une latence moyenne inférieure à 50ms, et de crédits gratuits à l'inscription.

Prérequis et installation du projet

Pour suivre ce tutoriel, vous aurez besoin de Node.js 18+, npm ou yarn, et un compte HolySheep AI pour obtenir votre clé API.

# Initialisation du projet Electron
mkdir electron-ai-assistant
cd electron-ai-assistant
npm init -y

Installation des dépendances
npm install [email protected]
npm install @electron-forge/[email protected] --save-dev
npm install [email protected]
npm install [email protected]

Structure du projet
mkdir -p src/main
mkdir -p src/renderer
mkdir -p src/preload
mkdir -p assets

Configuration du processus principal Electron

Le fichier main.js gère le cycle de vie de l'application, les fenêtres et la communication IPC avec le renderer.

// src/main/main.js
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const log = require('electron-log');

class ElectronAIAssistant {
  constructor() {
    this.mainWindow = null;
    this.apiBaseUrl = 'https://api.holysheep.ai/v1';
  }

  createWindow() {
    log.info('Création de la fenêtre principale...');
    
    this.mainWindow = new BrowserWindow({
      width: 1200,
      height: 800,
      minWidth: 800,
      minHeight: 600,
      title: 'AI Assistant Desktop',
      webPreferences: {
        preload: path.join(__dirname, '../preload/preload.js'),
        contextIsolation: true,
        nodeIntegration: false,
        sandbox: false
      },
      show: false,
      backgroundColor: '#1a1a2e'
    });

    this.mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'));

    this.mainWindow.once('ready-to-show', () => {
      this.mainWindow.show();
      log.info('Fenêtre affichée avec succès');
    });

    this.mainWindow.on('closed', () => {
      this.mainWindow = null;
    });
  }

  setupIpcHandlers() {
    ipcMain.handle('send-message', async (event, { message, model }) => {
      try {
        const response = await this.callAIAPI(message, model);
        return { success: true, data: response };
      } catch (error) {
        log.error('Erreur API:', error.message);
        return { success: false, error: error.message };
      }
    });

    ipcMain.handle('get-models', async () => {
      return {
        models: [
          { id: 'gpt-4.1', name: 'GPT-4.1', price: 8 },
          { id: 'claude-sonnet-4.5', name: 'Claude Sonnet 4.5', price: 15 },
          { id: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash', price: 2.50 },
          { id: 'deepseek-v3.2', name: 'DeepSeek V3.2', price: 0.42 }
        ]
      };
    });
  }

  async callAIAPI(message, model) {
    const fetch = require('node-fetch');
    const apiKey = process.env.HOLYSHEEP_API_KEY || 'YOUR_HOLYSHEEP_API_KEY';
    
    const modelMapping = {
      'gpt-4.1': 'gpt-4.1',
      'claude-sonnet-4.5': 'claude-sonnet-4.5',
      'gemini-2.5-flash': 'gemini-2.5-flash',
      'deepseek-v3.2': 'deepseek-v3.2'
    };

    const response = await fetch(${this.apiBaseUrl}/chat/completions, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': Bearer ${apiKey}
      },
      body: JSON.stringify({
        model: modelMapping[model] || 'deepseek-v3.2',
        messages: [{ role: 'user', content: message }],
        max_tokens: 2000,
        temperature: 0.7
      })
    });

    if (!response.ok) {
      const error = await response.text();
      throw new Error(API Error ${response.status}: ${error});
    }

    const data = await response.json();
    return data.choices[0].message.content;
  }

  start() {
    app.whenReady().then(() => {
      this.setupIpcHandlers();
      this.createWindow();
      log.info('Application AI Assistant démarrée');
    });

    app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
        app.quit();
      }
    });

    app.on('activate', () => {
      if (BrowserWindow.getAllWindows().length === 0) {
        this.createWindow();
      }
    });
  }
}

new ElectronAIAssistant().start();

Script preload sécurisé

Le fichier preload expose les APIs nécessaires au renderer de manière sécurisée via contextBridge.

// src/preload/preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (message, model) => ipcRenderer.invoke('send-message', { message, model }),
  getModels: () => ipcRenderer.invoke('get-models'),
  
  // Méthodes utilitaires
  onTokenUsage: (callback) => ipcRenderer.on('token-usage', (event, data) => callback(data)),
  setApiKey: (key) => process.env.HOLYSHEEP_API_KEY = key
});

console.log('Preload script chargé - API exposée au renderer');

Interface utilisateur HTML/CSS/JS

L'interface du renderer est une application web classique avec un design moderne et responsive.

<!-- src/renderer/index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Assistant Desktop</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #e4e4e7;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background: rgba(30, 30, 50, 0.9);
            padding: 20px;
            border-bottom: 1px solid #3b82f6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header h1 {
            font-size: 24px;
            color: #60a5fa;
        }
        
        .model-selector {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .model-selector select {
            padding: 10px 15px;
            border-radius: 8px;
            border: 1px solid #3b82f6;
            background: #1e1e32;
            color: white;
            font-size: 14px;
            cursor: pointer;
        }
        
        .chat-container {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .message {
            max-width: 80%;
            padding: 15px 20px;
            border-radius: 15px;
            line-height: 1.6;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .message.user {
            align-self: flex-end;
            background: #3b82f6;
            color: white;
            border-bottom-right-radius: 5px;
        }
        
        .message.assistant {
            align-self: flex-start;
            background: #2d2d44;
            border-bottom-left-radius: 5px;
        }
        
        .input-area {
            padding: 20px;
            background: rgba(30, 30, 50, 0.9);
            border-top: 1px solid #3b82f6;
            display: flex;
            gap: 15px;
        }
        
        .input-area textarea {
            flex: 1;
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #3b82f6;
            background: #1e1e32;
            color: white;
            font-size: 16px;
            resize: none;
            min-height: 60px;
        }
        
        .input-area textarea:focus {
            outline: none;
            border-color: #60a5fa;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
        }
        
        .send-btn {
            padding: 15px 30px;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .send-btn:hover {
            background: #2563eb;
            transform: scale(1.02);
        }
        
        .send-btn:disabled {
            background: #4b5563;
            cursor: not-allowed;
        }
        
        .stats {
            position: fixed;
            bottom: 100px;
            right: 20px;
            background: rgba(30, 30, 50, 0.95);
            padding: 15px;
            border-radius: 10px;
            font-size: 12px;
            border: 1px solid #3b82f6;
        }
        
        .stats span { color: #60a5fa; }
    </style>
</head>
<body>
    <div class="header">
        <h1>🤖 AI Assistant Desktop</h1>
        <div class="model-selector">
            <label>Modèle:</label>
            <select id="modelSelect">
                <option value="deepseek-v3.2">DeepSeek V3.2 (0,42$/MT) ⭐</option>
                <option value="gemini-2.5-flash">Gemini 2.5 Flash (2,50$/MT)</option>
                <option value="gpt-4.1">GPT-4.1 (8$/MT)</option>
                <option value="claude-sonnet-4.5">Claude Sonnet 4.5 (15$/MT)</option>
            </select>
        </div>
    </div>
    
    <div class="chat-container" id="chatContainer">
        <div class="message assistant">
            Bonjour ! Je suis votre assistant IA. Posez-moi vos questions en français ou dans n'importe quelle langue. 
            Coût actuel avec DeepSeek V3.2 : 0,42$/million de tokens via HolySheep AI (latence <50ms).
        </div>
    </div>
    
    <div class="input-area">
        <textarea id="messageInput" placeholder="Tapez votre message ici..." rows="2"></textarea>
        <button class="send-btn" id="sendBtn">Envoyer</button>
    </div>
    
    <div class="stats">
        💰 Coût estimé: <span id="totalCost">0,00$</span> | 
        📊 Tokens: <span id="totalTokens">0</span>
    </div>
    
    <script>
        let totalTokens = 0;
        let totalCost = 0;
        
        const chatContainer = document.getElementById('chatContainer');
        const messageInput = document.getElementById('messageInput');
        const sendBtn = document.getElementById('sendBtn');
        const modelSelect = document.getElementById('modelSelect');
        const totalCostEl = document.getElementById('totalCost');
        const totalTokensEl = document.getElementById('totalTokens');
        
        const prices = {
            'deepseek-v3.2': 0.42,
            'gemini-2.5-flash': 2.50,
            'gpt-4.1': 8.00,
            'claude-sonnet-4.5': 15.00
        };
        
        async function sendMessage() {
            const message = messageInput.value.trim();
            if (!message) return;
            
            addMessage(message, 'user');
            messageInput.value = '';
            sendBtn.disabled = true;
            
            try {
                const model = modelSelect.value;
                const result = await window.electronAPI.sendMessage(message, model);
                
                if (result.success) {
                    addMessage(result.data, 'assistant');
                    const tokens = Math.ceil(message.length / 4 + result.data.length / 4);
                    totalTokens += tokens;
                    totalCost += (tokens / 1000000) * prices[model];
                    updateStats();
                } else {
                    addMessage('Erreur: ' + result.error, 'assistant');
                }
            } catch (error) {
                addMessage('Erreur de connexion: ' + error.message, 'assistant');
            }
            
            sendBtn.disabled = false;
        }
        
        function addMessage(content, type) {
            const div = document.createElement('div');
            div.className = 'message ' + type;
            div.textContent = content;
            chatContainer.appendChild(div);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }
        
        function updateStats() {
            totalTokensEl.textContent = totalTokens.toLocaleString();
            totalCostEl.textContent = totalCost.toFixed(2) + '$';
        }
        
        sendBtn.addEventListener('click', sendMessage);
        messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });
    </script>
</body>
</html>

Configuration de package.json pour la construction

{
  "name": "electron-ai-assistant",
  "version": "1.0.0",
  "description": "Application de bureau AI Assistant avec Electron",
  "main": "src/main/main.js",
  "scripts": {
    "start": "electron .",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "@electron-forge/cli": "^7.2.0",
    "@electron-forge/maker-squirrel": "^7.2.0",
    "@electron-forge/maker-zip": "^7.2.0"
  },
  "dependencies": {
    "electron-log": "^5.0.0",
    "node-fetch": "^2.7.0"
  },
  "config": {
    "forge": "./forge.config.js"
  }
}

Configuration Electron Forge

// forge.config.js
module.exports = {
  packagerConfig: {
    name: 'ElectronAIAssistant',
    executableName: 'electron-ai-assistant',
    asar: true,
    icon: './assets/icon'
  },
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        name: 'ElectronAIAssistant'
      }
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin', 'win32', 'linux']
    }
  ]
};

Erreurs courantes et solutions

Erreur 1 : "Cannot find module 'node-fetch'"

Problème : L'erreur se produit car node-fetch n'est pas installé ou incompatible avec le contexte.

Solution : Installez la version compatible ou utilisez fetch natif disponible dans Electron 21+ :

// Remplacer node-fetch par fetch natif (Electron 21+)
async callAIAPI(message, model) {
    // Supprimer : const fetch = require('node-fetch');
    // Utiliser directement fetch (natif ESM)
    
    const apiKey = process.env.HOLYSHEEP_API_KEY || 'YOUR_HOLYSHEEP_API_KEY';
    const response = await fetch(${this.apiBaseUrl}/chat/completions, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': Bearer ${apiKey}
        },
        body: JSON.stringify({
            model: model,
            messages: [{ role: 'user', content: message }]
        })
    });
    return await response.json();
}

Erreur 2 : "API Error 401: Unauthorized"

Problème : La clé API est invalide, absente ou mal configurée.

Solution : Vérifiez votre clé sur le dashboard HolySheep et configurez-la correctement :

// Créez un fichier .env à la racine du projet
// HOLYSHEEP_API_KEY=votre_cle_api_ici

// Ou définissez-la via variable d'environnement avant lancement
// Windows (PowerShell):
// $env:HOLYSHEEP_API_KEY="votre_cle_api_ici"
// npm start

// macOS/Linux:
// export HOLYSHE
Ressources connexes
📚 Tutoriels API IA
💰 Voir les tarifs
📖 Documentation
🚀 Inscription gratuite
Articles connexes
Aider 0.60+ : Le Mode Architect et l'Intégration Git Revolut
VLA : le guide complet pour intégrer les modèles Vision-Lang
Google Search Grounding : Connecter Gemini au Web en Temps R