LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@potofo(potofo)

Roo CodeでMCPサーバを駆使してNotion記事作成

Last updated at Posted at 2025-04-19

image.png

１．はじめに

Anthropic社は2024年11月24日、MCP（Model Context Protocol）を公開しました。MCPはオープンソース標準規格、セキュアなコンテキスト管理、レイヤードアーキテクチャを採用しており、業界から大きな注目を集めています。

この発表を受けて、2025年3月25日にMicrosoftがplaywright-mcp-serverを発表し、続く3月26日にはOpenAIが自社の言語モデル製品群でのMCP対応を表明しました。

MCPが注目を集める具体的なポイント：

MCPの主要な特長一覧

No 特長 説明
1 オープンソース標準規格 AIと外部システムの接続を統一化し、開発者が個別のAPI統合を不要にした点が革新的。例えば、GitHubやSlackなどのプラットフォームがMCP対応することで、AIが開発環境やコミュニケーションツールと直接連携可能に。
2 セキュアなコンテキスト管理 データアクセス権限をOAuth 2.1で制御し、ユーザーがAIに許可する操作範囲を細かく設定できる仕組みを導入。これにより医療情報（HIPAA準拠）や金融データの安全な連携が可能に。
3 レイヤードアーキテクチャ 会話履歴やブランドガイドラインなどのコンテキストを層別管理し、AIが複数情報源を優先順位付けしながら回答生成できる設計が特徴。これにより従来のプロンプトエンジニアリングより10倍効率的なシステム構築が可能になった事例も報告されています。

２．MCPサーバとは

MCP（Model Context Protocol）は、2024年11月24日にAnthropic社が発表した新たなAIモデル間通信オープンプロトコルです。
このプロトコルは、複数のAIモデルが協力して作業を行う際に、各モデルが持つコンテキストや理解を共有するための標準化された方法を提供します。
Anthropicによる発表以降、主要なAI企業や研究機関がMCPへの対応を表明しています。オープンソースコミュニティでも積極的な採用が進み、様々なAIフレームワークやライブラリへの実装が進んでいます。
一方で、AIモデル間の連携には新たな課題も指摘されています。セキュリティリスク、責任所在の不明確さ、モデル間の相互依存によるシステムの複雑化などです。これらの課題に対応するため、ガイドラインや技術的解決策の開発が並行して進められています。
MCPはClaude for Desktopに代表されるMCPホスト、MCPサーバを呼び出すためのMCPクライアント、そして生成AIがサービスやコンピュータリソースにアクセスするためのMCPサーバから構成されています。Norah SakalさんがUSBに例えて表現した次の画像がとても分かりやすいです。

MCP architecture.png

Norah Sakalさんの「What is Model Context Protocol (MCP)? How it simplifies AI integrations compared to APIs」記事から引用

この記事ではVS Codeの拡張機能であるRoo CodeからBrave Searchで情報検索し、Notionに記事を投稿することまでをまとめます。

３．前提条件

ここでは、VSCodeのRoo CodeでNotion記事を作成するために必要なアプリケーションをまとめます。セキュリティを重視するため、Communityや個人が作成したMCPサーバは使用せず、Anthropicが運営するmodelcontextprotocol/servers (GitHub)ページの「Reference Servers」と「Official Integrations」に分類されているMCPサーバのみを使用します。

MCPサーバーを利用することはセキュリティ的に安全か？記事を執筆されたarrowkatoさんに感謝いたします。

No アプリケーション 説明
1 Visual Studio Code Microsoftが開発したVSCode(Visual Studio Code)は、高機能で拡張性の高いコードエディタです。MCPサーバを利用するためのRoo Code拡張機能をインストールして使用します。
2 Roo Code VSCode用の拡張機能で、自律型エージェントによるAIコーディング支援ツールです。Roo CodeはMCPサーバに対応しており、MCPサーバを介して、様々なサービスやコンピュータリソースを自立型エージェントから利用することができます。
複数のMCPサーバを管理し、AIモデルとの効率的なコミュニケーションを実現します。
3 Node.js (22.14.0) MCPサーバが提供するnpxパッケージを、Node.js環境にインストールせずに実行できる環境です。
4 Brave Search(MCPサーバ) AnthropicのModel Context ProtocolリポジトリでPull Request審査を経て「Reference Servers」に登録された、Brave Search APIを利用するMCPサーバです。信頼性が確認されています。

