X (Twitter)

Connectez Claude Code, Codex, Gemini CLI et d'autres clients MCP pour créer et modifier des projets de captures avec l'IA, les vérifier avec le navigateur et les exporter dans l'éditeur web.

Connecter un outil d'IA

Quand MCP est activé sur ce déploiement d'AppScreenshots, connectez un outil compatible à :

https://appscreenshots.net/api/mcp

Choisissez HTTP/Streamable HTTP et OAuth. Connectez-vous à votre compte AppScreenshots dans le navigateur, sélectionnez les projets et ressources que l'outil peut utiliser, et décidez s'il peut créer des projets. Aucun accès à la base de données ni clé d'API n'est requis.

Pour une vue d'ensemble avec des prompts d'exemple, consultez la page MCP.

Connectez votre client

Les commandes ci-dessous enregistrent le point de terminaison auprès de chaque client. Une fois connecté, terminez la connexion dans le navigateur quand le client la présente.

claude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

Exécutez ensuite /mcp dans Claude Code et autorisez. Pour une connexion limitée à un projet, fusionnez un fichier .mcp.json plutôt que d'enregistrer un périmètre utilisateur ; ne configurez pas les deux sans vouloir écraser le périmètre.

codex mcp add appscreenshots --url https://appscreenshots.net/api/mcp
codex mcp login appscreenshots

Vous pouvez aussi fusionner une section [mcp_servers.appscreenshots] avec url = "..." dans le config.toml du client.

gemini mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

Dans Gemini CLI, exécutez /mcp auth appscreenshots. La variante par fichier de réglages utilise httpUrl pour Streamable HTTP avec "oauth": {"enabled": true}.

Ouvrez /mcp-config, ajoutez un serveur HTTP avec le point de terminaison, puis utilisez /mcp-config login appscreenshots. Le fichier de configuration est ~/.kimi-code/mcp.json :

{
  "mcpServers": {
    "appscreenshots": {
      "url": "https://appscreenshots.net/api/mcp"
    }
  }
}

Redémarrez la session après avoir ajouté la configuration. Les anciennes distributions kimi-cli utilisent kimi mcp add --transport http --auth oauth.

Fusionnez le serveur dans ~/.zcode/cli/config.json sous mcp.servers, ou ajoutez le service HTTP nommé appscreenshots dans Settings → MCP :

{
  "mcp": {
    "servers": {
      "appscreenshots": {
        "type": "http",
        "url": "https://appscreenshots.net/api/mcp",
        "oauth": {
          "type": "authorization_code",
          "scope": "projects:read projects:write assets:read offline_access"
        }
      }
    }
  }
}

Redémarrez la session et terminez la connexion OAuth dans le navigateur quand le client la présente. Faites vite : le client bureautique annule une autorisation en attente au bout d'environ 180 secondes.

Utilisez l'entrée de connexion MCP personnalisée disponible sur votre compte ou espace de travail et choisissez OAuth avec le point de terminaison ci-dessus. La disponibilité dépend des réglages du compte et de l'espace — un dépôt GitHub public ne crée pas d'entrée dans l'annuaire ChatGPT.

L'intégration des clients s'appuie sur les références officielles et un test de bout en bout au niveau protocole achevé (OAuth, création de projet, modification, aperçu web, export). Les certifications client par client sont en cours ; consultez la matrice de vérification du kit de connexion pour l'état actuel.

Kit de connexion

Le dépôt public appscreenshots-mcp fournit des fichiers de configuration prêts pour tous les clients ci-dessus, un Skill d'agent facultatif qui enseigne le flux de captures, et une commande doctor qui vérifie le serveur depuis votre terminal :

git clone https://github.com/horace68/appscreenshots-mcp.git
node bin/appscreenshots.mjs config claude    # affiche un extrait de configuration
node bin/appscreenshots.mjs install-skill claude
node bin/appscreenshots.mjs doctor

L'assistant se contente d'afficher la configuration et d'installer le Skill. Ce n'est pas un serveur stdio local — utilisez la connexion distante native de votre client.

Outils

Les neuf outils ci-dessous sont exposés en Streamable HTTP. Les clients peuvent préfixer les noms. Le serveur hébergé fait foi pour les schémas d'entrée et les autorisations du compte.

