Claude Code x SaaS-Integration: Notion, Slack, Linear, GitHub, Figma

Halten Sie Claude Code immer noch fuer ein reines Code-Editor-Werkzeug? Sobald Sie es mit Ihren alltaeglichen SaaS-Tools verbinden, wird Claude Code zu einem echten “Arbeits-Orchestrator”. Eine Notion-Seite erstellen, in Slack posten, ein Linear-Ticket anlegen, einen GitHub-PR oeffnen und Figma-Werte auslesen — das alles aus einem einzigen natuerlichsprachlichen Prompt.

In diesem Artikel zeigen wir die fuenf SaaS-Integrationsmuster, die wir tatsaechlich zum Betrieb von ClaudeCodeLab einsetzen, inklusive lauffaehigem Code und Setup-Anleitungen. Am Ende haben Sie Ihren persoenlichen Automatisierungs-Hub.

Die drei Integrationsarchitekturen

Es gibt grob drei Wege, Claude Code mit einem SaaS zu verbinden:

Ansatz	Implementierungsaufwand	Flexibilitaet	Geeignet fuer
MCP-Server	Mittel	Hoch	Haeufig genutzte Integrationen, projektuebergreifend
CLI-Wrapper	Niedrig	Mittel	Einmalige Skripte, einfache Integrationen
Webhook-Empfaenger	Hoch	Hoch	Bidirektionale Integrationen, ausgeloest vom SaaS

Einsteiger starten am besten mit einem CLI-Wrapper — das ist der kuerzeste Weg. Claude Code ruft die API einfach ueber das Bash-Tool auf, also reicht ein API-Key in einer Umgebungsvariable. Sobald Sie sicher sind, ist der naechste logische Schritt die Aufwertung zu einem MCP-Server.

1. Notion-Integration: Seiten mit KI in Serie produzieren

Anwendungsfaelle

• Besprechungsnotizen direkt in Notion ablegen
• Wochenreports automatisch erstellen
• Interne Wissensbasis durch die KI erweitern lassen

Implementierung

// 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}`);

Aufruf aus Claude Code

claude -p "
Lies das folgende Besprechungsprotokoll und fasse es in drei Abschnitten
(Beschluesse / Action Items / naechste Agenda) zusammen,
dann poste es in die Notion-Meeting-Datenbank:

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

Verwende database_id: abc123...
Sende danach die URL in slack-channel-general.
"

Claude Code ruft notion-create-page.mjs ueber das Bash-Tool auf und reicht die Ziel-URL anschliessend an Slack durch — alles in einem einzigen Prompt.

2. Slack-Integration: Benachrichtigungen und Posts automatisieren

Anwendungsfaelle

• Deploy-Completion-Benachrichtigungen
• Woechentliche Fehlerzusammenfassungen
• Lange Berichte sauber in Threads formatieren

Implementierung (Incoming Webhook, der einfachste Weg)

// 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 mit Slack Bolt SDK (Thread-Antworten, DMs 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);

Einsatzbeispiel aus Claude Code

claude -p "
Fuehre scripts/deploy.sh aus.
Bei Erfolg poste 'Prod-Deploy abgeschlossen 🚀' in #dev
und als Thread-Antworten:
1. Commit-Hash
2. Anzahl geaenderter Dateien
3. Build-Dauer
Bei Fehler sende eine rote Warnung nach #dev-alerts.
"

3. Linear-Integration: Tickets automatisch anlegen

Anwendungsfaelle

• Bug-Diskussionen in Tickets ueberfuehren
• Review-Anmerkungen geschlossen einreichen
• Review-Kommentare in einzelne Aufgaben aufsplitten

Implementierung

// scripts/linear-create-issue.mjs
const LINEAR_API_KEY = process.env.LINEAR_API_KEY;
const LINEAR_TEAM_ID = process.env.LINEAR_TEAM_ID; // z. B. "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}`);

Beispiel: Massenanlage aus PR-Reviews

claude -p "
Lies alle Review-Kommentare von GitHub PR #234 und lege fuer jeden
aenderungsrelevanten Hinweis ein eigenes Linear-Ticket an.

Jedes Ticket:
- Titel: kurze Zusammenfassung des Hinweises
- Body: Originalkommentar + PR-URL + Dateiname:Zeile
- Priority: 1 bei 'muss gefixt werden', 3 bei 'Vorschlag'
"

4. GitHub-Integration: gh CLI geschickt nutzen

Bei GitHub ist die gh CLI wesentlich bequemer als die reine API. Claude Code schiesst sie einfach ueber das Bash-Tool ab.

Wichtige Muster

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

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

# PR-Review anzeigen
gh pr view 234 --comments

# CI-Status pruefen
gh run list --workflow deploy.yml --limit 5

# Release erstellen
gh release create v1.2.0 --notes "Changelog here"

Beispiel: Incident Response

claude -p "
In der Produktion haeufen sich 500er-Fehler. Folge diesen Schritten:

