出典: https://github.com/microsoft/mcp-for-beginners フォーク元リポジトリ: https://github.com/microsoft/mcp-for-beginners (Microsoft) ライセンス: MIT License

Visual Studio Code の AI Toolkit 拡張機能でサーバーを利用する¶

AIエージェントを作るとき、単に賢い応答を生成するだけでなく、エージェントに行動を起こす能力を持たせることも重要です。そこで登場するのが Model Context Protocol（MCP）です。MCPは、エージェントが外部のツールやサービスに一貫した方法でアクセスできるようにします。まるでエージェントを実際に使えるツールボックスに接続するようなイメージです。

例えば、エージェントを計算機のMCPサーバーに接続すると、「47かける89は？」といったプロンプトを受け取るだけで計算ができるようになります。ロジックをハードコードしたり、カスタムAPIを作る必要はありません。

概要¶

このレッスンでは、Visual Studio Code の AI Toolkit 拡張機能を使って、計算機のMCPサーバーをエージェントに接続し、自然言語で加算、減算、乗算、除算などの計算を行えるようにする方法を解説します。

AI Toolkitは、Visual Studio Code向けの強力な拡張機能で、エージェント開発を効率化します。AIエンジニアは、ローカルやクラウド上で生成AIモデルを開発・テストしながら、簡単にAIアプリケーションを構築できます。現在、主要な生成モデルのほとんどに対応しています。

注: AI Toolkitは現在、PythonとTypeScriptをサポートしています。

学習目標¶

このレッスンを終えると、以下ができるようになります：

• AI Toolkitを通じてMCPサーバーを利用する方法
• エージェント設定を構成し、MCPサーバーが提供するツールを発見・活用できるようにする方法
• 自然言語を使ってMCPツールを利用する方法

アプローチ¶

大まかな流れは以下の通りです：

• エージェントを作成し、システムプロンプトを定義する
• 計算機ツールを備えたMCPサーバーを作成する
• Agent BuilderをMCPサーバーに接続する
• 自然言語でエージェントのツール呼び出しをテストする

流れがわかったところで、MCPを通じて外部ツールを活用し、エージェントの能力を強化する設定を始めましょう！

前提条件¶

• Visual Studio Code
• Visual Studio Code 用 AI Toolkit

演習：サーバーを利用する¶

この演習では、Visual Studio Code内のAI Toolkitを使って、MCPサーバーのツールを備えたAIエージェントを構築、実行、強化します。

-0- 事前準備：OpenAI GPT-4oモデルをMy Modelsに追加する¶

この演習ではGPT-4oモデルを使用します。エージェント作成前にMy Modelsに追加しておいてください。

1. Activity BarからAI Toolkit拡張機能を開きます。
2. CatalogセクションでModelsを選択し、Model Catalogを開きます。Modelsを選ぶと新しいエディタタブでModel Catalogが開きます。
3. 検索バーにOpenAI GPT-4oと入力します。
4. + AddをクリックしてモデルをMy Modelsリストに追加します。GitHubホストのモデルを選択していることを確認してください。
5. Activity BarでOpenAI GPT-4oモデルがリストに表示されていることを確認します。

-1- エージェントを作成する¶

Agent (Prompt) Builderを使うと、自分だけのAIエージェントを作成・カスタマイズできます。このセクションでは新しいエージェントを作成し、会話を支えるモデルを割り当てます。

1. Activity BarからAI Toolkit拡張機能を開きます。
2. ToolsセクションでAgent (Prompt) Builderを選択します。新しいエディタタブでAgent (Prompt) Builderが開きます。
3. + New Agentボタンをクリックします。コマンドパレットでセットアップウィザードが起動します。
4. 名前にCalculator Agentと入力し、Enterキーを押します。
5. Agent (Prompt) BuilderのModel欄でOpenAI GPT-4o (via GitHub)モデルを選択します。

-2- エージェントのシステムプロンプトを作成する¶

エージェントの骨組みができたら、次は性格や目的を定義します。このセクションではGenerate system prompt機能を使い、計算機エージェントとしての振る舞いを説明し、モデルにシステムプロンプトを作成してもらいます。

1. PromptsセクションでGenerate system promptボタンをクリックします。プロンプトビルダーが開き、AIを使ってシステムプロンプトを生成します。
2. Generate a promptウィンドウに以下を入力します：You are a helpful and efficient math assistant. When given a problem involving basic arithmetic, you respond with the correct result.
3. Generateボタンをクリックします。右下に生成中の通知が表示されます。生成が完了すると、Agent (Prompt) BuilderのSystem prompt欄にプロンプトが表示されます。
4. System promptを確認し、必要に応じて修正します。

-3- MCPサーバーを作成する¶

エージェントのシステムプロンプトができたら、次は実用的な機能を持たせます。このセクションでは、加算、減算、乗算、除算の計算を実行できる計算機MCPサーバーを作成します。これにより、エージェントは自然言語のプロンプトに応じてリアルタイムで計算を行えます。

