Custom AI Service Integration with Blazor Smart TextArea

30 Jun 20263 minutes to read

The Blazor Smart TextArea component leverages AI to provide context-aware autocompletion, typically using OpenAI or Azure OpenAI services. Developers can integrate custom AI services using the IChatInferenceService interface, which standardizes communication between the Smart TextArea and third-party AI providers. This section explains how to implement and register a custom AI service for the Smart TextArea.

IChatInferenceService Interface

The IChatInferenceService interface defines a contract for integrating custom AI services with Smart Components. It enables the Smart TextArea to request and receive AI-generated responses.

using Syncfusion.Blazor.AI;

public interface IChatInferenceService
{
    Task<string> GenerateResponseAsync(ChatParameters options);
}
  • Purpose: Standardizes communication for AI-generated responses.
  • Parameters: The ChatParameters type includes properties like user input and context.
  • Benefits: Enables seamless switching between AI providers without modifying component code.

Simple Implementation of a Custom AI Service

Below is a sample implementation of a mock AI service named MockAIService. This service demonstrates how to implement the IChatInferenceService interface by returning sample, context-aware responses. You can replace the logic with your own AI integration.

using Syncfusion.Blazor.AI;
using System.Threading.Tasks;

public class MockAIService : IChatInferenceService
{
    public Task<string> GenerateResponseAsync(ChatParameters options)
    {

    }
}

Registering the Custom AI Service

Register the custom AI service in the ~/Program.cs file of your Blazor Web App:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using Syncfusion.Blazor.SmartComponents;

var builder = WebApplication.CreateBuilder(args);
....

builder.Services.AddSyncfusionBlazor();
builder.Services.AddSyncfusionSmartComponents();
builder.Services.AddSingleton<IChatInferenceService, MockAIService>();

var app = builder.Build();
// ...

Testing the Custom AI Integration

  1. Implement and register the custom AI service as shown above.
  2. Add the Smart TextArea component to your application.
  3. Run the application using Ctrl+F5 (Windows) or ⌘+F5 (macOS).
  4. Type phrases like “thank” or “investigate” in the Smart TextArea to verify that the custom AI service generates appropriate responses.
  5. Ensure suggestions appear as configured (e.g., inline or pop-up, based on the ShowSuggestionOnPopup setting).

Smart TextArea with Custom AI Service

Implemented AI Services

Here are examples of AI services integrated using the IChatInferenceService interface:

Service Documentation
Claude Claude Integration
DeepSeek DeepSeek Integration
Groq Groq Integration
Gemini Gemini Integration

Troubleshooting

If the custom AI service does not work as expected, try the following:

  • No Suggestions Displayed: Ensure the IChatInferenceService implementation is registered in Program.cs and returns valid responses. Check for errors in the GenerateResponseAsync method.
  • Dependency Issues: Verify that all required NuGet packages (e.g., Syncfusion.Blazor.SmartComponents) are installed. Run dotnet restore to resolve dependencies.
  • Incorrect Responses: Debug the custom AI service implementation to ensure it processes ChatParameters correctly and returns expected responses.

See Also