Use Azure OpenAI With Blazor Application

This Azure OpenAI and Blazor post will show how to create a Blazor web application and use Azure OpenAI.

About Blazor Application

The screenshot below displays a Blazor application that generates secure passwords by connecting to Azure OpenAI. The application requests a GPT-4 endpoint from the Azure OpenAI endpoint to create the password.


The application has the following components

  • Program.cs – Main C# file
  • OpenAIService.cs – Class that connects and interacts with the Azure OpenAI endpoint.
  • Index.razor – HTML and C# code the call the OpenAIService class

Use the above components. The application uses the Azure SDK for .NET to connect to an Azure OpenAI endpoint.

Note: The is using the Blazor WebAssambly template.


Before you start, ensure you have an Azure OpenAI endpoint (use the post below if you don’t).

  • Install the Azure OpenAI library dotnet add package Azure.AI.OpenAI --version 1.0.0-beta.6

Create an appsettings.json under the wwwroot folder and store your Azure OpenAI endpoint and Key.


Save the file and go ahead and create the class.


Note: In line 28, you need to enter the name of the LLM model you use; in our case, it’s gpt4.

Save the file and open the Index.razor page or Home.razor.


More AI articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.