WasapFlow Bridge

WhatsApp CRM スターター：独自アプリで公式 WhatsApp Business API を使う

WasapFlow Bridge を通じて、 公式 WhatsApp Business API（Meta Cloud API） を利用する、最小限ながら動作する WhatsApp CRM です。 Meta テックプロバイダーになる必要も、Meta アプリレビューを受ける必要もありません。クローンして 実行し、AI（Claude Code、Cursor、Codex、Copilot）に任せて、独自の CRM や SaaS に発展させましょう。

4 つのファイルにまたがる約 400 行の Node.js で構成され、依存関係は 2 つ、ビルド手順はありません。

できること

• WhatsApp に接続ボタン。クライアントは Meta Embedded Signup を通じて自分の電話番号を接続します。 共存に対応しているため、ビジネス側は引き続きスマートフォンの WhatsApp Business アプリを使えます。
• 署名付き Webhook。 受信メッセージ、配信・既読ステータス、スマートフォンで入力された返信 （message.echo）、チャット履歴のバックフィル（message.history）。
• 受信トレイ。 会話、未読件数、24 時間のウィンドウ、テキストまたはテンプレートによる返信。
• 複数の電話番号。 すべて phone_number_id をキーとして管理します。
• BSUID に対応した連絡先。 WhatsApp のユーザー名によって電話番号フィールドが壊れることはありません。
• AGENTS.md、CLAUDE.md、.cursor/rules。 連携の仕組みを AI に正確に伝えるため、上に構築する機能も 正しく動作します。

5 分で実行

1. パートナーアカウント。 https://partner.wasapflow.com/bridge/partner/register で無料アカウントを作成し、 カードを登録します。最初の電話番号が接続されるまで請求は発生しません。接続後、Bridge の料金は WhatsApp 電話番号 3 件ごとに月額 $10 で、メッセージ料金は Meta から直接請求されます。 WasapFlow Bridge は Meta へのブリッジのみを提供します。このアプリが受信トレイとなり、電話番号はアプリ内の WhatsApp に接続ボタンから接続します（WasapFlow のポータルには接続ボタンがありません）。
2. インストール：

   git clone https://github.com/kobaranteguh/whatsapp-crm-starter.git
   cd whatsapp-crm-starter
   npm install
   cp .env.example .env
   

3. キー。 ポータル → Integration を開き、Partner Key と Webhook Secret をコピーして .env に入力します。
4. Webhook 用の公開 URL。 アプリをデプロイする（Railway、Render、Fly、VPS）か、ローカルマシンを トンネルします（cloudflared tunnel --url http://localhost:3000 または ngrok http 3000）。 ポータル → Integration で、Webhook URL として https://<your-domain>/webhook/wasapflow を保存します。
5. 起動：

   npm start
   

   http://localhost:3000 を開き（ユーザーは admin、パスワードは ADMIN_PASSWORD）、+ Connect WhatsApp をクリックしてから、スマートフォンでその番号にメッセージを送ります。

AI で残りを構築する

AI ツールでフォルダーを開き、以下のプロンプトのいずれかを貼り付けます。

AGENTS.md と WasapFlow Bridge API リファレンスを読んでください。エクスポートはそのまま維持し、lib/store.js を Prisma を使った Postgres に置き換えてください。マイグレーションを追加してください。

AGENTS.md を読んでください。マルチテナントにしてください。ユーザーがサインアップし、各テナントが state = tenant id を指定した POST /connect/session 経由で独自の WhatsApp 電話番号を接続し、自分の受信トレイだけを見られるようにしてください。

AGENTS.md と Bridge のドキュメントを読んでください。メディア機能を追加してください。受信した画像とドキュメントを表示し、エージェントが作成画面から画像を送信できるようにしてください。

AGENTS.md を読んでください。テンプレートのページを追加してください。ステータス付きでテンプレートを一覧表示し、新規作成できるようにし、template.status_updated webhook で更新してください。

AGENTS.md を読んでください。担当者割り当てとタグ機能を追加してください。会話をスタッフに割り当ててタグを付け、タグで受信トレイを絞り込めるようにしてください。

AI にライブアクセスを許可する（任意）。 WasapFlow MCP サーバーを使うと、AI がドキュメントを検索し、 Bridge アカウントに対して、電話番号の一覧表示、失敗した Webhook の確認、テストメッセージの送信などを実行できます。

claude mcp add --transport http wasapflow https://officialapi.wasapflow.com/bridge/mcp --header "x-partner-key: wf_..."

{ "mcpServers": { "wasapflow": { "url": "https://officialapi.wasapflow.com/bridge/mcp", "headers": { "x-partner-key": "wf_..." } } } }

ファイル

ファイル	内容
server.js	Webhook 受信処理（署名チェック、イベント）、/api/*、Basic 認証
lib/bridge.js	Bridge を呼び出す唯一のモジュール（SDK を使わない通常の fetch）
lib/store.js	データベースに置き換え可能な JSON ファイルストレージ
public/index.html	受信トレイ UI
AGENTS.md	AI コーディングツール向けのルールと手順

リンク

• API リファレンス（Markdown、AI ツール向け）：https://raw.githubusercontent.com/kobaranteguh/api/main/README.md
• パートナーガイド：https://raw.githubusercontent.com/kobaranteguh/guide/main/README.md
• OpenAPI 3.1：https://officialapi.wasapflow.com/bridge/openapi.json
• Postman：https://www.postman.com/ustazzul/workspace/wasapflow-bridge-api
• ドキュメント：https://partner.wasapflow.com/bridge/docs

FAQ

Meta Business の認証やアプリの審査は必要ですか？ Meta App Review や Tech Provider のステータスは必要ありません。どちらも Bridge が提供します。各ビジネスは、アプリの「Connect WhatsApp」ボタンから Meta の Embedded Signup を通じて独自の番号を接続し、WhatsApp のポリシーに従う必要があります。

ビジネスは引き続きスマートフォンで WhatsApp を利用できますか？ はい。Coexistence を利用すると、スマートフォンで入力した返信が、この受信トレイに message.echo として表示されます。

本番環境で利用できる状態ですか？ 署名チェック、重複排除、BSUID の処理、複数番号への対応、24 時間のウィンドウといった統合パターンは本番環境で利用できます。JSON ファイルによるストレージと Basic 認証は本番環境向けではありません。これらはご利用のスタックに合わせて置き換えてください（上記のプロンプトを参照）。

MIT ライセンス。© Kobaran Teguh Sdn. Bhd.