Microsoft Clarity

Microsoft Clarity MCP サーバー

これは Microsoft Clarity 用の Model Context Protocol (MCP) サーバーです。 Claude for Desktop やその他の MCP 互換クライアントを使用して、Clarity のセッション記録、プロジェクト分析、ドキュメントにアクセスできます。

主な機能

• 分析データへのアクセス: トラフィック指標、ユーザー行動のインサイト、パフォーマンス統計など、Microsoft Clarity の分析データをクエリできます
• セッション記録の取得: セッション記録にアクセスして分析し、ユーザーの操作を理解して最適化の機会を特定できます
• 自然言語でのクエリ: 平易な英語で質問するだけでデータからインサイトを得られます - 複雑なクエリ構文や API エンドポイントを覚える必要はありません
• 柔軟なデータフィルタリング: ブラウザ、デバイス、国など、さまざまなディメンションで結果をフィルタリングできます
• リアルタイムのデータアクセス: Clarity プロジェクトから最新の分析データとインサイトをオンデマンドで取得できます
• ドキュメント統合: ワークフロー内で直接、Microsoft Clarity のドキュメントから迅速な回答とガイダンスを得られます
• シームレスな MCP 統合: Claude for Desktop、Visual Studio Code、その他の Model Context Protocol (MCP) 互換クライアントでネイティブに動作します

セットアップとインストール

前提条件

• Node.js v16 以上
• Microsoft Clarity アカウントと API トークン
• MCP 互換クライアント（Claude for Desktop など）

インストール

オプション 1: npm 経由でインストール（推奨）

npm を使用してこのパッケージを直接インストールして実行できます:

# Install globally
npm install -g @microsoft/clarity-mcp-server

# Run the server
clarity-mcp-server

オプション 2: インストールせずに npx で実行

インストールせずに npx を使用してサーバーを直接実行できます:

npx @microsoft/clarity-mcp-server

どちらのオプションでも、--clarity_api_token パラメータを使用して Clarity API トークンを指定できます:

npx @microsoft/clarity-mcp-server --clarity_api_token=your-token-here

オプション 3: 手動インストール

1. このリポジトリをクローンまたはダウンロードします
2. 依存関係をインストールします:

   npm install
   

3. TypeScript コードをビルドします:

   npm run build
   

4. サーバーを実行します:

   npm run start
   

拡張機能/プラグインのインストール

Visual Studio Code 拡張機能

上のボタンをクリックすると、Microsoft Clarity MCP サーバーを Visual Studio Code に直接インストールできます。

Claude Desktop プラグイン

Claude の拡張機能ギャラリーからインストールします:

1. Claude Desktop を開きます
2. File → Settings → Extensions に移動します
3. Microsoft Clarity を検索します
4. Install をクリックして拡張機能を追加します
5. API Token を設定します:
   API Token セクションの手順に従って、正しく取得して設定してください。

設定

Clarity データエクスポート API のトークンは、次の 2 つの方法で指定できます:

1. コマンドライン引数:

   npx @microsoft/clarity-mcp-server --clarity_api_token=your-token
   

2. ツールパラメータ:
   get-clarity-data ツールを呼び出すときに、token をパラメータとして指定します

MCP クライアントの設定

汎用 MCP クライアントの設定

MCP クライアントは通常、サーバーに接続するための設定が必要です。以下は、MCP クライアントを設定する方法の一般的な例です:

{
  "mcpServers": {
    "@microsoft/clarity-mcp-server": {
      "command": "npx",
      "args": [
        "@microsoft/clarity-mcp-server",
        "--clarity_api_token=your-api-token-here"
      ]
    }
  }
}

この設定をどこにどのように追加するかの詳細は、使用する MCP クライアントによって異なります。

Claude for Desktop の設定

このサーバーを使用するように Claude for Desktop を設定するには:

1. Claude for Desktop の設定ファイルを開きます:
   • Windows: %AppData%\Claude\claude_desktop_config.json
   • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
2. 上記の一般的な例に示されている設定を追加します
3. 設定ファイルを保存し、Claude for Desktop を再起動します

サーバーの使用方法

このサーバーは、任意の MCP クライアントから呼び出せるさまざまなツールを公開しています。 自然に質問するだけでよく、各リクエストは 1 つの内容に絞ってください。

分析ダッシュボードのクエリ

• 名前: query-analytics-dashboard
• 説明: 簡易化された自然言語の検索クエリを使用して、プロジェクトのダッシュボードから分析データと指標を取得します。
• 例:
  • 過去 3 日間にエジプトから取得した Clarity セッションはいくつありましたか？
  • 自分の Clarity プロジェクトで最もよく使われているブラウザは何ですか？
  • 先週の自分の Clarity プロジェクトのトラフィック指標を表示してください

セッション録画の一覧表示

• 名前: list-session-recordings
• 説明: 指定したフィルタリング条件に基づいて、プロジェクトのセッション録画を一覧表示します。フィルターを使用すると、URL、デバイスの種類、ブラウザ、OS、国、都市など、さまざまなフィールドで録画を絞り込めます。
• 例:
  • モバイルデバイスからの最新の Clarity セッションを一覧表示する
  • ユーザーのクリック数が最も多い Clarity セッションのトップ 5 を表示する
  • ユーザーが JavaScript エラーに遭遇した Clarity 録画を取得する

ドキュメントリソースのクエリ

• 名前: query-documentation-resources
• 説明: Microsoft Clarity ドキュメントからスニペットを取得し、セットアップガイド、機能、使用方法、トラブルシューティング、統合手順のステップバイステップのスクリーンショットなど、ユーザーの質問への回答を見つけます。
• 例:
  • Microsoft Clarity を使用してカスタムイベントをトラッキングするにはどうすればよいですか？
  • Microsoft Clarity で録画に追加できるラベルはいくつありますか？

API トークン

API トークンの取得

API トークンを生成するには:

1. 自分の Clarity プロジェクトに移動します
2. 設定 → データエクスポート → 新しい API トークンを生成 を選択します
3. トークンにわかりやすい名前を付けます
4. 生成されたトークンを安全に保存します

プライバシーポリシー

データのプライバシーと使用に関する情報については、Microsoft Clarity プライバシーポリシーを参照してください。

ライセンス

このプロジェクトは MIT ライセンスの下でライセンスされています。