Guide complet Claude Code x SaaS : Notion, Slack, Linear, GitHub, Figma

Vous voyez encore Claude Code comme un simple editeur de code ? Branchez-le sur les SaaS que vous utilisez tous les jours et il se transforme en veritable “orchestrateur metier”. Ecrire une page Notion, poster sur Slack, ouvrir un ticket Linear, creer une PR GitHub, recuperer des valeurs depuis Figma — le tout depuis un seul prompt en langage naturel.

Dans cet article, nous detaillons les cinq patterns d’integration SaaS que nous utilisons reellement pour faire tourner ClaudeCodeLab, code operationnel et etapes de configuration inclus. A la fin, vous aurez votre hub d’automatisation perso.

Les trois architectures d’integration de base

Il existe grosso modo trois facons de connecter Claude Code a un SaaS :

Approche	Cout d’implementation	Flexibilite	Cas ideal
Serveur MCP	Moyen	Haute	Integrations frequentes, reutilisees entre projets
Wrapper CLI	Faible	Moyenne	Scripts ponctuels, integrations simples
Reception de webhook	Eleve	Haute	Integrations bidirectionnelles declenchees cote SaaS

Pour les debutants, le wrapper CLI est la route la plus rapide : on laisse Claude Code frapper une API via l’outil Bash, donc il suffit de placer une cle API dans une variable d’environnement. Une fois a l’aise, la progression naturelle est de transformer le tout en serveur MCP.

1. Integration Notion : produire des pages en serie via l’IA

Cas d’usage

• Deposer directement les comptes rendus de reunion dans Notion
• Generer automatiquement les rapports hebdomadaires
• Laisser l’IA enrichir la base de connaissances interne

Implementation

// scripts/notion-create-page.mjs
import { Client } from "@notionhq/client";

const notion = new Client({ auth: process.env.NOTION_TOKEN });

async function createPage(databaseId, title, markdown) {
  const blocks = markdown.split("\n\n").map((para) => ({
    object: "block",
    type: "paragraph",
    paragraph: {
      rich_text: [{ type: "text", text: { content: para } }],
    },
  }));

  const page = await notion.pages.create({
    parent: { database_id: databaseId },
    properties: {
      Name: { title: [{ text: { content: title } }] },
      Status: { select: { name: "Draft" } },
    },
    children: blocks,
  });

  return page.url;
}

const [, , dbId, title, ...bodyParts] = process.argv;
const url = await createPage(dbId, title, bodyParts.join(" "));
console.log(`Created: ${url}`);

Utilisation depuis Claude Code

claude -p "
Lis le compte rendu ci-dessous et structure-le en trois sections
(decisions / actions / ordre du jour suivant), puis publie dans la
base de donnees de comptes rendus Notion :

$(cat ~/inbox/meeting-raw.txt)

Utilise database_id: abc123...
Apres la publication, envoie l'URL dans slack-channel-general.
"

Claude Code appelle notion-create-page.mjs via l’outil Bash puis relaie l’URL obtenue vers Slack — le tout en un prompt.

2. Integration Slack : automatiser notifications et messages

Cas d’usage

• Notifications de fin de deploiement
• Resume hebdomadaire des erreurs
• Mise en forme de rapports longs en fils de discussion

Implementation (Incoming Webhook, le plus simple)

// scripts/slack-notify.mjs
const webhookUrl = process.env.SLACK_WEBHOOK_URL;
const message = process.argv.slice(2).join(" ");

const res = await fetch(webhookUrl, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    text: message,
    blocks: [
      { type: "section", text: { type: "mrkdwn", text: message } },
    ],
  }),
});

console.log(res.ok ? "✓ Sent" : `✗ ${res.status}`);

Variante Slack Bolt SDK (reponses en thread, DM, etc.)

// scripts/slack-post-thread.mjs
import { WebClient } from "@slack/web-api";

const client = new WebClient(process.env.SLACK_BOT_TOKEN);

async function postThread(channel, parent, replies) {
  const main = await client.chat.postMessage({ channel, text: parent });
  for (const reply of replies) {
    await client.chat.postMessage({
      channel,
      text: reply,
      thread_ts: main.ts,
    });
  }
  return main.ts;
}

const channel = process.argv[2];
const [parent, ...replies] = process.argv.slice(3);
await postThread(channel, parent, replies);

