Criar aplicacoes desktop com Electron agentes IA combina a produtividade do desenvolvimento web com o poder dos aplicativos nativos para Windows. Claude Code e Codex podem gerar desde o main process e as janelas ate o instalador final. Este tutorial mostra o passo a passo para construir um app desktop completo com Electron e React, usando agentes de IA como assistentes de codigo — tudo no Windows 11 com o Orquestra.
Setup do projeto Electron com Claude Code
O setup de um projeto Electron Claude Code e rapido com o agente:
Criacao do projeto
claude "Crie um projeto Electron com React e TypeScript. Inicialize com npm init, instale electron, react, react-dom, typescript, electron-builder, concurrently e wait-on. Crie a estrutura: src/main/ (processo principal), src/renderer/ (interface), public/ (assets estaticos). Configure o package.json com main: 'src/main/main.js' e scripts de dev e build."
Configuracao do TypeScript
claude "Crie tsconfig.json para o projeto Electron: - strict mode habilitado - target ES2022 - module commonjs (para o main process) - jsx react-jsx - paths: @main/* e @renderer/* - outDir: dist/ - include: src/"
Scripts do package.json
claude "Configure os scripts no package.json: - dev: executa tsc e electron em paralelo com concurrently - build: compila TypeScript e empacota com electron-builder - start: electron . (para rodar o build) Use wait-on para garantir que o TypeScript compile antes do Electron iniciar."
Main Process com Claude Code
O main process e o coracao de qualquer app Electron. Claude Code e ideal para criar esta camada porque ela exige compreensao do ciclo de vida do sistema operacional.
Janela principal
claude "Crie src/main/main.ts com:
- Importacao de app, BrowserWindow, ipcMain, Menu, Tray do Electron
- Funcao createWindow() que cria BrowserWindow com:
width: 1200, height: 800, minWidth: 800, minHeight: 600
webPreferences: { preload, contextIsolation: true, nodeIntegration: false }
- Evento app.whenReady() que chama createWindow()
- Evento app.on('window-all-closed') que encerra no Windows
- Integracao com o menu nativo do sistema"
Preload script
O preload script e a ponte segura entre main e renderer:
claude "Crie src/main/preload.ts com:
- contextBridge.exposeInMainWorld('electronAPI', {...})
- Metodos expostos: readFile, writeFile, openFile, saveFile, getAppPath
- Use ipcRenderer.invoke() para cada metodo
- Dica: nao exponha ipcRenderer diretamente — crie uma API especifica"
Tray e notificacoes
claude "Adicione ao main.ts: - Tray na system tray com icone personalizado - Menu do tray: 'Abrir', 'Minimizar', 'Sair' - Notificacao nativa com Notification API quando o app receber uma acao - Evento de clique no tray que restaura a janela"
Renderer com React e Codex
O renderer e a interface do app — React puro. Codex e excelente para gerar componentes React que interagem com o Electron.
App principal
opencode "Crie src/renderer/App.tsx com: - Provider de tema (claro/escuro) - Router interno (sem react-router, use estado para navegacao simples) - Layout com sidebar (navegacao) e main content - Hook useElectroAPI que tipa o window.electronAPI exposto no preload - Tipos TypeScript para a API do Electron"
Componente de arquivo
opencode "Crie src/renderer/components/FileEditor.tsx:
- Props: filePath (string | null), content (string), onSave (content: string) => void
- TextArea com syntax highlight basico
- Barra de ferramentas: Salvar, Salvar Como, Abrir Arquivo
- Indicador de arquivo salvo/modificado (bolinha vermelha quando nao salvo)
- Atalhos de teclado: Ctrl+S salvar, Ctrl+O abrir"
Componente de explorador de arquivos
opencode "Crie src/renderer/components/FileExplorer.tsx:
- Props: rootPath (string), onFileSelect (path: string) => void
- Arvore de diretorios estilizada com indentacao e icones
- Clique em arquivo chama onFileSelect
- Clique em pasta expande/recolhe
- Menu de contexto com botao direito: Novo Arquivo, Nova Pasta, Renomear, Excluir
- Use IPC para ler a estrutura de diretorios do sistema"
Comunicacao IPC entre processos
A comunicacao entre main e renderer via IPC (Inter-Process Communication) e essencial em Electron. Claude Code gerencia essa camada com seguranca.
Handlers IPC no main process
claude "Adicione handlers IPC em src/main/ipc-handlers.ts: - handle('dialog:openFile'): abre dialogo nativo de selecao de arquivo - handle('dialog:saveFile'): abre dialogo nativo para salvar arquivo - handle('file:read', path): le arquivo do disco - handle('file:write', path, content): escreve arquivo no disco - handle('file:delete', path): deleta arquivo - handle('dir:list', path): lista conteudo do diretorio Use dialog.showOpenDialog/showSaveDialog e fs/promises do Node.js."
Seguranca IPC
Claude Code configura a seguranca corretamente:
claude "Verifique as configuracoes de seguranca do Electron: - contextIsolation: true (isola o preload do renderer) - nodeIntegration: false (impede acesso ao Node.js do renderer) - sandbox: true (sandbox no renderer) - Valide os caminhos de arquivo nos handlers IPC para prevenir directory traversal attacks"
Exemplo pratico: Editor de texto com Electron
Vamos unir tudo em um editor de texto simples — tipo um Notepad com superpoderes.
Estrutura completa
claude "Crie a estrutura completa do Text Editor: - src/main/main.ts: janela, tray, menu nativo - src/main/preload.ts: ponte segura para o renderer - src/main/ipc-handlers.ts: leitura/escrita de arquivos - src/renderer/App.tsx: layout principal - src/renderer/components/FileEditor.tsx: area de edicao - src/renderer/components/FileExplorer.tsx: explorador de arquivos - src/renderer/components/Toolbar.tsx: barra de ferramentas - src/renderer/hooks/useFileSystem.ts: hook para acesso ao sistema"
Build do instalador
claude "Configure o electron-builder no package.json: - appId: com.seu-app.text-editor - productName: TextEditor - win: target 'nsis' (instalador Windows) - icone: public/icon.png (gere um icone simples) - extraResources: pastas necessarias para o app Execute 'npm run build' para gerar o instalador .exe"
Em aproximadamente 2 horas com Claude Code e Codex, voce tem um editor de texto funcional com explorador de arquivos, menu nativo e instalador Windows — pronto para distribuir.
Build e distribuicao com electron-builder
Com o app pronto, Claude Code cuida da configuracao de build e distribuicao:
Configuracao do builder
claude "Configure electron-builder para Windows: - Target: nsis (instalador unico) e portable (app portatil) - Icone do app em .ico - Certificado de assinatura digital (opcional, para Windows SmartScreen) - Comprimir: max (menor tamanho possivel) - Incluir node_modules apenas necessarios (files filter)"
Execute o build:
npm run build
O instalador .exe sera gerado na pasta dist/, pronto para instalar em qualquer Windows 11.
FAQ — Perguntas Frequentes
Preciso de conhecimentos em C++ ou Win32 para criar apps desktop com Electron?
Nao. Electron usa HTML, CSS e JavaScript/TypeScript para criar a interface, e Node.js para acesso ao sistema operacional. Se voce ja desenvolve web, ja sabe Electron. Claude Code e Codex geram todo o codigo — do main process ao renderer.
Apps Electron gerados por IA sao seguros?
O codigo gerado segue boas praticas, mas a seguranca depende de como voce configura o Electron. Claude Code conhece as recomendacoes de seguranca (contextIsolation: true, nodeIntegration: false, sandbox habilitado) e as aplica por padrao se voce pedir.
Da para compilar o app Electron para .exe no Windows?
Sim. Com electron-builder ou electron-forge, voce gera instaladores .exe, .msi e até portable apps. Claude Code configura o builder com as opcoes corretas de icone, assinatura digital e compressao.
Claude Code e Codex conhecem as APIs do Electron?
Sim. Ambos conhecem as APIs do main process (BrowserWindow, ipcMain, dialog, Menu, Tray, Notification) e do renderer process (ipcRenderer, remote). Basta especificar "para Electron" no prompt.
O Orquestra funciona com o Electron dev server?
Sim. O Orquestra no Windows 11 roda o Electron dev server (electron .) normalmente. Voce pode ter Claude Code gerando o main process em um terminal e o app rodando em outro.
Comece a criar apps desktop com agentes hoje
Electron agentes IA democratiza a criacao de aplicacoes desktop. Com Claude Code para main process e IPC, Codex para componentes React, e electron-builder para distribuicao, voce cria apps nativos para Windows com a mesma produtividade do desenvolvimento web.
O Orquestra e o ambiente ideal para esse workflow — terminais lado a lado para o main process e renderer, integracao com o Electron dev server, e suporte nativo ao Windows 11.
Baixe o Orquestra para Windows 11 e comcece seu teste gratis de 7 dias.
Links internos recomendados
- TypeScript React com Agentes de IA — conceitos de React usados no renderer
- APIs REST com Agentes de IA — crie o backend que seu app Electron vai consumir
- Deploy na AWS com Agentes de IA — distribua atualizacoes automaticas do seu app
Links externos recomendados
- Electron Documentation — documentacao oficial do Electron
- electron-builder — ferramenta de build e empacotamento
- React Documentation — framework UI usado no renderer
Pronto para orquestrar seus agentes?
Baixe o Orquestra para Windows 11 e comece a coordenar seus agentes de IA em um canvas infinito. Gratis por 7 dias.