notion-arena

ローカル

github.com/SynergyFlowLabs生産性02 週間前に更新

リポジトリ

notion-arena について

notion-arenaは、Notionダッシュボード向けのウィジェットとネイティブレシピを収録した機械可読なカタログです。MCPサーバーを通じて、エージェントがコンポーネントを検索・設定し、インストールを計画できます。

主な機能

01コンポーネントの検索と閲覧
02ウィジェットスキーマの確認
03ウィジェット埋め込みURLの生成
04レシピのインストール計画
05カタログと手順の取得

活用シーン

01適切なNotionウィジェットの検索
02埋め込み用ウィジェットの設定
03ネイティブレシピのインストール計画の確認

MCP 対応

MCPサーバーは、Notion Arenaのコンポーネントを検索・確認・設定し、インストールを計画するツールをAIエージェントに提供します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定

{
  "mcpServers": {
    "imgul-notion-arena": {
      "command": "npx",
      "args": [
        "-y",
        "notion-arena-mcp"
      ]
    }
  }
}

起動コマンドnpx -y notion-arena-mcp

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ

npmnotion-arena-mcp0.2.2stdio

ツール

掲載時のツール一覧 · 3 週間前に更新

パラメーター	型	必須	説明
kind	enum	いいえ	種類で絞り込みます：widget（HTML 埋め込み）または native（Notion API レシピ）widget \| native
tier	enum	いいえ	tier で絞り込むfree \| pro
limit	number	いいえ	最大結果数。デフォルトは 50
offset	number	いいえ	ページネーションのオフセット
category	string	いいえ	カテゴリーで絞り込みます：ダッシュボード、時間、トラッカー、計画、ビジネス、ビジュアル、ドキュメント、自動化
delivery	enum	いいえ	提供方法で絞り込みますembed \| html-block \| download \| api

詳細

Notion Arena

Notion 向けコンポーネントレジストリ。
shadcn/ui のモデル、つまり、閲覧、設定、コピー、所有、コードからのインストールを Notion ダッシュボードに適用します。

ダッシュボードトラッカービジネスドキュメントビジュアル自動化

🎯 Notion Arena とは？

Notion Arena は、Notion 向けの機械可読なコンポーネントレジストリです。あらゆる Notion ページに追加できる、あらかじめ構築された 203 個のコンポーネントを提供します。

	192 個のウィジェット（埋め込み＋HTML ブロック）	11 個のネイティブレシピ（Notion API）
内容	Notion 内で動作する自己完結型の HTML ファイル	API 経由でインストールするデータベーススキーマ、ビュー、数式、自動化
提供方法	`<iframe>` で埋め込むか、HTML ファイルをアップロード	トークンを使って `POST /api/install` を実行
ネットワーク	必要（埋め込み）／不要（HTML ブロック）	実行時には不要
データ	ブラウザー内のみに保存	Notion ワークスペースに保存
チーム同期	❌ いいえ	✅ はい
更新	自動（埋め込み）／手動（HTML）	インストールを再実行
最低プラン	無料	無料／Plus／Business

Notion は Notion Labs Inc. の商標です。 本プロジェクトは独立したプロジェクトであり、Notion とは提携関係になく、推奨も受けていません。

🎨 人気ウィジェットのショーケース

人気ウィジェット

| ウィジェット | カテゴリ | 説明 | |--------|----------|-------------| |

**ポモドーロタイマー** | README の画像

時間 | 進捗リング、セッションカウンター、チャイム付きの作業・休憩サイクル | |

**KPI ストリップ** | README の画像

ダッシュボード | スパークライン、変化量、目標リング付きの4つの指標タイル | |

**習慣グリッド** | README の画像

トラッカー | GitHub スタイルのヒートマップ、連続記録、5段階の強度 | |

**フリップクロック** | README の画像

ダッシュボード | パタパタ時計、タイムゾーン、12/24時間表示、Notion のタイポグラフィ | |

**ミーティングノート OS** | README の画像