1. Lies die letzten 60 Minuten aus logs/prod-*.log und extrahiere Fehlerpattern
2. Finde via git log den verdaechtigen Commit aus dem Stacktrace
3. Erstelle einen PR, der diesen Commit revertet (gh pr create)
4. Lege ein Incident-Ticket in Linear an
5. Melde den Status in #incident-response auf Slack

Ziel: maximal 15 Minuten.
"

5. Figma-Integration: Designs zu Code

Anwendungsfaelle

• Komponentenstruktur einer Figma-Datei auslesen
• Figma-Werte (Farben, Abstaende, Schriftgroessen) in CSS umwandeln
• Screenshot-Vergleichstests

Implementierung (Figma REST API)

// 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;

// Farben, Typografie und Layout extrahieren
const tokens = {
  colors: extractColors(node),
  typography: extractTypography(node),
  spacing: extractSpacing(node),
};

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

function extractColors(node) { /* Implementierung ausgelassen */ }
function extractTypography(node) { /* Implementierung ausgelassen */ }
function extractSpacing(node) { /* Implementierung ausgelassen */ }

Aufruf aus Claude Code

claude -p "
Lies nodeId=456:789 (die Card-Komponente) aus der Figma-Datei abc123
und implementiere sie als React-Komponente components/Card.tsx.

- Tailwind-Tokens angleichen (Farben aus theme.colors waehlen)
- Props: children, variant (primary/secondary)
- Zusaetzlich eine Storybook-Story generieren
- Mit scripts/figma-extract.mjs die Figma-Werte als Referenz holen
"

Credential-Management: .env + gitignore sind Pflicht

Gueltig fuer jede Integration:

# .env (NIEMALS in Git einchecken)
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

In CLAUDE.md dokumentieren, um Unfaelle zu vermeiden

## Umgang mit Secrets
- .env niemals committen
- Werte in Skripten ueber process.env lesen
- API-Keys nie in Prompts oder Output aufnehmen
- Authorization-Header nicht in Fehlermeldungen ausgeben

Fuenf typische Fallen

1. Rate Limits ignorieren Slack erlaubt 1 Aufruf pro Sekunde, Notion 3 in 3 Sekunden, Linear begrenzt die GraphQL-Komplexitaet. In Batch-Jobs immer Sleeps einbauen.

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

2. Webhook-Signaturen nicht pruefen Wer einen Webhook-Empfaenger baut und Signaturen nicht validiert, riskiert Replay-Angriffe. Slack und GitHub publizieren beide ihre Signierverfahren — immer implementieren.

3. Unklare Rechte-Frage Man postet als Bot und wundert sich, dass der eigene Name nicht erscheint. Berechtigungen in der README dokumentieren.

4. Doppelte Ausfuehrung bei Retries Ein Netzwerkfehler loest einen Retry aus und drei identische Notion-Seiten entstehen. Idempotency-Keys sichern “genau einmal” ab.

5. Kein Fallback bei Ausfaellen Wenn Slack ausfaellt, kommt die Deploy-Benachrichtigung nicht an, Operationen bleiben unerledigt. Zwei primaere Kanaele vorhalten (z. B. Slack + E-Mail).

Integrierter Betrieb: fuenf Services in einem Prompt

Die Koenigsdisziplin. Ein workflowueberspannender Prompt:

claude -p "
Release-Vorbereitung fuer diese Woche:

1. Unreleased Commits auf master per gh log extrahieren
2. Release Notes in Markdown erzeugen
3. Neue Seite in der Notion 'Releases'-Datenbank anlegen
4. In Linear Issues zaehlen, die diese Woche geschlossen wurden
5. Aus der Figma-Seite 'v2.0 Design' 5 Aenderungs-Screenshots exportieren
6. Slack-Post nach #team mit Zusammenfassung
   (3-Zeilen-Summary, Details im Thread)
7. gh release create v2.0.0 fuer das offizielle Release

Berichte je Schritt knapp per Log.
"

Laeuft das durch, schrumpft die woechentliche Release-Routine von einer Stunde auf 5 Minuten voll delegiert an Claude Code.

Fazit

SaaS	Schnellste Integration	Ausbaustufe
Notion	CLI-Wrapper + API	Zum MCP-Server ausbauen
Slack	Incoming Webhook	Bolt SDK + Thread-Management
Linear	Direkter GraphQL-Call	Als MCP-Tool verpacken
GitHub	gh CLI genuegt	Mit Actions kombinieren
Figma	REST API	Plugin + MCP

Wer die Denkweise “Claude Code = Tool zum Code-Schreiben” ablegt, entdeckt einen deutlich groesseren Moeglichkeitsraum. Fangen Sie mit Slack Incoming Webhook an — in 10 Minuten einsatzbereit, minimale Kosten. Danach Notion oder Linear ergaenzen, und rund 30 % Ihrer Arbeit lassen sich automatisieren.

Verwandte Artikel

• Der komplette Leitfaden zum Harness-Engineering
• Claude Code x Obsidian Integrationsleitfaden
• 10 Subagent-Muster fuer Claude Code

Quellen

• Notion API (offiziell)
• Slack API (offiziell)
• Linear API (offiziell)
• GitHub CLI
• Figma API (offiziell)