Panduan Lengkap Integrasi Claude Code x SaaS: Notion, Slack, Linear, GitHub, Figma

Masih menganggap Claude Code hanya alat untuk mengedit kode? Begitu Anda menghubungkannya dengan SaaS yang dipakai setiap hari, Claude Code berubah menjadi “orchestrator pekerjaan” utuh. Menulis halaman Notion, memposting ke Slack, membuka tiket Linear, membuka PR GitHub, membaca nilai dari Figma — semua hanya dari satu prompt bahasa alami.

Dalam artikel ini kami mengupas lima pola integrasi SaaS yang benar-benar kami pakai menjalankan ClaudeCodeLab, lengkap dengan kode yang berjalan dan langkah setup. Setelah selesai membaca, Anda akan memiliki hub otomatisasi pribadi.

Tiga arsitektur dasar untuk integrasi

Secara garis besar ada tiga cara menghubungkan Claude Code dengan SaaS:

Pendekatan	Biaya implementasi	Fleksibilitas	Cocok untuk
MCP Server	Sedang	Tinggi	Integrasi yang sering dipakai, lintas beberapa proyek
CLI Wrapper	Rendah	Sedang	Skrip sekali pakai, integrasi sederhana
Penerima webhook	Tinggi	Tinggi	Integrasi dua arah yang dipicu dari sisi SaaS

Bagi pemula, jalur tercepat adalah mulai dari CLI Wrapper. Cukup biarkan Claude Code memanggil API lewat tool Bash; yang perlu disiapkan hanyalah API key dalam variabel lingkungan. Jika sudah terbiasa, langkah standar berikutnya adalah menaikkannya menjadi MCP server.

1. Integrasi Notion: memproduksi halaman secara massal dengan AI

Kasus penggunaan

• Menaruh notulen rapat langsung ke Notion
• Menghasilkan laporan mingguan otomatis
• Membiarkan AI terus memperluas basis pengetahuan internal

Implementasi

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

Cara pakai dari Claude Code

claude -p "
Baca notulen rapat di bawah ini lalu ringkas jadi tiga bagian
(keputusan / action item / agenda rapat berikutnya), kemudian
publikasikan ke database notulen di Notion:

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

Gunakan database_id: abc123...
Setelah terposting, kirim URL-nya ke slack-channel-general.
"

Claude Code menjalankan notion-create-page.mjs lewat tool Bash lalu meneruskan URL hasilnya ke Slack, seluruhnya dalam satu prompt.

2. Integrasi Slack: mengotomatisasi notifikasi dan posting

Kasus penggunaan

• Notifikasi deploy selesai
• Posting mingguan rangkuman error
• Memformat laporan panjang ke dalam thread

Implementasi (Incoming Webhook — paling mudah)

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

Varian Slack Bolt SDK (balas thread, kirim DM, dsb.)

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

Contoh pemakaian nyata dengan Claude Code

claude -p "
Jalankan scripts/deploy.sh.
Jika sukses, posting 'Deploy production selesai 🚀' ke #dev
dan sebagai balasan thread kirim:
1. Commit hash
2. Jumlah file yang berubah
3. Durasi build
Jika gagal, kirim alert merah ke #dev-alerts.
"

3. Integrasi Linear: membuat tiket otomatis

Kasus penggunaan

• Mengubah diskusi bug menjadi tiket
• Menginput hasil review desain sekaligus
• Memecah komentar code review menjadi tugas terpisah

Implementasi

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

Contoh: input massal dari review PR

claude -p "
Baca seluruh komentar review pada GitHub PR #234 lalu untuk setiap
komentar yang butuh perbaikan, buat satu tiket Linear tersendiri.

Setiap tiket:
- Judul: ringkasan singkat komentar
- Body: komentar asli + URL PR + namafile:baris
- priority: 1 jika 'wajib', 3 jika 'saran'
"

4. Integrasi GitHub: andalkan CLI gh

Untuk GitHub, CLI gh jauh lebih nyaman ketimbang API langsung. Cukup biarkan Claude Code memanggilnya lewat tool Bash.

Pola utama

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

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

# Melihat review PR
gh pr view 234 --comments

# Mengecek status CI
gh run list --workflow deploy.yml --limit 5

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

Contoh: respons insiden

claude -p "
Production banyak error 500. Ikuti langkah berikut:

1. Baca logs/prod-*.log satu jam terakhir dan tarik pola error
2. Dari stack trace, cari commit yang mencurigakan lewat git log
3. Buat PR yang me-revert commit tersebut (gh pr create)
4. Buat tiket incident di Linear
5. Posting status di #incident-response Slack

