1. Claude MCPサーバーへのGitHub統合の準備と設定 [1]

thumbnail

1.1. GitHubトークンの生成と権限設定 [7]

  1. GitHubアカウントへのログイン: GitHubの機能を利用するためには、まずGitHubアカウントにログインする必要がある [7]。
  2. パーソナルアクセストークンの生成:
    1. 設定(Settings)から開発者設定(Developer settings)に進み、パーソナルアクセストークン(Personal access token)を選択する [9]。
    2. 新しいトークンを生成する（ファイングレイントークンまたはクラシックトークンを選択可能） [11]。
    3. トークンに名前を付け（例: testing one）、有効期限を7日間に設定する [12]。
    4. アクセス権限の設定:
      1. デフォルトオプションではパブリックリポジトリへのアクセスのみが許可される [14]。
      2. すべてのリポジトリを許可するため、該当オプションを選択する [14]。
      3. リポジトリ権限セクションで、テストの可能性を最大限に引き出すため、すべてのアクセス権限を付与する [16]。
    5. アカウントレベルの権限も割り当て可能であるが、スムーズなサーバーテストのためにすべての権限を追加する [20]。
    6. トークンを生成し、生成されたトークンをコピーする [24]。

1.2. Claudeデスクトップ設定ファイルへのGitHubサーバーのインストール [27]

  1. GitHubサーバーのドキュメント確認: GitHubサーバーのリポジトリを開き、提供されているドキュメント（インストール手順）を確認する [27]。
  2. Cloud desktop config.jsファイルの編集:
    1. Claudeを開き、開発者モードを有効にする（初回の場合） [31]。
    2. 設定(Settings)から開発者(Developer)に進み、インストールされているサーバーを確認する [34]。
    3. ライブラリ/アプリケーションサポート内のClaudeフォルダを開き、Cloud desktop config.jsファイルを見つける [36]。
      • ファイルが存在しない場合は、同じ名前で新規作成する [39]。
    4. エディタでファイルを開き、既存のGitHubセクションを削除し、最初から追加する [40]。
  3. サーバー設定の追加:
    1. メインオブジェクト内のMCP serversプロパティに、サーバーごとのプロパティを追加する [45]。
    2. GitHubサーバーのコードスニペットをコピーし、設定ファイルに貼り付ける（npxアプローチを使用） [48]。
    3. コピーしたGitHubトークンをコード内のプレースホルダーテキストと置き換える [53]。
  4. Claudeの再起動とツールのロード確認:
    1. サーバーを追加した後、Claudeを終了し、再度開く [55]。
    2. 再起動後、ツールセクションにGitHubサーバーからの多くのアクション（ツール）がロードされたことを確認する（例: 28個のツールが利用可能になる） [56]。

2. GitHubサーバーの主要機能とツールのテスト [61]

thumbnail

2.1. GitHubサーバーで利用可能なアクションの概要 [61]

  1. ファイル操作: ファイルの作成/更新、ファイルのプッシュ（単一コミットで複数ファイルプッシュ可能）、GitHubからのファイルコンテンツの取得 [62]。
  2. リポジトリ管理: リポジトリの検索、リポジトリの作成、リポジトリのフォーク [65]。
  3. イシュー/プルリクエスト管理: イシューの作成、プルリクエストの作成、イシューのリスト表示、イシューの更新、特定のイシューへのコメント追加 [68]。
  4. 検索機能: コードの検索、イシューの検索、ユーザーの検索、コミットのリスト表示、イシューの取得など [75]。

