Zenn
🚀

これからのGitHubのIssue作成はAIエディタ内で済ませよう

2025/02/23に公開
15

WindsurfでMCPが本格的に使用できるようになってからこれまでブラウザで行っていたGithub issueの管理をAIエディタに移行しました。これがissueの作成スピード、クオリティともに爆上がりするとてもいい決断だったので記事にすることにしました。

※この記事では、Windsurf, MCPそのものの説明はしません。WindsurfはAIエディタで、MCPはAIエージェントが外部のデータやサービスにアクセスするための通信方法です。
https://codeium.com/windsurf
https://www.anthropic.com/news/model-context-protocol

結論から

最高な点

  • 最短5分程度で高クオリティのIssueが出来上がる。
    実際のコードを見てAIが関連ファイルや修正点を洗ってくれるので既に7割くらい開発終了しているくらいのレベルの指示書が出来上がる。

改善が期待される点

  • 通信に失敗するケースがある。
    意外と起きます。これは多分Windsurfが〜とかCursorが〜とかではなくてMCP全般に言えること?だと思うのですが不安定な時が多々あります。そんな時は諦めてコピペしましょう。
    Node.jsのバージョンが関係しているとか見かけましたが時間があれば調査してみようと思っています。

▼実際に作ってみたIssue(サンプル)
https://github.com/ks0318-p/sample_issue_repo/issues/1

前提

基本的には、以下の組み合わせで使用しています。

AIエディタ:Windsurf
モデル:Cascade Base
(その他:SuperWhisperで音声入力)

Cascade Baseは、WindsurfのNon-Premiumのモデルでクレジットを消費しません。
このCascade Baseが意外と優秀でMCPを介した通信も問題なくこなすことができます。(Proモード以上のユーザーでしか使用不可です。)
無料でMCPを何度でもCallできるのはとても魅力的です。

試していないこと

  • アサイン
  • マイルストーン
  • Open/Closeの変更failure in mcp tool

手順① エディタ上でのMCPの設定

CascadeのハンマーアイコンをクリックしてConfigureを選択するとmcp_config.jsonが開きます。
以下のようにgithubのMCPがセットされていることを確認してください。

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "abc123456789123456789" //要書き換え
      }
    }, 
    "slack": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-slack"],
      "env": {
        "SLACK_BOT_TOKEN": "xoxb-123456789123456789"
      }
    }
  }
}

手順② 呼び出しテスト

MCPを設定しただけではレポジトリ情報は伝わっていないのでAIに伝えてあげる必要があります。必要な情報はレポジトリの所有者とレポジトリ名です。ややこしく考えずURLを与えるだけで良いです。

issueを新しく作成してもらいます。

https://github.com/ks0318-p/sample_issue_repoに新しいissueを作成して

と指示すると、GitHubのMCPはリクエストを以下のようなカタチで投げます。

{
  "owner": "ks0318-p",
  "repo": "sample_issue_repo",
  "title": "New Issue",
  "body": "This is a newly created issue."
}

そして、このようなレスポンスを返してくれます。

Issue Details:
Issue Number: 1
Title: New Issue
Body: This is a newly created issue.
Link to Issue: View Issue

もちろん、ブラウザ上でもissueが作成されています。

※Windsurfの人は、「このGitHubのURLを記憶してください。」と投げておくとメモリ機能で次からURL無しでもいけるので便利です。

手順③ MDファイルの作成

次にエディタ上でGitHubのissue管理のためのディレクトリを作成します。
私は普通に/github/issuesというフォルダ内に作成していますが適宜好きなところに作成してください。

mkdir -p /github/issues

手順②でIssueを作成した際にIssueの番号が分かったので、次はissuesファイルの中に#{issueNum}.mdを作成します。今回の場合は、#1.mdになります。

これで作成された、/github/issues/#1.mdが今回issueの内容を書き込んでいくファイルになります。

GitHubのissueがマークダウン形式での記述であり、AIとマークダウン形式の相性がとてもいいのでここでは必ずMDファイルを作成するようにしましょう。

手順④ MDファイルの編集

ここでは、AIエージェントを使用しながらissueの内容を書き込んでいきます。

サンプルですが、以下のような内容が5分程度で作成できました。

# Issue #1: メールベースのユーザー招待機能の開発

Created: 2025-02-23
Author: ks0318-p
Assignee: ks0318-p

## 概要
- メールベースのユーザー招待機能の実装
- 招待リンクの生成と管理機能の開発

## 背景
- チームメンバーの招待を効率化する必要がある
- 現在は手動でのユーザー登録しかなく、運用負荷が高い
- セキュアな招待プロセスの確立が必要