ドキュメント | アジェンダ、メモ、決定事項、アクションアイテムを含むテンプレート | | **目標リング** | README の画像

ダッシュボード | マイルストーンと進捗リングを備えた、単一指標を主役にした表示 |

📦 全192個のウィジェット（クリックして展開）

| カテゴリ | 件数 | 例 | |----------|-------|----------| | README の画像

**時間** | 12 | ポモドーロ、呼吸法、ストップウォッチ、カウントダウン、月間カレンダー、日付計算、フリップ時計、世界時計、経過時間、インターバルタイマー、ホワイトノイズ、日の出／日の入り、睡眠時間、家族カレンダー、学習セッション記録、デイリープランナー、ルーティンチェックリスト、ワークアウトトラッカー | | README の画像

**ダッシュボード** | 9 | KPI ストリップ、目標リング、年間進捗、月相、フリップ時計、世界時計、週間状況レポート、日の出／日の入り、経過時間、カウントダウン、月間カレンダー、日付計算、ストップウォッチ、呼吸タイマー | | README の画像

**トラッカー** | 26 | 習慣グリッド、水分補給トラッカー、気分トラッカー、ルーティンチェックリスト、ワークアウトトラッカー、睡眠時間、植物の世話記録、ペットの世話チェックリスト、ボランティア活動時間記録、視聴リスト、読書進捗、貯蓄目標、純資産スナップショット、支出トラッカー、ポートフォリオトラッカー、債務返済トラッカー、サブスクリプショントラッカー、請求対象時間トラッカー、出席簿、コレクションカタログ、装備データベース、家庭用品在庫記録、車両整備・走行記録、保証・サービス記録、ゲームコレクションカタログ、ウィッシュリスト・コレクター記録、医療用品在庫、家族の連絡先一覧 | | README の画像

**計画** | 37 | ミニカンバン、アイゼンハワーマトリクス、ガントタイムライン、週間プランナー、旅行日程表、食事プランナー、買い物リスト、持ち物リスト、家事チェックリスト、住宅メンテナンス記録、製品ロードマップ、スプリント振り返り、ユーザーストーリーマップ、OKR 週間チェックイン、デイリープランナー、結婚式の座席プランナー、イベント進行表、マイルストーントラッカー、インシデント記録、QA テスト実施記録、イベントゲストリスト、旅行日程プランナー | | README の画像

**ビジネス** | 53 | ROI 計算ツール、予算プランナー、在庫トラッカー、受付フォーム、チケットキュー、資産貸出管理、サブスクリプショントラッカー、割り勘計算ツール、通貨換算ツール、見積書作成ツール、CRM パイプライン、スプリントトラッカー、請求書作成ツール、クライアントオンボーディングトラッカー、営業フォローアップキュー、キャンペーンプランナー、面接評価シート、料金プラン計算ツール、顧客 QBR 準備、フリーランス提案管理、資金調達アウトリーチトラッカー、ベンダー登録簿、アクセスレビュー記録、請求書ステータストラッカー、休暇・休業記録、更新管理ボード、エスカレーショントラッカー、購入申請トラッカー、機器在庫記録、承認申請記録、ヘルプデスク受付記録、編集カレンダー、現場日誌、レストラン予約記録、寄付者関係記録、初回相談パイプライン、物件掲載カタログ、物件内覧スケジュール、入居者・賃貸契約記録、製造作業指示トラッカー、出荷・物流トラッカー、結婚式ベンダー一覧 | | README の画像

**ドキュメント** | 50 | 引用作成ツール、読書トラッカー、間隔反復学習、フラッシュカード、語彙トレーナー、ブックマークライブラリ、読書リスト、課題トラッカー、試験プランナー、研究記録、プロトコルチェックリスト、アイデア受信箱、原稿の進捗、章構成作成ツール、キャラクター設定集、投稿管理、ポッドキャストエピソードプランナー、ゲスト準備シート、エピソード制作チェックリスト、授業計画作成ツール、研究会議プランナー、変更履歴作成ツール、SEO コンテンツプランナー、コンテンツ再利用トラッカー、ユーザビリティ調査結果記録、奨学金トラッカー、ポッドキャスト番組ノート記録、リスナーフィードバック記録、レシピ・食事ライブラリ、クラスホームページ、保護者連絡記録、個別指導セッション記録、研究課題記録、実験器具・サンプル記録、学生向けコースダッシュボード、博士論文マイルストーントラッカー、インパクト・成果記録、理事会議事録、セラピストセッション管理、医療スタッフ研修記録、旅行日記、レビュー・評価記録、旅行日記、レビュー・評価記録 | | README の画像

