WPFで簡易的なAIとチャットできるアプリをつくる

もくじ
https://tera1707.com/entry/2022/02/06/144447

やりたいこと

最近できた、VisualStudioのAIチャットのテンプレートを試してみたときに、サンプルのコードをそのまんま動かしたのだが、自分の手で最低限のコードを書いて、AIとのチャットをさせてみたい。

前提

• 2025/8/18頃に実験
• VisualStudio2022 17.14.11
• github Modelsを使用（Azure OpenAIではない）
• Microsoft.Extensions.AI を使用
  • IChatClientを使用

やったこと

以下のように進めた。

• github copilot proプランに課金
• github ModelsにアクセスするためのPersonal Access Tokenを取得
• WPFのアプリを作成
  • 必要なライブラリをnuget
  • チャットの質問の入力欄を作成
  • github modelsにアクセスする処理を作成

github copilot proプランに課金

詳しくはメモできてないが、確か下記から課金できたと思う。

※proに課金してないとどうなるか（LLMにアクセス時にエラーになるかどうか等）は確認できてない、試せてないが、たぶん課金が必要と思う。
※月10ドル（1000円）でこれだけ遊べたら安いもんか...

github ModelsにアクセスするためのPersonal Access Tokenを取得

VisualStudioのAIチャットのテンプレートを試してみたでやったようにして、github ModelsのPersonal Access Tokenを取得する。

👆を参照ということで、ここでは割愛。

WPFのアプリを作成

必要なライブラリをnuget

以下の2つのライブラリをnugetした。
（カッコ内は、今回使ったVer）

• Microsoft.Extensions.AI（9.8.0）
• Microsoft.Extensions.AI.OpenAI（9.8.0-preview.1.25412.6）

チャットの質問の入力欄を作成/github modelsにアクセスする処理を作成

以下のようなコードを書いた。（WPF）

画面

<Window x:Class="AIChatJikken.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AIChatJikken"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Margin="20">
        <StackPanel>
            <TextBox x:Name="PromptBox" Height="100" TextWrapping="Wrap" AcceptsReturn="True"/>
            <Button Content="送信" Click="Button_Click"  Margin="0,10,0,0"/>
            <TextBlock x:Name="ResponseBlock" TextWrapping="Wrap" Margin="0,10,0,0"/>
        </StackPanel>
    </Grid>

</Window>

コードビハインド

using Microsoft.Extensions.AI;
using OpenAI;
using System.ClientModel;
using System.Windows;

namespace AIChatJikken;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private async void Button_Click(object sender, RoutedEventArgs e)
    {
        var prompt = PromptBox.Text;

        if (prompt is null)
            return;

        ResponseBlock.Text = await GetCompletionAsync(prompt);

        PromptBox.Text = "";
    }

    public async Task<string> GetCompletionAsync(string prompt)
    {
        // githubで作成したPersonal Access Token
        var credential = new ApiKeyCredential("github_pat_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");

        // github modelsのエンドポイントを指定
        var openAIOptions = new OpenAIClientOptions()
        {
            Endpoint = new Uri("https://models.github.ai/inference")
        };

        // LLMのモデルを指定
        var client = new OpenAIClient(credential, openAIOptions).GetChatClient("openai/gpt-4o").AsIChatClient();

        // アクセス実行
        var res = await client.GetResponseAsync(prompt);

        return res.Text;
    }
}

メモ

テンプレートで作成したコード上では、github modelsのエンドポイントとして

https://models.inference.ai.azure.com

が使われているのだが、最近（2025/7月ごろ）に更新のアナウンスがあったらしく、

https://models.github.ai/inference

が現在の推奨の様子。（古い方でもまだ動くようだが）
古い方のアドレスは、「GitHub Modelsが一時的にAzureインフラ上でホストされていた頃の名残」らしい。

また、

var client = new OpenAIClient(credential, openAIOptions).GetChatClient("openai/gpt-4o").AsIChatClient();

ここのopenai/gpt-4oの部分も、このissueによると、

テンプレートでは

gpt-4o

となっているが、

openai/gpt-4o

が今の推奨らしい。変化激しい、、、おそらく推奨が変わったのをしらないと、ある日急に動かなくなるヤツっぽい。要注意と思う。

実行結果

こんな感じになった。

おそらく、テンプレートのコードだと、もっといろいろな処理が入っていたので、その辺も理解する必要ありそう。追々見ていく。