🚀 SlackスラッシュコマンドからMCP呼べるようにしたら未来だった

この記事では、Slack のスラッシュコマンドを活用して、プロンプト一つで複数の MCP (Model Context Protocol) を操る AI エージェントを呼び出す方法を具体的にご紹介します。まるで未来のワークフローを先取りしたような体験、ぜひ一緒に見ていきましょう！✨

---

🚀 この記事を読むと何ができるようになる？

• ✅ Slack のスラッシュコマンドから MCP を自在に操作できるようになります。
• ✅ 複数の MCP を組み合わせた AI エージェントを Slack から動かす方法が分かります。
• ✅ Express を使って Slack API と連携するバックエンドの構築手順を習得できます。
• ✅ Ngrok を使ってローカルの Express アプリを外部に公開する手順も学べます。

この記事の内容を実装すれば、Slack のスラッシュコマンドから、以下のような複雑な指示を AI エージェントに出せるようになります。

/askai https://www.kinokuniya.co.jp/
「クレヨンしんちゃん」で検索
ページの本のタイトルを 10 タイトルほど抜き出す
Perplexity で詳細を調べて以下のリストで表示

• タイトル
• 著者
• 出版社
• サマリー (300 文字程度)
• 価格

できたリストを #askai_test に投稿してください

このプロンプトに対して以下のような内容で #askai_test に投稿されます。

「クレヨンしんちゃん」に関する書籍情報を以下にまとめました。

1. **クレヨンしんちゃん（コミックス）**
   - 著者：臼井儀人
   - 出版社：双葉社
   - サマリー：マイペースな5歳の幼稚園児・野原しんのすけを主人公に、両親をはじめ周囲の大人たちが、主人公の巻き起こす騒動に振り回される日常を描いたギャグ漫画作品です。1990年に連載が開始され、コミックスは全50巻で構成されています。子どもらしい無邪気さと大人顔負けの毒舌で周囲を翻弄するしんのすけの姿が描かれています。
   - 価格：情報なし

2. **新クレヨンしんちゃん**
   - 著者：臼井儀人（原作）
   - 出版社：双葉社
   - サマリー：原作者・臼井儀人氏の遺志を継いで制作されている続編シリーズです。2015年12月時点で4巻まで刊行され、原作の世界観やキャラクターの魅力を忠実に再現しながら、新たなエピソードが展開されています。
   - 価格：情報なし

🎯 どんなエンジニアにおすすめの記事？

• 💡 Slack アプリやボット開発に興味がある方
• 💻 JavaScript または TypeScript の開発経験がそれなりにある方
• 🤖 MCP や Mastra を活用して、日々の業務を効率化したいと考えている方

---

💻 今回扱う MCP

MCP (Model Context Protocol) は、Web アプリケーションから操作する ChatGPT などの LLM が直接扱えない外部サービスやリソースを、安全かつ柔軟に操作できる仕組みです。

今回の実装では、以下の 3 種類の MCP を組み合わせて使用しています。

🌐 Playwright MCP

Playwright MCP は、ブラウザ自動操作ツール Playwright を MCP 化したもので、指定された Web ページを開き、検索・クリック・スクレイピングといったブラウザ上のアクションを実行可能にします。構造化されていない Web 情報の収集やページ遷移のテストにも適しています。

🔍 Perplexity MCP

Perplexity MCP は、Perplexity.ai のような外部検索エンジンを活用して、特定のキーワードに基づいた調査や要約を自動で行う MCP です。ChatGPT に不足しがちな「最新情報」や「信頼性のあるソースからの情報取得」に優れています。

🧩 Slack MCP

Slack MCP は、Slack 上の操作（チャンネルへの投稿、DM 送信、メッセージの取得・解析など）を AI エージェントから制御できる MCP です。たとえば、AI に要約を作らせた上で、指定した Slack チャンネルに投稿する、といった連携が可能になります。

---

🛠️ Express で動くバックエンドの詳細

まずはバックエンドの準備です。以下のリポジトリに実際に動作するコードがありますので、お手元に clone しておいてください。

🔗 https://github.com/moksahero/mcp-demos/tree/main/slack