**ビジュアル** | 5 | 組織図、ホワイトボード、引用カード、今日の名言カード、映画ショットリスト、ストーリーボード撮影記録 | | README の画像

**自動化** | 1 | 自動化スターターパック |

⚙️ ネイティブレシピ（11）

ネイティブレシピ

レシピ	ティア	作成内容	プラン
CRM パイプライン	Pro	3 DB、6 数式、5 ビュー、2 テンプレート、3 自動化	Plus
スプリントトラッカー	Pro	2 DB、4 数式、4 ビュー、1 テンプレート	Plus
OKR システム	Free	2 DB、5 数式、3 ビュー、1 テンプレート	Plus
ミーティングノート OS	Free	2 DB、1 テンプレート、2 ボタン、4 ビュー、2 自動化	Free
コンテンツカレンダー	Free	2 DB、3 数式、5 ビュー、1 定期テンプレート	Plus
請求書ジェネレーター	Pro	3 DB、6 数式、1 テンプレート、1 ボタン、3 ビュー	Plus
PARA ライフ OS	Pro	5 DB、7 リレーション、6 ビュー、3 テンプレート、1 ダッシュボード	Plus
Habit OS（ネイティブ）	Pro	2 DB、5 数式、4 ビュー、1 ボタン、1 定期設定	Plus
クライアントポータル	Pro	3 DB、4 ビュー、1 同期ブロック、1 ページ、2 自動化	Business
求人トラッカー	Free	2 DB、4 数式、4 ビュー、3 テンプレート	Free
自動化スターター	Free	2 DB、12 自動化、6 ボタン、3 定期設定、4 数式	Plus

🤖 AI エージェント向け — MCP + スキル

Notion Arena を AI エージェントに直接接続できます — Claude Code、Cursor、Windsurf、Claude Desktop。

MCP サーバー

すべての203個のコンポーネントを一覧表示／検索／設定／プランインストールするためのツールをエージェントに提供します：

# Claude Code (project scope)
claude mcp add --scope project notion-arena -- npx -y notion-arena-mcp

# Or pinned version
npx -y [email protected]

# Cursor — .cursor/mcp.json
# Claude Desktop — claude_desktop_config.json
# See docs/AGENT_SETUP.md for all clients

スキル

Notion Arena のワークフロー、配信チャネル、ウィジェットコントラクトをエージェントに教えます：

# Via skills.sh (Vercel) — cross-agent
npx skills add SynergyFlowLabs/notion-arena --skill notion-arena

# Via Claude Code plugin marketplace
/plugin marketplace add SynergyFlowLabs/notion-arena
/plugin install notion-arena@notion-arena-marketplace

# Manual
cp -r skills/notion-arena .claude/skills/notion-arena

両方をインストールしたら、次のように尋ねるだけです：

「Notion 用のポモドーロタイマーを探して」 「Notion に CRM パイプラインを追加して」 「オフラインで使える習慣トラッカーが必要」

エージェントは search_components、get_component、build_embed_url、plan_install を自動的に使用します。

MCP ツール：list_components、search_components、get_component、get_widget_schema、build_embed_url、plan_install、get_registry_item、get_install_guide、get_categories、get_site_info

スキル：skills/notion-arena/SKILL.md + .claude/skills/notion-arena/SKILL.md + .claude-plugin/plugin.json + .claude-plugin/marketplace.json

MCP のフロー