## タスク
- 招待メール送信機能の実装
  - メールテンプレートの作成
  - メール送信処理の実装
- 招待リンクの生成機能
  - 一意な招待トークンの生成
  - 招待リンクの有効期限設定
  - 招待情報のDB登録(トークン、メールアドレス、有効期限、招待者情報)
- 招待状態管理機能
  - 招待一覧の表示
  - 招待の取り消し機能
  - 招待状態の更新(未受訳、受訳済み、期限切れ、取り消し)
- 招待リンクからの登録フロー
  - 招待トークンの検証
  - ユーザー登録フォームの実装
  - ユーザー情報のDB登録(メールアドレス、パスワードハッシュ、プロフィール情報)
  - 招待状態の更新(受訳済みに変更)

## 必要なパッケージ

{
  "dependencies": {
    "@sendgrid/mail": "^8.1.0",
    "bcryptjs": "^2.4.3",
    "nanoid": "^5.0.5",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/bcryptjs": "^2.4.6",
  }
}

### パッケージの役割
- `@sendgrid/mail`: 招待メールの送信
- `bcryptjs`: パスワードのハッシュ化
- `date-fns`: 日付操作
- `nanoid`: 招待トークンの生成
- `zod`: フォームバリデーション

## 関連ファイル
- `/src/app/api/invitations/route.ts`
- `/src/components/invitations/InviteForm.tsx`
- `/src/components/invitations/InvitationList.tsx`
- `/src/lib/email.ts`
- `/prisma/schema.prisma`

## DBスキーマ

model Invitation {
  id          String      @id @default(cuid())
  email       String
  token       String      @unique
  status      InviteStatus @default(PENDING)
  expiresAt   DateTime
  invitedBy   User        @relation("invitations", fields: [invitedById], references: [id])
  invitedById String
  createdAt   DateTime    @default(now())
  updatedAt   DateTime    @updatedAt
}

enum InviteStatus {
  PENDING
  ACCEPTED
  EXPIRED
  CANCELLED
}

model User {
  id          String      @id @default(cuid())
  email       String      @unique
  password    String
  name        String?
  invitations Invitation[] @relation("invitations")
  createdAt   DateTime    @default(now())
  updatedAt   DateTime    @updatedAt
}

## 留意点
- 招待メールのスパム対策
- 招待リンクのセキュリティ対策
- メール送信のエラーハンドリング
- 招待数の制限設定
- 招待履歴のログ管理

手順⑤ Issueの内容を反映する

#1.mdの内容で、対応するgithubのIssueの内容を更新してください。
とすると、再度MCP経由での通信が始まります。
成功したとの通知が返ってくれば、手順②で作成したGithub上のIssueが更新されているはずです。

これで完了です!

補足

この記事で紹介したのはgithubのMCPでできるほんの1例になります。もっといろいろな事ができますのでこちらに挙げておきます。(Windsurfは計17個のアクションが可能。詳しく見れていませんが、Clineはもっとありそうでした。)

アクション名 説明
github_create_or_update_file GitHubリポジトリ内のファイルを作成または更新します。
github_search_repositories GitHubリポジトリを検索します。
github_create_repository 新しいGitHubリポジトリを作成します。
github_get_file_contents GitHubリポジトリ内のファイルまたはディレクトリの内容を取得します。
github_push_files 複数のファイルを単一のコミットでGitHubリポジトリにプッシュします。
github_create_issue 新しいIssueをGitHubリポジトリに作成します。
github_create_pull_request GitHubリポジトリで新しいプルリクエストを作成します。
github_fork_repository GitHubリポジトリを自分のアカウントまたは指定した組織にフォークします。
github_create_branch GitHubリポジトリに新しいブランチを作成します。
github_list_commits GitHubリポジトリのブランチのコミットリストを取得します。
github_list_issues GitHubリポジトリのIssueをフィルタリングオプションでリストします。
github_update_issue 既存のIssueをGitHubリポジトリで更新します。
github_add_issue_comment 既存のIssueにコメントを追加します。
github_search_code GitHubリポジトリ内のコードを検索します。
github_search_issues GitHubリポジトリ内のIssueやプルリクエストを検索します。
github_search_users GitHubでユーザーを検索します。
github_get_issue 特定のGitHubリポジトリのIssueの詳細を取得します。

最後に

Xにて、実務で得たAI駆動開発に関する知見をアウトプットしています。良ければフォローお願いします!
https://x.com/KeisukeShibata_

15

Discussion

ログインするとコメントできます