Guia completo Claude Code x SaaS: Notion, Slack, Linear, GitHub, Figma

Ainda enxerga o Claude Code como uma mera ferramenta de edicao de codigo? Ao conecta-lo com os SaaS que voce ja usa todos os dias, o Claude Code se transforma num verdadeiro “orquestrador de trabalho”. Criar uma pagina no Notion, postar no Slack, abrir um ticket no Linear, abrir um PR no GitHub, ler valores do Figma — tudo isso em um unico prompt em linguagem natural.

Neste artigo, apresentamos os cinco padroes de integracao SaaS que usamos de verdade para tocar o ClaudeCodeLab, com codigo funcional e passos de configuracao. Ao terminar, voce tera seu proprio hub de automacao.

As tres arquiteturas basicas de integracao

Basicamente ha tres formas de conectar o Claude Code a um SaaS:

Abordagem	Custo de implementacao	Flexibilidade	Ideal para
Servidor MCP	Medio	Alta	Integracoes frequentes, reaproveitadas em varios projetos
Wrapper de CLI	Baixo	Media	Scripts pontuais, integracoes simples
Receptor de webhook	Alto	Alta	Integracoes bidirecionais disparadas pelo SaaS

Para iniciantes, o caminho mais rapido e comecar com um wrapper de CLI: basta deixar o Claude Code bater na API via ferramenta Bash, portanto uma chave em variavel de ambiente ja resolve. Quando se sentir confortavel, o passo natural e promove-lo para um servidor MCP.

1. Integracao com Notion: produzir paginas em escala com IA

Casos de uso

• Publicar atas de reuniao diretamente no Notion
• Gerar relatorios semanais automaticamente
• Deixar a IA expandir continuamente a base de conhecimento interna

Implementacao

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

Como usar a partir do Claude Code

claude -p "
Leia a ata abaixo e organize-a em tres secoes
(decisoes / itens de acao / pauta do proximo encontro), depois
publique no banco de atas do Notion:

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

Use database_id: abc123...
Apos publicar, envie a URL para slack-channel-general.
"

O Claude Code chama notion-create-page.mjs pela ferramenta Bash e ja encaminha a URL ao Slack — tudo em um unico prompt.

2. Integracao com Slack: automatizar notificacoes e posts

Casos de uso

• Notificacoes de conclusao de deploy
• Post semanal com resumo de erros
• Formatacao de relatorios longos em threads

Implementacao (Incoming Webhook, o caminho mais simples)

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

Versao com Slack Bolt SDK (respostas em thread, 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);

Exemplo real com Claude Code

claude -p "
Execute scripts/deploy.sh.
Se der certo, poste 'Deploy de producao concluido 🚀' em #dev
e como respostas no thread:
1. Hash do commit
2. Numero de arquivos alterados
3. Duracao do build
Em caso de falha, mande um alerta vermelho para #dev-alerts.
"

3. Integracao com Linear: abertura automatica de tickets

Casos de uso

• Transformar discussao de bug em ticket
• Registrar de uma vez apontamentos da revisao de design
• Separar comentarios de code review em tarefas distintas

Implementacao

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

Exemplo: abertura em lote a partir de revisoes de PR

claude -p "
Leia todos os comentarios de revisao do PR #234 no GitHub e, para
cada comentario que exigir correcao, abra um ticket individual no Linear.

Cada ticket:
- Titulo: resumo curto do apontamento
- Corpo: comentario original + URL do PR + arquivo:linha
- priority: 1 se for 'obrigatorio', 3 se for 'sugestao'
"

4. Integracao com GitHub: apostar na CLI gh

No GitHub, a CLI gh e incomparavelmente mais conveniente do que a API crua. Basta o Claude Code dispara-la via ferramenta Bash.

Padroes principais

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

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

# Ver revisao do PR
gh pr view 234 --comments

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

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

Exemplo: resposta a incidentes

claude -p "
Os erros 500 estao se acumulando em producao. Siga este passo a passo:

1. Leia a ultima hora de logs/prod-*.log e extraia padroes de erro
2. Identifique pelo git log o commit suspeito a partir do stack trace
3. Abra um PR que faca revert desse commit (gh pr create)
4. Crie um ticket de incidente no Linear
5. Poste um status em #incident-response no Slack

Meta: concluir em ate 15 minutos.
"