メールアドレスとクレジットカードの登録が必要ですが、以下のプランが用意されています：
・Proプラン：無制限クエリ/月、50クエリ/秒（9ドル/月）
・Basicプラン：2,000万クエリ/月、20クエリ/秒（5ドル/月）
・Freeプラン：1,000クエリ/月、1クエリ/秒 (*1)

参照元：Braveサーチ API Brave
5 Notion(MCPサーバー) AnthropicのModel Context Protocolリポジトリで「Official Integrations」として登録された、Notion操作用MCPサーバです。Notion社自身が開発しているため、信頼性が高いです。

この記事の範囲外ではありますが、Microsoftが開発したplaywright-mcpサーバとelasticsearch-mcp-serverについても検証を実施し、それぞれ固有のメリットとデメリットが明らかになりました。
Brave Searchを選択したのは、playwright-mcpでのロボット検出の問題を避けるためです。ただし、企業内での利用においては、playwright-mcpのOkta認証機能が大きな利点となります。

No MCPサーバ メリット デメリット 備考
1 playwright-mcp ・Okta認証
ブラウザにmsedgeを指定し、playwright-mcpから立ち上がったEdgeブラウザでMicrosoftアカウントでサインインしておくとMicrosoft Entra IDでOkta認証しているサイトはSSO(Single Sign On)が可能です。
・SSE(Stdio Server Transform)
多くのMCPサーバはStdio方式ですが		 ・ロボット摘出
Google検索などを行わせるとGoogleサイトでロボット検出されてしまいとまることがあります。		 Microsoft版とexecuteautomation版があります。
https://github.com/modelcontextprotocol/serversで紹介されているplaywright MCPサーバは「community Servers」に分類されているので選択していません
2 https://github.com/elastic/mcp-server-elasticsearchelasticsearch-mcp-server ・自然言語によるデータ操作
MCPサーバーを介して、ユーザーは自然言語でクエリを実行できます。たとえば、「先月の500ドル以上の注文を表示して」といったリクエストが可能です
・CRUD操作のサポート
ドキュメントの作成（Create）、読み取り（Read）、更新（Update）、削除（Delete）を行うためのAPIが提供されています。これにより、ユーザーはインデックスに対して直接操作を行うことができます		 ・書き込み制限
MCPサーバーは、Elasticsearchのデータストリームに対して書き込みを行う際、最も新しいインデックスにのみ書き込みが可能です。既存のインデックスに対して直接ドキュメントを追加することはできませんが、クエリAPIを使用してドキュメントの更新や削除は可能です		 ー

(*1) Brave Searchダッシュボード
Brave Searchダッシュボード.png

  • playwrightでMicrosoft Edgeを指定する方法
npx @playwright/mcp@latest --browser=msedge
  • その他試してみたプロンプト
Brave SearchでAnthropic MCPについて検索し、その概要をmcp-summary.mdというファイル名で保存してください。

Playwrightでブラウザを使ってYahoo!!最新ニュースから生成AI関連のニュースを３件取得して概要をyahoo_genai_news.mdに保存してください