2.2. ファイル作成機能のテストとAPIフォーマットエラーの自己修正 [78]

  1. ファイル作成の試行:
    1. テスト対象のリポジトリパスをClaudeに伝え、hello.htmlというファイルを作成するように依頼する [79]。
    2. Claudeは「GitHubからファイルを作成または更新」ツールを実行しようとする [89]。
    3. ツール実行の許可を与える（このチャットでの許可を選択） [91]。
  2. 最初の失敗と原因分析:
    1. ツール呼び出しが失敗し、「無効な引数、コンテンツエンコーディングが必要」というエラーが発生する [100]。
    2. Claudeは、GitHub APIの要件を満たすためにリクエストを修正しようとするが、再び失敗する [102]。
    3. Claudeはリポジトリの検索を試みた後、別のツールである「ファイルのプッシュ」を実行する [106]。
  3. 「ファイルのプッシュ」ツールによる成功:
    1. Claudeはリポジトリが存在し、プライベートであり、メインブランチがデフォルトであることを確認する [112]。
    2. 別の方法（ファイルのプッシュ）でファイル作成を試み、成功する [113]。
    3. リポジトリでhello.htmlファイルが作成されたことを確認する [116]。
  4. 失敗の原因に関するClaudeの自己説明:
    1. Claudeは、以前の関数が失敗した理由として、GitHub APIでファイルを作成または更新する際、コンテンツがcontentとencodingの2つの必須フィールドを含む特定の形式で提供される必要があることを説明する [121]。
    2. 以前の試行では、コンテンツを直接文字列として渡そうとしたが、APIはこれら2つのフィールドを個別に指定することを期待している [124]。
  5. フォーマット修正の試行と継続的な失敗:
    1. Claudeは正しい形式（Base64エンコードされた文字列）を試すが、再び「無効な引数、content.encodingが必要」というエラーが発生する [126]。
    2. ユーザーが正しいオブジェクト形式を提示し、Claudeがオブジェクトを文字列化されたオブジェクトとして渡していることが失敗の原因であると指摘する [132]。
    3. Claudeはユーザーの指摘を認め、修正しようとするが、同じ間違いを繰り返し、問題の解決が困難であることを示す [140]。

2.3. 複数ファイルプッシュ機能のテスト [152]

  1. 「ファイルのプッシュ」ツールの説明:
    1. 「ファイルのプッシュ」ツールは、単一のコミットでGitHubリポジトリに複数のファイルをプッシュすることを可能にする [153]。
    2. 複数の新しいファイルを作成したり、既存の複数のファイルを一度に更新したりするのに役立ち、すべての変更が単一のコミットにまとめられる [156]。
  2. 複数ファイル作成の試行:
    1. Claudeに1.html、2.html、3.htmlの3つのファイルを作成するように依頼する [162]。
    2. 新しいチャットでリポジトリパスを再設定した後、Claudeは「ファイルのプッシュ」ツールを使用する [167]。
    3. Claudeはすべてのファイルとそのコンテンツを追加し、成功する [173]。
  3. 結果の確認:
    1. Claudeは「テストブログ用に3つのHTMLページを追加」というコミットメッセージを自動で選択した [180]。
    2. リポジトリで3つのファイルが作成されたこと、およびコミットがClaudeによって行われたことを確認する [181]。

2.4. リポジトリ検索機能のテスト [189]

  1. リポジトリ検索ツールの説明:
    1. このツールは、検索クエリとオプションのページ番号を提供することで、GitHubリポジトリを検索できる [189]。
    2. Claudeはページネーションを自動で処理するため、ユーザーがペイロードを提供する必要はない [192]。
  2. 検索の実行:
    1. ユーザーはツール名を明示せずに、「React開発者向けのレスポンシブレイアウトに最適なリポジトリを検索してください」と依頼する [195]。
    2. Claudeは自動的に「リポジトリの検索」ツールを選択し、クエリとページごとの番号を準備する [199]。
    3. Claudeは「React responsive」、「React responsive layout, stars」などのクエリを使用して検索を試みる [203]。
  3. 検索結果の提示:
    1. 検索結果に基づき、React Grid Layout（最も人気）、Styled System、Autores of Reactなどが最適なリポジトリとして提示される [206]。
    2. クエリに星の数が考慮されているため、最も人気のあるリポジトリに関する情報も提供される [208]。
    3. 検索結果の正確性を確認するため、GitHubで「React Grid Layout」を検索し、20,000以上の星を持つライブラリであることを確認する [211]。

