Zenn
📝

ClaudeとMCPをフル活用して、Notionにブクマした記事の要約・図解を自動作成する

に公開
visualization
Notion
Model Context Protocol
Claude
tech

Claude＋MCPで様々なツールをLLMに使わせて、エージェント的な動きを実現する取り組みが流行っていますね。

本記事では、Artifacts, Web Search, Notion連携, GitHub連携などの機能をフル活用して、Notion上のデータベースに登録されたweb記事について、要約と図解を自動作成してNotionページ内に追記する仕組みについて紹介します。

適切にMCPさえセットアップしてあれば、固定のプロンプトを与えるだけで、Claudeが自動で未読記事を確認して、要約・図解を作成して、Notionに書き込んでくれる、という魔法のような体験が可能です。

NotionDBに読みたい記事を溜め込んでいるが、おっくうでなかなか目を通せていない、、という人は多いと思いますが、図解を追加することで格段に内容を把握しやすくなるので、ぜひ本記事で紹介する方法を試してみてください。

どうすれば試せる？

  1. 下記のMCPサーバをセットアップして、Claudeアプリから利用できるようにする

  2. 下記のプロンプトを投入する（{}で囲われた部分は各自の環境に合わせて記載してください）

以下の手順で、Notionの参考記事データベースに保存された未読記事について、内容を理解した上で概要をまとめ、図解を作成し、元の記事ページに追加してください。
1記事の処理が完了するたびに、ユーザーに次の記事に移るか確認するようにしてください。

# 処理の流れ
Notionの「参考記事」データベース（{web記事をブックマークしているNotionDBのURL}）から未読の記事（{未読の記事の定義 例:Readプロパティがfalse}）を検索する
記事のURLから内容を取得して読み込む
記事の内容を理解し、主要なポイントを抽出する
内容を説明するSVG図解を作成する
作成したSVGファイルを既存のGitHubリポジトリ({用意したGitHubの画像ホスティング用リポジトリ名})にアップロードする
図解と記事の要約テキストをNotionの記事ページに追加する

# 使用するツール
notion_query_database：未読記事の検索
firecrawl_scrape, fetch：記事内容の取得
artifacts：SVG図解の作成
GitHub関連の関数（create_repository, create_or_update_file）：図解のホスティング
notion_append_block_children：記事ページへの内容追加

# アウトプット
記事内容に基づいたSVG形式の図解をGitHubにホスティング
Notionページに以下の内容を追加：
    記事の概要見出し
    主要ポイントのまとめ（3〜5点）
    図解（GitHub RAW URLを使用）
    補足説明や応用分野など、記事内容に応じた追加情報

# 注意点
SVG図解は、GitHubのプレビュー機能でも読み込めるよう、あまり複雑にはせず、シンプルでわかりやすいデザインとする
SVG図解はGitHubのRAW URLを使用してNotionに埋め込む
図解は記事内容を適切に視覚化し、情報が整理されたものにする
専門用語がある場合は簡潔な説明を加える
要約は記事の主要ポイントを漏らさないようにする
ReadプロパティをTrueに修正する処理は不要

どんな結果が得られる？

自動でNotion未読記事検索、記事内容図解、GitHubへのホスティング、Notion記事ページ書き込みが行われます。

Notion記事ページには、このように図解＋要約文が記載されます。
要約の形式などについては、プロンプトを調整することでお好みのスタイルに変更できます。

どんなフローになっている？

こんな流れで処理を行っています。

構築にあたってひっかかった点としては、普通に図示した画像をNotionに貼り付けようとすると、Claude内の内部URLを用いた貼り付けになり、Notionから画像が見られなくなってしまう点です。
これを解決するため、svgファイルを一度GitHubにホスティングして、そのURLを用いてNotionに貼り付けるフローにしています。

おわりに

本記事では、Claudeアプリと各種MCPを駆使して、NotionDBにたまった未読記事の内容について、Claudeが得意とする図解を含めて自動で説明してくれる仕組みを紹介しました。

MCPのセットアップさえ完了していれば、あとはそれらを適切に組み合わせるフローを定義してプロンプトにするだけで、このような複雑な処理も実現できるのは夢がありますね！

Discussion