次の方法で共有

AI アプリ テンプレート拡張機能を使用してカスタム データとチャットする .NET AI アプリを作成する

  • [アーティクル]

このクイック スタートでは、.NET AI アプリ テンプレートを使用してカスタム データとチャットする .NET AI アプリを作成する方法について説明します。 このテンプレートは、一般的なセットアップ タスクと構成を処理することで、.NET で AI アプリを構築するための作業の開始エクスペリエンスを効率化するように設計されています。

前提 条件

.NET AI アプリ テンプレートをインストールする

AI Chat Web App テンプレートは、NuGet を通じてテンプレート パッケージとして使用できます。 dotnet new install コマンドを使用してパッケージをインストールします。

dotnet new install Microsoft.Extensions.AI.Templates

.NET AI アプリを作成する

AI アプリ テンプレートをインストールしたら、それらを使用して、Visual Studio UI、Visual Studio Code、または .NET CLI を使用してスターター アプリを作成できます。

  1. Visual Studio で、[ファイル] > [新しい > プロジェクト] に移動します。
  2. [新しいプロジェクト の作成] 画面で、AI チャット Web アプリのを検索します。 一致する結果を選択し、次に [次へ]を押します。
  3. [新しいプロジェクト の構成] 画面で、プロジェクトの目的の名前と場所を入力し、[次へ] 選択します。
  4. 追加情報 画面で、次の手順を実行します。
    • [フレームワーク] オプションで [.NET 9.0] を選択します。
    • [AI サービス プロバイダー] オプションで [GitHub モデル] を選択します。
    • [ベクトル ストア] オプションで [ローカル オンディスク (プロトタイプ作成用)] を選択します。
  5. [作成] を選択してプロセスを完了します。

サンプル アプリを調べる

作成したサンプル アプリは、一般的な AI およびデータ サービスで事前構成された Blazor Interactive Server Web アプリです。 アプリは、次の懸念事項を処理します。

  • AI の使用を開始するのに役立つ、csproj ファイルに不可欠な Microsoft.Extensions.AI パッケージとその他の依存関係が含まれています。
  • さまざまな AI サービスを作成し、Program.cs ファイルに依存関係の挿入に登録します。
    • 生成 AI モデルとやり取りする IChatClient サービス
    • ベクター検索機能に不可欠な埋め込みの生成に使用される IEmbeddingGenerator サービス
    • インメモリ ベクトル ストアとして機能する JsonVectorStore
  • SQLite データベース コンテキスト サービスを登録して、ドキュメントの取り込み処理を行います。 アプリは、指定されたサンプル ファイルを含め、プロジェクトの Data フォルダーに追加したドキュメントを取り込むよう事前構成されています。
  • Blazor コンポーネントを使用して完全なチャット UI を提供します。 UI は、AI 応答の豊富な書式設定を処理し、応答データの引用などの機能を提供します。

GitHub モデルへのアクセスを構成する

コードから GitHub モデルに対して認証を行うには、GitHub 個人用アクセス トークンを作成する必要があります。

  1. GitHub アカウント設定の 個人用アクセス トークン ページに移動します。
  2. [新しいトークンの生成] を選択します。
  3. トークン名 を入力し、ページの下部にある [トークン生成] を選択します。
  4. 前の手順で使用するトークンをコピーします。

アプリを構成する

AI Chat Web App アプリは、作成されるとほとんどすぐに使用できます。 ただし、GitHub Modelsfor 用に設定した個人用アクセス トークンを使用するようにアプリを構成する必要があります。 既定では、アプリ テンプレートはプロジェクトのローカル .NET ユーザー シークレットでこの値を検索します。 Visual Studio UI または .NET CLI を使用して、ユーザー シークレットを管理できます。

  1. Visual Studio で、ソリューション エクスプローラーでプロジェクトを右クリックし、[ユーザー シークレットの管理] を選択します。 これにより、ソース管理で追跡されずに API キーを格納できる secrets.json ファイルが開きます。

  2. 次のキーと値を追加します。

    {
    "GitHubModels:Token": "<your-personal-access-token>"
}

既定では、アプリ テンプレートは gpt-4o-mini モデルと text-embedding-3-small モデルを使用します。 他のモデルを試すには、Program.csの名前パラメーターを更新します。

