mcpField
W
whatsapp-cloud-api

whatsapp-cloud-api

github.com/sickn33開発49.3k88 回インストール1 日前に更新
リポジトリ

whatsapp-cloud-api について

Meta の Cloud API を使い、Node.js/TypeScript または Python で WhatsApp Business 連携を実装するスキルです。メッセージ、テンプレート、Webhook、自動化の例と、認可や安全な取り扱いに関する注意点を扱います。

主な機能

  1. 01テキスト・テンプレート・対話型メッセージの送信
  2. 02メッセージとステータスの Webhook 受信
  3. 03HMAC-SHA256 による Webhook 署名の検証
  4. 04会話ステートフローの構築
  5. 05WhatsApp Flows とカタログの利用

活用シーン

  1. 01サービスウィンドウ外で承認済みテンプレートを送信
  2. 02受信メッセージイベントの検証
  3. 03WhatsApp カスタマーサポートフローの構築
  4. 04対話型フォームや商品カタログの作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill whatsapp-cloud-api

インストール後、Claude Code で/whatsapp-cloud-apiを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

assets/boilerplate/nodejs/
package.json
package-lock.json
tsconfig.json
.env.example
assets/boilerplate/nodejs/src/
template-manager.ts
types.ts
webhook-handler.ts
whatsapp-client.ts
index.ts
assets/boilerplate/python/
.env.example
.snyk
template_manager.py
app.py
webhook_handler.py
requirements.txt
whatsapp_client.py
assets/examples/
template-messages.json
flow-example.json
webhook-payloads.json
interactive-menu.json
references/
advanced-features.md
api-reference.md
compliance.md
automation-patterns.md
setup-guide.md
template-management.md
webhook-setup.md
message-types.md
scripts/
send_test_message.py
setup_project.py

詳細

WhatsApp Cloud API - 統合ガイド

対象範囲とスナップショット:例では、現在の Meta の契約ではなく、旧バージョンの Graph API を対象としています。使用前に、公式の Meta ドキュメントと実際のアカウントで、サポート対象バージョン、料金、メッセージ/スループット制限、テンプレートの編集規則、利用資格を確認してください。法務関連の表は例示であり、GDPR/LGPD の普遍的な要件ではありません。送信、テンプレートの削除、アカウントの移行、購入、トンネル、デプロイには、ユーザーが許可したスコープが必要です。正確な宛先と内容、および適用される同意/サービスウィンドウを確認してください。トークン、個人のメッセージ本文、API エラー全文をログに記録しないでください。ボイラープレートはローカルデモ用です。本番環境では、永続キューへの登録後に ACK を返す仕組み、認証済みアカウントのルーティング、冪等性/リプレイ保護、オプトアウト確認、ワーカーが必要です。HMAC だけではリプレイを防止できません。

概要

Meta の WhatsApp Business Cloud API との統合です。メッセージ、HMAC-SHA256 ウェブフック、カスタマーサポートの自動化に対応します。Node.js と Python のボイラープレートを用意しています。

このスキルを使用する場面

  • ユーザーが「whatsapp」または関連トピックに言及した場合
  • ユーザーが「whatsapp business」または関連トピックに言及した場合
  • ユーザーが「api whatsapp」または関連トピックに言及した場合
  • ユーザーが「chatbot whatsapp」または関連トピックに言及した場合
  • ユーザーが「mensagem whatsapp」または関連トピックに言及した場合
  • ユーザーが「template whatsapp」または関連トピックに言及した場合

このスキルを使用しない場面

  • タスクが WhatsApp Cloud API と無関係な場合
  • よりシンプルで、より具体的なツールでリクエストに対応できる場合
  • ユーザーが分野の専門知識を必要としない汎用的な支援を求めている場合

仕組み

Meta の公式 Cloud API を使用した、WhatsApp Business のプロフェッショナルな統合を実装するスキルです。Node.js/TypeScript と Python に対応しています。

概要

