.NET Blazor + OpenAI — Building a Company Support Chatbot

Posted by:

Rob Hutton

|

On:

|

, , , , , ,
, , , , , , ,

Blazor Server and OpenAI combine to create a powerful solution for building intelligent, interactive chatbots that can transform customer support experiences. By leveraging Blazor’s real-time web capabilities and OpenAI’s language models, businesses can build dynamic, responsive chatbots that provide immediate, context-aware responses. This approach allows for seamless integration of AI-driven customer support directly into your web application, enhancing efficiency and user satisfaction.

The Problem

Businesses often receive repetitive customer inquiries, such as:

  • “How do I reset my password?”
  • “What are your support hours?”
  • “How do I request a refund?”

Manually handling these questions is time-consuming and can lead to delayed responses.

The Solution

A support chatbot powered by OpenAI’s GPT-4 can automate responses, delivering fast and consistent answers based on company knowledge.

What We’ll Build

A Blazor Server chatbot that:

  • Integrates with the OpenAI API for intelligent responses.
  • Retrieves company-specific FAQs from a knowledge base.
  • Uses custom prompt engineering to refine responses.

Implementing .NET Blazor with OpenAI — Company Support Chatbot

Imagine TechSupportCo, a company handling a high volume of support inquiries. Instead of manually answering the same questions repeatedly, we’ll build a chatbot that provides instant responses based on TechSupportCo’s support policies.

1️⃣ Set Up OpenAI API Key