2.5. リポジトリ作成機能のテスト [216]

  1. リポジトリ作成ツールの説明:
    1. リポジトリ名、説明、プライベート/パブリックの指定、READMEの自動初期化（auto-init）を指定できる [217]。
  2. パブリックリポジトリの作成:
    1. Claudeに「public test」という名前のパブリックリポジトリを「Hello World」という説明とクリエイティブなREADME.mdファイルで作成するように依頼する [223]。
    2. Claudeは「リポジトリの作成」ツールの実行許可を求め、提供されたデータ（private: false, auto-init: true）を使用する [226]。
    3. ClaudeはREADMEファイルを追加するために「ファイルを作成または更新」ツールを実行しようとするが、エラーが発生する [230]。
    4. Claudeは自動的に「ファイルのプッシュ」ツールに切り替え、READMEファイルの更新に成功する [235]。
    5. GitHubで「public test」リポジトリが「Hello World」の説明とともにパブリックとして作成され、READMEファイルが含まれていることを確認する [238]。
  3. プライベートリポジトリの作成:
    1. Claudeに「private test」という名前のプライベートリポジトリを「private description」という説明で、READMEファイルなしで作成するように依頼する [242]。
    2. Claudeは「リポジトリの作成」ツールを使用し、private: true、auto-init: falseを設定する [245]。
    3. GitHubで「private test」リポジトリが作成され、READMEファイルがないことを確認する [248]。

2.6. ファイルコンテンツ取得機能のテスト [251]

  1. ファイルコンテンツ取得ツールの説明:
    1. このツールは、GitHubから任意のファイルのコンテンツを取得できる [251]。
  2. ファイルコンテンツの読み取りと説明:
    1. ユーザーは、以前に見たパブリックリポジトリ内のコードが多いファイルのURLをClaudeに提供し、ファイルの内容を尋ねる [253]。
    2. Claudeは「ファイルコンテンツの取得」ツールを実行し、コンテンツを取得する [260]。
    3. Claudeは、このファイルがReact Grid LayoutのGridItem.jsxコンポーネントであり、React Draggableを使用したドラッグ可能な機能や主要なプロパティなどの目的と主要な機能について説明する [265]。
    4. Claudeがコードを非常に簡単に説明できることが確認される [272]。

3. イシュー、プルリクエスト、その他の高度な機能のテストとトラブルシューティング [274]

thumbnail

3.1. イシュー作成機能のテスト [274]

  1. イシュー作成の試行:
    1. 新しいプライベートリポジトリで、プロフェッショナルに見えるダミーデータを含む3つの新しいイシューを作成するように依頼する [276]。
    2. Claudeは「イシューの作成」ツールの許可を求め、実行する [281]。
    3. 最初の試行は失敗するが、ラベルなしで再試行すると成功する [284]。
  2. 結果の確認:
    1. 3つのイシューがAIによって作成され、非常にリアルに見えるダミーコンテンツが含まれていることを確認する [287]。
    2. Claudeがイシューにラベルも追加したことが確認される [290]。

3.2. プルリクエスト作成のためのブランチ作成と変更のプッシュ [292]

  1. ブランチ作成とファイル作成の試行:
    1. プルリクエストを作成する前に、新しいブランチ（Cloud test）を作成し、ダミーコンテンツを含むファイル（l.txt）を作成する必要がある [293]。
    2. Claudeは「ブランチの作成」ツールを実行しようとするが、エラーが発生する [297]。
    3. Claudeは「ファイルのプッシュ」を使用してブランチとファイルを単一の操作で作成しようとするが、これも失敗する [301]。
  2. 自動トラブルシューティングと成功:
    1. Claudeは、メインブランチが初期化されていなかったことが問題の原因であると判断し、まずメインブランチを初期化する [306]。
    2. その後、Cloud testブランチを作成し、レイアウトファイルを追加することに成功する [314]。
  3. 結果の確認:
    1. リポジトリにCloud testブランチが作成され、その中にレイアウトファイルがあることを確認する [317]。
    2. コミットセクションで、ClaudeがREADMEファイルとともにメインブランチを初期化し、その後Cloud testブランチを作成したことを確認する [320]。
    3. Cloud testブランチにはlayouts.tsファイルがあるが、メインブランチにはまだないことを確認する [329]。