WhatsApp Cloud API は、WhatsApp Business を通じたメッセージの送受信に使用する Meta の公式 API です。2025 年 10 月以降、サポートされる唯一の選択肢です(On-Premises API は廃止されました)。

参考バージョン: Graph API v21.0(使用前にサポート状況を確認してください) ベース URL: https://graph.facebook.com/v21.0/{phone-number-id}/messages 認証: Bearer Token(本番環境では System User Token)

2026 年の料金(メッセージ単位):

カテゴリ費用課金される場面
Marketing$0.025-$0.1365キャンペーン、プロモーション
Utility$0.004-$0.0456注文確認、更新情報
Authentication$0.004-$0.0456OTP、パスワードのリセット
Service無料24 時間のウィンドウ内での返信

前提条件:

  • Meta Business Suite アカウント(無料)
  • WhatsApp 製品を設定した Meta for Developers のアプリ
  • 認証済みの電話番号
  • System User Token(永続)

ユーザーが Meta Business アカウントを持っていない場合は、ゼロからのセットアップ手順が記載された完全なガイド references/setup-guide.md を参照してください。


決定ツリー

次のステップを判断するには、このツリーを使用してください。

O usuario precisa de setup inicial?
├── SIM → Leia references/setup-guide.md
└── NAO → Qual linguagem?
    ├── Node.js/TypeScript
    └── Python
    → O que quer fazer?
       ├── Enviar mensagens → Secao "Tipos de Mensagem" abaixo
       ├── Receber mensagens → Secao "Webhooks" abaixo
       ├── Automatizar atendimento → Secao "Automacao" abaixo
       ├── WhatsApp Flows / Commerce → Secao "Features Avancados" abaixo
       ├── Gerenciar templates → references/template-management.md
       └── Compliance / limites → Secao "Compliance & Quality" abaixo

すぐに使えるボイラープレートでプロジェクトをゼロから始めるには、次のスクリプトを使用してください。

python scripts/setup_project.py --language nodejs --path ./meu-projeto

## Ou

python scripts/setup_project.py --language python --path ./meu-projeto

1. 環境変数を設定する

WHATSAPP_TOKEN=seu_access_token_aqui
PHONE_NUMBER_ID=seu_phone_number_id
WABA_ID=seu_whatsapp_business_account_id
APP_SECRET=seu_app_secret
VERIFY_TOKEN=token_customizado_para_webhook

2. シンプルなテキストメッセージを送信する

Node.js/TypeScript:

import axios from 'axios';

const GRAPH_API = 'https://graph.facebook.com/v21.0';

async function sendText(to: string, message: string) {
  const response = await axios.post(
    `${GRAPH_API}/${process.env.PHONE_NUMBER_ID}/messages`,
    {
      messaging_product: 'whatsapp',
      to,
      type: 'text',
      text: { body: message }
    },
    { headers: { Authorization: `Bearer ${process.env.WHATSAPP_TOKEN}` } }
  );
  return response.data; // { messaging_product, contacts, messages: [{ id }] }
}

Python:

import httpx
import os

GRAPH_API = "https://graph.facebook.com/v21.0"

async def send_text(to: str, message: str) -> dict:
    async with httpx.AsyncClient() as client:
        response = await client.post(
            f"{GRAPH_API}/{os.environ['PHONE_NUMBER_ID']}/messages",
            json={
                "messaging_product": "whatsapp",
                "to": to,
                "type": "text",
                "text": {"body": message}
            },
            headers={"Authorization": f"Bearer {os.environ['WHATSAPP_TOKEN']}"}
        )
        response.raise_for_status()
        return response.json()  # {"messaging_product", "contacts", "messages": [{"id"}]}

3. テンプレートメッセージを送信する(24 時間のウィンドウ外)

対応時間のウィンドウ外では、承認済みテンプレートを使用し、該当する同意を得てください。使用前に WhatsApp の承認を受ける必要があります。

