# Connecteur Gradiently pour Claude : créer avec MCP dans Claude

[Canonical HTML page](https://gradiently.design/fr/guide/design-with-claude-connector)

Claude peut chercher des Marks, lire votre marque et construire de vrais designs modifiables dans votre espace de travail. Il y a deux façons d’y accéder, un connecteur avec connexion ou une clé à portée limitée, et cette page couvre les deux.

## The short version

- Gradiently héberge un serveur MCP pour Claude à l’adresse https://gradiently.design/api/mcp.
- Dans l’app Claude, Gradiently s’ajoute comme connecteur personnalisé avec une connexion OAuth ; dans Claude Code, il s’ajoute avec une clé API à portée limitée créée dans Paramètres › API et agents.
- Une nouvelle clé API démarre avec les autorisations dont chaque outil de design a besoin, et Réserver des Marks reste désactivé sauf si vous le choisissez.
- Quand Claude compose un design avec les outils de Gradiently, il ne dépense aucun crédit IA Gradiently, et chaque design enregistré s’ouvre dans le Studio.
- Une clé ne fonctionne jamais que dans l’espace de travail qui l’a émise, agit au nom du propriétaire ou de l’administrateur qui l’a créée, et peut être révoquée instantanément.

Pour configurer le connecteur **Gradiently Claude**, pointez Claude vers le serveur MCP hébergé de Gradiently à l’adresse `https://gradiently.design/api/mcp`. Dans l’app Claude, ajoutez-le comme connecteur personnalisé et connectez-vous à Gradiently. Dans Claude Code, ajoutez-le depuis le terminal avec une clé API à portée limitée. Dans les deux cas, Claude peut ensuite chercher des Marks, lire votre kit de marque et créer des designs enregistrés dans votre espace de travail, qui s’ouvrent dans le Studio avec chaque mot encore modifiable.

MCP, le Model Context Protocol, est le standard ouvert qui permet à Claude d’utiliser de vrais outils. [Qu’est-ce que MCP](https://gradiently.design/fr/guide/what-is-mcp) l’explique simplement, et le protocole lui-même est documenté sur [modelcontextprotocol.io](https://modelcontextprotocol.io).

## Quelle façon de connecter Claude

| Où vous utilisez Claude | Mode de connexion | Authentification |
| --- | --- | --- |
| L’app Claude, sur le web ou sur ordinateur | Connecteur personnalisé | OAuth : connexion à Gradiently, choix d’un espace de travail |
| Claude Code dans votre terminal | Serveur MCP distant en HTTP | Une clé API à portée limitée dans l’en-tête Authorization |
| Autres clients MCP | Serveur distant avec un en-tête personnalisé | Une clé API à portée limitée |

Même serveur, mêmes outils, mêmes autorisations. Seule change la façon dont Claude prouve qui il est.

Quelle que soit la voie choisie, vous devez être **propriétaire ou administrateur** de l’espace de travail Gradiently. Les éditeurs et lecteurs ne peuvent ni connecter d’assistants ni créer de clés.

## Connecter l’app Claude avec un connecteur personnalisé

1. **Ouvrez les réglages des connecteurs de Claude** Ajoutez un connecteur personnalisé. Les offres Claude qui autorisent les connecteurs personnalisés relèvent d’Anthropic : consultez l’aide de Claude si l’option n’apparaît pas. [Les connecteurs Claude](https://gradiently.design/fr/guide/claude-connectors) explique la fonction.
2. **Collez l’adresse du serveur** Nommez-le Gradiently et utilisez `https://gradiently.design/api/mcp`. Choisissez la connexion OAuth.
3. **Connectez-vous et choisissez un espace de travail** Dans la fenêtre Gradiently, choisissez l’espace de travail dans lequel Claude doit travailler et lisez les autorisations sous **Autoriser cet assistant à**.
4. **Autorisez, puis vérifiez** Choisissez **Autoriser la connexion**. De retour dans Claude, demandez-lui de lister ses outils Gradiently pour confirmer.

L’accès se renouvelle automatiquement pendant 30 jours au plus, puis vous vous reconnectez. Un connecteur personnalisé est utilisable tout de suite ; une fiche dans l’annuaire public de Claude est une autre affaire et demande un examen par Anthropic.

## Connecter Claude Code avec une clé API à portée limitée

Claude Code utilise une clé plutôt qu’une connexion. Créez-en une dans Gradiently sous **Paramètres › API et agents** : choisissez l’espace de travail, nommez-la d’après l’endroit où elle sera utilisée (*Claude Code, portable*), cochez ce qu’elle peut faire et sélectionnez **Créer la clé**. La clé ne s’affiche qu’une fois : copiez-la tout de suite dans votre gestionnaire de mots de passe.

```bash
export GRADIENTLY_API_KEY="gr_live_…"

claude mcp add --transport http gradiently https://gradiently.design/api/mcp \
  --header "Authorization: Bearer $GRADIENTLY_API_KEY"
```

Gardez la clé dans une variable d’environnement pour qu’elle n’atterrisse jamais dans l’historique de votre shell ni dans un fichier versionné. Ouvrez une nouvelle session et demandez à Claude de lister les outils Gradiently.

Les autres clients qui lisent un fichier JSON acceptent en général le même serveur et le même en-tête. Les Paramètres proposent un extrait prêt à l’emploi sous **Connecter un client MCP**.

```json
{
  "mcpServers": {
    "gradiently": {
      "url": "https://gradiently.design/api/mcp",
      "headers": { "Authorization": "Bearer gr_live_…" }
    }
  }
}
```

La structure JSON acceptée par de nombreux clients MCP. Vérifiez le format exact dans la documentation de votre client.

## Choisir les autorisations de la clé

Chaque autorisation est une portée. Une nouvelle clé démarre avec cinq portées qui couvrent tous les outils de design, si bien que la plupart des gens ne changent rien. N’ajoutez les autres que lorsque Claude en a vraiment besoin.

| Autorisation dans les Paramètres | Activée par défaut | Ce qu’elle permet |
| --- | --- | --- |
| Lire les créations | Oui | Lire les marques, designs et fichiers importés, et faire le rendu des designs |
| Créer et modifier des créations | Oui | Créer, modifier et redimensionner des designs, importer des images, lancer le Designer |
| Rechercher des Marks | Oui | Chercher dans le Marché et lire tout Mark public |
| Lire l’espace de travail | Oui | Lire l’espace de travail et ses membres |
| Générer des marques | Oui | Générer des pistes de marque à partir d’un nom et d’une description |
| Modifier les marques | Non | Changer le profil et le Mark d’une marque, créer des marques |
| Réserver des Marks | Non | Réserver un Mark disponible pour le créateur de la clé |
| Inviter des membres | Non | Envoyer des invitations à rejoindre l’espace de travail |

N’accordez que ce dont la tâche a besoin. Les portées d’une clé ne peuvent pas être modifiées ensuite : créez une nouvelle clé si la tâche change.

## Ce que Claude peut faire une fois connecté

Claude passe par les mêmes actions que vous dans le produit. Il peut chercher dans le Marché par nom, mots de couleur ou code ; lire le profil, le ton et les polices de votre marque ; dessiner un design original, regarder l’image rendue et l’affiner ; remplir l’un des modèles de Gradiently ; changer le texte d’un design enregistré ; faire des copies redimensionnées ; et exporter un design en PNG ou en PDF. Quand Claude compose le design lui-même, Gradiently ne facture **aucun crédit IA**. Si vous lui demandez de confier le travail au Designer de Gradiently, cela consomme des crédits comme dans le Studio.

Claude Code rend un certain type de travail très simple. Disons que vous tenez un blog et voulez une image de lien pour chaque article. Demandez : *« Pour chaque article dans /content, crée un aperçu de lien en 1200×630 à notre marque avec le titre de l’article, puis exporte chacun en PNG dans /public/og. »* Claude crée chaque image dans Gradiently, la vérifie et écrit les fichiers là où votre site les attend. [La taille des images Open Graph](https://gradiently.design/fr/guide/open-graph-image-size) explique pourquoi 1200×630.

Une large image d’aperçu de lien de blog avec le titre d’un article d’ingénierie sur un fond en dégradé

Un aperçu de lien en 1200×630 conçu via le serveur MCP de Gradiently et exporté directement dans le dossier d’un site.

> **Autorisez les appels d’outils longs** La plupart des outils répondent en quelques secondes, mais le rendu et l’examen d’un design peuvent prendre jusqu’à trois minutes, et un travail confié au Designer jusqu’à environ cinq. Si votre client a un réglage de délai pour les outils, augmentez-le.

## Des prompts qui fonctionnent bien avec Claude

- *« Lis le profil de notre marque, puis crée un post LinkedIn et un post X annonçant notre nouveau bureau à Bristol. »*
- *« Trouve trois Marks sombres en matière soie proches du sarcelle profond et donne-moi leurs codes. »*
- *« Reprends l’annonce d’hier et fais-en une story et une miniature YouTube. »*
- *« Change la date de l’affiche de l’événement pour le 14 novembre et exporte-la en PDF. »*

Plus votre kit de marque est complet, moins vous avez à préciser dans chaque demande ; [le ton de marque pour l’IA](https://gradiently.design/fr/guide/brand-kit-voice) montre quoi remplir. Pour d’autres idées orientées réseaux sociaux, voyez [Claude pour les réseaux sociaux](https://gradiently.design/fr/guide/claude-social-media-posts), et pour la vue d’ensemble, [le design avec Claude](https://gradiently.design/fr/guide/design-with-claude).

## Garder la connexion sûre

### Une clé peut

- Fonctionner dans le seul espace de travail qui l’a émise
- Faire ce que permettent le rôle de son créateur et ses portées
- Créer des designs qui appartiennent à l’espace de travail
- Indiquer dans les Paramètres quand elle a servi pour la dernière fois

### Une clé ne peut jamais

- Atteindre un autre espace de travail, même si vous en êtes membre
- Payer quoi que ce soit ni accéder à la facturation
- Transférer, mettre en vente ou libérer un Mark
- Créer ou gérer d’autres clés

Si une clé fuite ou que vous ne l’utilisez plus, sélectionnez **Révoquer** à côté d’elle dans **Paramètres › API et agents** et elle cesse de fonctionner aussitôt. Les clés s’arrêtent aussi quand leur créateur quitte l’espace de travail ou perd son rôle d’administrateur. Vous utilisez aussi ChatGPT ? [Gradiently dans ChatGPT](https://gradiently.design/fr/guide/design-with-chatgpt-app) a sa propre configuration, et la référence complète des outils se trouve dans la [documentation développeurs](https://gradiently.design/fr/developers/mcp).

## FAQ

### Quelle est l’adresse du serveur MCP de Gradiently pour Claude ?

`https://gradiently.design/api/mcp`. Dans l’app Claude, utilisez-la comme connecteur personnalisé avec OAuth ; dans Claude Code, ajoutez-la avec votre clé API dans l’en-tête Authorization.

### Faut-il une clé API pour utiliser Gradiently dans Claude ?

Pas dans l’app Claude, qui se connecte avec OAuth. Claude Code et la plupart des autres clients MCP ont besoin d’une clé à portée limitée créée dans Paramètres › API et agents.

### Claude dépense-t-il mes crédits IA Gradiently ?

Pas quand il compose lui-même les designs avec les outils de Gradiently. Confier un travail au Designer de Gradiently consomme des crédits.

### Claude peut-il réserver un Mark pour moi ?

Seulement avec une clé qui a l’autorisation Réserver des Marks, désactivée par défaut. Toute réservation qui demande un paiement doit quand même être finalisée dans Gradiently.

### Pourquoi Claude dit-il qu’il ne peut pas s’authentifier ?

La clé a été mal saisie ou révoquée, ou son créateur n’est plus propriétaire ou administrateur de l’espace de travail. Créez une nouvelle clé et mettez à jour votre client.