tapsite

tapsite

ウェブインテリジェンスの抽出に特化した MCP サーバーです。55 個のツールで、AI エージェントがウェブサイトを単にブラウザーで操作するだけでなく、デザインシステム、アクセシビリティ、パフォーマンス、コンテンツなどに関する構造化されたインテリジェンスを抽出し、理解できるようにします。

ほかの MCP ブラウザーツールでは、エージェントはボタンをクリックできます。tapsite なら、完全なカラーパレットの抽出、WCAG コントラスト比の監査、2 つのサイトのデザイントークンの差分比較、技術スタックの検出、カスタム CSS／XPath／正規表現セレクターによる構造化データの取得が可能です。これらはすべて、エージェントが推論できる構造化 JSON として出力されます。

55 個のツール · 11 カテゴリー · 4 つのワークフロー · 複数形式でのエクスポート

Claude、Cursor、Windsurf、および MCP 互換のあらゆる AI エージェントで動作します。LangChain／LangGraph との連携は近日対応予定です。

ドキュメントサイトの全容を見る →

インストール

# Quick start (no install required)
npx -y tapsite

# Or install globally
npm install -g tapsite
npx playwright install chromium
npx playwright install-deps chromium

AI エージェントの MCP 設定に追加します。

{
  "mcpServers": {
    "tapsite": {
      "command": "npx",
      "args": ["-y", "tapsite"]
    }
  }
}

初回実行時： Playwright は、Chromium がまだインストールされていない場合、自動的にインストールします（初回のみ約 150MB のダウンロードが必要です）。

MCP Registry と Glama でも利用できます。

tapsite の特徴

ほかのブラウザー MCP	tapsite
ボタンをクリック	デザインシステム全体を抽出
フォームに入力	WCAG アクセシビリティを監査
スクリーンショットを撮影	時系列でサイトを比較
生の HTML を読み取る	技術スタックと API を検出
	カスタム CSS／XPath／正規表現による抽出
	ボット対策への耐性とプロキシのローテーション

デザインシステムを抽出 — あらゆるウェブサイトから、色、フォント、間隔のスケール、ブレークポイント、コンポーネント、シャドウ、アイコン、CSS 変数、コントラスト比を抽出します。構造化 JSON または W3C デザイントークンとして出力できます。

品質を監査 — WCAG コントラスト分析によるアクセシビリティのスコアリング、パフォーマンスの計測（Core Web Vitals）、技術スタックの検出、ダークモードへの対応状況、アニメーションの一覧表示を行います。

比較と追跡 — 2 つのサイトを並べて差分比較したり、スナップショットベースの時系列差分を使って単一のサイトを継続的に追跡したりできます。デグレードと改善点は自動的に検出されます。ディスクキャッシュにより、クロールは中断した箇所から再開でき、結果はセッション間で再利用されます。

ログインが必要なサイトにも対応 — MFA を完全にサポートする、永続的なブラウザーセッションを利用できます。3 段階のボット対策エスカレーションシステムが、ステルススクリプトからプロキシのローテーションまで、保護されたサイトに自動で対応します。手動で一度ログインすれば、再認証なしで複数回のツール呼び出しにわたって抽出できます。認証情報がチャットに入力されることはありません。

ツール（55 個）

セッション（8 個）

ツール	説明
tapsite_login_manual	手動ログインと MFA のために、画面表示モードのブラウザーを開く
tapsite_login_check	認証済みセッションの状態を確認する
tapsite_inspect	URL に移動し、DOM を検査する（ナビゲーション、見出し、ボタン、フォーム、表、リンク）
tapsite_screenshot	現在のページのスクリーンショットを撮影する
tapsite_interact	直前の inspect でインデックス化された要素をクリックする、または入力する
tapsite_scroll	ページをスクロールする
tapsite_run_js	任意の JavaScript を実行し、結果を返す
tapsite_close	ブラウザーセッションを閉じる

コンテンツ抽出（6）

ツール	説明
tapsite_extract_table	特定のテーブルを構造化データとして抽出します
tapsite_extract_links	テキストと href を含むすべてのリンクを抽出します
tapsite_extract_metadata	ページのメタデータ（タイトル、説明、OG タグなど）を抽出します
tapsite_extract_content	読みやすい主要コンテンツ（記事本文、見出し、段落）を抽出します
tapsite_extract_forms	フィールド、ラベル、アクションを含むすべてのフォームを抽出します
tapsite_extract_markdown	オプションのチャンク分割を使用して、ページコンテンツをクリーンな Markdown として抽出します（raw、fit、または citations モード）

カスタム抽出（2）