{
  "messaging_product": "whatsapp",
  "to": "5511999999999",
  "type": "template",
  "template": {
    "name": "hello_world",
    "language": { "code": "pt_BR" },
    "components": [
      {
        "type": "body",
        "parameters": [
          { "type": "text", "text": "João" }
        ]
      }
    ]
  }
}

4. 配信を確認する

テストスクリプトを使用して検証してください。

python scripts/send_test_message.py --to 5511999999999 --message "Teste de integracao"

メッセージの種類

種類用途上限
Textシンプルなテキストメッセージ4096 chars
Template会話の開始/24時間のウィンドウ外1600 chars body
Image写真と画像5MB
DocumentPDF、スプレッドシート、ドキュメント100MB
Video動画16MB
Audio音声メッセージ16MB
Interactive Buttonクイック返信ボタンMax 3 botoes
Interactive Listセクション別の選択肢を含むメニューMax 10 opcoes
Location位置情報の共有lat/long
Contact連絡先の共有vCard format
Reactionメッセージに絵文字でリアクション1 emoji

例 - インタラクティブボタン(Node.js):

async function sendButtons(to: string, body: string, buttons: Array<{id: string, title: string}>) {
  return axios.post(`${GRAPH_API}/${process.env.PHONE_NUMBER_ID}/messages`, {
    messaging_product: 'whatsapp',
    to,
    type: 'interactive',
    interactive: {
      type: 'button',
      body: { text: body },
      action: {
        buttons: buttons.map(b => ({
          type: 'reply',
          reply: { id: b.id, title: b.title }
        }))
      }
    }
  }, { headers: { Authorization: `Bearer ${process.env.WHATSAPP_TOKEN}` } });
}

// Uso:
await sendButtons('5511999999999', 'Como posso ajudar?', [
  { id: 'suporte', title: 'Suporte' },
  { id: 'vendas', title: 'Vendas' },
  { id: 'info', title: 'Informacoes' }
]);

Node.js と Python でのすべての種類の完全な例については、references/message-types.md をご覧ください。


Webhook

Webhook を使用すると、メッセージやステータスの更新をリアルタイムで受信できます。

検証(Get)- 必須

Meta Developers で webhook を設定すると、Meta から検証のために GET リクエストが送信されます。

// Node.js (Express)
app.get('/webhook', (req, res) => {
  const mode = req.query['hub.mode'];
  const token = req.query['hub.verify_token'];
  const challenge = req.query['hub.challenge'];

  if (mode === 'subscribe' && token === process.env.VERIFY_TOKEN) {
    res.status(200).send(challenge);
  } else {
    res.sendStatus(403);
  }
});

受信(Post)- Hmac-Sha256 によるセキュリティ

すべての webhook 通知には、ヘッダー X-Hub-Signature-256 に署名が付与されています。処理する前に、必ず検証してください。

import crypto from 'crypto';

function validateSignature(rawBody: Buffer, signature: string): boolean {
  const expectedSig = crypto
    .createHmac('sha256', process.env.APP_SECRET!)
    .update(rawBody)
    .digest('hex');
  if (!/^sha256=[a-f0-9]{64}$/.test(signature)) return false;
  const expected = Buffer.from(`sha256=${expectedSig}`);
  const received = Buffer.from(signature);
  return expected.length === received.length && crypto.timingSafeEqual(expected, received);
}

重要: タイミング攻撃を防ぐため、crypto.timingSafeEqual(Node.js)または hmac.compare_digest(Python)を使用してください。単純な文字列比較は絶対に使用しないでください。

受信イベント

  • messages - クライアントからのメッセージ(テキスト、メディア、ボタン、位置情報)
  • statuses - ステータスの更新(sent → delivered → read)
  • errors - 配信エラー

要件:

  • 有効な SSL 証明書を備えた HTTPS エンドポイント
  • 5 秒以内に HTTP 200 で応答すること
  • 開発環境:ローカルテストには ngrok を使用してください