AI ToolkitにはMCPサーバー作成を簡単にするテンプレートが用意されています。ここではPythonテンプレートを使って計算機MCPサーバーを作成します。

注: AI Toolkitは現在、PythonとTypeScriptをサポートしています。

1. Agent (Prompt) BuilderのToolsセクションで+ MCP Serverボタンをクリックします。コマンドパレットでセットアップウィザードが起動します。
2. + Add Serverを選択します。
3. Create a New MCP Serverを選択します。
4. テンプレートとしてpython-weatherを選択します。
5. MCPサーバーテンプレートの保存先にDefault folderを選択します。
6. サーバー名にCalculatorと入力します。
7. 新しいVisual Studio Codeウィンドウが開きます。Yes, I trust the authorsを選択します。
8. ターミナル（Terminal > New Terminal）で仮想環境を作成します：python -m venv .venv
9. ターミナルで仮想環境を有効化します：
   1. Windows - .venv\Scriptsctivate
   2. macOS/Linux - source venv/bin/activate
10. ターミナルで依存関係をインストールします：pip install -e .[dev]
11. Activity BarのExplorerビューでsrcディレクトリを展開し、server.pyを選択してエディタで開きます。

12. server.pyのコードを以下の内容に置き換え、保存します：

    """
    Sample MCP Calculator Server implementation in Python.
    
    
    This module demonstrates how to create a simple MCP server with calculator tools
    that can perform basic arithmetic operations (add, subtract, multiply, divide).
    """
    
    from mcp.server.fastmcp import FastMCP
    
    server = FastMCP("calculator")
    
    @server.tool()
    def add(a: float, b: float) -> float:
        """Add two numbers together and return the result."""
        return a + b
    
    @server.tool()
    def subtract(a: float, b: float) -> float:
        """Subtract b from a and return the result."""
        return a - b
    
    @server.tool()
    def multiply(a: float, b: float) -> float:
        """Multiply two numbers together and return the result."""
        return a * b
    
    @server.tool()
    def divide(a: float, b: float) -> float:
        """
        Divide a by b and return the result.
    
        Raises:
            ValueError: If b is zero
        """
        if b == 0:
            raise ValueError("Cannot divide by zero")
        return a / b
    

-4- 計算機MCPサーバーでエージェントを実行する¶

エージェントにツールが備わったので、実際に使ってみましょう。このセクションでは、エージェントにプロンプトを送信し、計算機MCPサーバーの適切なツールを使っているかをテスト・検証します。

ローカル開発マシンで計算機MCPサーバーをAgent BuilderをMCPクライアントとして実行します。

1. F5キーを押してMCPサーバーのデバッグを開始します。Agent (Prompt) Builderが新しいエディタタブで開きます。ターミナルにサーバーの状態が表示されます。
2. Agent (Prompt) BuilderのUser prompt欄に以下のプロンプトを入力します：I bought 3 items priced at $25 each, and then used a $20 discount. How much did I pay?
3. Runボタンをクリックしてエージェントの応答を生成します。
4. エージェントの出力を確認します。モデルは支払額が$55であると結論づけるはずです。
5. 起こるべき処理の内訳は以下の通りです：
   • エージェントは計算を助けるためにmultiplyとsubtractツールを選択します。
   • multiplyツールにはそれぞれaとbの値が割り当てられます。
   • subtractツールにもそれぞれaとbの値が割り当てられます。
   • 各ツールからの応答がTool Responseに表示されます。
   • 最終的なモデルの応答がModel Responseに表示されます。
6. さらにプロンプトを送信してエージェントをテストしてください。User prompt欄をクリックして既存のプロンプトを編集できます。
7. テストが終わったら、terminalでCTRL/CMD+Cを入力してサーバーを停止します。

課題¶

server.pyファイルに新しいツール（例：数値の平方根を返すツール）を追加してみましょう。新しいツール（または既存のツール）を使うようなプロンプトを送信してエージェントをテストしてください。新しいツールを読み込むためにサーバーの再起動を忘れずに行ってください。

解答例¶

解答例

まとめ¶

この章のポイントは以下の通りです：

• AI Toolkit拡張機能は、MCPサーバーとそのツールを利用するのに最適なクライアントです。
• MCPサーバーに新しいツールを追加することで、エージェントの機能を拡張し、変化する要件に対応できます。
• AI ToolkitにはPythonのMCPサーバーテンプレートなど、カスタムツール作成を簡単にするテンプレートが含まれています。

追加リソース¶

• AI Toolkit ドキュメント

次に進む¶

• 次へ：テストとデバッグ

免責事項：
本書類はAI翻訳サービス「Co-op Translator」を使用して翻訳されました。正確性の向上に努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。原文の言語によるオリジナル文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の利用により生じたいかなる誤解や誤訳についても、当方は一切の責任を負いかねます。