The chatbot needs access to OpenAI’s GPT-4 to generate responses. As such, the first step is to get an API key from OpenAI.

  • Sign up at OpenAI (https://openai.com) and get an API key.
  • Store the API key in appsettings.json:
{
  "OpenAI": {
    "ApiKey": "your-api-key-here"
  }
}

2️⃣ Create an ASP.NET Core Blazor Application

Next, we create a new Blazor Server project named CompanySupportChatbot. The dotnet new command is used to generate project templates, and blazorserver specifies that it’s a Blazor Server app.

dotnet new blazorserver -n CompanySupportChatbot
cd CompanySupportChatbot
dotnet run

3️⃣ Install OpenAI SDK

In this step, we add the OpenAI NuGet package to the current .NET project. This package provides access to OpenAI’s API, allowing the application to interact with models like GPT-4 for generating responses.

dotnet add package OpenAI

4️⃣ Create OpenAI Service

Next, we create the OpenAI service class. This OpenAIService class is a service in a .NET application that interacts with OpenAI’s API to generate chatbot responses.

using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;
using Microsoft.Extensions.Configuration;

public class OpenAIService
{
    private readonly HttpClient _httpClient;
    private readonly string _apiKey;

    public OpenAIService(HttpClient httpClient, IConfiguration config)
    {
        _httpClient = httpClient;
        _apiKey = config["OpenAI:ApiKey"];
    }

    public async Task<string> GetChatbotResponse(string userInput, string companyKnowledge)
    {
        var prompt = $"""
            You are a helpful customer support chatbot for TechSupportCo.
            Use the following company knowledge to assist users:
            {companyKnowledge}
            
            User Question: {userInput}
            Answer:
        """;

        var request = new { model = "gpt-4", messages = new[] { new { role = "system", content = prompt } } };

        var response = await _httpClient.PostAsJsonAsync("https://api.openai.com/v1/chat/completions", request);
        var result = await response.Content.ReadFromJsonAsync<dynamic>();
        return result?.choices[0]?.message?.content?.ToString() ?? "I'm not sure. Can you clarify?";
    }
}
  • Uses HttpClient to make HTTP requests.
  • Uses IConfiguration to read the OpenAI API key from the app’s configuration (e.g., appsettings.json).
  • The constructor injects HttpClient (for making API calls) and IConfiguration (to retrieve the API key from configuration).

5️⃣ Load Company Knowledge from a Database

In this step, we will create the Knowledgebase service class. The KnowledgeBaseService class is a service that retrieves company-specific knowledge (FAQs) from a database. It then formats the FAQs into a string format that can be used as input for the OpenAI chatbot.

public class KnowledgeBaseService
{
    private readonly ApplicationDbContext _dbContext;

    public KnowledgeBaseService(ApplicationDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public async Task<string> GetCompanyKnowledge()
    {
        var faqs = await _dbContext.CompanyFAQs.ToListAsync();
        return string.Join("\n", faqs.Select(f => $"Q: {f.Question} A: {f.Answer}"));
    }
}
  • The class uses ApplicationDbContext, which is an Entity Framework context that interacts with the database.
  • The constructor injects ApplicationDbContext to allow access to the database.
  • GetCompanyKnowledge() is an asynchronous method that retrieves all FAQ records from the database.
  • _dbContext.CompanyFAQs.ToListAsync()fetches all records from the CompanyFAQs table asynchronously. Each record contains a Question and an Answer field.
  • string.Join("\n", faqs.Select(f => $"Q: {f.Question} A: {f.Answer}"))transforms each FAQ record into a string formatted as Q: {Question} A: {Answer}. Joins all FAQ strings into one large string, separating each FAQ by a newline (\n).
Q: How do I reset my password? A: Go to settings and click reset.
Q: What are your support hours? A: We support 9 AM - 5 PM.

6️⃣ Create the Blazor Chat UI

Next, we set up a functional Blazor chatbot interface where users can ask questions, and the bot responds using OpenAI, supplemented by company FAQs. This is a Blazor page component that acts as a chatbot interface for TechSupportCo. It allows a user to input a question, and sends it to the chatbot to receive a response. The chatbot is powered by OpenAI and uses the company’s knowledge base for context.

@page "/support-chat"
@inject OpenAIService ChatService
@inject KnowledgeBaseService KnowledgeService

<h3>TechSupportCo Chatbot</h3>
<input @bind="UserInput" placeholder="Ask a question..." />
<button @onclick="SendMessage">Send</button>

<ul>
    @foreach (var message in Messages)
    {
        <li><strong>@message.Role:</strong> @message.Text</li>
    }
</ul>

@code {
    private string UserInput;
    private List<(string Role, string Text)> Messages = new();
    
    private async Task SendMessage()
    {
        Messages.Add(("You", UserInput));
        var knowledge = await KnowledgeService.GetCompanyKnowledge();
        var response = await ChatService.GetChatbotResponse(UserInput, knowledge);
        Messages.Add(("Bot", response));
        UserInput = string.Empty;
    }
}

Blazor Page Setup:

  • Defines the page route (/support-chat) for the chatbot interface.
  • Injects OpenAIService (for chatbot responses) and KnowledgeBaseService (for company FAQs).

UI Elements:

  • <input>: A text field for user input, bound to UserInput.
  • <button>: Sends the message when clicked by invoking the SendMessage method.
  • <ul>: Displays a list of messages from the user and the bot.

Message Handling:

  • Messages List stores chat messages with each item containing the role ("You" or "Bot") and the message text.
  • SendMessage Method adds the user’s input to the messages list. Retrieves company knowledge (FAQs) via KnowledgeBaseService. Sends the user input and company knowledge to the OpenAIService for a response. Adds the bot’s response to the messages list and clears the input field.

7️⃣ Run and Test

Next, let’s run the application and navigate to /support-chat and test company-related questions.

dotnet run

Enhancing the Chatbot with Custom Prompt Engineering

While AI models like GPT-4 are powerful, their default responses can sometimes be generic or miss the nuances of company-specific knowledge. By leveraging custom prompt engineering, we can guide the AI to provide more accurate, relevant, and context-aware answers, ensuring that the chatbot aligns with the unique needs and tone of the company.

1️⃣ System Message Optimization — Define a chatbot persona

This system message helps set boundaries and expectations for the chatbot’s behavior, ensuring it provides relevant, accurate, and company-specific responses. It also includes a contingency plan for when the chatbot encounters questions outside its scope.

You are a TechSupportCo chatbot.
Always use the company's knowledge base for responses.
If you don’t know the answer, direct users to [email protected].
  • Defining the Chatbot Persona: We are telling the AI to adopt a consistent role — in this case, the persona of a TechSupportCo chatbot. This ensures that the chatbot responds as if it’s part of the company, which helps maintain a consistent and professional tone.
  • Using the Company Knowledge Base: By instructing the chatbot to always use the company’s knowledge base for responses, we ensure that the answers are informed, accurate, and relevant to the company’s policies, services, and products. This prevents the chatbot from giving generic or off-topic responses.
  • Handling Unknown Answers: We have also included a fallback for situations where the chatbot doesn’t know the answer. Instead of providing an inaccurate response, the chatbot is instructed to direct users to the company’s support email ([email protected]). This ensures users always have a path to get the help they need, while the chatbot avoids giving potentially incorrect information.

2️⃣ Few-Shot Learning — Provide example interactions

Few-shot learning allows the chatbot to handle a variety of questions in a consistent manner, using the company’s exact language, without requiring extensive retraining.

By providing these example interactions, we are helping the chatbot learn the type of language and the structure of responses that are most useful and relevant to users. This technique enables the chatbot to generalize from these examples and apply similar logic to different questions, leading to more accurate and appropriate replies.

User: "How do I reset my password?"
Bot: "You can reset your password by visiting [Reset Password Page]."
  • Giving Example Interactions: We are providing the chatbot with sample dialogues to help it understand the pattern and tone of responses. In this case, we show the chatbot how to respond to a password reset request from a user.
  • Setting Expectations for the Bot’s Responses: By specifying both the user’s question (“How do I reset my password?”) and the bot’s answer (“You can reset your password by visiting [Reset Password Page].”), we are teaching the chatbot the exact structure and format to follow when handling similar inquiries. This helps the AI generate consistent and relevant responses without ambiguity.
  • Guiding the Chatbot’s Behavior: This approach trains the chatbot to understand how to respond in the specific context of the company’s services and protocols, while ensuring the response remains clear, direct, and helpful. The use of a call-to-action link (like the Reset Password Page) can be included in the bot’s responses, guiding the user to the right solution without confusion.

3️⃣ Strict Formatting — Ensure responses are structured

With strict formatting, we ensure the chatbot maintains a consistent, structured approach in its responses, prioritizing brevity and clarity while also providing useful links for further assistance. This keeps responses user-friendly, actionable, and professional.

This structure helps avoid vague or lengthy responses and enhances the chatbot’s efficiency in helping users.

Answer concisely in two sentences. Provide a support link if available.
  • Ensuring Concise Responses: By instructing the chatbot to answer concisely in two sentences, you’re making sure that the bot provides short, to-the-point responses. This avoids overwhelming users with unnecessary information, ensuring they get the help they need quickly and efficiently.
  • Providing a Support Link When Available: You’re telling the chatbot to include a support link in its responses if applicable. This ensures that if a solution requires further user action (like visiting a page or contacting support), the user can easily find the next step. This is helpful for guiding users towards resolution and improving their overall experience.

4️⃣ Avoiding Hallucinations — Enforce source validation

By enforcing source validation, we are ensuring that the chatbot doesn’t fabricate information when it doesn’t have the necessary knowledge. Instead, it provides an honest, transparent response, maintaining the credibility of the chatbot and ensuring a better user experience.

This approach protects users from receiving inaccurate responses and directs them to the correct support channels.

If the question is outside the company’s knowledge base, say: "I don’t have that information. Please contact support."
  • Preventing Hallucinations: The term hallucinations refers to situations where the chatbot might generate incorrect or fabricated responses when it doesn’t have enough information. To mitigate this, you’re explicitly instructing the chatbot to acknowledge when it doesn’t know the answer, rather than attempting to generate a guess.
  • Enforcing Source Validation: By having the chatbot say, “I don’t have that information”, you’re guiding it to be transparent about its limitations. This ensures that the bot doesn’t try to answer questions outside its scope, which could lead to misleading or inaccurate answers.
  • Maintaining Trustworthiness: This strategy helps maintain trust between the chatbot and users by ensuring that the chatbot is always honest about the information it can provide. It also directs users to the appropriate channels (like support emails or further resources) when the chatbot cannot answer, preventing frustration.

Blazor Server, when paired with OpenAI, provides a robust platform to enhance customer-facing applications with intelligent chatbots. This combination empowers businesses to offer automated, real-time support powered by sophisticated AI models, streamlining workflows and ensuring a better experience for both customers and support teams. With flexible integration and a responsive user interface, Blazor Server + OpenAI opens new possibilities for creating smarter, more efficient web applications.

Posted by

Rob Hutton

in

, , , , , ,