var chatClient = ghModelsClient.AsChatClient("gpt-4o-mini");
var embeddingGenerator = ghModelsClient.AsEmbeddingGenerator("text-embedding-3-small");

前提 条件

.NET AI アプリ テンプレートをインストールする

AI Chat Web App テンプレートは、NuGet を通じてテンプレート パッケージとして使用できます。 dotnet new install コマンドを使用してパッケージをインストールします。

dotnet new install Microsoft.Extensions.AI.Templates

.NET AI アプリを作成する

AI アプリ テンプレートをインストールしたら、それらを使用して、Visual Studio UI、Visual Studio Code、または .NET CLI を使用してスターター アプリを作成できます。

  1. Visual Studio で、[ファイル] > [新しい > プロジェクト] に移動します。
  2. [新しいプロジェクト の作成] 画面で、AI チャット Web アプリのを検索します。 一致する結果を選択してから、[次へ]を選択します。
  3. [新しいプロジェクト の構成] 画面で、プロジェクトの目的の名前と場所を入力し、[次へ] 選択します。
  4. 追加情報 画面で、次の手順を実行します。
    • Framework オプションでは、の .NET 9.0を選択します。
    • [AI サービス プロバイダー] オプションで [Azure OpenAI] を選択します。
    • [Azure サービスにキーレス認証を使用する] チェック ボックスがオンになっていることを確認します。
    • [ベクトル ストア] オプションで [ローカル オンディスク (プロトタイプ作成用)] を選択します。
  5. 「作成」を選択してプロセスを完了します。

サンプル アプリを調べる

作成したサンプル アプリは、一般的な AI およびデータ サービスで事前構成された Blazor Interactive Server Web アプリです。 アプリは、次の懸念事項を処理します。

  • AI の使用を開始するのに役立つ、csproj ファイルに不可欠な Microsoft.Extensions.AI パッケージとその他の依存関係が含まれています。
  • さまざまな AI サービスを作成し、Program.cs ファイルに依存関係の挿入に登録します。
    • 生成 AI モデルとやり取りする IChatClient サービス
    • ベクター検索機能に不可欠な埋め込みの生成に使用される IEmbeddingGenerator サービス
    • インメモリ ベクトル ストアとして機能する JsonVectorStore
  • SQLite データベース コンテキスト サービスを登録して、ドキュメントの取り込み処理を行います。 アプリは、指定されたサンプル ファイルを含め、プロジェクトの Data フォルダーに追加したドキュメントを取り込むよう事前構成されています。
  • Blazor コンポーネントを使用して完全なチャット UI を提供します。 UI は、AI 応答の豊富な書式設定を処理し、応答データの引用などの機能を提供します。

Azure OpenAI リソースを作成して構成する

.NET AI テンプレートを使用するには、Azure OpenAI サービスを作成して認証する必要があります。

  1. Azure OpenAI サービス リソース をまだ作成していない場合は作成します。

  2. gpt-4o-mini モデルと text-embedding-3-small モデルを Azure OpenAI サービス リソースにデプロイします。 これらのデプロイを作成するときは、モデル (gpt-4o-mini と text-embedding-3-small) と同じ名前を付けます。 モデルをデプロイする方法については、「Azure OpenAI ドキュメント リソース を作成する」を参照してください。

  3. AI テンプレートは、キーレス認証に Microsoft Entra ID を使用するように構成されています。 キーレス認証用に Azure OpenAI リソースを構成します。

アプリを構成する

AI Chat Web App アプリは、作成されるとすぐにほぼ準備が整います。 ただし、アプリの接続先となる Azure OpenAI サービスのエンドポイントを指定する必要があります。 既定では、アプリ テンプレートはプロジェクトのローカル .NET ユーザー シークレットでこの値を検索します。 Visual Studio UI または .NET CLI を使用して、ユーザー シークレットを管理できます。

手記

認証エラーを回避するには、Azure OpenAI リソースで azure AI Developer ロール 割り当てられているユーザーを使用して、Visual Studio または Azure CLI にサインインしていることを確認します。

  1. Visual Studio で、ソリューション エクスプローラーでプロジェクトを右クリックし、[ユーザー シークレットの管理] を選択します。 これにより、ソース管理で追跡されずに API キーを格納できる secrets.json ファイルが開きます。

  2. 次のキーと値を追加します。

    {
    "AzureOpenAi:Endpoint": "<your-endpoint>"
}

