Skip to content

04-mcp-client.md

Latest commit

 

History

History
251 lines (173 loc) · 8.3 KB

04-mcp-client.md

File metadata and controls

251 lines (173 loc) · 8.3 KB

04: MCPクライアント

このステップでは、To-Doリスト管理用のMCPクライアントを構築します。

前提条件

準備についてはREADMEドキュメントを参照してください。

はじめに

GitHub個人アクセストークン（PAT）の準備

MCPクライアントアプリ開発のために、AIモデルへのアクセスが必要です。このワークショップでは、GitHub ModelsのOpenAI GPT-4.1-miniを使用します。

GitHub Modelsにアクセスするには、GitHub個人アクセストークン（PAT）が必要です。

PATを取得するには、GitHub設定に移動して新しいPATを作成します。必ず"Models"に対して権限を"読み取り専用"に設定してください。

MCPクライアント開発の準備

前のセッションで、MCPサーバーとクライアントアプリの両方をすでにコピーしました。それを使い続けましょう。

  1. 環境変数$REPOSITORY_ROOTがあることを確認してください。

    # bash/zsh
REPOSITORY_ROOT=$(git rev-parse --show-toplevel)
    # PowerShell
$REPOSITORY_ROOT = git rev-parse --show-toplevel

  2. workshopディレクトリに移動します。

    cd $REPOSITORY_ROOT/workshop

  3. クライアントアプリにGitHub PATを追加します。{{ GITHUB_PAT }}を前のセクションで発行されたGitHub PATに置き換えてください。

    dotnet user-secrets --project ./src/McpTodoClient.BlazorApp set GitHubModels:Token "{{ GITHUB_PAT }}"

  4. アプリを実行します。

    dotnet watch run --project ./src/McpTodoClient.BlazorApp

  5. プロンプトを入力してアプリが動作しているか確認します。以下は例です：

    なぜ空はそんなに青いのですか？

  6. CTRL+Cを入力してアプリを停止します。

MCPクライアントの実装

  1. MCPクライアントアプリディレクトリにいることを確認してください。

    cd $REPOSITORY_ROOT/workshop/src/McpTodoClient.BlazorApp

  2. MCPクライアント用のNuGetパッケージを追加します。

    dotnet add package ModelContextProtocol.AspNetCore --prerelease

  3. Program.csを開き、追加のusingディレクティブを以下のように追加します：

    using System.ClientModel;
using McpTodoClient.BlazorApp.Components;
using Microsoft.Extensions.AI;

// 👇👇👇 追加 👇👇👇
using ModelContextProtocol.Client;
using ModelContextProtocol.Protocol;
// 👆👆👆 追加 👆👆👆

using OpenAI;

  4. 同じProgram.csで、var app = builder.Build();行を見つけて、その直前に以下のコード行を追加します。

    builder.Services.AddChatClient(chatClient)
                .UseFunctionInvocation()
                .UseLogging();

// 👇👇👇 追加 👇👇👇
builder.Services.AddSingleton<IMcpClient>(sp =>
{
    var loggerFactory = sp.GetRequiredService<ILoggerFactory>();

    var uri = new Uri("http://localhost:5242");

    var clientTransportOptions = new SseClientTransportOptions()
    {
        Endpoint = new Uri($"{uri.AbsoluteUri.TrimEnd('/')}/mcp")
    };
    var clientTransport = new SseClientTransport(clientTransportOptions, loggerFactory);

    var clientOptions = new McpClientOptions()
    {
        ClientInfo = new Implementation()
        {
            Name = "MCP Todo Client",
            Version = "1.0.0",
        }
    };

    return McpClientFactory.CreateAsync(clientTransport, clientOptions, loggerFactory).GetAwaiter().GetResult();
});
// 👆👆👆 追加 👆👆👆

var app = builder.Build();

  5. Components/Pages/Chat/Chat.razorを開き、追加の@usingディレクティブを追加します。

    @page "/"

@using System.ComponentModel

@* 👇👇👇 追加 👇👇👇 *@
@using ModelContextProtocol.Client
@* 👆👆👆 追加 👆👆👆 *@

@inject IChatClient ChatClient

  6. 同じComponents/Pages/Chat/Chat.razorで、IMcpClientを別の依存関係として追加します。

    @inject IChatClient ChatClient

@* 👇👇👇 追加 👇👇👇 *@
@inject IMcpClient McpClient
@* 👆👆👆 追加 👆👆👆 *@

@implements IDisposable

  7. 同じComponents/Pages/Chat/Chat.razorで、@code { ... }コードブロックにプライベートフィールドを追加します。

    private readonly ChatOptions chatOptions = new();

// 👇👇👇 追加 👇👇👇
private IEnumerable<McpClientTool> tools = null!;
// 👆👆👆 追加 👆👆👆

private readonly List<ChatMessage> messages = new();

  8. 同じComponents/Pages/Chat/Chat.razorで、OnInitialized()をOnInitializedAsync()に置き換えます。

    // Before
protected override void OnInitialized()
{
    messages.Add(new(ChatRole.System, SystemPrompt));
}

// After
protected override async Task OnInitializedAsync()
{
    messages.Add(new(ChatRole.System, SystemPrompt));
    tools = await McpClient.ListToolsAsync();
    chatOptions.Tools = [.. tools];
}

MCPサーバーアプリの実行

  1. workshopディレクトリにいることを確認してください。

    cd $REPOSITORY_ROOT/workshop

  2. MCPサーバーアプリを実行します。

    dotnet run --project ./src/McpTodoServer.ContainerApp

MCPクライアントアプリの実行

  1. workshopディレクトリにいることを確認してください。

    cd $REPOSITORY_ROOT/workshop

  2. MCPクライアントアプリを実行します。

    dotnet watch run --project ./src/McpTodoClient.BlazorApp

  3. Webブラウザが開いたら、To-Doリスト項目に関するプロンプトを入力します。以下は例です：

    To-Doリストを教えて。
午前9時に会議を予約して。
12時にランチを予約して。
午前9時の会議は終了しました。
ランチの時間を午後1時に変更して。
午後1時に別の会議を予約して。
午後1時の会議をキャンセルして。

👉 チャレンジ：前のセッションで作成したコンテナまたはリモートサーバーでMCPサーバーを置き換えてください。

リソースのクリーンアップ

  1. 使用したすべてのコンテナイメージを削除します。

    docker rmi mcp-todo-http:latest --force

  2. Azureにデプロイしたすべてのリソースを削除します。

    azd down --force --purge

おめでとうございます！🎉 ワークショップのすべてのセッションを正常に完了しました！

このドキュメントはGitHub Copilotによってローカライズされました。そのため、誤りが含まれる可能性があります。不適切または間違った翻訳を見つけた場合は、issueを作成してください。