Outil	Type	Rôle
`get_capabilities`	Lecture	Droits, limites de design (100–5000 px), appareils, types d'élément, `maxFrames` (20), `maxElementsPerFrame` (100), modes d'aperçu/export
`search_templates`	Lecture	Recherche les métadonnées des gabarits publics (`query`, `offset`)
`get_template`	Lecture	Lit un gabarit autorisé par id
`list_projects`	Lecture	Liste les projets autorisés, 25 par page
`get_project`	Lecture	Lit la révision actuelle et la conception modifiable, avec l'`editorUrl`
`get_project_preview`	Lecture	Lien de l'éditeur, révision, images et instructions de vérification navigateur — du texte, pas une image
`list_assets`	Lecture	Liste les ressources partagées et celles des projets autorisés, 50 par page
`create_project`	Écriture	Crée depuis un gabarit ou un canevas vierge (`name`, `templateId` facultatif, `width`, `height`, `idempotencyKey`)
`update_project`	Écriture	Applique 1–100 opérations structurées par appel avec `expectedRevision` et `idempotencyKey`

Opérations de modification

update_project accepte une liste discriminée d'opérations :

set_name — renomme le projet
add_frame / remove_frame / reorder_frames — gère les images
upsert_element — insère ou remplace un élément ; exige la géométrie complète et conserve les champs omis du même type
patch_element — modification partielle par id d'élément ; changer le type est interdit
remove_element — supprime un élément
set_background — définit l'arrière-plan d'une image ; les arrière-plans partagés sont figés par image
set_locales — définit 1–20 langues et la langue par défaut
set_canvas — taille du canevas (100–5000) et mode (separate ou continuous)

Les éléments portent la typographie, les champs de maquettes d'appareils, les références assetId d'image, les formes, les icônes, rotation et stackOrder. Les images sont référencées par assetId autorisé — jamais par URL ni chemin local, et les références existantes sont conservées côté serveur : ne les renvoyez pas.

Chaque écriture logique doit utiliser une clé d'idempotence neuve ; ne la réutilisez que pour une tentative identique. Après un conflit de révision, relisez la dernière version puis reprenez. N'utilisez jamais SQL, HTML ou scripts comme instructions de modification.

Erreurs

Les erreurs renvoient un corps JSON {code, message} avec isError: true :

Code	Signification
`REVISION_CONFLICT`	Le projet a changé depuis `expectedRevision` — relire et réessayer
`ASSET_NOT_AUTHORIZED`	La ressource n'a pas été sélectionnée sur la page de consentement
`FRAME_NOT_FOUND` / `ELEMENT_NOT_FOUND`	L'image ou l'élément référencé n'existe pas
`ELEMENT_TYPE_CHANGE_NOT_ALLOWED`	`patch_element` ne peut pas changer le type d'un élément
`INVALID_FRAME_ORDER` / `INVALID_DEFAULT_LOCALE`	Ordre des images ou langue par défaut invalide
`DUPLICATE_ID`	Un id entre en conflit avec un existant
`PROJECT_SIZE_LIMIT`	Limite d'images, d'éléments ou de charge dépassée
`RATE_LIMITED`	Trop d'appels — HTTP 429 avec `Retry-After`

Autorisation et limites

Le serveur utilise OAuth 2.1 avec PKCE et connexion dans le navigateur :

Étendues : projects:read, projects:write (seulement si vous autorisez la création ou la modification), assets:read et offline_access.
Les jetons d'accès durent une heure et les jetons de rafraîchissement, 30 jours.
Les jetons d'accès exigent une autorisation vivante : révoquer la connexion invalide immédiatement les jetons existants.
Limites de débit : 60 appels MCP par minute en offre gratuite, 120 par minute en offres payantes. Le dépassement renvoie HTTP 429 avec Retry-After: 60.
Les corps de requête sont limités à 2 Mo ; les projets à 20 images et 100 éléments par image.

Les droits de votre offre s'appliquent comme d'habitude : les restrictions de projets, gabarits payants, polices personnalisées et export par lots sont inchangés, et il n'y a aucun frais d'IA hébergée — le design et les textes viennent de l'IA connectée.

Commencez avec vos captures

Importez les captures originales dans l'éditeur web. Autorisez ensuite ce projet ou sélectionnez des ressources individuelles sur la page de consentement. MCP n'expose pas d'outil d'envoi binaire ; un fichier joint à une conversation n'est pas accessible automatiquement à ce service.

Essayez ce prompt :

Crée un projet de captures App Store en anglais à partir d'un gabarit disponible en utilisant mes ressources autorisées. Utilise des titres courts et une mise en page épurée. Ouvre l'éditeur avec les outils navigateur disponibles, inspecte les captures, corrige les problèmes visuels, puis donne-moi le lien du projet pour l'export sur le site.