Node.js と Python の例を含む完全なセットアップについては、references/webhook-setup.md をご覧ください。


インタラクティブなメインメニュー

最初のやり取りで選択肢メニューを作成するには、ボタンまたはリストを使用してください。


## Python - Menu Com Lista Interativa

async def send_main_menu(to: str):
    await send_interactive_list(
        to=to,
        header="Bem-vindo!",
        body="Selecione o que precisa:",
        button_text="Ver opcoes",
        sections=[{
            "title": "Atendimento",
            "rows": [
                {"id": "suporte", "title": "Suporte Tecnico", "description": "Ajuda com problemas"},
                {"id": "vendas", "title": "Vendas", "description": "Conhecer nossos produtos"},
                {"id": "financeiro", "title": "Financeiro", "description": "Boletos e pagamentos"},
            ]
        }]
    )

フローのステートマシン

ステートマシンを使って会話を管理します。各クライアントには現在の状態があり、それによって次のメッセージの処理方法が決まります。

INICIO → MENU_PRINCIPAL → SUPORTE → AGUARDANDO_DETALHES → ESCALACAO_HUMANO
                        → VENDAS → CATALOGO → CHECKOUT
                        → FINANCEIRO → SEGUNDA_VIA_BOLETO

24時間のウィンドウ

  • ウィンドウ内(クライアントの最後のメッセージから24時間以内): あらゆる種類のメッセージを無料で送信できます
  • ウィンドウ外: template メッセージのみ送信できます(カテゴリーごとに課金)

AI との統合(Claude Api)

WhatsApp と Claude を組み合わせて、インテリジェントな応答を実現します。

  1. webhook 経由でメッセージを受信します
  2. 会話のコンテキストとともに Claude API に送信します
  3. WhatsApp 経由で応答を返します
  4. 人間の担当者へのエスカレーションを利用できるようにしておきます

自動化パターンの完全な例については、references/automation-patterns.md をご覧ください。


Whatsapp Flows

WhatsApp 内で利用できる、複数画面のインタラクティブなフォームです。クライアントはアプリを離れずに項目を入力できます。screens、components、actions を含む JSON で定義します。

用途:登録、予約、NPS アンケート、商品選択。

コマースとカタログ

WhatsApp カタログには最大500商品を登録できます。単一商品または複数商品のメッセージを送信し、アプリ内でチェックアウトできます。

Template Management Api

テンプレートをプログラムから作成、一覧表示、削除できます。1アカウントあたり最大6000件の翻訳に対応しています。数分で承認されます。

Whatsapp Channels

無制限の登録者に向けた一方向のブロードキャストです。WhatsApp の「アップデート」タブにあります。

Click-To-Whatsapp Ads

WhatsApp の会話を開くボタン付きの Facebook/Instagram 広告です。結果は変動するため、成果は保証されません。

ステータスの追跡

配信状況を追跡します:pending → server → device → read。ステータス更新は webhook で受信します。

高度な機能の詳細については、references/advanced-features.md をご覧ください。 API を使用したテンプレート管理については、references/template-management.md をご覧ください。


必須チェックリスト

  • メッセージを送信する前に、明示的なオプトインを取得する
  • オプトアウトの仕組みを実装する(キーワード「SAIR」または「STOP」)
  • タイムスタンプ、方法、目的を含む同意記録を保存する
  • WhatsApp のポリシーに準拠したコンテンツにする(スパムや禁止コンテンツを含めない)
  • LGPD/GDPR に準拠する(法的根拠を定め、データ主体の権利に対応する)
  • メッセージの頻度を適切に保つ(過剰に送信しない)
  • 使用前にテンプレートの承認を得る
  • ビジネス認証を完了する(上限引き上げの場合)

品質評価

WhatsApp はメッセージの品質を監視し、評価を付与します。

評価意味対応
緑品質が高く、ブロックが少ない維持 — 上限引き上げの対象です
黄品質は平均的で、注意が必要コンテンツと頻度を見直す
赤品質が低く、停止のリスクがある直ちに対応:送信量を減らす