Target: selesai dalam 15 menit.
"

5. Integrasi Figma: mengubah desain jadi kode

Kasus penggunaan

• Membaca struktur komponen file Figma
• Mengubah nilai Figma (warna, spacing, ukuran font) menjadi CSS
• Uji visual berbasis perbandingan screenshot

Implementasi (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;

// Ekstrak warna, tipografi, dan layout
const tokens = {
  colors: extractColors(node),
  typography: extractTypography(node),
  spacing: extractSpacing(node),
};

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

function extractColors(node) { /* implementasi dihilangkan */ }
function extractTypography(node) { /* implementasi dihilangkan */ }
function extractSpacing(node) { /* implementasi dihilangkan */ }

Cara pakai dari Claude Code

claude -p "
Baca nodeId=456:789 (komponen card) dari file Figma abc123
lalu implementasikan sebagai komponen React components/Card.tsx.

- Sejajarkan dengan token Tailwind (warna dari theme.colors)
- Props: children, variant (primary/secondary)
- Buat juga story Storybook-nya
- Gunakan scripts/figma-extract.mjs untuk mengambil nilai Figma sebagai referensi
"

Manajemen kredensial: .env + gitignore wajib

Aturan besi yang berlaku untuk semua integrasi:

# .env (JANGAN pernah di-commit ke git)
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

Dokumentasikan di CLAUDE.md agar tak terjadi kecelakaan

## Penanganan secret
- Jangan commit .env
- Baca nilai dari process.env di dalam skrip
- Jangan memasukkan API key ke prompt maupun output
- Jangan mencetak header Authorization di pesan error

Lima jebakan umum

1. Mengabaikan rate limit Slack hanya 1 panggilan per detik, Notion 3 per 3 detik, Linear memberlakukan limit kompleksitas GraphQL. Saat pemrosesan batch, selalu sisipkan sleep.

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

2. Lupa verifikasi signature webhook Saat membuat penerima webhook, mengabaikan verifikasi signature membuka celah serangan replay. Slack maupun GitHub mempublikasikan skemanya — selalu implementasikan.

3. Tidak jelas memakai hak siapa Posting pakai hak bot tetapi menyangka akan muncul atas nama pribadi adalah sumber kecelakaan. Tuliskan scope permission di README.

4. Duplikasi akibat retry Error jaringan memicu retry dan menghasilkan tiga halaman Notion identik. Gunakan idempotency key agar tetap sekali-saja.

5. Tidak ada fallback saat layanan down Jika Slack mati, notifikasi deploy tak sampai dan operasi manual terabaikan. Siapkan dua jalur utama (mis. Slack + email).

Operasi terpadu: lima layanan dalam satu prompt

Bentuk tertinggi. Sebuah workflow lintas-SaaS dalam satu kali tembak:

claude -p "
Siapkan release minggu ini:

1. Ekstrak commit master yang belum dirilis dengan gh log
2. Buat release notes dalam Markdown
3. Buat halaman baru di database 'Releases' di Notion
4. Hitung issue yang closed minggu ini di Linear
5. Ekspor 5 screenshot perubahan dari halaman Figma 'v2.0 Design'
6. Kirim posting Slack ke #team
   (ringkasan 3 baris di utama, detail di thread)
7. Jalankan gh release create v2.0.0 untuk release resmi

Laporkan log singkat tiap langkah.
"

Jika ini berjalan, proses release mingguan yang tadinya satu jam menyusut menjadi 5 menit pekerjaan yang sepenuhnya diserahkan ke Claude Code.

Ringkasan

SaaS	Integrasi tercepat	Bentuk lanjutan
Notion	CLI wrapper + API	Tingkatkan jadi MCP server
Slack	Incoming Webhook	Bolt SDK + manajemen thread
Linear	Panggilan GraphQL langsung	Dikemas jadi tool MCP
GitHub	CLI gh sudah cukup	Gabungkan dengan Actions
Figma	REST API	Plugin + MCP

Lepaskan anggapan “Claude Code = alat menulis kode” dan wawasan Anda langsung melebar. Mulailah dari Slack Incoming Webhook — biaya minimal, siap dalam 10 menit. Tambahkan Notion atau Linear setelahnya, dan sekitar 30% pekerjaan harian bisa diotomatisasi.

Artikel terkait

• Panduan lengkap harness engineering
• Panduan integrasi Claude Code x Obsidian
• 10 pola penggunaan subagent Claude Code

Referensi

• Dokumentasi resmi Notion API
• Dokumentasi resmi Slack API
• Dokumentasi resmi Linear API
• GitHub CLI
• Dokumentasi resmi Figma API