Exemple reel avec Claude Code

claude -p "
Execute scripts/deploy.sh.
En cas de succes, poste 'Deploiement prod termine 🚀' dans #dev
et en reponses de thread :
1. Hash du commit
2. Nombre de fichiers modifies
3. Duree du build
En cas d'echec, envoie une alerte rouge dans #dev-alerts.
"

3. Integration Linear : creation automatique de tickets

Cas d’usage

• Transformer une discussion de bug en ticket
• Creer en masse des tickets a partir d’une revue de conception
• Decomposer les commentaires de code review en taches distinctes

Implementation

// scripts/linear-create-issue.mjs
const LINEAR_API_KEY = process.env.LINEAR_API_KEY;
const LINEAR_TEAM_ID = process.env.LINEAR_TEAM_ID; // ex. "ENG"

async function createIssue(title, description, priority = 2) {
  const query = `
    mutation CreateIssue($input: IssueCreateInput!) {
      issueCreate(input: $input) {
        success
        issue { id identifier url }
      }
    }
  `;
  const res = await fetch("https://api.linear.app/graphql", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: LINEAR_API_KEY,
    },
    body: JSON.stringify({
      query,
      variables: {
        input: {
          teamId: LINEAR_TEAM_ID,
          title,
          description,
          priority, // 0=None, 1=Urgent, 2=High, 3=Medium, 4=Low
        },
      },
    }),
  });
  const json = await res.json();
  return json.data.issueCreate.issue;
}

const [, , title, ...desc] = process.argv;
const issue = await createIssue(title, desc.join(" "), 2);
console.log(`Created: ${issue.identifier} - ${issue.url}`);

Exemple : creation en masse depuis les revues de PR

claude -p "
Lis tous les commentaires de revue de la PR GitHub #234 et, pour
chaque commentaire impliquant un correctif, cree un ticket Linear individuel.

Chaque ticket :
- Titre : synthese courte du commentaire
- Corps : commentaire d'origine + URL de la PR + fichier:ligne
- priority : 1 si 'obligatoire', 3 si 'suggestion'
"

4. Integration GitHub : miser sur la CLI gh

Pour GitHub, la CLI gh est incomparablement plus pratique que l’API brute. Il suffit a Claude Code de la declencher via l’outil Bash.

Principaux patterns

# Creer une PR
gh pr create --title "feat: add cache layer" --body "$(cat desc.md)"

# Ouvrir une issue
gh issue create --title "Bug: user logout fails" --label "bug,priority-high"

# Voir la revue d'une PR
gh pr view 234 --comments

# Verifier l'etat CI
gh run list --workflow deploy.yml --limit 5

# Creer une release
gh release create v1.2.0 --notes "Changelog here"

Exemple : reponse a incident

claude -p "
Les erreurs 500 explosent en production. Deroule les etapes suivantes :

1. Lis la derniere heure de logs/prod-*.log et identifie les patterns d'erreur
2. Repere le commit suspect via git log a partir du stack trace
3. Ouvre une PR qui revert ce commit (gh pr create)
4. Cree un ticket d'incident dans Linear
5. Poste un statut dans #incident-response sur Slack

Objectif : 15 minutes maximum.
"

5. Integration Figma : transformer le design en code

Cas d’usage

• Lire la structure des composants d’un fichier Figma
• Convertir les valeurs Figma (couleurs, marges, tailles) en CSS
• Tests visuels par comparaison de captures

Implementation (API REST Figma)

// scripts/figma-extract.mjs
const FIGMA_TOKEN = process.env.FIGMA_TOKEN;
const fileKey = process.argv[2];
const nodeId = process.argv[3];

const res = await fetch(
  `https://api.figma.com/v1/files/${fileKey}/nodes?ids=${nodeId}`,
  { headers: { "X-Figma-Token": FIGMA_TOKEN } }
);
const data = await res.json();
const node = data.nodes[nodeId].document;

// Extraction des couleurs, typographies et layout
const tokens = {
  colors: extractColors(node),
  typography: extractTypography(node),
  spacing: extractSpacing(node),
};

console.log(JSON.stringify(tokens, null, 2));

function extractColors(node) { /* implementation omise */ }
function extractTypography(node) { /* implementation omise */ }
function extractSpacing(node) { /* implementation omise */ }