MCP + スキルのセットアップについては docs/AGENT_SETUP.md を、無料デプロイ（Vercel）、MCP の npm およびレジストリへの公開、スキルの skills.sh およびプラグインマーケットプレイスへの公開については docs/DEPLOY_AND_PUBLISH.md を参照してください。

🏗️ 3 つの提供チャネル — 図解

提供チャネル

	埋め込み URL	HTML ブロック	ネイティブレシピ
概要	ウィジェットは当社がホストし、Notion が iframe で埋め込みます	ファイルを Notion のストレージにアップロードします	Notion API を呼び出します
インストール	`/embed` → 貼り付け	`/html` → アップロード、または API を 3 回呼び出す	`POST /api/install`
レンダリング時のネットワーク	必要	不要	不要
Notion のデータを読み取る	いいえ	いいえ	それ自体がデータです
チームと共有する状態	いいえ	いいえ	はい
更新の取得	自動	いいえ。固定されます	該当なし
最低プラン	Free	Free	Free

どちらのウィジェットチャネルでも同じ HTML ファイルを使用するため、内容が食い違うことはありません。設定は、ホストされるパスではクエリ文字列から取得し、ダウンロードしたパスでは埋め込み済みの <script id="bk-config"> から取得します。サンドボックス化されたブロックには URL がないためです。

📋 ウィジェットの仕様 — 4 つのルール

public/widgets/ 内のすべてのウィジェットは、同じ 4 つのルールに従います。完全なガイドとチェックリストについては、/docs/authoring をご覧ください。

ルール	説明
1. 外部リクエストを一切行わない	CDN、ウェブフォント、`fetch()`、`@import` は使用しません。サンドボックスにはネットワークがないため、リモートアセットは空白のブロックになります。
2. 2 つの設定ソース	埋め込み済みの `bk-config` スクリプトタグ（優先度 1）、次に `URLSearchParams`（優先度 2）を使用します。宣言済みのパラメーターのみが保持され、未知のキーは `buildConfig()` によって削除されます。
3. すべてのウィジェットでテーマとアクセントを設定	`theme=auto\|light\|dark` は `<html>` に `data-theme` を設定し、`auto` の場合は `prefers-color-scheme` に従います。`accent` は `--accent` を設定し、`color-mix(in oklab, …)` で派生色を生成します。
4. 名前空間付きの状態	ブラウザーの状態を保存するウィジェットは `notion-arena.<slug>.v1` を使用し、ストレージへのアクセスを try/catch で囲みます。状態は 1 つのブラウザー内にとどまり、同期されません。共有トラッカーにはネイティブレシピを使用してください。

さらに、.wrap が独自にスクロールを管理する body { overflow: hidden }（スクロールバーは 1 つで、2 つにはなりません）、prefers-reduced-motion による無効化手段、そしてフォールバックとしてペイロードを常に console.log にも出力するクリップボードエクスポートを備えています。

🏃 ローカルでの実行

# Install dependencies
npm install

# Restore 13 design/dev skills into .agents/skills/
npx skills experimental_install -y

# Start dev server
npm run dev          # http://localhost:3000

要件：Node 22+、Next.js 16（Turbopack）、React 19、Tailwind v4、TypeScript。

# Type-check
npx tsc --noEmit

# Widget contract checks (offline HTML validation)
npm run check:widgets

# Contrast audit
npm run audit:contrast

# Production build
npm run build

# MCP server
npm run generate:mcp-catalog  # 143 components → mcp/src/data/catalog.json
npm run build:mcp             # build notion-arena-mcp
npm run dev:mcp               # run MCP server with tsx (stdio)

本番環境では、レジストリマニフェストが正しいホストの絶対 URL を出力するよう、NEXT_PUBLIC_SITE_URL に https://notionarena.vercel.app を設定してください。設定しない場合、URL はリクエストの転送先ホストから生成されます。そのホストがない場合は、https://notionarena.vercel.app（ローカル開発では http://localhost:3000）にフォールバックします。

📁 プロジェクト構成

