TIPS 79 · ICONA

Votre projet devient une app Mac

Comment transformer l'outil web que vous vous êtes fait avec Claude en app Mac avec sa propre icône et sa propre fenêtre, grâce au projet open source app-it : ce qu'il vous faut, quoi taper, ce qu'il ajoute et comment l'enlever.

Ce que c'est et pourquoi ça compte

Avec Claude, vous vous êtes fait un outil à vous, et chaque matin c'est le même rituel : ouvrir le terminal, lancer le serveur (le programme qui fait tourner l'app sur votre ordinateur), chercher le bon onglet du navigateur. Et si vous fermez le terminal par erreur, tout s'arrête.

app-it est un projet gratuit et open source (licence MIT) qu'on ajoute à Claude Code et qui transforme ce projet en app Mac, avec son icône dans le Dock et sa fenêtre. Double-clic : l'app démarre le serveur toute seule et ouvre une fenêtre native (WebKit, le moteur de Safari). Avec ⌘Q, vous arrêtez aussi le serveur et vous libérez le port (le numéro, comme 5173, sur lequel il répond).

Il ne réécrit pas votre app : il ajoute quelques fichiers et vous laisse un rapport pour revenir en arrière. C'est un projet non officiel d'un développeur indépendant, pas d'Anthropic. Et c'est pour votre usage : pas pour publier l'app sur l'App Store ni pour la vendre.

1. Ce qu'il vous faut d'abord

  • Un Mac. En pratique, app-it est réservé à macOS : la branche Windows est encore expérimentale et je ne la conseille pas.
  • Les Xcode Command Line Tools, les outils de développement d'Apple, qui servent à construire la fenêtre. Si vous ne les avez pas : tapez xcode-select --install dans le Terminal.
  • Ce que votre projet utilise déjà pour démarrer, installé et fonctionnel : par exemple Node et ses dépendances (npm install déjà fait). app-it n'installe rien à votre place.
  • Claude Code, ouvert dans le dossier du projet.

Le test le plus simple : si aujourd'hui vous lancez le projet à la main depuis le terminal et qu'il marche, vous êtes prêt. S'il ne démarre pas à la main, app-it ne le réparera pas : réglez d'abord ça.

2. Ajoutez-le à Claude Code

app-it est un plugin, c'est-à-dire un paquet d'instructions et de scripts pour Claude Code. Il n'est pas dans le marketplace officiel d'Anthropic mais dans celui du projet, sur GitHub : vous ajoutez d'abord celui-ci, puis vous installez le plugin. Dans une session de Claude Code :

  1. Tapez /plugin marketplace add Christian-Katzmann/app-it. Vous ajoutez le catalogue du projet (le dépôt est github.com/Christian-Katzmann/app-it).
  2. Tapez /plugin install app-it@app-it. Il n'installe pas tout de suite : il ouvre la fiche du plugin avec ce qu'il ajoute. Lisez-la, puis choisissez où l'installer (pour vous, dans tous les projets, c'est très bien).
  3. Si Claude Code vous le demande, tapez /reload-plugins. Depuis le terminal, les mêmes étapes sont claude plugin marketplace add et claude plugin install.

Ça vaut pour tout plugin tiers : lisez ce que vous installez, parce qu'il peut exécuter des scripts sur votre ordinateur. Le code d'app-it est public, et le projet dit qu'il n'envoie rien en ligne et ne collecte aucune donnée.

3. Lancez /app-it sur le projet

Ouvrez Claude Code dans le dossier du projet et tapez /app-it (le nom complet est /app-it:app-it). Il regarde le projet, choisit comment construire l'app, la construit, l'installe et la teste. Moi, je lui écris comme ça :

Le message
/app-it
Transforme ce projet en app Mac avec sa propre icône.
Ne touche pas à la logique de l'app.
À la fin, explique-moi le rapport avec des mots simples : quel type de projet tu as trouvé, sur quel port il tourne, quelle icône tu as utilisée, quels fichiers tu as ajoutés et comment tout enlever.
Dis-moi aussi ce que je dois vérifier moi-même à la main.

La dernière ligne compte : Claude vérifie tout seul que le serveur répond et que ⌘Q l'arrête, mais la fenêtre et l'icône du Dock, c'est vous qui les regardez.

Ce qu'il ajoute à votre projet

  • Un dossier scripts/ avec les scripts pour construire, installer et quitter l'app, et le fichier scripts/app-it.config.json avec le nom, le port et la commande de démarrage.
  • Une icône dans assets/, celle qu'il trouve dans le projet ou une provisoire générée sur votre Mac.
  • Dans le package.json, les commandes desktop:build, desktop:install, desktop:quit, desktop:doctor et desktop:verify.
  • docs/desktop-launcher.md, les instructions courtes, et docs/desktop-launcher.app-it-report.md, le rapport avec chaque modification.

