Zenn
🔌

Clineの活動記録をSlackで共有する - MCPによる連携の実装

に公開
Model Context Protocol
Cline
tech

目的とやったこと

Clineに依頼したタスクのサマリをSlackに投稿します。
Slackに投稿することでチームにClineとのやりとりを共有したり、タスクのログを残すのが目的です。
他にもSlack連携でできそうなことをいくつか試しています。
ただ、正直にいうと、ClineとMCPの連携を何でもいいから試したかったというのがモチベーションで目的は後付けです。

実行例

先に実行例を示します。

例1. /slackと入力して、Clineに依頼したタスクのサマリを投稿

task summary

Clineとのやりとり内容
# User
/slack

# Cline
ユーザーが「/slack」と入力しました。これはユーザーのカスタム指示に従って、#developチャンネルに以下の内容を投稿するよう求められています：

## タスクの依頼内容
## 途中のやり取りのサマリ
## タスクの結果
## このタスクを完了させるために本当に必要だったプロンプト
この指示に従って、Slack MCPツールを使用して#developチャンネルに投稿します。まず、#developチャンネルのIDを取得する必要がありますが、前回の実行から「C06A3AF8Z47」であることがわかっています。

投稿内容は以下のようになります：

タスクの依頼内容：記事のタイトルをキャッチーなものに変更する
途中のやり取りのサマリ：いくつかのタイトル案を提案し、ユーザーが「Clineの作業をSlackで見える化 - MCP連携で広がるチーム共有の可能性」を選択
タスクの結果：記事のタイトルを「Clineの作業をSlackで見える化 - MCP連携で広がるチーム共有の可能性」に変更
このタスクを完了させるために本当に必要だったプロンプト：「記事の内容を読んだうえで、エンジニアがslackのmcp連携を試したくなるキャッチーなタイトルを提案して」
それでは、Slack MCPツールを使用して投稿します。


Cline wants to use a tool on the Slack MCP server:
slack_post_message
Post a new message to a Slack channel
Arguments
{
  "channel_id": "C06A3AF8Z47",
  "text": "## タスクの依頼内容\n記事「Cline連携」のタイトルをエンジニアがSlackのMCP連携を試したくなるようなキャッチーなものに変更する\n\n## 途中のやり取りのサマリ\n1. 記事の内容を分析し、エンジニアの興味を引くタイトル案を複数提案\n2. 最初の提案は少し大げさだったため、より実用的なタイトル案を再提案\n3. ユーザーが「Clineの作業をSlackで見える化 - MCP連携で広がるチーム共有の可能性」を選択\n4. ACTモードに切り替えて記事のタイトルを変更\n\n## タスクの結果\n記事のタイトルを「Clineの作業をSlackで見える化 - MCP連携で広がるチーム共有の可能性」に変更しました。\n\nこのタイトルは以下の点で記事の内容を適切に表現しています：\n1. 「Clineの作業をSlackで見える化」の部分で、記事の主な機能を具体的に伝えています\n2. 「MCP連携」という技術的要素を含めることで、エンジニアの関心を引きます\n3. 「広がるチーム共有の可能性」という部分で、この機能の応用範囲の広さを示唆しています\n\n## このタスクを完了させるために本当に必要だったプロンプト\n「記事の内容を読んだうえで、エンジニアがslackのmcp連携を試したくなるキャッチーなタイトルを提案して」"
}

Slack MCPツールを使用して、#developチャンネル（チャンネルID: C06A3AF8Z47）にタスクのサマリを投稿しました。投稿は成功し、タイムスタンプは「1742100523.034219」です。

投稿内容には以下の情報が含まれています：

タスクの依頼内容：記事「Cline連携」のタイトルをエンジニアがSlackのMCP連携を試したくなるようなキャッチーなものに変更する
途中のやり取りのサマリ：タイトル案の提案と選択のプロセス
タスクの結果：選択されたタイトル「Clineの作業をSlackで見える化 - MCP連携で広がるチーム共有の可能性」とその特徴
このタスクを完了させるために本当に必要だったプロンプト：「記事の内容を読んだうえで、エンジニアがslackのmcp連携を試したくなるキャッチーなタイトルを提案して」
これでタスクは完全に完了しました。ユーザーの要望通りに記事のタイトルを変更し、その結果をSlackに投稿しました。


