📌

AI に外部ツールを接続するための共通プロトコル

What is the Model Context Protocol (MCP)? - Model Context Protocol

https://modelcontextprotocol.io

Claudeを作ったAnthropicが発表し、現在はAgent開発のデファクトスタンダードになっています。

MCP 登場前

ツールごとに専用コードを書き、AIに直接組み込む必要がありました。

MCP 登場後

• すでにあるMCPサーバーを差し込むだけでAIに新しい能力を追加できます
• 自作する場合も決まったルールに沿って書けば大丈夫です

AIとMCPサーバーは直接通信せず、間のMCP clientが入ります
// VS Code / Cursorなどに内蔵されています

DB への問い合わせを例にした流れ:

1. AI起動時、MCP clientが「利用可能なMCPサーバ一覧」をAIに渡します
2. ユーザーが「DBから売上を取って」と依頼します
3. AIがDB用MCPサーバーを呼ぶべきと判断し、SQLなどを生成します
4. MCP clientがJSON形式でMCPサーバーに要求を送ります
5. MCPサーバーが実DBに問い合わせ、結果を反対の順番でAIまで返します
6. AIはその結果をもとにユーザーへ回答します

1. MCPが多すぎるとパフォーマンスが落ちる
   • プロンプトが長くなるとAIが混乱し、適切なツールを選べなくなります
   • 使ってほしいMCPをはっきりと指定するのが安全です
2. セキュリティリスク
   • 誰でもMCPを作れるため、悪意あるMCPの利用やMCPの応答データに命令を埋め込むプロンプトインジェクション攻撃のリスクがあります
   • DB削除やプロンプトインジェクションなど、動作ミスの影響が大きいです
3. 不安定で遅い
   • 通信のオーバーヘッドでレスポンスが遅くなります
   • 安定性を大事にするなら、直接コードで書いた方が速くて確実です

mcpServersの中にMCPサーバーを並べていく形です。

{
  "servers": {
    "MCP1": { },
    "MCP2": { }
  }
}

2つのMCPサーバーを.vscode/mcp.jsonに追加し、Copilot Agentから実際に呼び出してみます。

• プロジェクト単位: リポジトリの一番上の.vscode/mcp.jsonに書きます
• ユーザー単位: VS Codeのユーザー設定で全体共有します

1. プロジェクト直下に.vscode/フォルダを作成します
2. .vscode/mcp.jsonを新規作成し、以下の内容を貼り付けます
   Copy

   {
     "servers": {
       "github": {
         "type": "http",
         "url": "https://api.githubcopilot.com/mcp/"
       }
     }
   }

   ❓

   MCPのコードはどこで確認できますか？

   ほとんどMCPのREADMEや手順書に書いています。
   https://github.com/github/github-mcp-server#install-in-vs-code

3. “github”上の起動ボタンを押します

   

4. 許可を押します

   

5. Webページが開いたら、Continueを押します

   

6. Authorizeを押します

   

7. Authorize Visual-Stuio-Codeを押します

   

8. 二段階認証で認証を行います

   

9. 開くをおして認証を完了します

   

10. 下記のプロンプトでテストしてみます
    Copy

    OOO リポジトリの XXX ブランチの最近のコミットリストをMCPで調べて。
    `gh` コマンドは使用しないこと。必ずMCPツールを使用すること。
    MCPでアクセスできない場合（権限エラーなど）は、その旨を明確に教えること。

https://developers.notion.com/guides/mcp/get-started-with-mcp#vs-code-github-copilotを参考して、Notion MCPを追加します。

{
  "servers": {
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp/"
    },
    "notion": {
      "type": "http",
      "url": "https://mcp.notion.com/mcp"
    }
  }
}

1. Notion MCPのコードを追加すると起動ボタンが現れます。

   

2. 許可を押します

   

3. 開くを押して、認証を行います

   

4. 開くを押して、VSCodeに戻れたら認証完了です ✨

   

MCP にすべての権限を与えてしまうと何でもできてしまうため、最小限の権限だけを付与しましょう。

例えば Notion MCP は今の状態だと、ページの追加・修正・削除など、すべての操作ができてしまいます。今回は読み取り権限のみを付与して使ってみましょう。

1. Copilot のチャットウィンドウで設定ボタンをクリックすると、AI の設定を編集できます。
2. その中から notion 項目を探して、以下の権限だけにチェックを入れ、残りは外します。

   

   • notion-fetch
   • notion-get-comments
   • notion-get-teams
   • notion-get-users
   • notion-search