3.3. プルリクエスト作成機能のテストと継続的なエラー [334]

  1. 最初のマージ試行と誤解:
    1. ユーザーは「変更をメインブランチとマージしてください」と依頼する [334]。
    2. Claudeは「プルリクエストの作成」ツールを使用しようとするが、失敗する [337]。
    3. Claudeは代替アプローチとして、変更を直接メインにプッシュしようとする（これはプルリクエストの意図に反する） [345]。
    4. ユーザーは、プルリクエストではなくマージを依頼したため、この結果になったと判断する [351]。
  2. プルリクエスト作成の再試行:
    1. Cloud testブランチに新しいファイル（testing.html）を作成し、変更を加える [356]。
    2. ユーザーは「CLA testをメインにマージするためのプルリクエストを作成してください。ただし、マージはしないでください」と明確に依頼する [364]。
    3. Claudeはエラーを返し、ブランチが既に同期している、競合がある、またはプルリクエストが既に存在している可能性があると述べる [366]。
  3. 新しいチャットでの再試行とエラーの継続:
    1. Claudeが直接データをプッシュしようとするのを止めるため、新しいチャットを開始する [376]。
    2. 新しいチャットでプルリクエストの作成を依頼する [383]。
    3. Claudeは「プルリクエストの作成」ツールを使用するが、再び「未処理のエンティティ」エラーで失敗する [386]。
    4. ユーザーは、以前の失敗の原因が既にプルリクエストが存在していたためであると確認する [399]。
    5. 既存のプルリクエストを閉じた後、再試行するが、Claudeは再びエラーを返す [407]。
    6. 最終的に、Claudeはエラーをスローしているにもかかわらず、技術的にはプルリクエストを作成できたことが確認される [421]。

3.4. リポジトリフォーク機能のテスト [429]

  1. フォークの試行:
    1. React Grid Layoutリポジトリを「forked testing」という名前でフォークするように依頼する [431]。
    2. Claudeは「リポジトリのフォーク」ツールの許可を求め、実行するが失敗する [435]。
    3. Claudeは代わりにリポジトリを作成しようとするが、これも失敗する [439]。
    4. Claudeはフォークプロセスで制限に遭遇していることを謝罪し、API制限、権限、またはリポジトリがプライベートである可能性を挙げる（ただし、リポジトリはパブリックである） [447]。
  2. 結果の確認:
    1. 「forked testing」という名前のリポジトリは作成されたが、データは含まれていないことが確認される [451]。
    2. このツールは機能しなかったと結論付けられる [454]。

3.5. イシューリスト取得機能のテストとサーバーの更新 [456]

  1. イシューリスト取得の試行（古いサーバー）:
    1. ユーザーは、特定のプライベートリポジトリのイシューリストを提供するように依頼する [457]。
    2. Claudeは「イシューの作成」ツールを使用して新しいイシューを作成しようとする（意図しない動作） [462]。
    3. ユーザーは新しいイシューを作成しないように依頼するが、Claudeは「直接利用可能な関数がない」と回答する [469]。
    4. ユーザーは「イシューのリスト表示」ツールが存在することを指摘するが、Claudeはアクセスできるイシュー関連の関数が「イシューの作成」のみであると述べる [472]。
  2. サーバーのバージョンアップの必要性:
    1. ユーザーは、使用しているサーバーパッケージが古く、最新ではないことに気付く [486]。
    2. サーバーの更新手順:
      1. ターミナルでnpm root -Gコマンドを実行し、グローバルなNodeモジュールフォルダのパスを取得する [493]。
      2. そのパスに移動し、node_modules/mcp-server-github/dist/index.jsファイルを開く [498]。
      3. 既存のindex.jsファイルには「イシューの作成」ツールしか含まれていないことを確認する [505]。
      4. GitHubサーバーリポジトリをクローンし、npm installを実行して依存関係をインストールする [510]。
      5. npm run buildコマンドを実行して、新しいindex.jsファイルをビルドする [524]。
      6. 新しくビルドされたindex.jsファイルの内容をコピーし、古いサーバーのindex.jsファイルの内容を置き換える [528]。
      7. 同様に、ビルドされたschema.jsファイルの内容もコピーし、古いサーバーのschema.jsファイルを置き換える [538]。
  3. Claudeの再起動とツールの確認:
    1. Claudeを再起動すると、ツール数が36個に増加し、「イシューのリスト表示」など、不足していたツールがすべて利用可能になったことを確認する [545]。

