【MCP】Visual Studio Codeの GitHub Copilot Agent ModeでSlackと連携するまでの設定

## はじめに
絶賛話題沸騰中の、MCPサーバー。Slackと連携させるといい感じに最新の投稿を分析してくれたり、内容を解析してくれたりするので、使ってみようと思った。

同時に過去のslackの情報を遡って検索できたらいいなあと思い、やってみることにした。

この記事は設定周りについてまとめる。

## 必要な準備
Slack MCPサーバーで連携して、応答できるようになるまでにはやることが多く存在します。

ざっくりいうと....

- Slack ワークスペース
    - メッセージ取得・送信可能なチャンネル・ユーザー
- Slack App
    - Bot Token取得。必要スコープ設定
- MCPサーバー
    - Node.js/python環境
- MCPホスト
    - Vscode、Claude Desktop
- セキュリティ（ちゃんと会社で使うのなら検討する必要がある）
    - Token管理・暗号化・アクセス制御

1つずつ確認して進める。

### Slackワークスペースの用意

こちらのページから[サインアップ](https://slack.com/get-started#/createnew)する必要がある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/d70ff997-ee0f-496f-b5bf-40ff535e20a8.png)

何かしらのアカウントでログインをして、ワークスペース名を選択する。

### Slack Appの作成

Slack MCPサーバーはこのSlack Appから呼び出す。
[こちら](https://api.slack.com/apps)で作成する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/8d55183a-919d-4dd1-adad-63ec2b60f3ff.png)

引き続き、Appをインストールするワークスペースを選択する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/6774befa-32f4-47e2-83e3-d4a5af033e20.png)

次にこちらの設定をする。
あとで変更可能なのでどちらのオプションでも大丈夫ですが、`From scratch`を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/29d531ee-8c4c-4393-b3fa-1af794dd9ea4.png)


そして、Slackのアプリケーション名とワークスペースを選択し、`Create App`を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/e9437119-a904-4234-9e58-dc464d363c80.png)


左サイドバーの`OAuth & Permissions`タブ画面で、下の画面の方にあるBot Token Scopesを選択し、以下の Scope を追加する。

- `channels:history`
    - 指定したチャンネルのメッセージ履歴を最新のものから取得する
- `channels:read`
    - チャンネルの基本情報を閲覧する
- `chat:write`
    -  アプリとしてメッセージを送信する
- `reactions:write`
    - メッセージに絵文字リアクションを追加
- `users:read`
    - ユーザーとその基本情報を閲覧する
- `users.profile:read`
    - これは不要だったかも

こちらはSlackのMCPサーバーに必要な権限です。

※ あとで追記します。

### SlackワークスペースへSlack Appをインストールする

作成したSlack Appを利用できるようにワークスペースへインストールします。

左サイドバー`Install App`を選択。

`Install to ${ワークスペース名}`になっていると思うので、そのボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/f080a4d4-e0bb-418d-ace3-8d8efa5e5f20.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/d6b776be-b232-4a1f-8923-fa37aee8aa72.png)

上記のような権限の画面ができてきたら、許可するを選択してください。

そうすると、「Bot User OAuth Token」が生成されます。このトークンを用いて認証を実施します。

なので、このトークンの情報はコピーしてください！

### Slack MCP Serverで必要な環境設定値
以下、2つの環境変数が必要になります。

- `SLACK_BOT_TOKEN`
- `SLACK_TEAM_ID`

SLACK_BOT_TOKENは先ほどコピーしたものを使用してください。

一方でSLACK_TEAM_IDは、Slackのワークスペースにあるものを使ってください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/a0574835-aac2-4f5d-a348-6506f7a451c2.png)

`http://{SLACK_TEAM_ID}.slack.com`

slack.comの前のものがこれに当たります。

### MCPサーバーの設定
今回は、Visual Studio Codeを使ってお手製のものを使用します。
Claude Desktopなどを使用される方は以下の記事が参考になると思います。

https://qiita.com/revsystem/items/b7904fc53a72ef3ba02a

自分は、Node.jsで環境をたちあげましたが、他にいい方法がある方はぜひそちらを利用ください。