5. Integracao com Figma: transformar design em codigo

Casos de uso

• Ler a estrutura de componentes de um arquivo Figma
• Converter valores do Figma (cores, espacamentos, tipografia) em CSS
• Testes visuais por comparacao de screenshots

Implementacao (API REST do 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;

// Extrair cores, tipografia e layout
const tokens = {
  colors: extractColors(node),
  typography: extractTypography(node),
  spacing: extractSpacing(node),
};

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

function extractColors(node) { /* implementacao omitida */ }
function extractTypography(node) { /* implementacao omitida */ }
function extractSpacing(node) { /* implementacao omitida */ }

Como usar a partir do Claude Code

claude -p "
Leia o nodeId=456:789 (componente card) do arquivo Figma abc123
e implemente como componente React components/Card.tsx.

- Alinhe com os tokens do Tailwind (cores a partir de theme.colors)
- Props: children, variant (primary/secondary)
- Gere tambem uma story do Storybook
- Use scripts/figma-extract.mjs para buscar os valores do Figma
"

Gerenciamento de credenciais: .env + gitignore sao obrigatorios

Regra de ouro comum a todas as integracoes:

# .env (NUNCA versione no 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

Documente no CLAUDE.md para evitar acidentes

## Tratamento de segredos
- Nunca commite .env
- Leia os valores via process.env dentro dos scripts
- Nao inclua chaves de API em prompts ou saidas
- Nao imprima o header Authorization em mensagens de erro

Cinco armadilhas frequentes

1. Ignorar rate limits Slack permite 1 chamada por segundo, Notion 3 a cada 3 segundos e Linear impoe limite de complexidade GraphQL. Em processos em lote, sempre intercale um sleep.

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

2. Esquecer a verificacao de assinatura de webhook Ao montar um receptor, pular a verificacao de assinatura abre espaco para replay attacks. Slack e GitHub publicam seus esquemas de assinatura — sempre implemente.

3. Nao deixar claro sob qual permissao o script roda O post sai com a permissao do bot, mas voce assume que sairia no seu nome. Documente os escopos de permissao no README.

4. Execucao duplicada por retry Um erro de rede dispara um retry e voce acaba com tres paginas identicas no Notion. Use uma idempotency key para garantir execucao unica.

5. Sem fallback quando o servico cai Se o Slack cai, a notificacao de deploy nao chega e a operacao manual fica parada. Prepare dois canais principais (por exemplo Slack + e-mail).

Operacao integrada: cinco servicos em um unico prompt

A forma final. Um workflow que atravessa varios SaaS em uma so rodada:

claude -p "
Prepare o release desta semana:

1. Extraia com gh log os commits da master que ainda nao saíram
2. Gere as release notes em Markdown
3. Crie uma nova pagina no banco 'Releases' do Notion
4. Conte no Linear as issues fechadas nesta semana
5. Exporte 5 screenshots das mudancas da pagina Figma 'v2.0 Design'
6. Envie um resumo no Slack #team
   (resumo em 3 linhas no principal, detalhes no thread)
7. Execute gh release create v2.0.0 para publicar a release oficial

Reporte um log conciso para cada passo.
"

Se isso rodar, a rotina semanal de release que levava uma hora vira 5 minutos delegados ao Claude Code.

Resumo

SaaS	Integracao mais rapida	Forma avancada
Notion	Wrapper de CLI + API	Virar um servidor MCP
Slack	Incoming Webhook	Bolt SDK + gestao de threads
Linear	Chamada GraphQL direta	Empacotar como ferramenta MCP
GitHub	A CLI gh ja resolve	Combinar com Actions
Figma	API REST	Plugin + MCP

Abra mao da ideia de que “Claude Code = ferramenta para escrever codigo” e o horizonte fica muito mais amplo. Comece pelo Slack Incoming Webhook — custo minimo, pronto em 10 minutos. Depois adicione Notion ou Linear e voce deve conseguir automatizar cerca de 30% do trabalho diario.

Artigos relacionados

• Guia completo de harness engineering
• Guia de integracao Claude Code x Obsidian
• 10 padroes de subagentes no Claude Code

Referencias

• Documentacao oficial da API do Notion
• Documentacao oficial da API do Slack
• Documentacao oficial da API do Linear
• GitHub CLI
• Documentacao oficial da API do Figma