Task Completed
タイトルを「Clineの作業をSlackで見える化 - MCP連携で広がるチーム共有の可能性」に変更し、タスクのサマリを#developチャンネルに投稿しました。

投稿内容には以下の情報を含めました：

タスクの依頼内容
途中のやり取りのサマリ（タイトル案の提案と選択プロセス）
タスクの結果（選択されたタイトルとその特徴）
このタスクを完了させるために必要だったプロンプト
新しいタイトルは記事の内容を適切に表現し、エンジニアの興味を引くものになりました。

例2. Slack投稿の投稿内容を実行し、結果をスレッドに返信

Slackの投稿URLを入力すると、その内容を読み取って実行し、最後に結果をスレッドに投稿するようにしました。

read post and reply in thread

Clineとのやりとり内容
# User
https://w1702821650-xvv587266.slack.com/archives/C06A3AF8Z47/p1742096354267679


# Cline
まず、ユーザーからSlackのURLが提供されています。これはユーザーのカスタム指示に従って、そのSlackメッセージの内容を読み取り、実行するよう求められているようです。

Slackのメッセージを読み取るために、Slack MCPサーバーを使用する必要があります。環境詳細を見ると、Slack MCPサーバーが接続されているようです。

まず、提供されたSlackのURLからチャンネルIDとメッセージのタイムスタンプを抽出する必要があります。URLは以下のようになっています：
https://w1702821650-xvv587266.slack.com/archives/C06A3AF8Z47/p1742096354267679

ここから：

チャンネルID: C06A3AF8Z47
メッセージのタイムスタンプ: 1742096354.267679 (URLのp1742096354267679から、ピリオドを挿入して形式を修正)
次に、Slack MCPツールを使用してこのメッセージの内容を取得します。

まず、提供されたSlackのURLからメッセージの内容を取得します。


Cline wants to use a tool on the Slack MCP server:
slack_get_channel_history
Get recent messages from a channel
Arguments
{
  "channel_id": "C06A3AF8Z47",
  "limit": 10
}

Slackのメッセージを取得できました。最新のメッセージ（ts: 1742096354.267679）の内容は「誤字脱字をチェックして」というものです。

ユーザーのカスタム指示によると、「/slack と入力されたら#develop チャンネルに以下の内容を投稿して」とあります。また、「slackの投稿URLだけが入力されたら、その内容を読みとって実行してください。実行が完了したら、スレッドで対応した結果を返信してください。」とあります。

今回は後者のケースで、Slackの投稿URLが入力されました。その内容は「誤字脱字をチェックして」というものです。

現在の作業ディレクトリにある記事をチェックする必要があります。環境詳細から、現在開いているファイルは articles/Cline-with-slack-mcp.md のようです。この記事の誤字脱字をチェックする必要があります。

まず、この記事の内容を読み取ります。

Slackメッセージの内容を確認しました。最新のメッセージは「誤字脱字をチェックして」という依頼です。現在開いているファイル articles/Cline-with-slack-mcp.md の誤字脱字をチェックします。

まず、記事の内容を確認します。

記事の内容を確認しました。これから誤字脱字をチェックします。以下の点に注目して確認します：

誤字脱字
文法の誤り
表現の不自然さ
句読点の使い方
一貫性のない表現
見つけた問題点を整理し、修正案を提示します。

記事の誤字脱字をチェックしました。以下の修正点を見つけました：

「やること」セクション：

「Slack投稿することで」→「Slackに投稿することで」
「とうのがモチベーション」→「というのがモチベーション」
「目的は割とこじつけです」→「目的は割と後付けです」
「セットアップ」セクション：

「特にエラーがでなければ」→「特にエラーが出なければ」
「custom instructionsの設定」セクション：

「/slack と入力されたら #develop チャンネルに」→「/slack と入力されたら#develop チャンネルに」（スペースの一貫性）
これらの修正を記事に適用します。

記事の修正が完了しました。次に、Slackのスレッドに対応結果を返信する必要があります。