ツール	説明
tapsite_extract_custom	カスタムスキーマ（CSS セレクター、XPath、または正規表現）を使用して構造化データを抽出します
tapsite_extract_schema_suggest	ページの DOM を分析し、抽出スキーマを自動的に提案します

デザイントークン（5）

ツール	説明
tapsite_extract_colors	カラーパレット（16 進数値と使用回数）を抽出します
tapsite_extract_fonts	フォントファミリー、サイズ、太さを抽出します
tapsite_extract_css_vars	CSS カスタムプロパティを抽出します
tapsite_extract_spacing	スペーシングスケールの値を抽出します
tapsite_extract_shadows	box-shadow と text-shadow のパターンを抽出します

ビジュアルアセット（4）

ツール	説明
tapsite_extract_images	src、alt、寸法を含むすべての画像を抽出します
tapsite_download_images	画像をローカルの出力ディレクトリにダウンロードします
tapsite_extract_svgs	インライン SVG を抽出します
tapsite_extract_favicon	favicon の URL とサイズを抽出します

レイアウトインテリジェンス（3）

ツール	説明
tapsite_extract_layout	レイアウトツリーを抽出します（インラインのテキスト表現）
tapsite_extract_components	繰り返し使われる UI コンポーネントとパターンを検出します
tapsite_extract_breakpoints	CSS メディアクエリからレスポンシブブレークポイントを抽出します

品質とコンプライアンス（7）

ツール	説明
tapsite_extract_a11y	アクセシビリティ監査を行います（ARIA、ロール、コントラストの問題）
tapsite_extract_contrast	テキストと背景の WCAG コントラスト比を監査します
tapsite_extract_perf	パフォーマンス指標（Core Web Vitals、リソースサイズ）を抽出します
tapsite_extract_security	セキュリティヘッダー（CSP、HSTS、SRI、権限ポリシー）を監査します
tapsite_extract_darkmode	ダークモードのサポートを検出し、ダークパレットを抽出します
tapsite_extract_pwa	PWA のサポート（マニフェスト、サービスワーカー、インストール可否）を検出します
tapsite_extract_i18n	国際化のシグナル（lang、hreflang、翻訳）を抽出します

テクノロジー検出（10）

ツール	説明
tapsite_extract_stack	フロントエンドフレームワーク、ライブラリ、技術スタックを検出します
tapsite_extract_animations	CSS アニメーションとトランジションを抽出します
tapsite_extract_icons	アイコンライブラリを検出し、アイコンの使用状況を抽出します
tapsite_extract_graphql	GraphQL エンドポイントを検出し、スキーマをイントロスペクトします
tapsite_extract_aiml	AI/ML 連携（モデル、埋め込み、推論エンドポイント）を検出します
tapsite_extract_canvas	canvas と WebGL の使用パターンを抽出します
tapsite_extract_wasm	WebAssembly モジュールとその使用状況を検出します
tapsite_extract_web_components	カスタム要素と Shadow DOM の使用状況を検出します
tapsite_extract_third_party	サードパーティのスクリプト、トラッカー、サービスを一覧表示します
tapsite_extract_storage	クライアント側ストレージ（Cookie、localStorage、sessionStorage、IndexedDB）を監査します

ネットワークと API（2）

ツール	説明
tapsite_capture_network	ページの読み込み中にネットワークリクエストをキャプチャします
tapsite_extract_api_schema	観測されたネットワークトラフィックから API スキーマを推定します

マルチページ（2）

ツール	説明
tapsite_crawl	開始 URL から複数のページをクロールします
tapsite_diff_pages	実際のエクストラクターを使用して、2 つの URL（サイト間）を比較するか、経時的な変更を追跡します（時間的な比較）

エクスポート（2）

ツール	説明
tapsite_export	検査結果を JSON + Markdown + HTML レポート + CSV テーブル + スクリーンショットとしてエクスポートします
tapsite_export_design_report	デザインシステムの完全なレポート：report.html（ビジュアル）、design-tokens.json（W3C 形式）、design-tokens.css（コピーして貼り付けられる :root 変数）

エンジン

堅牢な抽出エンジンです。並行したページ抽出に対応する、ブラウザーの並列プーリングを備えています。永続的なディスクキャッシュにより、クロールは中断したところから再開され、結果はセッション間で再利用されます。保護されたサイト向けに、プロキシの自動ローテーションを伴う 3 段階のボット対策エスカレーションを備えています。

ワークフロー（4）

ツール	説明
tapsite_teardown	包括的な競合デザイン分析（すべてのエクストラクター）
tapsite_audit	リリース前の品質監査（a11y、コントラスト、パフォーマンス、SEO、ダークモード）
tapsite_harvest	サイトのすべてのアセットを一覧化します（画像、SVG、フォーム、フォント、リンク）
tapsite_designsystem	デザイントークンを W3C JSON および CSS 変数として抽出します