Playwrightを使って食べログのお知らせページ(https://tabelog.com/notice/lst/ )でフォローされた一覧をtabelog-folow.mdにまとめてください。

Playwrightを使ってでWEELのトップページ(https://weel.co.jp/)にあるニュース３件を画像付きのMarkdownで一覧としてweel-news.mdにまとめてください。

４．通信方式

MCPサーバとMCPクライアント間の通信方式には大きくStdio方式とStreamable HTTP方式、SSE(Server-Sent Event)方式(非推奨)があります。

No 通信方式 説明 備考
1 Stdio MCPサーバを呼び出す際に標準入出力を用いてJSON-RPC 2.0形式のデータで命令を実行する方式
npxなどでパッケージをインストールすることなくコンピュータ内でMCPサーバを起動するには良い方式です。		 ー
2 Streamable HTTP MCPサーバとMCPクライアントがネットワークを介して通信する方式
SSE(Server-Sent Event)方式がステートフル（状態を管理して動作）に対してステートレス（サーバ側で状態は管理しないため）長時間のくくり付きが無く推奨される方式です
 ー
3 SSE(Server-Sent Event) MCPサーバとMCPクライアントがネットワークを介してSSE(Server-Sent Event)方式で命令を実行する方式
2025年4月19日時点では殆どがこの方式を採用していますが、今後はステートレスでより柔軟なStreamable HTTP方式に切り替わっていくことが推奨されています。
DifyなどのコンテナベースにアプリケーションからMCPサーバを使用したり、企業内でMCPサーバを準備して、ユーザから利用させるなどの用途に使えそうです。		 ー

５．MCPサーバの起動方式

大きく分類して３タイプがあると思います。この概念は必ず理解する必要があります。
このMCPサーバの柔軟性が初学者にはハードルが高過ぎました。
基本的に#1のパッケージ実行方式にするのが簡単で良いと思います。
正式な名前があるのかもしれませんがわからないためここでは、私が分類した起動方式で自分勝手に起動方式の名前を定義しました。

No 起動方式 説明 例
1 パッケージ実行方式 Node.jsやPythonのパッケージをコマンド実行する方式
多くのMCPサーバはNode.jsのnpxパッケージで提供されることが多いので、この方式が一番シンプルで簡単です。
Node.jsのnpm方式ではパッケージをNode.jsでグローバル領域にインストールしなくてはいけませんが、npx方式ではインターネットからその都度ダウンロードしてNode.js環境を汚さず、インストールできます。
企業なのでセキュリティを考慮する場合はnpm方式で実行することで、ローカルにインストールした

🚩ポイント
①npxでパッケージをその都度ダウンロードして実行し、Stdioで接続する
　(npmでパッケージをインストールする必要はありません）

注意
この書き方はサイトに紹介に典型的な例ですが、.cmdの拡張子の実行プログラムが未定義なので、私のWindows環境ではそのままでは動きませんでした。後述する「Windows環境でのハマりポイント」を参照し、command、argsを書き換える必要があります。 		Brave MCP Serverの例
{
"mcpServers": {
"brave-search": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-brave-search"
],
"env": {
"BRAVE_API_KEY": "YOUR_API_KEY_HERE"
}
}
}
}
2 スクリプト実行方式(docker方式) Windowsにdocker desktopをインストールしてdockerコンテナとして、その都度、MCPサーバを起動し、Stdio方式でMCPホストとdockerコンテナを接続する方式

企業ではdocker desktopの商用ライセンス問題があり

🚩ポイント
①MCPサーバをdockerコンテナで動作させStdioで接続する		 Brave MCP Serverの例
{
"mcpServers": {
"brave-search": {
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"-e",
"BRAVE_API_KEY",
"mcp/brave-search"
],
"env": {
"BRAVE_API_KEY": "YOUR_API_KEY_HERE"
}
}
}
}
Brave MCP Serverの例（wsl経由)
{
"mcpServers": {
"brave-search": {
"command": "wsl",
“docker”
"args": [
"run",
"-i",
"--rm",
"-e",
"BRAVE_API_KEY",
"mcp/brave-search"
],
"env": {
"BRAVE_API_KEY": "YOUR_API_KEY_HERE"
}
}
}
}
3 ネットワーク通信方式 SSEなどに対応したMCPサーバをSSEモードで起動しておき、ネットワーク越しに接続する方式

dockerコンテナで動かしておき、urlパラメタに接続先を書くだけでつながります。
APIキーなどを設定できないMCPサーバはセキュリティ上あまり好ましくないと思います。		 Mocrosoft playwright-mcpのサーバ起動方法