• リポジトリのREADMEを取得します
  プロンプト例

  Copy

  OOOリポジトリのREADMEを表示して
  
  // もしうまくいかなかったら…
  GitHub MCP を使って、<リポジトリURL>のREADMEを表示して

• OOOページの内容をAIに要約してもらいます
  プロンプト例

  Copy

  NotionのOOOページを3〜5行で要約して
  
  // もしうまくいかなかったら…
  Notion MCP を使って、以下のページの内容を3〜5行で要約して
  <NotionページURL>

Slack MCP

Slack のメッセージ送受信・チャンネル検索・スレッド取得などを AI が直接操作できる MCP

Playwright MCP

プロンプトの指示だけで、AIがブラウザ操作を実行できるMCP

Figma MCP

デザインファイルのコンポーネント・レイヤー構造を AI が読み取り、コードの自動生成やスペック確認できるMCP

Claude Code (Anthropic) が提供していた機能で、2025年12月リリースの GitHub Copilot v1.108 から Agent Skills として正式対応しました。
今では複数の AI エージェントで共通利用できるオープン標準として広まりつつあります。

---
name: blog-draft
description: NIFTY engineering ブログ向けの記事初稿を作成する。「ブログ書いて」など、技術記事の下書き依頼時に参照。
---

# NIFTY engineering ブログ 初稿作成ガイド

## トーン & マナー
- です・ます調で統一
- 一人称は「私」
- 絵文字は使わない

## 構成テンプレート
1. はじめに
2. 技術背景
3. 実装
4. まとめ

1. front matter: 「いつ読むか」を決めるラベル領域です。Copilot は各 SKILL.md の description だけをまず見渡し、マッチした Skill だけ本文を読み込みます
   • name: Skill の識別子 // フォルダ名と 必ず一致させる
   • description: Skill を「いつ読むか」を決めるトリガー文
2. 本文: description がマッチすると AI が全部読み込む内容になります。

NIFTY engineering ブログ向けの初稿作成 Skill (blog-draft) を作ります。

1. SKILL.md ファイルを作成

   プロジェクト直下に .github/skills/blog-draft/ フォルダを作成し、その中に SKILL.md を新規作成します。

   Copy

   .github/
   └── skills/
       └── blog-draft/
           └── SKILL.md

   💡

   Copilot チャットのUIでも作れます

   

   設定 ⚙️ → Skills タブ → New スキル (Workspace) → .githubを選択することで SKILL.md作成できます。

   ❗

   .vscodeではなく.githubの下です！
2. front matter を書く

   作成した SKILL.md の一番上に、以下の YAML を貼り付けます。

   Copy

   ---
   name: blog-draft
   description: NIFTY engineering ブログ向けの記事初稿を作成する。「ブログ書いて」など、技術記事の下書き依頼時に参照。
   ---

   💡

   front matter の name がフォルダ名と一致していないと、Skill として認識されません。.github/skills/blog-draft/ フォルダ と name: blog-draft の組み合わせを再度確認してください。
3. 本文を書く

   front matterの下に、見出し・内容を追記します。

   Copy

   # NIFTY engineering ブログ 初稿作成ガイド
   
   ## トーン & マナー
   - です・ます調で統一する
   - 一人称は「私」
   - 絵文字は使わない
   - 「〜だと思います」より「〜です」「〜になります」と断定する
   - 専門用語は初出時に1行で説明を添える
   
   ## 記事の構成
   セクションは以下の順で並べ、見出しレベルは `#` を使う。
   
   1. `はじめに`
   2. `技術背景`
   3. `# 実装 / ハンズオン`
   4. `# まとめ` または `# おわりに`
   - 学んだことを3〜5項目の箇条書きで再掲

ハンズオン1で作った blog-draft Skill が、Copilot Agent から実際に発動されるかを確認します。

1. Skill を Copilot に認識させる

   新しい SKILL.md を追加した直後は、すでに開いている Copilot セッションには反映されないことがあります。新しいチャットで新しいセッションを開きます。

2. Skill が登録されているか確認する

   Copilot チャットの入力欄に /skills と入力し、ワークスペース Skillの一覧にblog-draft が出ているのかを確認します。

   

3. トリガーで実際に発動させる

   Copilot Chat を Agent モード に切り替えてから、次のプロンプトを送ってみます。

   Copy

   [ネタ]についてブログ書いて

   生成された下書きが、SKILL.md で指定したトーン・マナーと構成に沿っているかを確認します。また Copilot の応答に blog-draft Skill が参照された旨の表示が出ているかも合わせて確認します。

   

blog-draft Skill を使って、Agent Skillsについてのブログ初稿を書いて