MCPを使ってnotionをClaude Desktopから操作する!

## はじめに
先日、MCPがAnthropicから発表されましたが、実際何ができるの？と疑問を持たれた方もいると思います。
この記事では一例としてMCPを使って、Claude Desktopからnotionを操作する方法を紹介します!

## 背景
実は、mcp serverにnotion serverを実装したPRを出していて、これがマージされたら解説記事を出そうかなと考えていました。しかしmcpではスケーラビリティの観点からサーバーを一元管理するのではなく、個々でホストする方向に向かいそうなので、最悪クローズされても、誰かに使ってもらいたという思いからこの記事を書きました。([該当のdiscussion](https://github.com/orgs/modelcontextprotocol/discussions/32))

https://github.com/modelcontextprotocol/servers/pull/129

## 準備
###  MCP Notion Serverのセットアップ
すぐ使えるように[リポジトリ](https://github.com/suekou/mcp-notion-server)を作ったので、こちらをクローンしてください。
```
git clone https://github.com/suekou/mcp-notion-server.git
```
次に以下のコマンドを実行してください
```
cd notion
npm run build
npm link
```
実行後に、`notion/build/index.js`が作成できていたら大丈夫です。

### Notion API トークンの準備
MCP serverがnotionにアクセスできるようにnotionのapiトークンを発行します。
[integrationsページ](https://www.notion.so/profile/integrations)から、New Integrationsを選択してください。
そうすると、フォームが出てくるので、インテグレーション名を記入し、ワークスペースを選択してください。TypeはデフォルトのInternalのままで大丈夫です。
作成が完了すると、作成したインテグレーションの詳細画面に行けるので、そこで
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522149/07e0d5a3-460b-61c2-204e-8aa4e9a36b3d.png)
Show → Copyでトークンを持っていてください。

### claude_desktop_config.jsonを編集
```
code ~/Library/Application\ Support/Claude/claude_desktop_config.json
```
から、claude_desktop_config.jsonを編集します。
以下のように、`args`にはbuildした`notion/build/index.js`のパス(例: /Users/<YOUR_USERNAME>/Desktop/mcp-notion-server/notion/build/index.js)と、`NOTION_API_TOKEN`には先程取得したトークンをペーストしてください。

```
{
  "mcpServers": {
    "notion": {
      "command": "node",
      "args": [
        "buildしたファイルのパス"
      ],
      "env": {
        "NOTION_API_TOKEN": "先程取得したトークン"
      }
    }
  }
}
```
他にもサーバーを設定している場合は、以下のようになります。
```
{
  "mcpServers": {
    "sqlite": {
      "command": "uvx",
      "args": [
        "mcp-server-sqlite",
        "--db-path",
        "/Users/USER_NAME/test.db"
      ]
    },
    "notion": {
      "command": "node",
      "args": [
        "/Users/USER_NAME/Desktop/mcp-notion-server/notion/build/index.js"
      ],
      "env": {
        "NOTION_API_TOKEN": "API_TOKEN"
      }
    }
  }
}
```

### インテグレーションと接続
先程インテグレーションを設定したワークスペース内に適当なページを作ってください。
そうしたら右上の詳細ボタンを押し、Connect toから先程作成したインテグレーションを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522149/6670cd11-29c0-bc82-c9b5-56835eb0e35b.png)

次に、現在いるページのurlからpageのidを取得します。
https://www.notion.so/mcp-test-notion1234server567apiintegration890 のように後ろに32字のアルファベットと数字の文字列があるので、これをコピーしておいてください。こちらの例で言うと、notion1234server567apiintegration890がpageのidです。

## 実際に使ってみよう!
### 記事を保存してみよう
既にClaude Desktopを開いている場合は、再起動してください。
起動後にトンカチマークを押してみて、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522149/01a917c3-a5aa-33fc-de84-5f2c79c7a49a.png)


From serverにnotionの名前があったら使える状態です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522149/a78c067f-b4e8-0778-3254-1c61f851e42b.png)

まずは、適当な記事を書いてもらいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522149/5841bd3d-1f6f-117a-9136-a322e0d7a8b6.png)

記事ができたら
"この内容をnotionの<先程コピーしたpage id>に保存したい"と送信してください。
そうすると、以下のようにtoolの使用許可を求められるので許可してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522149/31575b8f-9975-70e1-6f87-8e019a9d95e1.png)

実行後に、以下のようにページに記事の内容が保存されているはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522149/20d84716-7e8f-0039-2cb8-e6023cd088d9.png)

### DBを使ってみよう
今度は適当なDBを作ってもらいましょう。
私の場合は、映画についてのDBを作ってもらいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522149/e4b8bdf3-1c35-201b-6879-3acbafdd5d4f.png)

ページを確認すると、ちゃんと出来上がってます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522149/2a8407e1-705c-a245-37f4-fa626bf7ab3f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522149/f8ef88e5-3726-5389-23e0-84a443c82dbc.png)

できたDBに適当な情報を挿入します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522149/b8d08174-7de6-6cc0-abaa-4211e45bfc77.png)

次にClaudeに"評価が⭐️⭐️⭐️⭐️⭐️の映画を教えて"と聞いてみます。
そうすると、、、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522149/4d5552b8-fbdf-8ac5-ea2f-1f68417dd9b8.png)

評価が⭐️⭐️⭐️⭐️⭐️の映画をリストできました!!


## 最後に
今回この記事で紹介しているのは３つの機能だけですが、他にもNotion MCP Serverには、たくさん機能を実装したので、ぜひいっぱい触ってみてください!!
例えばpdfやパワポをまとめさせて、notionに転記させるなど工夫次第で活用方法は多くあると思います。
さらにソースコードを改変すれば、もっと多様なユースケースにも対応できると思います。改変したものや、こんなのもできた！などありましたら、後学のためにも報告していただけるとありがたいです🙇
最後まで読んでいただきありがとうございました👋