Utilisation depuis Claude Code

claude -p "
Lis nodeId=456:789 (le composant card) du fichier Figma abc123
et implemente-le comme composant React components/Card.tsx.

- Aligne-toi sur les tokens Tailwind (choisis les couleurs dans theme.colors)
- Props : children, variant (primary/secondary)
- Genere aussi une story Storybook
- Utilise scripts/figma-extract.mjs pour recuperer les valeurs Figma
"

Gestion des secrets : .env + gitignore sont obligatoires

Regle d’or commune a toutes les integrations :

# .env (ne JAMAIS commiter)
NOTION_TOKEN=secret_xxx
SLACK_BOT_TOKEN=xoxb-xxx
SLACK_WEBHOOK_URL=https://hooks.slack.com/xxx
LINEAR_API_KEY=lin_api_xxx
LINEAR_TEAM_ID=ENG
FIGMA_TOKEN=figd_xxx

# .gitignore
.env
.env.*
!.env.example

Documenter dans CLAUDE.md pour eviter les accidents

## Gestion des secrets
- Ne jamais commiter .env
- Lire les valeurs via process.env dans les scripts
- Ne pas inclure les cles API dans les prompts ou sorties
- Ne pas afficher le header Authorization dans les messages d'erreur

Cinq pieges classiques

1. Ignorer les rate limits Slack autorise 1 appel par seconde, Notion 3 toutes les 3 secondes, et Linear applique des limites de complexite GraphQL. En traitement par lot, intercalez toujours un sleep.

async function batchPost(items) {
  for (const item of items) {
    await postToNotion(item);
    await new Promise((r) => setTimeout(r, 500)); // 500 ms entre chaque appel
  }
}

2. Oublier la verification de signature webhook Lorsqu’on implemente un recepteur de webhook, sauter la verification de signature ouvre la porte aux replay attacks. Slack comme GitHub publient leur schema de signature : implementez-le systematiquement.

3. Confusion sur les permissions On poste avec les droits du bot mais on imagine que le message sortira a notre nom. Documentez les scopes de permissions dans le README.

4. Doublons lors des retries Un incident reseau declenche un retry, et trois pages identiques finissent dans Notion. Une idempotency key garantit une execution unique.

5. Pas de fallback en cas de panne Si Slack tombe, la notification de deploy ne passe pas et l’ops manuelle est laissee en plan. Prevoyez deux canaux principaux (par ex. Slack + e-mail).

Operation integree : cinq services en un seul prompt

L’apotheose : un workflow multi-SaaS en une seule passe :

claude -p "
Prepare la release de cette semaine :

1. Extrait via gh log les commits non publies sur master
2. Genere les release notes en Markdown
3. Cree une nouvelle page dans la base Notion 'Releases'
4. Compte dans Linear les issues fermees cette semaine
5. Exporte 5 captures des changements depuis la page Figma 'v2.0 Design'
6. Poste un resume dans #team sur Slack
   (message principal en 3 lignes, details dans le thread)
7. Lance gh release create v2.0.0 pour officialiser la release

Pour chaque etape, fais un log concis.
"

Si cela tient, la release hebdo qui prenait une heure se transforme en 5 minutes entierement confiees a Claude Code.

Synthese

SaaS	Integration express	Version avancee
Notion	Wrapper CLI + API	Passage en serveur MCP
Slack	Incoming Webhook	Bolt SDK + gestion de threads
Linear	GraphQL direct	Encapsulage en outil MCP
GitHub	La CLI gh suffit	Couplage avec Actions
Figma	API REST	Plugin + MCP

Debarrassez-vous de l’idee “Claude Code = outil pour ecrire du code” et le champ des possibles s’elargit enormement. Commencez par Slack Incoming Webhook : cout minimal, pret en 10 minutes. Ajoutez ensuite Notion ou Linear et vous devriez automatiser environ 30 % de votre travail.

Articles lies

• Guide complet du harness engineering
• Guide d’integration Claude Code x Obsidian
• 10 patterns de sous-agents pour Claude Code

References

• Documentation officielle de l’API Notion
• Documentation officielle de l’API Slack
• Documentation officielle de l’API Linear
• GitHub CLI
• Documentation officielle de l’API Figma