L'IA connectée fournit le design et les textes ; MCP enregistre des projets modifiables. get_project_preview renvoie le lien de l'éditeur et des instructions de vérification, pas des octets d'image. Un agent doté d'outils navigateur peut ouvrir l'éditeur, inspecter les captures, corriger le design via MCP puis recharger en sécurité pour vérifier la dernière version. La connexion navigateur est indépendante de l'OAuth MCP, et les modifications non enregistrées doivent être préservées avant rechargement. L'aperçu et l'export se font dans l'éditeur web.

Gérer les accès

Ouvrez Settings → Connected AI tools pour modifier les projets/ressources sélectionnés ou révoquer une connexion. L'outil ne peut pas accéder aux projets non sélectionnés. Si le site et un outil d'IA modifient le même projet en même temps, rechargez la dernière version avant d'enregistrer des changements conflictuels.

La vérification navigateur ne nécessite ni Browserless ni file de rendu en arrière-plan. Ce MCP expose des outils de projet et des consignes de vérification navigateur, pas du rendu cloud. Sans outils navigateur/image, l'agent doit renvoyer le lien de l'éditeur et signaler que la vérification visuelle est en attente, au lieu de prétendre l'avoir faite.

Dépannage

Symptôme	Solution
`invalid_redirect_uri: web clients require https redirect URIs`	Utilisez une redirection en boucle locale (`http://127.0.0.1:<port>/callback` ou `http://localhost:<port>/callback`) et laissez les enregistrements loopback suivre le client natif par défaut
401 avec `WWW-Authenticate: Bearer resource_metadata=…`	Réponse de découverte normale aux appels non authentifiés — terminez le flux OAuth dans votre client
L'autorisation expire sans cesse	Reconnectez-vous depuis le client ; une autorisation révoquée ou expirée invalide les jetons de rafraîchissement
Le client annule la connexion navigateur	Terminez-la rapidement (certains clients annulent après ~180 secondes) puis relancez la connexion
Réponses 429 `RATE_LIMITED`	Attendez `Retry-After` (60 s) avant de réessayer ; passez à une offre payante pour 120 appels/min

Pour les notes propres à chaque client et la matrice de vérification actuelle, consultez le guide de dépannage du kit de connexion.

Connecter un outil d'IA

Quand MCP est activé sur ce déploiement d'AppScreenshots, connectez un outil compatible à :

https://appscreenshots.net/api/mcp

Pour une vue d'ensemble avec des prompts d'exemple, consultez la page MCP.

Connectez votre client

Les commandes ci-dessous enregistrent le point de terminaison auprès de chaque client. Une fois connecté, terminez la connexion dans le navigateur quand le client la présente.

claude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

codex mcp add appscreenshots --url https://appscreenshots.net/api/mcp
codex mcp login appscreenshots

Vous pouvez aussi fusionner une section [mcp_servers.appscreenshots] avec url = "..." dans le config.toml du client.

gemini mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

Dans Gemini CLI, exécutez /mcp auth appscreenshots. La variante par fichier de réglages utilise httpUrl pour Streamable HTTP avec "oauth": {"enabled": true}.

Ouvrez /mcp-config, ajoutez un serveur HTTP avec le point de terminaison, puis utilisez /mcp-config login appscreenshots. Le fichier de configuration est ~/.kimi-code/mcp.json :

{
  "mcpServers": {
    "appscreenshots": {
      "url": "https://appscreenshots.net/api/mcp"
    }
  }
}

Redémarrez la session après avoir ajouté la configuration. Les anciennes distributions kimi-cli utilisent kimi mcp add --transport http --auth oauth.

Fusionnez le serveur dans ~/.zcode/cli/config.json sous mcp.servers, ou ajoutez le service HTTP nommé appscreenshots dans Settings → MCP :

{
  "mcp": {
    "servers": {
      "appscreenshots": {
        "type": "http",
        "url": "https://appscreenshots.net/api/mcp",
        "oauth": {
          "type": "authorization_code",
          "scope": "projects:read projects:write assets:read offline_access"
        }
      }
    }
  }
}

Kit de connexion

git clone https://github.com/horace68/appscreenshots-mcp.git
node bin/appscreenshots.mjs config claude    # affiche un extrait de configuration
node bin/appscreenshots.mjs install-skill claude
node bin/appscreenshots.mjs doctor

L'assistant se contente d'afficher la configuration et d'installer le Skill. Ce n'est pas un serveur stdio local — utilisez la connexion distante native de votre client.

Outils

Les neuf outils ci-dessous sont exposés en Streamable HTTP. Les clients peuvent préfixer les noms. Le serveur hébergé fait foi pour les schémas d'entrée et les autorisations du compte.