src/server.ts の詳細を見てみよう

ライブラリには、MCP の連携を助けてくれる Mastra を使用しています。

const mcp = new MCPClient({
  servers: {
    slack: {
      command: "npx",
      args: ["-y", "@modelcontextprotocol/server-slack"],
      env: {
        SLACK_BOT_TOKEN: process.env.SLACK_BOT_TOKEN,
        SLACK_TEAM_ID: process.env.SLACK_TEAM_ID,
      },
    },
    "perplexity-ask": {
      command: "npx",
      args: ["-y", "server-perplexity-ask"],
      env: {
        PERPLEXITY_API_KEY: process.env.PERPLEXITY_API_KEY,
      },
    },
    playwright: {
      command: "npx",
      args: ["@playwright/mcp"],
    },
  },
});

ここでは、今回使う全ての MCP を含む MCPClient のインスタンスを作成しています。

続いて、これらの MCP をツールとして利用する Agent を設定し、プロンプトを送信します。

const agent = new Agent({
  name: "Slack Agent",
  tools: wrappedTools,
  instructions: `
    Playwrightを使って指定のURLを解析できます
    Perplexityで調べものもできます
    Perplexityにリクエストを送るときは以下のエラーが出ないようにメッセージの構造をきれいにしてください
    '{"error":{"message":"Last message must have role \`user\`.","type":"invalid_message","code":400}}'
    '{"error":{"message":"After the (optional) system message(s), user and assistant roles should be alternating.","type":"invalid_message","code":400}}'
    Markdownフォーマットは使わず、Slackの\`\`\`にきれいに入るフラットテキストで出してください。
    最後の出力はこのプロンプトで何を送ったか詳細を送ってください
    全部日本語で出力してください
    `,
  model: openai("gpt-4o-mini"),
});

const response = await agent.generate(prompt);

Agent の instructions では、利用可能なツール（MCP）の説明に加え、Perplexity MCP 利用時のエラー回避策や、Slack で表示しやすいように Markdown を使用せずフラットテキストで出力するようにお願いしています。

Agent からの応答は時間がかかる場合があるため、Slack への即時応答として res.status(200).send() を先に返しつつ、Agent の処理が完了したら改めて POST リクエストでメッセージを送信します。

await fetch(response_url, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    response_type: "in_channel", // in_channelでチャンネル全体に表示
    text: resultText,
  }),
});

response_type: "ephemeral" にすると自分だけにメッセージが届きますが、今回はチャンネルに参加している全員に見せたいので response_type: "in_channel" を指定しています。

---

⚙️ Express アプリの環境設定

.env.example ファイルを参考に、必要な API キーなどの環境変数を .env ファイルに設定しましょう。

まずは最低限、以下の 2 つを設定します。

OPENAI_API_KEY=sk-
PERPLEXITY_API_KEY=pplx-

設定が完了したら、以下のコマンドで Express アプリを起動します。

$ npx tsx src/server.ts
✅ Express API server is running on http://localhost:4000

これで、ローカル環境でバックエンドサーバーが動き出しました！

---

🌐 Ngrok でローカルサーバーを公開

Slack からローカルで動いている Express サーバーにアクセスできるように、Ngrok を使ってインターネットに公開します。

https://ngrok.com/ にアクセスし、アカウントを作成してログイン後、auth token を取得してください。そして、以下のコマンドで認証を行います。

$ ngrok config add-authtoken 2x9iEvTLZytVS... # 取得したトークンに置き換えてください

認証後、Ngrok を使えるようになります。ドメイン名をカスタムしたい場合は、Ngrok のダッシュボードから " + New Domain " をクリックして作成しておくと便利です。

作成したドメイン、または割り当てられたドメインを使って、port 4000 で起動している Express サーバーを公開します。

$ ngrok http --url=your-custom-domain.ngrok-free.app 4000 # your-custom-domain.ngrok-free.app は実際のドメインに置き換えてください

コマンド実行後、以下のような画面が表示されれば成功です。

🫶 Using ngrok for OSS? Request a community license: https://ngrok.com/r/oss