4. Utilisez-la tous les jours

  • Premier lancement : si macOS ne l'ouvre pas, clic droit sur l'icône, Ouvrir, et confirmez. Le premier lancement est plus lent, parce que le serveur doit démarrer de zéro.
  • Fermer la fenêtre avec ⌘W ou le bouton rouge n'arrête pas le serveur : il reste allumé, pour que la prochaine fois elle se rouvre tout de suite. Pour tout arrêter et libérer le port, il faut ⌘Q, ou Quitter dans le menu de l'icône dans le Dock.
  • Si le port préféré est occupé, l'app en prend en général un libre un peu plus haut et l'écrit dans le fichier ~/Library/Application Support/app-it/<nom-app>/server.port.
  • L'app fait tourner le serveur depuis le dossier du projet, et elle se souvient de son emplacement. Si vous le déplacez ou le supprimez, l'app ne marche plus : remettez-le où il était, ou relancez /app-it au nouvel endroit.

Une astuce : faites glisser le dossier ~/Applications/App It/ sur la droite du Dock. Il devient une pile, et chaque app que vous créez ensuite y apparaît toute seule. Pour un contrôle, ou pour changer l'icône :

Le message
Vérifie l'app que tu as créée avec app-it.
Lance npm run desktop:doctor et dis-moi avec des mots simples : sur quel port le serveur tourne vraiment, si l'icône installée est la bonne et s'il y a quelque chose à corriger.
Ensuite, utilise cette image comme icône : [chemin de l'image], reconstruis et réinstalle l'app.
Ne touche pas au code de l'app.

5. Quand l'app est terminée : app-it-static

app-it garde le serveur de développement allumé : pratique tant que vous travaillez dessus, mais ça pèse sur la mémoire du Mac. Pour un outil terminé, il existe un petit frère plus léger dans le même marketplace, app-it-static : il construit l'app une fois (le build, la version finale des fichiers) et sert ça. Même fenêtre, même pile dans le Dock.

Il s'installe avec /plugin install app-it-static@app-it et se lance avec /app-it-static. La limite à connaître : il montre un instantané du build. Si vous modifiez ensuite le code, l'app ne le voit pas tant que vous n'avez pas lancé npm run desktop:rebuild.

Le message
/app-it-static
Ce projet est terminé : je veux une app Mac légère qui serve le build, sans serveur de développement.
Avant de commencer, dis-moi quelle commande de build tu vas utiliser et dans quel dossier atterrit le résultat, et attends mon feu vert.

En plus : une app déjà en ligne, comme un Artifact de Claude

app-it peut aussi mettre une adresse web dans une fenêtre du Dock, comme un Artifact de Claude publié. La fenêtre charge le lien, vous vous connectez avec votre compte et l'usage reste sur votre forfait. Donnez à Claude le lien publié, pas le code copié.

6. Comment revenir en arrière

Tout ce qu'app-it ajoute peut être enlevé, et le rapport dit quoi. Laissez Claude le faire à partir de là, en regardant d'abord la liste.

Le message
Je veux enlever app-it de ce projet.
Lis docs/desktop-launcher.app-it-report.md et montre-moi la liste des fichiers, dossiers et lignes du package.json qu'app-it a ajoutés, plus l'app installée dans ~/Applications/App It/.
Arrête d'abord l'app avec npm run desktop:quit.
Ne supprime rien avant mon feu vert, et ne touche pas au code de l'app.

Les erreurs les plus courantes

  • Lancer /app-it sur un projet qui ne démarre pas à la main. Si la fenêtre affiche une erreur du serveur, c'est en général le projet : réparez-le depuis le terminal, puis reconstruisez l'app.
  • Fermer avec le bouton rouge et croire avoir tout arrêté. Le serveur reste allumé : pour l'arrêter, il faut ⌘Q.
  • Déplacer ou renommer le dossier du projet après avoir créé l'app. L'app le cherche là où il était.
  • Envoyer le fichier .app à un ami comme si c'était une vraie app. Elle n'est signée que pour votre Mac, elle n'est pas notarisée par Apple, et sans le dossier du projet et son serveur, elle ne marche pas.

Check-list

  • Le projet démarre à la main depuis le terminal
  • Les Xcode Command Line Tools sont installés (xcode-select --install)
  • J'ai lu la fiche du plugin app-it avant de l'installer
  • Claude m'a expliqué le rapport d'app-it et ce qu'il faut vérifier à la main
  • La fenêtre affiche mon app et son icône est dans le Dock
  • ⌘Q arrête le serveur et libère le port
  • Le dossier ~/Applications/App It/ est dans le Dock

Questions fréquentes

Est-ce une vraie app, comme celles de l'App Store ?

C'est un vrai fichier .app, mais c'est une coque autour de votre projet : c'est votre serveur qui tourne dedans. Elle n'est signée qu'en local, elle n'est pas notarisée, elle ne va pas sur l'App Store et ne se met pas à jour toute seule. Elle est faite pour vous, sur votre Mac.

Est-ce qu'il modifie le code de mon app ?

Non : la règle du projet, c'est seulement d'ajouter. La seule exception prévue, c'est un port écrit en dur dans la configuration : il peut alors le rendre réglable, et il l'écrit dans le rapport.

Après une mise à jour de macOS, l'icône est barrée et l'app ne s'ouvre pas. Que faire ?

Reconstruisez-la : npm run desktop:build puis npm run desktop:install, ou demandez-le à Claude. C'est la première solution qu'indique le projet : la signature locale peut ne pas survivre à une grosse mise à jour, ou à iCloud si le projet est dans un Bureau ou des Documents synchronisés.

← Tous les guides