ここで、サーバーリソースをnpmリポジトリからダウンロードして npx で動作させる方法をやろうと思ったのですが、Githubアクセストークンが必要なようで.....

Github アクセストークンをまずは発行します。

### Githubアクセストークン発行方法

自分のGitHubにいき
`settings > Developers Settings > Personal access tokens > classic`と選択

必須スコープは`read:packages`です。

こちらの記事が参考になりました。

https://qiita.com/RyutoYoda/items/c6908025c0aef4b35cdd

作成できたら、ホームディレクトリに、`~/.npmrc`ファイルを作成し記述、保存します。

:::note warn
スペースには注意してください！！
:::

```.npmrc
@ubie-oss:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_PERSONAL_ACCESS_TOKEN
```

自分のNode.jsのバージョンは22だったような...
```
$ node -v
v22.14.0
```

自分が作業したいディレクトリに移動して、[以下のパッケージ](https://www.npmjs.com/package/@modelcontextprotocol/sdk)をインストール

```
npm install @modelcontextprotocol/sdk
```

### MCP関連の設定をVscodeで実施

MCPの設定を足します。Vscodeを開いて、設定アイコンをクリックし「設定」を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/58bf40c3-1512-4e6f-8ad5-8decde588513.png)

「mcp」と検索キーワードで打つと、setting.jsonが出てくると思うのでそこから編集してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/87c5868c-960d-4a6f-9b80-73237ba7b421.png)

編集を選択したら以下の画面がでてきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/1b861c7b-371c-42d8-8ee0-2855b80c1688.png)

デフォルトだとpythonが書かれているのかな？

```setting.json
{
    "mcp": {
    
        "inputs": [],
        "servers": {
            "mcp-server-time": {
                "command": "python",
                "args": [
                    "-m",
                    "mcp_server_time",
                    "--local-timezone=America/Los_Angeles"
                ],
                "env": {}
            }
        }
    }
}
```

今回は`Node.js`を使うので以下のような設定にしました。

```setting.json
"mcp": {
    "inputs": [],
    "servers": {
      "slack": {
        "command": "npx",
        "args": [
          "-y",
          "@modelcontextprotocol/server-slack",
          "/Users/${Macユーザ名}/Projects/DevDay" // 自分の作業をしているディレクトリのパスを指定する
        ],
        "env": {
          "SLACK_BOT_TOKEN": "tokenをコピーする", // bot token
          "SLACK_TEAM_ID": "team_idをコピーする" // teamId
        }
      }
    }
  },
  "workbench.settings.applyToAllProfiles": []
}
```

これで保存しちゃってください。

### MCPサーバー起動
そして、MCPサーバーを起動します。
小さい`▶️起動`を押すとサーバーが立ち上がります。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/af37deaf-3b58-4358-a29f-1ae254da6bec.png)

### GitHub Copilot Agent Modeを開く
VS Code Insider版で GitHub Copilot のチャットを開き、そしてメニューを変更してエージェントに切り替えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/115e2c0e-6b3e-4b27-a487-c45377d205c7.png)


:::note warn
こいつをちゃんと、指定しないとSlackとおしゃべりできないので要注意です！！
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/1fdb5e25-1938-4c4e-a18e-d03c466440b0.png)

- Agent
- コンテキストの追加のsettings.json

こちらに設定ができたら完了です。

チャットがちゃんと機能しているとこのように注意のダイアログがでてきます。特に変なものでなければ続行ボタンをクリックしてもらうと、ちゃんと会話が進んでいきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627753/cbe45039-14b3-4887-a2bb-ec9c6bf1f0c4.png)


## おわりに
いかがだったでしょうか？設定して実際に使うまでは、かなり長いのではないのかなと思います。

サイトによっては大事なアクセストークンの取得等の設定が抜けていたりするので、ちょっと試してみたい！とかいじってみたい！というときはこちらを参考にしてもらえると幸いです。

情報で足りていないところがあればまた書き直します。

## 参考
https://qiita.com/revsystem/items/b7904fc53a72ef3ba02a

https://azure-ai-agent.hatenablog.com/entry/2025/04/15/Copilot-MCP-Slack