GitHub Copilotの利用状況を可視化しよう🚀copilot-metrics-viewerでお手軽可視化！(ローカル環境編)

はじめに

スクラムマスター/エンジニアの三宅(@jnymyk)です。
生成AIプロダクトの企画・開発とりまとめをしています。
縁があって社内のGitHub Enterpriseの管理者を6年間ほど担当していました。その流れで現在も開発生産性や開発者体験に強い関心があります。
そんな私は、GitHub Copilotが登場してすぐ飛びつきまして、その後自社内でどのように活用されているのか？について、以前こんな記事を書きました。

これが1年前くらいの記事だったのでそろそろ今のGitHub Copilotの利用状況が知りたいなーと思い、改めてデータの取得や可視化の方法をまとめてみました。

結論

GitHub Metric APIでGitHub Copilotの利用状況データが取得できます👍
copilot-metrics-viewerで手軽に可視化できます🚀

背景

これまで、GitHub Copilotの利用状況データを取得するにはGitHubの営業の方に依頼して統計情報データのグラフを共有いただいていました。

外部に依頼することから自分の任意のタイミングでデータを取得できない課題がありました。
そんな中、2024/4についにGitHub.comからCopilotの利用状況データを取得できるAPIがパブリックプレビューになりました🎉

GitHub Copilot Metrics APIとは？

できること

• 日毎のGitHub Copilot使用状況のメトリクス取得: 各ユーザーのCopilot利用状況を日ごとに集計し、提案数、受け入れ数、アクティブユーザー数などの詳細を取得可能。

• エディタおよび言語別の内訳: 使用されているエディタ（例: VSCode、JetBrains）やプログラミング言語（例: Python、JavaScript）ごとに、提案数や受け入れ数の内訳の詳細を取得可能。

• 最大28日間のデータを取得: 最大で過去28日間のGitHub Copilot使用状況のデータを取得可能で、データは毎日更新され、前日までの情報を取得可能。

制約・注意点

• 2024/12時点でプレビュー版であること: Public previewであり、将来的に変更される可能性あり。

• API実行に必要な権限: Enterpriseの所有者や課金管理者のみが、EnterpriseレベルのCopilot使用状況メトリクスを取得可能。

• タイムゾーン: APIレスポンスの時間はUTCで表示されること。

API仕様

取得できる情報のレベルに応じて3つのAPIが提供されています。

1. EnterpriseレベルのCopilotメトリクス取得

エンドポイント

GET /enterprises/{enterprise}/copilot/usage

実行例

curl -L \
  -H "Accept: application/vnd.github+json" \
  -H "Authorization: Bearer <YOUR-TOKEN>" \
  -H "X-GitHub-Api-Version: 2022-11-28" \
  https://api.github.com/enterprises/ENTERPRISE/copilot/metrics

2. OrganizationレベルのCopilotメトリクスを取得

エンドポイント

GET /orgs/{org}/copilot/usage

実行例

curl -L \
  -H "Accept: application/vnd.github+json" \
  -H "Authorization: Bearer <YOUR-TOKEN>" \
  -H "X-GitHub-Api-Version: 2022-11-28" \
  https://api.github.com/orgs/ORG/copilot/metrics

3. TeamレベルのCopilotメトリクスを取得

エンドポイント

GET /teams/{team_id}/copilot/usage

実行例

curl -L \
  -H "Accept: application/vnd.github+json" \
  -H "Authorization: Bearer <YOUR-TOKEN>" \
  -H "X-GitHub-Api-Version: 2022-11-28" \
  https://api.github.com/orgs/ORG/team/TEAM_SLUG/copilot/metrics

APIをたたいてみた

まずはEnterpriseレベルで情報を取得すべくAPIを叩いてみました。

% curl -L \
  -H "Accept: application/vnd.github+json" \
  -H "Authorization: Bearer <MY-TOKEN>"" \
  -H "X-GitHub-Api-Version: 2022-11-28" \
  https://api.github.com/enterprises/{my-enterprise}/copilot/usage