3.6. 更新されたサーバーでのイシュー関連機能のテスト [552]

  1. イシューリスト取得の再試行（プライベートリポジトリ）:
    1. プライベートリポジトリのイシューリストを提供するように依頼する [552]。
    2. Claudeは「イシューのリスト表示」ツールを使用しようとするが、エラーが発生する [554]。
    3. 「イシューの検索」ツールも試すが、機能しない [556]。
  2. イシュー更新機能のテスト:
    1. 特定のイシューをランダムなコンテンツで更新するように依頼する [560]。
    2. Claudeは「イシューの更新」ツールの許可を求め、更新に成功する [564]。
    3. イシューに新しいテキストが追加されたことを確認する [567]。
  3. イシューリスト取得の再々試行（パブリックリポジトリ）:
    1. パブリックリポジトリのイシューリストを提供するように依頼すると、今回はイシューを取得できる [574]。
    2. 別のプライベートリポジトリでテストすると、イシューを取得できる場合もある [589]。
    3. 最初のプライベートリポジトリで再試行すると、再び失敗し、特定のイシュー番号を渡して単一のイシューを取得しようとする（リスト全体は取得できない） [598]。
    4. 特定のリポジトリでのみ失敗する原因は不明であり、さらなる調査が必要であると結論付けられる [607]。
  4. イシューコメント追加機能のテスト:
    1. 特定のイシューにコメントを作成するように依頼する [611]。
    2. Claudeは「イシューコメントの追加」ツールの許可を求め、実行するが、エラーが発生する [614]。
    3. 別のリポジトリで再試行するが、これもエラーを返す [621]。
    4. 重要な発見: Claudeはエラーを表示しているにもかかわらず、実際にはコメントが追加されていることが確認される [630]。
    5. このツールまたはサーバーには改善が必要であるが、舞台裏では機能していることが確認される [635]。

3.7. その他の検索機能とコミットリストのテスト [638]

  1. コード検索機能: 以前にテストされた種類のツールであるため、スキップする [638]。
  2. イシュー検索機能のテスト:
    1. 特定のリポジトリで「developer guidelines」というキーワードでイシューを検索するように依頼する [641]。
    2. Claudeは「イシューの検索」ツールを実行するが、すぐに失敗する [646]。
    3. Claudeはイシュー番号を直接使用してイシューを見つけるが、意図した検索方法ではない [649]。
  3. ユーザー検索機能のテスト:
    1. ユーザー名でGitHubユーザーを検索するように依頼する [652]。
    2. Claudeは「ユーザーの検索」ツールの許可を求め、実行する [657]。
    3. ユーザー名、ユーザーID、タイプ、アバターURLなどの多くの情報を取得し、少なくとも2つのリポジトリ（private testとblog test）があることを確認する [661]。
  4. コミットリスト取得機能のテスト:
    1. 特定のリポジトリのコミットリストを提供するように依頼する [668]。
    2. Claudeは「コミットのリスト表示」ツールの許可を求め、実行する [671]。
    3. これまでに作成されたすべてのコミットを取得することに成功する [673]。
    4. Claudeが数千のコミットを簡単にキャプチャし、コンテキストとして使用してプロジェクトの履歴を説明できる可能性が示唆される [675]。

4. まとめと今後の展望 [678]

thumbnail
  1. 結論: このビデオでは、GitHubツールを詳細に調査し、多くの時間を費やしてその可能性を探求した [678]。
  2. 今後の計画:
    1. このシリーズ（MCPシリーズ）で引き続きビデオを作成し、公式に提供されているほぼすべてのMCPツールをカバーする予定である [679]。
    2. 各サーバーごとに異なるビデオを作成し、非公式サーバーやコミュニティサーバーも探求する予定である [683]。
  3. 視聴者への呼びかけ: 質問、フィードバック、提案があれば、コメントセクションに残すように促す [687]。