C:\Users\portf>npx @playwright/mcp@latest --port 8931
Need to install the following packages:
@playwright/mcp@0.0.10
Ok to proceed? (y) y
Listening on
http://localhost:8931
Put this in your client config:
{
"mcpServers": {
"playwright": {
"url": "http://localhost:8931/sse"
}
}
}

Mocrosoft playwright-mcpの例
{
"mcpServers": {
"playwright": {
"url": "http://localhost:8931/sse"
}
}
}

※#3のwsl経由でのdockerのケースが分かりにくいのでコマンドプロンプトで実行したときの動作で簡単に説明すると
　commandをwslとし、argsにdockerコマンドを書くことでWindowsからシームレスにdockerコンテナをStdioで利用できます。

C:\Users\portf>wsl docker run mcp/brave-search
Unable to find image 'mcp/brave-search:latest' locally
latest: Pulling from mcp/brave-search
f18232174bc9: Already exists
cb2bde55f71f: Pull complete
9d0e0719fbe0: Pull complete
6f063dbd7a5d: Pull complete
654a36c5aa83: Pull complete
5f67a9022979: Pull complete
0b7ed1cc5f1e: Pull complete
c0b91fd6057a: Pull complete
2e67a534d9c2: Pull complete
Digest: sha256:f9e0d4e5d6b4b2153053464a0be95207945471090f6d6867b4320e665b0b873b
Status: Downloaded newer image for mcp/brave-search:latest
C:\Users\portf>wsl docker run -i --rm -e BRAVE_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxx mcp/brave-search
Brave Search MCP Server running on stdio

６．設定

ここではVSCodeとRoo Codeの基本的が設定が終わっていることを前提とさせていただきます。
Roo CodeのAPIプロバイダーの選定や設定については私の「QiitaRoo Code(旧Roo Cline)を使ってみた - Qiita」記事をご覧ください。
ClineではMCP Servers Marletplaceという仕掛けが既に存在しており、ワンストップでMCPサーバをAIエージェントどが導入してくれる機能があります。
しかもRoo CodeはClineのフォークなのでClineでMCPサーバを導入するとmcp_setting.jsonを書き換えてくれるためこの方式でMCPサーバを導入すると簡単に導入ができそうです。
次の章のWindows環境でのハマりポイントを考慮してくれるかは分かりません（解決済みのmcp_setting.jsonを事前に読み込むため、AIエージェントがハマりポイントの対策をしてくれていました。）

６．１ Windows環境でのハマりポイント

①概念の理解不足
　「MCPサーバの起動方式」で述べたようにmcp_setting.jsonの書き方は多種多様で、環境に応じて柔軟に設定できるように設計されています。
　同じMCPサーバを使用しているにも関わらず、ブログ記事によって設定方法がことなるのはこれが原因だと思います。

②mcp_setting.jsonの例
　これは私だけなのかもしれませんが、ほとんどのMCP紹介サイトでnpxコマンドがMCPホストから直接実行できるような書き方をされていますが、この方法ではMCPサーバに接続できませんでした。
　これはnpxコマンドの実態がnpx.cmdであり、.cmd拡張子をcmd.exeで実行するという定義が無いのが原因だと推定されます。
　npxコマンドを正しく動くようにするにはcommandとargsを以下のように修正します。

　Brave Search MCP Serverのnpxの設定例

{
    "mcpServers": {
        "brave-search": {
            "command": "npx",
            "args": [
                "-y",
                "@modelcontextprotocol/server-brave-search"
            ],
            "env": {
                "BRAVE_API_KEY": "YOUR_API_KEY_HERE"
            }
        }
    }
}

実際に動いた例

{
  "mcpServers": {
    "brave-search": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-brave-search"
      ],
      "env": {
        "BRAVE_API_KEY": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    }
  }
}

６．２ Roo Codeのでの設定方法

[Roo Code]⇒[MCPサーバー]で「グローバルMCPを編集」をクリックして上記の「実際に動いた例」を貼り付けます。
「グローバルMCPを編集」ボタンをVSCodeでフォルダ(又はワークスペース)を開いている時だけ押せます。
フォルダ(又はワークスペース)を開いていない場合は「Could not open file: No workspace root found」エラーとなります。