LangChain / LangGraph との統合（近日公開）

ネイティブの LangChain および LangGraph との統合は、今後のロードマップに含まれています。リリース時には、ツールのサブセットと管理されたセッションのライフサイクルを備えた専用の Python ラッパーを提供します。

セキュリティ

プロンプトインジェクション対策（非表示要素のフィルタリング + 出力のサニタイズ）、HTTPS の強制、プライベート IP のブロック、認証ヘッダーの編集を実施します。認証情報がチャットに送信されることはありません。MFA に完全対応した手動ログインを使用します。

プロンプトインジェクション対策

エクストラクターは、非表示のテキストによるインジェクションを防ぐため、非表示要素（display:none、visibility:hidden、opacity:0、サイズがゼロの要素、クリップで非表示にされた要素）をスキップします。すべての出力をスキャンしてプロンプトインジェクションのパターンを検出し、指示の上書き、ロールの乗っ取り、情報の持ち出しの試み、ツールの操作を [INJECTION_DETECTED] としてインラインで警告します。

認証情報の安全性

認証情報をチャット経由で送信しないでください。 tapsite_login_manual を使用して画面表示付きブラウザーを開き、（MFA を含めて）手動でログインした後、tapsite_login_check で確認します。認証情報が AI プロバイダーのサーバーやローカルのトランスクリプトに触れることはありません。

Docker

tapsite には、ヘッドレスのみの使用向けに Dockerfile と docker-compose.yml が用意されています。CI パイプライン、サーバーへのデプロイ、またはローカルに Node.js をインストールしたくない環境で使用できます。

docker build -t tapsite .
docker compose up

tapsite_login_manual は Docker では使用できません（ディスプレイが必要です）。Docker で認証済みセッションを使用するには、まずローカルでログインしてから、profiles/ ディレクトリをコンテナにマウントします。

volumes:
  - ./output:/app/output
  - ./profiles:/app/profiles

セキュリティに関する注意： profiles/ には有効なセッション Cookie が含まれています。バージョン管理にコミットしないでください（すでに .gitignore に含まれています）。

開発環境のセットアップ

git clone https://github.com/mgriffen/tapsite
cd tapsite
npm install
npx playwright install chromium
npx playwright install-deps chromium

ローカルソースを参照する MCP 設定：

{
  "mcpServers": {
    "tapsite": {
      "command": "node",
      "args": ["/absolute/path/to/tapsite/src/server.js"]
    }
  }
}

プロジェクト構成

src/
  server.js        — MCP server entry point
  browser.js       — shared Chromium context (ensureBrowser, closeBrowser)
  helpers.js       — shared helpers (safeNavigate, summarizeResult, indexPage)
  sanitizer.js     — prompt injection detection
  diff.js          — per-extractor diff logic and extractor name/args mapping
  snapshots.js     — temporal snapshot I/O (saveSnapshot, loadLatestSnapshot)
  browser-pool.js  — parallel browser context pooling
  cache.js         — persistent disk caching with TTL
  markdown.js      — HTML-to-Markdown converter (raw/fit/citations)
  chunker.js       — LLM-friendly text chunking (fixed/semantic/sentence)
  content-filter.js — BM25 relevance filtering
  anti-bot.js      — block detection and tier escalation
  proxy.js         — proxy rotation with failure tracking
  stealth-setup.js — Puppeteer-extra stealth plugin registration
  extraction-strategies.js — CSS/XPath/regex flexible extractors
  extractors.js    — browser-context extraction functions (page.evaluate())
  exporter.js      — file export: JSON, Markdown, HTML, CSV
  inspector.js     — DOM extraction for inspect tools
  cli.js           — standalone CLI (login, inspect, session)
  config.js        — paths and defaults
  tools/
    session.js     — login, inspect, screenshot, interact, scroll, run_js, close
    extraction.js  — all extract_* tools
    network.js     — capture_network, extract_api_schema, extract_stack
    multipage.js   — crawl, diff_pages
    export.js      — export, export_design_report
    workflows.js   — teardown, audit, harvest, designsystem
profiles/          — browser state / session cookies (gitignored)
output/            — export results + snapshots (gitignored)

出力形式

• output/run-{timestamp}/ — tapsite_export：JSON、Markdown、HTML、スクリーンショット、CSV テーブル
• output/design-report-{timestamp}/ — tapsite_export_design_report：report.html、design-tokens.json、design-tokens.css
• output/snapshots/{domain}/ — tapsite_diff_pages の時間的比較用スナップショット

ライセンス

MIT