[
  {
    "day": "2024-11-07",
    "total_suggestions_count": 18055,
    "total_acceptances_count": 5711,
    "total_lines_suggested": 34222,
    "total_lines_accepted": 6679,
    "total_active_users": 161,
    "total_chat_acceptances": 176,
    "total_chat_turns": 1441,
    "total_active_chat_users": 105,
    "breakdown": [
      {
        "language": "javascriptreact",
        "editor": "vscode",
        "suggestions_count": 56,
        "acceptances_count": 19,
        "lines_suggested": 83,
        "lines_accepted": 15,
        "active_users": 2
      },
      {
        "language": "typescriptreact",
        "editor": "vscode",
        "suggestions_count": 2808,
        "acceptances_count": 916,
        "lines_suggested": 4249,
        "lines_accepted": 797,
        "active_users": 45
      },
=========途中省略。私たちの環境では合計で25言語分あり。=========
      {
        "language": "yaml",
        "editor": "jetbrains",
        "suggestions_count": 95,
        "acceptances_count": 26,
        "lines_suggested": 297,
        "lines_accepted": 28,
        "active_users": 4
      },
      {
        "language": "unknown",
        "editor": "vim",
        "suggestions_count": 32,
        "acceptances_count": 6,
        "lines_suggested": 137,
        "lines_accepted": 14,
        "active_users": 2
      }
    ]
  },
=========以下これが過去27日分続くため省略=========

日ごとに言語・エディタごとの詳細データが取得できる一方で、私の環境ではレスポンス全体で2万行超の情報が返ってきました。シンプルに見るのがしんどい😭
ということで、さくっとお手軽に可視化できるOSSを使ってみます！

copilot-metrics-viewerを使ってみる

設定

まずは
.envに以下環境変数を設定

# Determines if mocked data should be used instead of making API calls.
# モックデータではなく実際のメトリクスデータを利用するためfalseを設定
VUE_APP_MOCKED_DATA=false

# Determines the scope of the API calls. 
# Can be 'enterprise' or 'organization' to target API calls to an enterprise or an organization respectively.
# 今回は自社の全体感を把握したいためenterpriseを設定
VUE_APP_SCOPE=enterprise

# Determines the enterprise or organization name to target API calls.
# 今回はEnterpriseスコープで利用するため設定不要
VUE_APP_GITHUB_ORG=

# 自社のenterprise名を設定
VUE_APP_GITHUB_ENT=<enterprise-name>

# Determines the team name if exists to target API calls.
# 今回はざっくり全体を把握したいため設定不要
VUE_APP_GITHUB_TEAM=

# Determines the GitHub Personal Access Token to use for API calls.
# Create with scopes copilot, manage_billing:copilot or manage_billing:enterprise, read:enterprise AND read:org
# EnterpriseのOwner権限を持つGitHubユーザーでPATを作成して設定
VUE_APP_GITHUB_TOKEN=<PAT>

# GitHub Api Url
# for proxy api - set to /api/github defaults to https://api.github.com
# まずはAPI Proxyなしで動かしてみるため不要
VUE_APP_GITHUB_API=

.envの設定ができたら以下を実行

依存関係のインストール

npm install

コンパイルしてアプリを実行

npm run serve
・
・
（途中省略）
・
・
App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://10.241.0.144:8080/

http://localhost:8080/ もしくは http://10.241.0.144:8080/ にブラウザからアクセス

はい！出来上がり！
超絶お手軽にダッシュボードで可視化ができました🚀

まとめ

• GitHub Metric APIでGitHub Copilotの利用状況データが取得できます👍
  • ただし、APIレスポンスそのままだと非常に見づらいです🤮
• copilot-metrics-viewerで手軽に可視化できます🚀

今後に向けて

今回はまずはお手軽に可視化してみようとテーマにローカル環境で実施ました。
次はセキュアに組織内で共有できるように以下を対応してみます。

• API ProxyでGitHubのPersonal Access Tokenを隠蔽
• AWS上にデプロイ

次回、『セキュアにGitHub Copilotの利用状況を可視化しよう🚀copilot-metrics-viewerでお手軽可視化！(API Proxy・AWSデプロイ編)』に続きます！

また、可視化した内容からKAGのGitHub Copilot活用状況2024年版も別途記事化予定です。

参考資料

• REST API endpoints for GitHub Copilot usage metrics
  • https://docs.github.com/en/enterprise-cloud@latest/rest/copilot/copilot-metrics?apiVersion=2022-11-28
• github-copilot-resources/copilot-metrics-viewer
  • https://github.com/github-copilot-resources/copilot-metrics-viewer