Session Status                online
Account                       [e-mail] (Plan: Free)
Version                       3.22.1
Region                        Japan (jp)
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://repeatedly-amazing-cod.ngrok-free.app -> http://localhost:4000 # このURLを使います

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

これで、ローカルで動いている Express サーバーがインターネット経由でアクセス可能になりました。本格運用時には、常時稼働しているサーバーへのデプロイを検討してくださいね。

---

🤝 Slack アプリケーションの設定

次は Slack 側の設定です。

Slack Slash Command アプリを作成する

https://api.slack.com/apps にアクセスし、"Create New App" から "From scratch" を選択して新しいアプリを作成します。

アプリ名を入力し、連携したいワークスペースを選んで "Create App" をクリックします。

次に、必要な権限を設定します。「OAuth & Permissions」のメニューから「Add an OAuth Scope」をクリックし、この画面にあるような Scope を追加してください。

設定後、「Install App」メニューから「Install to (あなたの会社名)」をクリックしてアプリをワークスペースにインストールします。

インストールが完了すると、「Bot User OAuth Token」が表示されるので、これをメモしておいてください。

最後に、スラッシュコマンドを作成します。「Slash Commands」メニューから「Create New Command」をクリックし、以下の情報を設定します。

• Command: /askai （お好きなコマンド名に設定してください）
• Request URL: 先程 Ngrok で取得した公開 URL に /api/ask を付け加えたもの (例: https://repeatedly-amazing-cod.ngrok-free.app/api/ask)
• Short Description: Ask Anything to AI （コマンドの説明）

「Save」をクリックすれば、Slack 側の設定は完了です！🎉

---

🔒 Slack 連携のための環境変数を設定

Express アプリの .env ファイルに、Slack 連携に必要な環境変数を追加します。

• SLACK_BOT_TOKEN: 先程取得した Bot User OAuth Token を設定します。
• SLACK_TEAM_ID: 連携する Slack ワークスペースの Team ID を設定します。Team ID は Slack の URL (例: https://app.slack.com/client/TXXXXXXXX/CXXXXXXXX) に含まれる T から始まる文字列です。

SLACK_BOT_TOKEN=xoxb-... # 取得した Bot User OAuth Token
SLACK_TEAM_ID=TXXXXXXXX # ワークスペースの Team ID

これらの環境変数を .env ファイルに追加したら、ローカルで動いている Express サーバーを一度 Ctrl-C で停止し、再度以下のコマンドで起動してください。

$ npx tsx src/server.ts
✅ Express API server is running on http://localhost:4000

これで、すべての設定が整いました！

---

✨ さっそく Slack からコマンドを試してみよう！

これで、Slack と Perplexity MCP、Playwright MCP が連携した AI エージェントが使えるようになりました！/askai コマンドを使って、Slack の操作や Perplexity を活用したリサーチなどを試してみましょう。

まずは、他のメンバーに影響を与えないように、自分宛ての DM で試すのがおすすめです。もちろん、他のメンバーとの DM やチャンネルでも利用可能です。

例えば、以下のようなプロンプトを入力してみましょう。

/askai AIに関連する今日のニュースをリストアップしてください。１０件ほどお願いします。
リストには以下を含めてください
• タイトル
• 日付
• サマリー
• 外部リンク

出てきたリストを #news に投稿してください。

コマンドを実行すると、数分後に指定した #news チャンネルに以下のようなニュースリストが投稿されるはずです。

以下は、AI、MCP、半導体、データセンターに関連する今日のニュースリストです。

1. **AI半導体輸出に米国が警戒**
   - **日付**: 2025年5月18日
   - **サマリー**: 米国が中東経由での中国へのAI半導体移転に懸念を示しています。米中間の技術覇権競争が激化する構図が浮き彫りになっています。
   - **外部リンク**: [リンク](https://www.youtube.com/watch?v=Qf2K67h2OiA)

2. **ソフトバンク、AIデータセンター向け次世代メモリー開発に着手**
   - **日付**: 2025年5月11日
   - **サマリー**: ソフトバンクが日本国内でAIデータセンター向けの「次世代メモリー」開発を発表しました。2年間で約30億円を投資し、知的財産強化を目指します。この高速・省電力メモリー技術は、データセンターのエネルギー効率と処理速度向上に貢献する可能性があります。
   - **外部リンク**: [リンク](https://plus-web3.com/media/softbankaidatecenterzisedaimemory202250509/)
...（後続のニュース記事）

特定のチャンネル内で AI エージェントに情報を調べさせたり、チャンネルに投稿させたりする場合は、事前にそのチャンネル内で /invite @askai コマンドを実行し、BOT をメンバーに追加しておく必要があります。

BOT をチャンネルに追加すれば、こんなプロンプトも可能です！

/askai #general で最近話題になっていることのサマリーを送ってください

すると、Agent が #general チャンネルの会話内容を解析し、サマリーを作成してくれます。

最近の #general チャンネルでの話題をまとめました。

1. **ランチスポットの紹介**:

   - 築地の近くで美味しいランチスポットが紹介されました。
     - 寿司大: 新鮮な寿司が楽しめる人気店。
     - 築地玉寿司: 伝統的な江戸前寿司が味わえる。
     - 海鮮丼屋: 新鮮な海の幸を使った海鮮丼が絶品。
     - 築地市場食堂: 様々な海鮮料理が楽しめる食堂。

2. **QA 営業に関する情報**:
   - 東京で QA の営業をするための会社や業界についての情報が共有されました。
     - IT 企業、スタートアップ、製造業、コンサルティング会社が候補として挙げられました。
     - 求人情報や業務内容についても詳しく説明されました。

これまで ChatGPT などができなかった、チャンネル内の情報収集や要約まで AI にお願いできるようになりました。

---

🔭 今後の可能性は無限大！

💬 チャネル内や DM 内から AI を直接呼べるようになった

「今週の売上データ見たいんだけど、AI に聞いてみようか？」とか、「このコードレビューお願い、AI にも見てもらおう！」といった会話の流れで、Slack からシームレスに AI を活用できるようになりました。ChatGPT の画面を開いてコピペする必要はもうありません。

🧩 もっと色々な MCP を追加できる

今回の Express アプリにさらに他の種類の MCP を追加すれば、AI エージェントの能力をさらに拡張できます。

• Google カレンダー MCP: 「この MTG の予定、[e-mail]さんのカレンダーに追加しておいて」
• データ可視化 MCP: 「このデータ、グラフ化して表示して」

など、様々なタスクを Slack コマンドから実行できるようになります。

🗂 プライベートなデータも安全に扱えるようになる

これが MCP の特に強力な点です。例えば Postgres MCP を利用すれば、外部に公開されていない社内データベースに安全に接続できます。

/askai　過去５年間の一番売上の良かった顧客のトップ１０を売上額と合わせてリストアップして、グラフで出して。

このようなプロンプトを営業チームのチャンネルで実行すれば、リアルタイムで必要なデータを取得し、グラフで可視化して表示できます。もはや、データを共有するためだけにダッシュボードを開発する必要はなくなるかもしれません。

---

📝 まとめ

Slack のスラッシュコマンドと MCP を組み合わせることで、チャットワークフローの中で自然に AI へ指示を出したり、様々な外部サービスと連携したりする未来のような体験を実現できました。

MCP を追加すればするほど、AI エージェントができることの幅が広がり、社内データへのアクセスや各種ツール連携もシームレスに行えるようになります。

ChatGPT や特定のツールに閉じず、普段利用しているコミュニケーションツールである Slack から、自然言語で業務に必要なあらゆる操作ができる未来は、もうすぐそこまで来ています。

---

🔗 関連リンク集

• Slack API – Slash Commands
• Render – Node App Deploy Guide
• Slack message visibility (response_type)
• Model Context Protocol (MCP)

---

👨‍💻 著者について

東京とベルリンを拠点に活動しています。
東欧・パキスタン・フィリピンの優秀なエンジニアチームと連携し、AI 関連開発、QA コンサルティング、テスト自動化、フルスタック開発、プロダクトマネジメントなど、幅広い分野を手がけています。

特に Cucumber、Playwright、LLM、MCP を活用した開発・テストプロセスの効率化にご関心があれば、ぜひお気軽にご相談ください。ご連絡お待ちしております。