public/widgets/*.html      the products: 192 self-contained HTML files
lib/catalog.ts             source of truth for all 203 components
lib/types.ts               component/param types + the 8 categories
lib/widget.ts              config coercion, injection, HTML rendering  (server)
lib/widget-url.ts          URL builders                                (browser-safe)
lib/notion/schema.ts       Notion API payload builders
lib/notion/installer.ts    executes plans against @notionhq/client
lib/recipes/               11 recipe declarations + planInstall()
lib/registry.ts            shadcn-compatible manifest generation
components/                site UI, catalog browser, configurator, docs prose
app/embed/[slug]/          framed, configured widget HTML
app/api/widget/[slug]/     the same HTML as a download
app/r/[name]/              registry: index.json, schema.json, {name}.json
app/api/install/           plan | embed | html-block | api
docs/RESEARCH.md           the research behind all of it
skills/notion-arena/       AI agent skill (workflow, channels, contract)
mcp/                       MCP server (tools for agents)

📦 レジストリ（shadcn 互換）

GET /r/index.json          the whole catalog
GET /r/{name}.json         one item, HTML or recipe JSON inline
GET /r/schema.json         JSON Schema of every widget's parameters

// mcp config / components.json
{ "registries": { "@notion-arena": "https://notionarena.vercel.app/r/{name}.json" } }

# see exactly what an install will do: no credentials, touches nothing
curl -X POST localhost:3000/api/install \
  -H 'content-type: application/json' \
  -d '{"component":"crm-pipeline","mode":"plan"}'

# then run it
curl -X POST localhost:3000/api/install \
  -H 'content-type: application/json' \
  -d '{"component":"crm-pipeline","mode":"api",
       "token":"'"$NOTION_TOKEN"'","parentPageId":"'"$PAGE_ID"'"}'

トークンを必要としない mode: "plan" は意図的な仕様です。ワークスペースへの書き込みを許可する前に、リクエストの流れを確認できます。

⚠️ 知っておきたい2つのこと

ウィジェットからNotionのデータを読み書きすることはできません。 NotionのHTMLブロックのサンドボックスには、ネットワークアクセスも親ページとのブリッジもありません。ウィジェットはこのブラウザー内にユーザーが入力した個人用の状態を保持できますが、その状態はNotionのデータではなく、共有もされません。ワークスペースのレコード、コラボレーション、権限、監査証跡が必要なワークフローでは、ネイティブデータベースまたはレシピを使用してください。

リレーションの設定には2段階のインストールが必要です。 Notionではデータベースとデータソースが分離されたため、relationプロパティの参照先となるdata_source_idは、対象のデータベースを作成して読み戻すまで存在しません。そのため、planInstall()は次の順に処理を出力します。基本プロパティを指定してデータベースを作成 → 各データソースIDを読み戻す → リレーションを追加する → ロールアップを追加する → 数式を追加する → ビュー → 初期行 → ページ → 100件ずつブロック本文を追加する。

レシピには、できないことも記載されています。実際のAPIにある4つの制限（buttonブロックタイプがない、自動化エンドポイントがない、繰り返しテンプレートのエンドポイントがない、同期ブロックの複製ができない）は、それぞれ制限事項を明記したmanual[]の手順として表示されます。「手作業のほうが簡単」という理由の手動手順は認められません。

🤝 貢献

貢献を歓迎します！新しいウィジェット、ネイティブレシピ、バグ修正、ドキュメント、アイデアなど、貢献方法は次のとおりです。

貢献の流れ

貢献者向けクイックスタート

Issueを作成する — まずアイデアについて話し合います。重複がないか確認し、メンテナーからフィードバックを受けます。
フォークしてクローンする — ブランチを作成します：git checkout -b feat/my-widget
開発する — ウィジェットのコントラクトに従います（以下のチェックリストを参照）
テストする — すべてのチェックをローカルで実行します
プルリクエストを作成する — 明確なタイトル、Issueへのリンク、スクリーンショット／GIF、CHANGELOGの更新を含めます
レビューを受ける — メンテナーによるレビュー、CIチェック、ウィジェットコントラクトの監査
マージする — Vercelに自動デプロイされ、MCPカタログが再生成され、すぐに利用可能になります

ウィジェット作成チェックリスト

すべてのウィジェットは、マージ前にすべてのチェックに合格する必要があります。scripts/check-widgets.mjsを参照してください。

新しいウィジェットの追加

public/widgets/my-widget.htmlを作成します（自己完結型の単一HTMLファイル）

必須フィールドをすべて指定して、lib/catalog.tsにエントリーを追加します：

{
  slug: "my-widget",
  name: "My Widget",
  emoji: "🎯",
  tagline: "One-line hook",
  description: "Full paragraph explaining what it does and why.",
  category: "time", // time | dashboards | trackers | planning | business | docs | visuals | automations
  kind: "widget",
  tier: "free", // free | pro
  tags: ["tag1", "tag2"],
  color: "blue", // red | orange | yellow | green | blue | purple | pink | brown | gray
  params: [
    { key: "param1", label: "Label", type: "number", default: 10, min: 1, max: 100 },
    { key: "theme", label: "Theme", type: "select", default: "auto", options: [...] },
    { key: "accent", label: "Accent", type: "color", default: "#2383e2" },
  ],
  features: ["Feature 1", "Feature 2"],
  useCases: ["Use case 1", "Use case 2"],
  capabilities: {
    interactive: true,
    offlineSafe: true,
    persistsLocally: false,
    writesToNotion: false,
    needsNetwork: false,
  },
}

npm run check:widgetsとnpm run typecheckを実行します
Notionでテストします（埋め込み＋HTMLブロック）
PRを提出します

ネイティブレシピの追加

lib/recipes/my-recipe.tsにレシピを作成し、planInstall()とスキーマをエクスポートします
kind: "native"とrecipe: "my-recipe"を指定して、lib/catalog.tsにエントリーを追加します
npm run generate:mcp-catalogとnpm run build:mcpを実行します
mode: "plan"、続いてmode: "api"を指定してテストします
PRを提出します

コードスタイル

TypeScriptのstrictモード — anyを使わず、型を明示します
Tailwind v4 — ユーティリティファーストとし、必要な場合を除きカスタムCSSは使いません
React 19 — デフォルトではサーバーコンポーネントを使い、必要な場合にのみ'use client'を使います
Conventional Commits — feat:、fix:、docs:、chore:、refactor:

📜 誠実さに関する方針

インストール数、スター数、顧客ロゴを捏造しません
バッジは定性的なもので（new、popular、staff-pick）、カタログのデータに基づいています
市場の数値は、出典が記載されている場合にのみ掲載します
機能に関する主張はカタログ内の真偽値（interactive、offlineSafe、persistsLocally、writesToNotion、needsNetwork）で表され、レジストリに公開されます。これにより、エージェントは説明文を読むのではなく、これらの値で絞り込めます

📄 ライセンス

MIT License — 詳細はLICENSEを参照してください。

ダウンロードしたコンポーネントは自由に使えます。変更、ホスティング、販売するテンプレートへの組み込みが可能です。無料のコンポーネントには帰属表示の義務はありません。/legal/termsを参照してください。

🔗 Links

Live Site: https://notionarena.vercel.app
MCP Package: https://www.npmjs.com/package/notion-arena-mcp
MCP Registry: https://registry.modelcontextprotocol.io
Documentation: https://notionarena.vercel.app/docs
Research: docs/RESEARCH.md
Agent Setup: docs/AGENT_SETUP.md
Deploy & Publish: docs/DEPLOY_AND_PUBLISH.md
Contributing: CONTRIBUTING.md
Changelog: CHANGELOG.md

Made with ❤️ by SynergyFlow Labs and contributors

Markdown 対応

ログインしてコメント

基本情報

作者: imgul
言語: node
バージョン: 0.2.2
トランスポート: stdio
掲載日: 2026年10月11日
最終更新: 2 週間前
公式 Registry: io.github.imgul/notion-arena

問題を報告

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

入門ガイドを読む

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。