既定では、アプリ テンプレートは、AI モデルのデプロイ名が基になるモデルと同じであることを前提としています。 必要に応じて、gpt-4o-mini と text-embedding-3-small のデプロイ名と一致するようにデプロイ名パラメーターを更新します。

// Update these parameter values to match your Azure OpenAI model deployment names
var chatClient = azureOpenAi.AsChatClient("gpt-4o-mini");
var embeddingGenerator = azureOpenAi.AsEmbeddingGenerator("text-embedding-3-small");

前提 条件

.NET AI アプリ テンプレートをインストールする

AI Chat Web App テンプレートは、NuGet を通じてテンプレート パッケージとして使用できます。 dotnet new install コマンドを使用してパッケージをインストールします。

dotnet new install Microsoft.Extensions.AI.Templates

.NET AI アプリを作成する

AI アプリ テンプレートをインストールしたら、それらを使用して、Visual Studio UI、Visual Studio Code、または .NET CLI を使用してスターター アプリを作成できます。

  1. Visual Studio で、[ファイル] > [新しい > プロジェクト] に移動します。
  2. [新しいプロジェクト の作成] 画面で、AI チャット Web アプリのを検索します。 一致する結果を選択してからをクリックし、[次へ]を選択します。
  3. [新しいプロジェクト の構成] 画面で、プロジェクトの目的の名前と場所を入力し、[次へ] 選択します。
  4. 追加情報 画面で、次の手順を実行します。
    • [フレームワーク] オプションで [.NET 9.0] を選択します。
    • オプションで AI サービス プロバイダーとして、[OpenAI] を選択します。
    • [ベクトル ストア] オプションで [ローカル オンディスク (プロトタイプ作成用)] を選択します。
  5. [作成] を選択してプロセスを完了します。

サンプル アプリを調べる

作成したサンプル アプリは、一般的な AI およびデータ サービスで事前構成された Blazor Interactive Server Web アプリです。 アプリは、次の懸念事項を処理します。

  • AI の使用を開始するのに役立つ、csproj ファイルに不可欠な Microsoft.Extensions.AI パッケージとその他の依存関係が含まれています。
  • さまざまな AI サービスを作成し、Program.cs ファイルに依存関係の挿入に登録します。
    • 生成 AI モデルとやり取りする IChatClient サービス
    • ベクター検索機能に不可欠な埋め込みの生成に使用される IEmbeddingGenerator サービス
    • JsonVectorStore はインメモリベクターストアとして機能する
  • SQLite データベース コンテキスト サービスを登録して、ドキュメントの取り込み処理を行います。 アプリは、指定されたサンプル ファイルを含め、プロジェクトの Data フォルダーに追加したドキュメントを取り込むよう事前構成されています。
  • Blazor コンポーネントを使用して完全なチャット UI を提供します。 UI は、AI 応答の豊富な書式設定を処理し、応答データの引用などの機能を提供します。

アプリを構成する

AI Chat Web App アプリは、作成されるとすぐに使用できます。 ただし、アプリが接続と認証に使用する OpenAI サービスのキーを指定する必要があります。 既定では、アプリ テンプレートはプロジェクトのローカル .NET ユーザー シークレットでこの値を検索します。 Visual Studio UI または .NET CLI を使用して、ユーザー シークレットを管理できます。

  1. Visual Studio で、ソリューション エクスプローラーでプロジェクトを右クリックし、[ユーザー シークレットの管理] を選択します。 これにより、ソース管理で追跡されずに API キーを格納できる secrets.json ファイルが開きます。

  2. 次のキーと値を追加します。

    {
    "OpenAi:Key": "<your-openai-key>"
}

既定では、アプリ テンプレートは特定の AI モデルを使用することを前提としています。 必要に応じて、対象とするモデルと一致するようにモデル名パラメーターを更新します。

// Update these parameter values to match your preferred OpenAI models
var chatClient = openAIClient.AsChatClient("gpt-4o-mini");
var embeddingGenerator = openAIClient.AsEmbeddingGenerator("text-embedding-3-small");

前提 条件

.NET AI アプリ テンプレートをインストールする

