ChatGPT API and Blazor Server: Creating an Exceptional Customer Support Chatbot

Chatbots have been in the tech world for a long time, but until recently, they only had a wide use outside specific areas. With the emergence of OpenAI’s user-facing ChatGPT and ChatGPT API, this field has gained widespread attention in the mainstream population and media.

Leading companies strive for great client experiences while increasing efficiency and achieving business objectives. They are using customer support automation to accomplish this. For customer support agents, chatbots can drastically reduce the number of cases. Customers don’t need to speak with one of your human employees to acquire answers because bots are self-service tools. The chatbot can direct customers to your knowledge base or FAQ pages for help if their issue is straightforward or widespread. Because of this, your agents will have more time to devote to complex and time-consuming cases.

In this blog post, we will explore how you can create a customer support chatbot using the ChatGPT API and Blazor Server, combining the power of OpenAI’s language model with Microsoft’s Blazor framework.

Before diving into the implementation details, let’s take a moment to understand the ChatGPT API. ChatGPT is an extensive language model developed by OpenAI, capable of generating human-like responses to a given prompt. It can build conversational agents, virtual assistants, and chatbots. The API allows developers to integrate ChatGPT into their applications, leveraging its natural language processing capabilities.

Setting up the project

First, we need to generate a free OpenAI API key at to use in our application (if you don’t have an OpenAI account go to to create one). Free trial users receive $5 (USD) worth of credit, which expires after three months.

Figure 1. Opening the “Create new secret key” dialog

After the secret API key is generated, we need to copy it immediately because we won’t be able to do that later.

Figure 2. Copying new secret key

Blazor is a Microsoft web framework that allows you to build interactive web applications using C# instead of JavaScript. It is an open-source framework that enables developers to create web UIs using .NET languages such as C# and Razor syntax.

Blazor runs on the client side in the browser using WebAssembly, a binary instruction format that modern web browsers can execute. These applications can run entirely in the browser without needing server-side rendering or relying heavily on JavaScript.

Blazor provides a component-based architecture where you can create reusable UI components using C# and Razor syntax. These components can be combined to build complex user interfaces. Blazor components can handle user events, bind data, and communicate with server-side APIs.

There are two hosting models in Blazor: client-side and server-side. In the client-side model, the Blazor application is downloaded to the client’s browser and executed locally. In the server-side model, the application is performed on the server, and the UI updates are sent to the client using SignalR, a real-time communication library.

Blazor integrates seamlessly with other .NET technologies, allowing you to leverage existing .NET libraries and frameworks. It also provides a rich ecosystem of tools and extensions for development, debugging, and testing.

To start, create a new “Blazor Server App” project in Visual Studio or use the .NET CLI.

Figure 3. Selecting project type

Set the project name, and location and leave other settings with default values.

Figure 4. Setting project name, location, and solution name

Figure 5. Additional project information

Store the secret API key by right-clicking on the project and clicking “Manage User Secrets”.

Figure 6. Adding secrets.json file to project to store secret API key

In opened file secrets.json file, set the secret API key as follows.

Figure 7. Writing the secret API key in JSON object

Add OpenAI.NetClient nuget package for easier communication with ChatGPT API.

Figure 8. Adding OpenAI.NetClient nuget package to the project

Inject and set OpenAI service from OpenAI.NetClient library.

Figure 9. Injecting OpenAI service from OpenAI.NetClient library

ChatGPT API message handling

To have back-and-forth conversations (remembering previous questions and answers and transferring their context to new ones) using ChatGPT API, OpenAI has introduced messages instead of the old prompt style.

When using messages, instead of sending a single string as your prompt, you send a list of statements (all your previous questions and answers) as your input.

Along with content, each message has a role which can be ‘system‘, ‘user‘, or ‘assistant‘.

The system role message provides the initial instructions to the model. You can provide various information in the system role, including:

  • A brief description of the assistant
  • Personality traits (persona) of the assistant
  • Instructions or rules you would like the assistant to follow
  • Data or information needed for the model, such as relevant questions from an FAQ

You can customize the system role for your use case or include basic instructions. The system role/message is optional, but it’s recommended to at least have a basic one to get the best results.

After the system role, you can include messages between the user and the assistant to track conversation history and keep context for the following notes.

Here we see how system message is used to set boundaries of chat messages only to the role of “customer support agent for Linux hosting” and user and assistant messages are used to track conversation history to maintain context for future ChatGPT answers.

Figure 10. Using system messages to set boundaries of the chat conversation

Here is an example of continuing conversation where ChatGPT has previous messages and answers new questions within that context.

Figure 11. The initial message of the conversation matches the set boundaries

Figure 12. Follow-up question and answer which remembers the context of the previous question


For companies that rely on the .NET tech stack using a combination of Blazor and ChatGPT API to build customer support chatbot is a seamless solution because it builds on the existing skills of their developers. There are more elaborate and expensive techniques and tools for creating custom chatbots (custom LLMs, Fine-tuning, LangChain,…) than priming with persona. However, this is a good and cost-effective solution for specific use cases.

You can find the code for this example here.

Read also: React Native Reanimated: Your Ticket to 60FPS Animations