Slackのメッセージは以下のURLでした：
https://w1702821650-xvv587266.slack.com/archives/C06A3AF8Z47/p1742096354267679

このURLから：

チャンネルID: C06A3AF8Z47
メッセージのタイムスタンプ: 1742096354.267679
これらの情報を使って、Slack MCPツールを使用してスレッドに返信します。返信内容には、誤字脱字のチェック結果を含めます。

誤字脱字のチェックが完了しました。次に、Slackのスレッドに対応結果を返信します。

Cline wants to use a tool on the Slack MCP server:
slack_reply_to_thread
Reply to a specific message thread in Slack
Arguments
{
  "channel_id": "C06A3AF8Z47",
  "thread_ts": "1742096354.267679",
  "text": "## タスクの依頼内容\n記事の誤字脱字をチェックする\n\n## 途中のやり取りのサマリ\n1. 記事「ClineとMCPでSlackに作業サマリを投稿する」の内容を確認\n2. 誤字脱字や表現の不自然さをチェック\n3. 修正点を特定して適用\n\n## タスクの結果\n以下の4箇所を修正しました：\n1. 「Slack投稿することで」→「Slackに投稿することで」\n2. 「とうのがモチベーション」→「というのがモチベーション」\n3. 「目的は割とこじつけです」→「目的は割と後付けです」\n4. 「特にエラーがでなければ」→「特にエラーが出なければ」\n\n## このタスクを完了させるために本当に必要だったプロンプト\n「誤字脱字をチェックして」"
}


Slackのスレッドへの返信が成功しました。これで、タスクは完了です。

記事の誤字脱字をチェックし、4箇所の修正点を見つけました。
修正内容を記事に適用しました。
Slackのスレッドに対応結果を返信しました。
タスクの完了を報告します。


Task Completed
記事「ClineとMCPでSlackに作業サマリを投稿する」の誤字脱字チェックを完了し、4箇所の修正を行いました。また、Slackスレッドに対応結果を返信しました。

修正内容：

「Slack投稿することで」→「Slackに投稿することで」
「とうのがモチベーション」→「というのがモチベーション」
「目的は割とこじつけです」→「目的は割と後付けです」
「特にエラーがでなければ」→「特にエラーが出なければ」
Slackへの返信も正常に完了しました。

例3. チャンネルの最新N件の投稿内容をサマリして投稿

latest posts summary

Clineとのやりとり内容
# User
/ss 8


# Cline
ユーザーが /ss 8 というコマンドを入力しました。これは、Slackの#developチャンネルの最新の投稿8件を取得してサマリし、#developチャンネルに投稿するというタスクです。

前回は5件を取得しましたが、今回は8件を取得する必要があります。まず、#developチャンネルのIDを取得し、次に最新の投稿8件を取得し、それらをサマリして、最後に#developチャンネルに投稿します。

#developチャンネルのIDは前回の実行で「C06A3AF8Z47」であることがわかっているので、そのまま使用します。

ユーザーが /ss 8 と指定したので、#developチャンネルの最新の投稿8件を取得します。


Cline wants to use a tool on the Slack MCP server:
slack_get_channel_history
Get recent messages from a channel
Arguments
{
  "channel_id": "C06A3AF8Z47",
  "limit": 8
}

#developチャンネルの最新の投稿8件を取得しました。これらの投稿をサマリして、#developチャンネルに投稿します。

取得した投稿は以下の通りです：

前回投稿した#developチャンネル最新投稿サマリ
「誤字脱字をチェックして」というメッセージ（スレッドあり）
Slack Appの作成手順を日本語で説明し、記事に追加したという報告
記事のプレビュー表示に関する報告
GitHub Retroのビルドと実行に関する報告
GitHub Retroのレビューコメント取得機能追加に関する報告
Pull Requestのbodyフィールド取得の実装に関する報告
#developチャンネルのすべての投稿に:thumbsup:のリアクションをつけるタスクの報告
これらの投稿をサマリして、#developチャンネルに投稿します。ただし、1つ目の投稿は前回のサマリなので、これを除いた7件をサマリします。

最新の投稿8件を取得しました。前回のサマリを除いた7件をサマリして#developチャンネルに投稿します。