Roo Code Setting.png

上記のようにcommandに”cmd”を追加してargsの第一引数に”/c”、第二引数に”npx”を設定したNotionとBrave-searchのmcp_setting.jsonファイルは以下の通りです。

OPENAPI_MCP_HEADERSとBRAVE_API_KEYはNotionまたはBrave APIで取得してください
Notionでのインテグレーションの作成、インテグレーションの接続はTEMPさんの「Claude経由でNotionを操作する方法【Notion MCP】」が参考になります。

{
  "mcpServers": {
    "notionApi": {
      "command": "cmd",
      "args": [
        "/c",
        "npx -y @notionhq/notion-mcp-server"
      ],
      "env": {
        "OPENAPI_MCP_HEADERS": "{\"Authorization\": \"Bearer ntn_xxxxxxxxxxxxxxxxxxxxxxxxxxx\", \"Notion-Version\": \"2022-06-28\" }"
      }
    },
    "brave-search": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-brave-search"
      ],
      "env": {
        "BRAVE_API_KEY": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    }
  }
}

６．３ Brave SearchのAPIキー取得

Brave Searchにアカウントを作成してクレジットカードを登録してAPIキーを取得します。

Brave Search API | Brave

６．４ Notionでインテグレーションを作成してトークンを取得します

記事が長くなるのでTEMPさんのサイトを参考にntn_から始まるトークンを取得します
流れだけ記載しておきます

①Notionでインテグレーションを作成
　私は「MCP」というインテグレーションを作成しました。
　 **NotionのMy Integrationsページ** 

②内部インテグレーションシークレット取得
　インテグレーション作成ページでntn_から始まる内部インテグレーションシークレットを取得
③Notionで空の「MCP管理記事」ページを作成
　「MCP管理記事」というページにインテグレーションを接続して「MCP管理記事」ページ配下の操作をMCPに委任します。
④「MCP管理記事」ページにインテグレーションを接続
　「MCP管理記事」ページを開き、３点リーダーのメニューから「接続」を選び、①で作成した「MCP」インテグレーションを接続します。

Claude経由でNotionを操作する方法【Notion MCP】 | TEMPブログ｜Notionの使い方を発信

Your connected workspace for wiki, docs & projects | Notion

７．動作確認

７．１　MCPガイドをBrave SearchでリサーチしてNotionページを作成

プロンプト

# 命令
あなたは優秀な記者です。
MCPに関する詳しい記事を作成します。
SEOを考慮して、適切なブログ記事の章立てを考えて、記事章ごとにできるだけ詳しく作成してください。

必要な情報はブラウザでインターネット検索してください
作成したMarkdown記事はNotionのフォーマットで整形して「MCP管理記事(id:1d9fec32-97a8-81c5-880c-eec907a4a21e)」ページ配下に作成してください
記事に含めてほしい内容は以下の通りです

# 記事に含めてほしい内容
１．MCPの開発者の公開日
２．MCPサーバとMCPホストの関係
３．代表的なMCPホスト(Roo Codeを含める)
４．開発で活用できるMCPサーバ１０選とその概要
５．まとめ

※「MCP管理記事」というページは「Notionでインテグレーションを作成してトークンを取得します」で作成したページです。

MVPの完全ガイド.png

作成されたNotionのページ
notion_MCPの完全ガイド.png

感想：

　Brave SearchでのリサーチとNotion記事への書き込みは概ね成功ですが以下が課題です。

　①Roo CodeがNotion-MCPを使って新規にページを作成することはできた

　②Brave SearchとNotion書き込み時のプロンプト消費量が大きすぎる
　　Claude-3.7-Sonnetとopenai/o1を使用してこの記事を書くだけで3.77ドル(約537円)

OpenRouter-Billing.png

③openai/o1モデルでは役不足
　　Claude 3.7 Sonnetを使用するように何度も促されてしまいました。
o1_model.png

④NotionでMarkdownが反映されない

８．参考URL

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?