Study Design Diagram Studio WebMCP

研究デザイン図スタジオ

Black Swan Causal Labs が提供するブラウザ上のワークスペースです。疫学研究のデザイン図を作成、レビュー、エクスポートできます。

ライブアプリ： https://sdds.blackswancausallabs.com

機能

• インデックスイベントを基準に、ウォッシュアウト期間、組み入れ期間、除外期間、共変量評価期間、追跡期間を設定できます。
• タイムラインの端をドラッグするか、値を入力して期間の日付を編集できます。キーボード操作と取り消しにも対応しています。
• 研究の詳細、評価ルール、情報源のメモ、脚注、略語を記録できます。
• 構造化 JSON を保存、インポートできます。また、SVG、PDF、編集可能な PowerPoint 図をエクスポートできます。
• 完全性チェックリストを確認し、互換性のあるブラウザーエージェントで 10 個の WebMCP ツールを利用できます。

このワークスペースはセッション内のみで利用できます。編集内容を保持するには、ページを離れる前に Save JSON を使用してください。事前に読み込まれている例は、参照図から文字起こししたもので、論文との照合は行われていません。完全性チェックで確認できるのは情報の有無であり、方法論の妥当性や情報源の正確性ではありません。このアプリは PDF から情報を抽出しません。

AI エージェントを接続する

このアプリでは、現在の研究デザインの読み取り、編集、検証、エクスポートを行う 10 個の定義済みツールを利用できます。人とエージェントによる編集は、同じキャンバスと取り消し履歴を共有します。接続方法は 2 つあります。

接続方法	要件	設定
ネイティブ WebMCP	WebMCP 対応のブラウザーとエージェント	スタジオを開き、エージェントにページのツールを検出させます
リモート MCP ブリッジ	カスタム認証ヘッダーに対応した Streamable HTTP MCP クライアント	スタジオで一時的な接続を有効にし、URL とキーを使ってクライアントを設定します

リモート MCP クライアントの場合：

1. 研究デザイン図スタジオを開き、Connect MCP、次に Enable connection を選択します。
2. クライアントに https://sdds-webmcp-bridge.jdiazdecaro.workers.dev/mcp を追加します。Authorization ヘッダーには、Bearer を含むコピーした値全体を設定してください。クライアントがその形式に対応している場合は、Copy MCP config を使用してください。
3. タブを開いたままにします。編集前に、エージェントに現在の研究仕様を読み取らせてください。変更には、エージェントが最新のリビジョンを取得している必要があります。
4. アクセスを取り消すには Disconnect を選択します。ページを閉じるか再読み込みしてもセッションは終了します。キーの有効期限は 2 時間です。新しいキーを取得するには再接続してください。

リモートブリッジは公式 MCP Registry に io.github.Black-Swan-Causal-Labs/sdds-webmcp として公開されています。メタデータは server.json にあります。詳しい接続方法、セッション、開発、デプロイの手順についてはブリッジの READMEを参照してください。

ウェブサイトの URL だけでは、任意のエージェントが WebMCP を利用できるようにはなりません。ネイティブアクセスにはブラウザーとエージェントの対応が必要です。リモートアクセスにはペアリングとカスタムヘッダーへの対応が必要です。現在、ブリッジは OAuth ディスカバリーを実装していません。

ペアリングは任意です。ペアリングすると、研究に関するツールの引数と結果が Cloudflare リレーを経由して接続先のエージェントプロバイダーに送信されます。一時キーを持つ人は誰でも、接続中にそのキャンバスのツールを呼び出せます。ページを読み込んだだけではリレーセッションは作成されません。また、ネイティブ WebMCP はこのリレーなしで動作します。ブラウザーエージェント自身によるデータの取り扱いには、引き続きそのエージェントの規則が適用されます。

ローカル開発

Node.js 22.13 以降と npm が必要です。初回のデプロイには Node.js 24 が使用されました。

npm ci
npm run dev

本番用ビルドを作成してプレビューします。