Cline wants to use a tool on the Slack MCP server:
slack_post_message
Post a new message to a Slack channel
Arguments
{
  "channel_id": "C06A3AF8Z47",
  "text": "# #develop チャンネル最新投稿サマリ (8件)\n\n## 1. 誤字脱字チェック依頼 (2025/3/16)\n- ユーザーが「誤字脱字をチェックして」と依頼\n- スレッドに返信あり\n\n## 2. Slack App設定手順の追加 (2025/3/16)\n- Slack Appの作成手順を日本語で記事に追加\n- アプリをチャンネルに招待する手順も含めて説明\n- 設定手順、Bot Token Scopes、インストール方法、トークン取得方法などを詳細に記載\n\n## 3. 記事プレビュー表示 (2025/3/16)\n- 「ClineとMCPでSlackに作業サマリを投稿する」記事のプレビュー確認\n- 記事構成：「やること」「セットアップ」「実行例」「所感」の4セクション\n- 画像追加予定箇所あり、「実行例」と「所感」セクションは今後充実予定\n\n## 4. GitHub Retroビルド・実行手順 (2025/3/16)\n- ビルド方法：`npm run build`\n- 実行に必要な環境変数：GITHUB_TOKEN, OPENAI_API_KEY, GITHUB_TARGET_USERNAME, RETRO_DAYS\n- 実行コマンドと注意事項（APIレート制限、課金、処理時間）を説明\n\n## 5. GitHub Retroレビューコメント取得機能追加 (2025/3/15)\n- GraphQLクエリを修正してレビューコメントの本文も取得するよう実装\n- 型定義とデータ処理を更新\n- プルリクエスト内のレビューとユーザーレビューの両方のコメント内容を取得可能に\n\n## 6. Pull Requestのbodyフィールド取得実装 (2025/3/15)\n- GraphQLクエリにPull Requestのbodyフィールドを追加\n- 3つのファイルを修正：userActivity.graphql, github.ts, github.ts（型定義）\n- Pull Requestの説明文を取得可能に\n\n## 7. Slackリアクション追加タスク (2025/3/13)\n- #developチャンネルの投稿に👍リアクションを追加\n- 「READMEの英語版追加」と「hello world」の投稿に実施"
}

タスクが完了しました。#developチャンネルの最新の投稿8件をサマリして、#developチャンネルに投稿しました。投稿は成功し、メッセージIDは「1742098327.797369」です。

ユーザーのコマンド /ss 8 に対して、以下の処理を行いました：

Slackの#developチャンネルのIDを取得（C06A3AF8Z47）
#developチャンネルの最新の投稿8件を取得
前回のサマリを除いた7件の投稿をサマリして、#developチャンネルに投稿
これでタスクは完了です。

Task Completed
#developチャンネルの最新投稿8件をサマリして投稿しました。前回のサマリ投稿を除いた7件の内容を整理し、以下の情報を含めました：

誤字脱字チェック依頼
Slack App設定手順の追加に関する報告
「ClineとMCPでSlackに作業サマリを投稿する」記事のプレビュー確認
GitHub Retroのビルドと実行手順
GitHub Retroのレビューコメント取得機能追加
Pull Requestのbodyフィールド取得実装
Slackリアクション追加タスク
投稿は正常に完了し、チャンネルに表示されています。

セットアップ

必要なもの

  • vscode
  • Cline
  • Node.js
  • slackアカウント

手順

1. Slack Appの設定

Slack APIを利用するためのアプリを作成します。

  1. Slack API Apps ページにアクセスします
  2. 「Create New App」ボタンをクリックします
  3. 「From scratch」を選択します
  4. アプリ名を入力し、使用するワークスペースを選択します
  5. Bot Token Scopesを設定します：
    • 「OAuth & Permissions」ページに移動
    • 以下のスコープを追加します：
      • channels:history - 公開チャンネルのメッセージを閲覧する権限
      • channels:read - チャンネル情報を閲覧する権限
      • chat:write - メッセージを送信する権限
      • reactions:write - 絵文字リアクションを追加する権限
      • users:read - ユーザー情報を閲覧する権限
  6. ワークスペースにアプリをインストールします：
    • 「Install to Workspace」をクリックしてアプリを認証します
    • 表示される「Bot User OAuth Token」（xoxb-で始まる）を保存します（このトークンはSlackのAPIを利用するための認証キーとして使用します）
  7. Team ID（Tで始まる）を取得します
  8. アプリをチャンネルに招待します：
    • 投稿したいチャンネルで /invite @アプリ名 と入力します

