Groq AI Integration with ASP.NET Core Smart Paste Button

14 May 202612 minutes to read

The Syncfusion ASP.NET Core Smart Paste Button control enables AI-powered, context-aware content pasting into forms, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Groq AI service with the Smart Paste Button using the IChatInferenceService interface, enabling custom AI-driven responses in a ASP.NET Core app.

Setting Up Groq

Create a Groq Account
Visit Groq Cloud Console, sign up or sign in, and complete the verification process.
Obtain an API Key
Navigate to API Keys in the Groq Console and click “Create API Key.”
Review Model Specifications
Refer to Groq Models Documentation for details on available models (e.g., llama3-8b-8192).

Create a Groq AI Service

Create a service class to manage interactions with the Groq API, including authentication and response processing for the Smart Paste Button.

Create a Services folder in your project.
Add a new file named GroqService.cs in the Services folder.
Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., appsettings.json or environment variables).

using Microsoft.Extensions.AI;
using System.Net;
using System.Text;
using System.Text.Json;

public class GroqService
{
    private readonly string _apiKey;
    private readonly string _modelName = "llama-3.3-70b-versatile"; // Example model
    private readonly string _endpoint = "https://api.groq.com/openai/v1/chat/completions";
    private static readonly HttpClient HttpClient = new(new SocketsHttpHandler
    {
        PooledConnectionLifetime = TimeSpan.FromMinutes(30),
        EnableMultipleHttp2Connections = true
    })
    {
        DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for broader compatibility
    };
    private static readonly JsonSerializerOptions JsonOptions = new()
    {
        PropertyNamingPolicy = JsonNamingPolicy.CamelCase
    };

    public GroqService(IConfiguration configuration)
    {
        _apiKey = configuration["Groq:ApiKey"] ?? throw new ArgumentNullException("Groq API key is missing.");
        if (!HttpClient.DefaultRequestHeaders.Contains("Authorization"))
        {
            HttpClient.DefaultRequestHeaders.Clear();
            HttpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_apiKey}");
        }
    }

    public async Task<string> CompleteAsync(IList<ChatMessage> chatMessages)
    {
        var requestPayload = new GroqChatParameters
        {
            Model = _modelName,
            Messages = chatMessages.Select(m => new Message
            {
                Role = m.Role == ChatRole.User ? "user" : "assistant",
                Content = m.Text
            }).ToList(),
            Stop = new List<string> { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences
        };

        var content = new StringContent(JsonSerializer.Serialize(requestPayload, JsonOptions), Encoding.UTF8, "application/json");

        try
        {
            var response = await HttpClient.PostAsync(_endpoint, content);
            response.EnsureSuccessStatusCode();
            var responseString = await response.Content.ReadAsStringAsync();
            var responseObject = JsonSerializer.Deserialize<GroqResponseObject>(responseString, JsonOptions);
            return responseObject?.Choices?.FirstOrDefault()?.Message?.Content ?? "No response from model.";
        }
        catch (Exception ex) when (ex is HttpRequestException || ex is JsonException)
        {
            throw new InvalidOperationException("Failed to communicate with Groq API.", ex);
        }
    }
}

NOTE

Store the Groq API key in appsettings.json (e.g., { "Groq": { "ApiKey": "your-api-key" } }) or as an environment variable to ensure security.

Define Request and Response Models

Define C# classes to match the Groq API’s request and response format.

Create a new file named GroqModels.cs in the Services folder.
Add the following model classes:

public class Choice
{
    public Message Message { get; set; }
}

public class Message
{
    public string Role { get; set; }
    public string Content { get; set; }
}

public class GroqChatParameters
{
    public string Model { get; set; }
    public List<Message> Messages { get; set; }
    public List<string> Stop { get; set; }
}

public class GroqResponseObject
{
    public string Model { get; set; }
    public List<Choice> Choices { get; set; }
}

Create a Custom AI Service

Implement the IChatInferenceService interface to connect the Smart Paste Button to the Groq service.

Create a new file named GroqInferenceService.cs in the Services folder.
Add the following implementation:

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

public class GroqInferenceService : IChatInferenceService
{
    private readonly GroqService _groqService;

    public GroqInferenceService(GroqService groqService)
    {
        _groqService = groqService;
    }

    public async Task<string> GenerateResponseAsync(ChatParameters options)
    {
        return await _groqService.CompleteAsync(options.Messages);
    }
}

Configure the ASP.NET Core App

Update the ~/Program.cs file as follows:

using Syncfusion.EJ2;
using Syncfusion.EJ2.AI;

builder.Services.AddRazorPages();
builder.Services.AddSyncfusionSmartComponents();
builder.Services.AddSingleton<GroqService>();
builder.Services.AddSingleton<IChatInferenceService, GroqInferenceService>();

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

Add the Smart Paste Button

Add the Smart Paste Button to a form in the ~/Pages/Index.cshtml file to test the Gemini AI integration.

CSHTML
<h1>Contact Form</h1>
<form action="/submit" method="post">
    <div class="mb-2">
        <label for="name" class="form-label">Full Name</label>
        <input type="text" class="form-control" id="name" name="name" required>
    </div>
    <div class="mb-2">
        <label for="email" class="form-label">Email</label>
        <input type="email" class="form-control" id="email" name="email" required>
    </div>
    <div class="mb-2">
        <label for="phone" class="form-label">Phone Number</label>
        <input type="tel" class="form-control" id="phone" name="phone">
    </div>
    <div class="mb-2">
        <label for="message" class="form-label">Message</label>
        <textarea class="form-control" id="message" name="message" rows="4"></textarea>
    </div>
    <div class="mb-2 form-check">
        <input type="checkbox" class="form-check-input" id="newsletter" name="newsletter" checked>
        <label class="form-check-label" for="newsletter">Subscribe to newsletter</label>
    </div>
    <div class="mb-2">
        <label class="form-label">Preferred Contact Method</label>
        <div class="form-check">
            <input type="radio" class="form-check-input" id="email-contact" name="contact" value="email">
            <label class="form-check-label" for="email-contact">Email</label>
        </div>
        <div class="form-check">
            <input type="radio" class="form-check-input" id="phone-contact" name="contact" value="phone">
            <label class="form-check-label" for="phone-contact">Phone</label>
        </div>
    </div>
    <div class="mb-2">
        <label for="country" class="form-label">Country</label>
        <select class="form-select" id="country" name="country">
            <option value="">Select Country</option>
            <option value="United States">United States</option>
            <option value="Canada">Canada</option>
            <option value="United Kingdom">United Kingdom</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-secondary">Reset</button>
    <ejs-smartpaste id="smartPasteBtn" content="Smart Paste" cssClass="e-primary" iconCss="e-icons e-paste"></ejs-smartpaste>
</form>

<br />
<div>
    I am John Doe from the United States. My email is [email protected], and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you!
</div>

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion^® ASP.NET Core
Smart Paste Button control will be rendered in the default web browser.

ASP.NET Core Smart Paste Button Control

Troubleshooting

If the Groq AI integration does not work, try the following:

No Suggestions Displayed: Verify that the Groq API key and model name are correct in the configuration. Check the GroqService implementation for errors.
HTTP Request Failures: Ensure a stable internet connection and that the Groq API endpoint (https://api.groq.com/openai/v1/chat/completions) is accessible. Test with HTTP/2 instead of HTTP/3 if compatibility issues arise.
Service Registration Errors: Confirm that GroqService and GroqInferenceService are registered in Program.cs.

Search docs

Ask Syncfusion AI Assistant