npm run build
npm run preview

このアプリでは React、TypeScript、Vite、Tailwind CSS、Zod、jsPDF、PptxGenJS を使用しています。スタジオは静的アプリケーションです。オプションのリモート MCP ブリッジは、Cloudflare Workers と Durable Objects 上で個別に動作します。通常の手動編集とネイティブ WebMCP には、リレーとのペアリングセッションは不要です。

Cloudflare へのデプロイ

既存の Cloudflare Pages プロジェクトは sdds で、本番ブランチは main、ビルド出力は dist です。

設定	値
カスタムドメイン	sdds.blackswancausallabs.com
Pages ホスト名	sdds-1wj.pages.dev
Wrangler 設定	wrangler.json
DNS レコード	CNAME sdds → sdds-1wj.pages.dev

Cloudflare アカウントにアクセスできるチェックアウトから実行します。

npm ci
npx wrangler login
npm run build
npx wrangler pages deploy dist --project-name sdds --branch main

Wrangler は既定のブラウザーで認証画面を開きます。Pages プロジェクトとカスタムドメインはすでに設定済みのため、通常の再デプロイで再作成する必要はありません。新しい環境では、別の Pages プロジェクトを作成し、Cloudflare の Pages ダッシュボードからカスタムドメインを追加してください。

現在、デプロイは Wrangler を使った手動操作で行います。この GitHub リポジトリにプッシュしても、Cloudflare には自動デプロイされません。Cloudflare トークン、.env ファイル、.dev.vars ファイル、ローカルの Wrangler 状態は、決してコミットしないでください。

WebMCP ツールリファレンス

アプリは document.modelContext を検出し、利用できない場合は navigator.modelContext にフォールバックします。WebMCP に対応していないブラウザーでも、手動編集を利用できます。ツールは現在のページのメモリー上にある研究データを操作し、変更時には古い編集内容による上書きを防ぐために expected_revision が必要です。

ツール	目的
get_study_spec	現在の仕様とリビジョンを読み取る
update_design_element	ウィンドウを更新する
add_design_element	ウィンドウを追加する
remove_design_element	ウィンドウを削除する
reorder_design_elements	タイムラインの行を並べ替える
update_study_details	研究レベルのメタデータを更新する
import_study_spec	現在の仕様を置き換える
clear_study_spec	空のデザインを開始する
validate_study_spec	完全性チェックとレビュー項目を読み取る
export_schematic	ダウンロードを開始せずに SVG を返す

不明な日付は null で表し、解決されていないテキストは空欄のままにします。出典メモでは、文書化された根拠と研究者が定めた選択を区別してください。

ソースの構成

• components/study/：エディター、タイムライン、情報パネル
• components/ui/：再利用可能なインターフェースコンポーネント
• lib/study/：スキーマ、検証、タイムラインレイアウト、エクスポート、WebMCP ツール
• app/globals.css：アプリケーションのスタイル
• public/：PDF フォントとそのライセンス
• vendor/：ベンダー提供のスタイルシートとそのライセンス

ライセンスと連絡先

元のキャンバスアプリケーション、ネイティブ WebMCP 統合、リモート MCP ブリッジは、Apache License 2.0 の下でライセンスされています。Copyright 2026 Black Swan Causal Labs, LLC。NOTICE を参照してください。

サードパーティコンポーネントには、それぞれ独自のライセンスが適用されます。[THIRD_PARTY_NOTICES.txt](THIRD_PARTY_NOTICES.txt)、public/DejaVu-font-license.txt、vendor/shadcn-tailwind-4.13.0.LICENSE.md を参照してください。ソフトウェアライセンスは、ユーザーが提供した研究コンテンツやサードパーティの参考資料に関する権利を変更するものではなく、商標権を付与するものでもありません。ライセンスファイルと通知ファイルは、デプロイ済みアプリとともに配布されます。

Black Swan Causal Labs：https://blackswancausallabs.com · [email protected]