これらの情報は次のステップでMCP設定に使用します。また、アプリはメッセージを投稿したいチャンネルに必ず招待しておく必要があります。

2. cline_mcp_settings.jsonの設定

ClineのMCP Servers > Installed > Configure MCP Serversをクリックします。

mcp setting

Cline_mcp_settings.jsonが開かれるので、次の内容を記載します。
SLACK_BOT_TOKENSとSLACK_TEAM_IDは先ほど取得した値を指定します。

{
  "mcpServers": {
    "github.com/modelcontextprotocol/servers/tree/main/src/slack": {
      "command": "/Users/2bo/.asdf/shims/npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-slack"
      ],
      "env": {
        "SLACK_BOT_TOKEN": "xoxb-xxxxxxxxx",
        "SLACK_TEAM_ID": "Txxxxxxxxx",
        "ASDF_DATA_DIR": "/Users/2bo/.asdf",
        "ASDF_NODEJS_VERSION": "23.6.0"
      },
      "disabled": false,
    }
  }
}

なお、私の環境ではSlack MCP ServerのREADMEの設定通りだとうまくいかず、次のエラーが発生しました。

unknown command: npx. Perhaps you have to reshim? MCP error -1: Connection closed

これは、asdfでNode.jsをインストールしている環境特有の問題です。次の設定を追加することでエラーを回避することができました。

  • commandにnpxの絶対パスを指定
  • ASDF_DATA_DIRとASDF_NODEJS_VERSIONの環境変数を指定

標準的なNode.jsインストール環境では、これらの追加設定は不要と思われます。
指定する場合、絶対パスは自身の環境に応じて指定してください。

設定が成功すると、次のように表示されます。

success slack mcp setting

3. Custom Instructionsの設定

Clineへの指示を簡単にするために、Custom Instructionsに次の内容を記載します。

# slack

## Slack投稿
`/slack` と入力されたら #develop チャンネルに以下の内容を投稿してください。

```
## タスクの依頼内容
## 途中のやり取りのサマリ
## タスクの結果
## このタスクを完了させるために本当に必要だったプロンプト
```

## Slack投稿内容の実行とスレッド返信
slackの投稿URLだけが入力されたら、その内容を読みとって実行してください。
実行が完了したら、スレッドで対応した結果を返信してください。


## Slack Summary
`/ss`と入力されたら、#develop チャンネルの最新の投稿5件を取得してサマリして、#developチャンネルに投稿してください。
`/ss 10`のように後ろに数字が指定されてる場合は、最新のその件数分をサマリしてください。

Slack投稿については、当初Task Completedになったら自動で投稿するように指示してみたのですが、実際にそうなったときに投稿されないことが多かったです。
そのため/slackで明示的に指示する内容にしました。

セットアップは以上になります。

所感

MCPの設定や利用は簡単にできますが、開発のなかでそれを有効に活用する方法を見つけ出すことが一番のポイントだと感じます。

本記事ではSlack連携の目的をClineに依頼したタスク内容の共有や記録としています。しかし、Slack連携やタスクの共有の観点では、Devinの方が優れています。タスクの記録であればMCPをつかわなくても、ローカルのファイルに書き出すようにClineに依頼すれば十分そうです。

いくつかの実行例を示しましたが、それらを実際の開発現場で使う必然性はそこまでないと考えています。もしかしたら、もっと有効な利用方法があるかもしれません。

個人的に試したのみで、実際にチームで運用していませんが、この実験を通じて生成AIやそれをとりまくエコシステムはどんどん進化していることを実感しました。それをうまく活用してアウトカムを出すための発想力の重要性を感じます。

参考

https://github.com/modelcontextprotocol/servers/tree/main/src

https://note.com/gokoku_houjou/n/ndd83037cfc2f

Discussion