AI Chat Web App テンプレートは、NuGet を通じてテンプレート パッケージとして使用できます。 dotnet new install コマンドを使用してパッケージをインストールします。

dotnet new install Microsoft.Extensions.AI.Templates

.NET AI アプリを作成する

AI アプリ テンプレートをインストールしたら、それらを使用して、Visual Studio UI、Visual Studio Code、または .NET CLI を使用してスターター アプリを作成できます。

  1. Visual Studio で、[ファイル] > [新しい > プロジェクト] に移動します。
  2. [新しいプロジェクト の作成] 画面で、AI チャット Web アプリのを検索します。 一致する結果を選択し、次に [次へ]を選択します。
  3. [新しいプロジェクト の構成] 画面で、プロジェクトの目的の名前と場所を入力し、[次へ] 選択します。
  4. 追加情報 画面で、次の手順を実行します。
    • [フレームワーク] オプションで [.NET 9.0] を選択します。
    • [AI サービス プロバイダー] オプションで [Ollama] を選択します。
    • Vector store オプションで、ローカルオンディスク（プロトタイプ用）を選択します。
  5. [作成] を選択してプロセスを完了します。

サンプル アプリを調べる

作成したサンプル アプリは、一般的な AI およびデータ サービスで事前構成された Blazor Interactive Server Web アプリです。 アプリは、次の懸念事項を処理します。

  • AI の使用を開始するのに役立つ、csproj ファイルに不可欠な Microsoft.Extensions.AI パッケージとその他の依存関係が含まれています。
  • さまざまな AI サービスを作成し、Program.cs ファイルに依存関係の挿入に登録します。
    • 生成 AI モデルとやり取りする IChatClient サービス
    • ベクター検索機能に不可欠な埋め込みの生成に使用される IEmbeddingGenerator サービス
    • インメモリ ベクター ストアとして機能する JsonVectorStore。
  • SQLite データベース コンテキスト サービスを登録して、ドキュメントの取り込み処理を行います。 アプリは、指定されたサンプル ファイルを含め、プロジェクトの Data フォルダーに追加したドキュメントを取り込むよう事前構成されています。
  • Blazor コンポーネントを使用して完全なチャット UI を提供します。 UI は、AI 応答の豊富な書式設定を処理し、応答データの引用などの機能を提供します。

アプリを構成する

AI Chat Web App アプリは、作成されるとすぐに利用可能になります。 ただし、アプリを実行する前に、特定の構成がニーズと一致することを確認する必要があります。

  1. ローカル ターミナル ウィンドウで、ollama serve コマンドを使用して Ollama がコンピューター上で実行されていることを確認します。

    ollama serve

  2. 既定では、アプリ テンプレートは既定の Ollama ホスト アドレス (http://localhost:11434) を対象とし、llama3.2 と all-minilm AI モデルの使用を想定しています。 次のコマンドを使用して、これらのモデルをデバイスにプルします。

    ollama pull llama3.2
ollama pull all-minilm

    代替モデルを使用する場合は、同じ ollama pull コマンドを使用してこれらのモデルをプルダウンします。

  3. クライアント構成コードのパラメーターが、お好みのモデルと一致するかどうかを確認します。

    // Update these parameter values to match your preferred OpenAI models
IChatClient chatClient = new OllamaApiClient(
    new Uri("http://localhost:11434"),
    "llama3.2");
IEmbeddingGenerator<string, Embedding<float>> embeddingGenerator = new OllamaApiClient(
    new Uri("http://localhost:11434"),
    "all-minilm");

アプリを実行してテストする

  1. Visual Studio の上部にある実行ボタンを選択して、アプリを起動します。 しばらくすると、ブラウザーに次の UI 読み込みが表示されます。

    .NET AI アプリ テンプレートの UI を示すスクリーンショット。

  2. 「生存キットの重要なツールは何ですか」などの入力ボックスにプロンプトを入力、サンプル ファイルから取り込まれたデータに関する質問を AI モデルに問い合わせてください。

    .NET AI アプリ テンプレートの会話 UI を示すスクリーンショット。

    アプリは質問に対する回答を返し、データが見つかった場所の引用を提供します。 引用文献の 1 つをクリックすると、サンプル ファイルの関連セクションに移動できます。

次の手順