良い兆候: 高い返信率、エンゲージメント、ブロックが少ない 悪い兆候: ブロック、スパム報告、低いエンゲージメント

ティアシステム(メッセージ上限)

2025 年 10 月以降、上限は電話番号ごとではなくビジネスポートフォリオごとに設定されます。

ティア24 時間あたりの会話数到達方法
初期250新規アカウント/未認証
ティア 11,000自動引き上げ:7 日間、上限の 50% 以上を使用
ティア 210,000自動引き上げ:7 日間、上限の 50% 以上を使用
ティア 3100,000自動引き上げ:7 日間、上限の 50% 以上を使用
無制限無制限自動引き上げ:7 日間、上限の 50% 以上を使用

2026 年の変更: 2K および 10K のティアは廃止されます。ビジネス認証後、上限は直ちに 100K になります。

コンプライアンスの完全なガイドについては、references/compliance.md をご覧ください。


トラブルシューティング

問題考えられる原因解決策
401 Unauthorizedトークンの期限切れまたは無効新しい System User Token を生成する
400 Bad Requestペイロードの形式が不正JSON を例と照合して確認する
テンプレートが拒否されたコンテンツがポリシーに違反している内容を見直し、修正して再提出する
webhook が受信されないURL が無効、または HTTPS ではないngrok(開発環境)または SSL 証明書(本番環境)を使用する
Rate limit exceeded80 msg/s を超過リトライ機能付きのキューを実装する
品質評価が低いブロックや報告が多い送信量を減らし、コンテンツを改善する
メッセージが配信されない電話番号が無効、または WhatsApp 未登録送信前に電話番号を検証する
電話番号が認証されていないOTP の手続きが未完了SMS または通話で認証をやり直す

設定を検証するには:

python scripts/validate_config.py

参考資料(必要に応じて参照)

ファイル参照するタイミング
references/setup-guide.md初期設定 — Meta アカウントの作成、API の設定
references/message-types.mdすべてのメッセージタイプの完全な例
references/webhook-setup.mdHMAC セキュリティを使用した Webhook の設定
references/automation-patterns.mdチャットボット、キュー、ステートマシン、AI 連携
references/compliance.mdLGPD/GDPR、オプトイン、品質評価、ティアシステム
references/api-reference.mdエンドポイント、エラー、レート制限、2026 年の料金
references/advanced-features.mdFlows、Commerce、Channels、Ads、ステータス追跡
references/template-management.mdAPI を使用したテンプレートの CRUD

スクリプト

スクリプト機能
scripts/setup_project.pyボイラープレートを使用してプロジェクトを作成します(Node.js または Python)
scripts/validate_config.py認証情報と API への接続を検証します
scripts/send_test_message.py設定を検証するためのテストメッセージを送信します

ボイラープレート

ディレクトリ内容
assets/boilerplate/nodejs/TypeScript/Express の完全なプロジェクト
assets/boilerplate/python/Python/Flask の完全なプロジェクト
assets/examples/JSON ペイロードの例(テンプレート、Webhook、Flows)

ベストプラクティス

  • プロジェクトと要件について、明確で具体的なコンテキストを提示してください
  • 本番コードに適用する前に、すべての提案を確認してください
  • 包括的な分析のために、他の補完的なスキルと組み合わせてください

よくある落とし穴

  • このスキルの専門領域外のタスクに使用する
  • 独自のコンテキストを理解せずに推奨事項を適用する
  • 正確な分析に必要なプロジェクトのコンテキストを十分に提示しない

関連スキル

  • instagram - 分析を強化する補完的なスキル
  • social-orchestrator - 分析を強化する補完的なスキル
  • telegram - 分析を強化する補完的なスキル

制限事項

  • タスクが上記の説明にある範囲に明確に該当する場合にのみ、このスキルを使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認を求めてください。

コメント