Outil	Type	Rôle
`get_capabilities`	Lecture	Droits, limites de design (100–5000 px), appareils, types d'élément, `maxFrames` (20), `maxElementsPerFrame` (100), modes d'aperçu/export
`search_templates`	Lecture	Recherche les métadonnées des gabarits publics (`query`, `offset`)
`get_template`	Lecture	Lit un gabarit autorisé par id
`list_projects`	Lecture	Liste les projets autorisés, 25 par page
`get_project`	Lecture	Lit la révision actuelle et la conception modifiable, avec l'`editorUrl`
`get_project_preview`	Lecture	Lien de l'éditeur, révision, images et instructions de vérification navigateur — du texte, pas une image
`list_assets`	Lecture	Liste les ressources partagées et celles des projets autorisés, 50 par page
`create_project`	Écriture	Crée depuis un gabarit ou un canevas vierge (`name`, `templateId` facultatif, `width`, `height`, `idempotencyKey`)
`update_project`	Écriture	Applique 1–100 opérations structurées par appel avec `expectedRevision` et `idempotencyKey`

Opérations de modification

update_project accepte une liste discriminée d'opérations :

set_name — renomme le projet
add_frame / remove_frame / reorder_frames — gère les images
upsert_element — insère ou remplace un élément ; exige la géométrie complète et conserve les champs omis du même type
patch_element — modification partielle par id d'élément ; changer le type est interdit
remove_element — supprime un élément
set_background — définit l'arrière-plan d'une image ; les arrière-plans partagés sont figés par image
set_locales — définit 1–20 langues et la langue par défaut
set_canvas — taille du canevas (100–5000) et mode (separate ou continuous)

Erreurs

Les erreurs renvoient un corps JSON {code, message} avec isError: true :

Code	Signification
`REVISION_CONFLICT`	Le projet a changé depuis `expectedRevision` — relire et réessayer
`ASSET_NOT_AUTHORIZED`	La ressource n'a pas été sélectionnée sur la page de consentement
`FRAME_NOT_FOUND` / `ELEMENT_NOT_FOUND`	L'image ou l'élément référencé n'existe pas
`ELEMENT_TYPE_CHANGE_NOT_ALLOWED`	`patch_element` ne peut pas changer le type d'un élément
`INVALID_FRAME_ORDER` / `INVALID_DEFAULT_LOCALE`	Ordre des images ou langue par défaut invalide
`DUPLICATE_ID`	Un id entre en conflit avec un existant
`PROJECT_SIZE_LIMIT`	Limite d'images, d'éléments ou de charge dépassée
`RATE_LIMITED`	Trop d'appels — HTTP 429 avec `Retry-After`

Autorisation et limites

Le serveur utilise OAuth 2.1 avec PKCE et connexion dans le navigateur :

Étendues : projects:read, projects:write (seulement si vous autorisez la création ou la modification), assets:read et offline_access.
Les jetons d'accès durent une heure et les jetons de rafraîchissement, 30 jours.
Les jetons d'accès exigent une autorisation vivante : révoquer la connexion invalide immédiatement les jetons existants.
Limites de débit : 60 appels MCP par minute en offre gratuite, 120 par minute en offres payantes. Le dépassement renvoie HTTP 429 avec Retry-After: 60.
Les corps de requête sont limités à 2 Mo ; les projets à 20 images et 100 éléments par image.

Symptôme	Solution
`invalid_redirect_uri: web clients require https redirect URIs`	Utilisez une redirection en boucle locale (`http://127.0.0.1:<port>/callback` ou `http://localhost:<port>/callback`) et laissez les enregistrements loopback suivre le client natif par défaut
401 avec `WWW-Authenticate: Bearer resource_metadata=…`	Réponse de découverte normale aux appels non authentifiés — terminez le flux OAuth dans votre client
L'autorisation expire sans cesse	Reconnectez-vous depuis le client ; une autorisation révoquée ou expirée invalide les jetons de rafraîchissement
Le client annule la connexion navigateur	Terminez-la rapidement (certains clients annulent après ~180 secondes) puis relancez la connexion
Réponses 429 `RATE_LIMITED`	Attendez `Retry-After` (60 s) avant de réessayer ; passez à une offre payante pour 120 appels/min

Pour les notes propres à chaque client et la matrice de vérification actuelle, consultez le guide de dépannage du kit de connexion.

Connecter un outil d'IA

Connecter un outil d'IA

Connectez votre client

Kit de connexion

Outils

Opérations de modification

Erreurs

Autorisation et limites

Commencez avec vos captures

Gérer les accès

Dépannage

Table des matières

Connecter un outil d'IA

Connecter un outil d'IA

Connectez votre client

Kit de connexion

Outils

Opérations de modification

Erreurs

Autorisation et limites

Commencez avec vos captures

Gérer les accès

Dépannage

Table des matières