();
+
+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.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+
+Contact Form
+
+
+
+ I am John Doe from the United States. My email is johndoe@example.com, 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!
+
+
+{% endhighlight %}
+{% endtabs %}
+
+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.
+
+
+
+## Troubleshooting
+
+If the Gemini AI integration does not work, try the following:
+- **No Suggestions Displayed**: Verify that the Gemini API key and model name are correct in the configuration. Check the `GeminiService` implementation for errors.
+- **HTTP Request Failures**: Ensure a stable internet connection and that the Gemini API endpoint (`https://generativelanguage.googleapis.com/v1beta/models/`) is accessible. Test with HTTP/2 if compatibility issues arise.
+- **Service Registration Errors**: Confirm that `GeminiService` and `GeminiInferenceService` are registered in **Program.cs**.
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/getting-started.md
new file mode 100644
index 0000000000..6f736a385c
--- /dev/null
+++ b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/getting-started.md
@@ -0,0 +1,285 @@
+---
+layout: post
+title: Getting Started with ##Platform_Name## Smart Paste Button | Syncfusion
+description: Checkout and learn about getting started with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details.
+platform: ej2-asp-core-mvc
+control: Getting Started
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Getting Started with ASP.NET Core Smart Paste Button Control
+
+This section briefly explains about how to include `ASP.NET Core Smart Paste Button` control in your ASP.NET Core application using Visual Studio.
+
+## Prerequisites
+
+[System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetcore/documentation/system-requirements)
+
+## Create ASP.NET Core web application with Razor pages
+
+* [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app)
+
+* [Create a Project using Syncfusion® ASP.NET Core Extension](https://ej2.syncfusion.com/aspnetcore/documentation/visual-studio-integration/create-project)
+
+## Install ASP.NET Core package in the application
+
+To add `ASP.NET Core` controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core/) and then install it. Alternatively, you can utilize the following package manager command to achieve the same.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion® ASP.NET Core controls are available in [nuget.org.](https://www.nuget.org/packages?q=syncfusion.EJ2) Refer to [NuGet packages topic](https://ej2.syncfusion.com/aspnetcore/documentation/nuget-packages) to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for validating Syncfusion® license key.
+
+## Add Syncfusion® ASP.NET Core Tag Helper
+Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper.
+
+{% tabs %}
+{% highlight C# tabtitle="~/_ViewImports.cshtml" %}
+
+@addTagHelper *, Syncfusion.EJ2
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add stylesheet and script resources
+
+Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows,
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+
+ ...
+
+ ® ASP.NET Core controls.
+
+N> Checkout the [Adding Script Reference](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your ASP.NET Core application.
+
+## Register Syncfusion® Script Manager
+
+Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+
+ ...
+
+ ® ASP.NET Core Smart Paste Button tag helper in `~/Pages/Index.cshtml` page.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+
+Contact Form
+
+
+
+ I am John Doe from the United States. My email is johndoe@example.com, 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!
+
+
+{% endhighlight %}
+{% endtabs %}
+
+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.
+
+
+
+## Performance Considerations
+
+For optimal performance with the Smart Paste Button:
+- Use lightweight AI models (e.g., `gpt-3.5-turbo` or `mistral:7b`) for faster processing.
+- Limit form complexity to reduce AI parsing time, especially for large datasets.
+- Cache AI model responses where possible to minimize repeated API calls.
+
+## Troubleshooting Common Issues
+
+- **AI Service Configuration Errors**: Verify the API key, endpoint, and model name in `Program.cs`. Check for typos or incorrect values.
+- **Network Failures**: Ensure a stable internet connection for OpenAI or Azure OpenAI. For Ollama, confirm the local server is running at the specified endpoint (e.g., `http://localhost:11434`).
+- **Form Not Populating**: Confirm that the copied text matches the form field structure and that the AI model is correctly configured.
diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/groq-service.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/groq-service.md
new file mode 100644
index 0000000000..20c3163380
--- /dev/null
+++ b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/groq-service.md
@@ -0,0 +1,250 @@
+---
+layout: post
+title: Groq AI in ##Platform_Name## Smart Paste Button Control | Syncfusion
+description: Learn how to implement a custom AI service using Groq AI with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details.
+platform: ej2-asp-core-mvc
+control: Groq AI
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Groq AI Integration with ASP.NET Core Smart Paste Button
+
+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
+
+1. **Create a Groq Account**
+ Visit [Groq Cloud Console](https://console.groq.com), sign up or sign in, and complete the verification process.
+2. **Obtain an API Key**
+ Navigate to [API Keys](https://console.groq.com/keys) in the Groq Console and click "Create API Key."
+3. **Review Model Specifications**
+ Refer to [Groq Models Documentation](https://console.groq.com/docs/models) 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.
+
+1. Create a `Services` folder in your project.
+2. Add a new file named `GroqService.cs` in the `Services` folder.
+3. 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).
+
+```csharp
+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 CompleteAsync(IList 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 { "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(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);
+ }
+ }
+}
+```
+
+N> 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.
+
+1. Create a new file named `GroqModels.cs` in the `Services` folder.
+2. Add the following model classes:
+
+```csharp
+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 Messages { get; set; }
+ public List Stop { get; set; }
+}
+
+public class GroqResponseObject
+{
+ public string Model { get; set; }
+ public List Choices { get; set; }
+}
+```
+
+## Create a Custom AI Service
+
+Implement the `IChatInferenceService` interface to connect the Smart Paste Button to the Groq service.
+
+1. Create a new file named `GroqInferenceService.cs` in the `Services` folder.
+2. Add the following implementation:
+
+```csharp
+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 GenerateResponseAsync(ChatParameters options)
+ {
+ return await _groqService.CompleteAsync(options.Messages);
+ }
+}
+```
+
+## Configure the ASP.NET Core App
+
+Register the Groq service and `IChatInferenceService` implementation in the dependency injection container.
+
+Update the **~/Program.cs** file as follows:
+
+```csharp
+using Syncfusion.EJ2;
+using Syncfusion.EJ2.AI;
+
+builder.Services.AddRazorPages();
+builder.Services.AddSyncfusionSmartComponents();
+builder.Services.AddSingleton();
+builder.Services.AddSingleton();
+
+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.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+
+Contact Form
+
+
+
+ I am John Doe from the United States. My email is johndoe@example.com, 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!
+
+
+{% endhighlight %}
+{% endtabs %}
+
+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.
+
+
+
+## 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**.
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/smart-paste/images/SmartPaste.gif b/ej2-asp-core-mvc/smart-paste/images/SmartPaste.gif
new file mode 100644
index 0000000000..0a177a1633
Binary files /dev/null and b/ej2-asp-core-mvc/smart-paste/images/SmartPaste.gif differ
diff --git a/ej2-asp-core-mvc/smart-paste/images/SmartPaste_Annotation.gif b/ej2-asp-core-mvc/smart-paste/images/SmartPaste_Annotation.gif
new file mode 100644
index 0000000000..28f361e143
Binary files /dev/null and b/ej2-asp-core-mvc/smart-paste/images/SmartPaste_Annotation.gif differ
diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/claude-service.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/claude-service.md
new file mode 100644
index 0000000000..828e8b673a
--- /dev/null
+++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/claude-service.md
@@ -0,0 +1,208 @@
+---
+layout: post
+title: Claude AI in ##Platform_Name## Smart TextArea Control | Syncfusion
+description: Learn how to implement a custom AI service using Claude AI with ##Platform_Name## Smart TextArea control of Syncfusion Essential JS 2 and more details.
+platform: ej2-asp-core-mvc
+control: Claude AI
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Claude AI Integration with ASP.NET Core Smart TextArea
+
+The Syncfusion ASP.NET Core Smart TextArea control provides AI-powered autocompletion for context-aware text input, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Anthropic Claude AI service with the Smart TextArea using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core App.
+
+## Setting Up Claude
+
+1. **Create an Anthropic Account**
+ Visit [Anthropic Console](https://console.anthropic.com), sign up, and complete the verification process.
+2. **Obtain an API Key**
+ Navigate to [API Keys](https://console.anthropic.com/settings/keys) and click "Create Key."
+3. **Review Model Specifications**
+ Refer to [Claude Models Documentation](https://docs.anthropic.com/claude/docs/models-overview) for details on available models.
+
+## Create a Claude AI Service
+
+Create a service class to manage interactions with the Claude API, including authentication and response processing for the Smart TextArea.
+
+1. Create a `Services` folder in your project.
+2. Add a new file named `ClaudeAIService.cs` in the `Services` folder.
+3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`).
+
+```csharp
+using Microsoft.Extensions.AI;
+using System.Net;
+using System.Text;
+using System.Text.Json;
+
+public class ClaudeAIService
+{
+ private readonly string _apiKey;
+ private readonly string _modelName = "claude-3-5-sonnet-20241022"; // Example model
+ private readonly string _endpoint = "https://api.anthropic.com/v1/messages";
+ private static readonly HttpClient HttpClient = new(new SocketsHttpHandler
+ {
+ PooledConnectionLifetime = TimeSpan.FromMinutes(30),
+ EnableMultipleHttp2Connections = true
+ })
+ {
+ DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility
+ };
+ private static readonly JsonSerializerOptions JsonOptions = new()
+ {
+ PropertyNamingPolicy = JsonNamingPolicy.CamelCase
+ };
+
+ public ClaudeAIService(IConfiguration configuration)
+ {
+ _apiKey = configuration["Claude:ApiKey"] ?? throw new ArgumentNullException("Claude API key is missing.");
+ if (!HttpClient.DefaultRequestHeaders.Contains("x-api-key"))
+ {
+ HttpClient.DefaultRequestHeaders.Clear();
+ HttpClient.DefaultRequestHeaders.Add("x-api-key", _apiKey);
+ HttpClient.DefaultRequestHeaders.Add("anthropic-version", "2023-06-01"); // Check latest version in Claude API docs
+ }
+ }
+
+ public async Task CompleteAsync(IList chatMessages)
+ {
+ var requestBody = new ClaudeChatRequest
+ {
+ Model = _modelName,
+ Max_tokens = 1000, // Maximum tokens in response
+ Messages = chatMessages.Select(m => new ClaudeMessage
+ {
+ Role = m.Role == ChatRole.User ? "user" : "assistant",
+ Content = m.Text
+ }).ToList(),
+ Stop_sequences = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences
+ };
+
+ var content = new StringContent(JsonSerializer.Serialize(requestBody, 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(responseString, JsonOptions);
+ return responseObject?.Content?.FirstOrDefault()?.Text ?? "No response from Claude model.";
+ }
+ catch (Exception ex) when (ex is HttpRequestException || ex is JsonException)
+ {
+ throw new InvalidOperationException("Failed to communicate with Claude API.", ex);
+ }
+ }
+}
+```
+
+N> Store the Claude API key in `appsettings.json` (e.g., `{ "Claude": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. Verify the `anthropic-version` header in [Claude API Documentation](https://docs.anthropic.com/claude/docs) for the latest version.
+
+## Define Request and Response Models
+
+Define C# classes to match the Claude API’s JSON request and response format.
+
+1. Create a new file named `ClaudeModels.cs` in the `Services` folder.
+2. Add the following model classes:
+
+```csharp
+public class ClaudeChatRequest
+{
+ public string Model { get; set; }
+ public int Max_tokens { get; set; }
+ public List Messages { get; set; }
+ public List Stop_sequences { get; set; }
+}
+
+public class ClaudeMessage
+{
+ public string Role { get; set; }
+ public string Content { get; set; }
+}
+
+public class ClaudeChatResponse
+{
+ public List Content { get; set; }
+}
+
+public class ClaudeContentBlock
+{
+ public string Text { get; set; }
+}
+```
+
+## Create a Custom AI Service
+
+Implement the `IChatInferenceService` interface to connect the Smart TextArea to the Claude service, acting as a bridge for AI-generated responses.
+
+1. Create a new file named `ClaudeInferenceService.cs` in the `Services` folder.
+2. Add the following implementation:
+
+```csharp
+using Syncfusion.EJ2.AI;
+using System.Threading.Tasks;
+
+public class ClaudeInferenceService : IChatInferenceService
+{
+ private readonly ClaudeAIService _claudeService;
+
+ public ClaudeInferenceService(ClaudeAIService claudeService)
+ {
+ _claudeService = claudeService;
+ }
+
+ public async Task GenerateResponseAsync(ChatParameters options)
+ {
+ return await _claudeService.CompleteAsync(options.Messages);
+ }
+}
+```
+
+## Configure the ASP.NET Core App
+
+Register the Claude service and `IChatInferenceService` implementation in the dependency injection container.
+
+Update the **~/Program.cs** file as follows:
+
+```csharp
+using Syncfusion.EJ2.AI;
+
+builder.Services.AddRazorPages();
+builder.Services.AddSyncfusionSmartComponents();
+builder.Services.AddSingleton();
+builder.Services.AddSingleton();
+
+var app = builder.Build();
+// ...
+```
+
+## Add ASP.NET Core Smart TextArea Control
+
+Add the Smart TextArea in the **~/Pages/Index.cshtml** file to test the Claude AI integration.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+
+@{
+ var presets = new {
+ userRole = "Maintainer of an open-source project replying to GitHub issues",
+ userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." },
+ placeHolder = "Write your response to the GitHub issue..." };
+}
+
+Ctrl +F5 (Windows) or ⌘ +F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core
+Smart TextArea control will be rendered in the default web browser.
+
+
+
+## Troubleshooting
+
+If the Claude AI integration does not work, try the following:
+- **No Suggestions Displayed**: Verify that the Claude API key and model name are correct in the configuration. Check the `ClaudeAIService` implementation for errors.
+- **HTTP Request Failures**: Ensure a stable internet connection and that the Claude API endpoint (`https://api.anthropic.com/v1/messages`) is accessible. Test with HTTP/2 if compatibility issues arise.
+- **Service Registration Errors**: Confirm that `ClaudeAIService` and `ClaudeInferenceService` are registered in **Program.cs**.
diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/custom-inference-backend.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/custom-inference-backend.md
new file mode 100644
index 0000000000..083a4f2c9e
--- /dev/null
+++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/custom-inference-backend.md
@@ -0,0 +1,80 @@
+---
+layout: post
+title: Custom AI with ##Platform_Name## Smart TextArea Control | Syncfusion
+description: Learn how to integrate custom AI services with ##Platform_Name## Smart TextArea control of Syncfusion Essential JS 2 and more details.
+platform: ej2-asp-core-mvc
+control: Custom AI Service
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Custom AI Service Integration with ASP.NET Core Smart TextArea
+
+The Syncfusion ASP.NET Core Smart TextArea control 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 Syncfusion Smart Controls. It enables the Smart TextArea to request and receive AI-generated responses.
+
+```csharp
+public interface IChatInferenceService
+{
+ Task 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.
+
+```csharp
+using Syncfusion.EJ2.AI;
+using System.Threading.Tasks;
+
+public class MockAIService : IChatInferenceService
+{
+ public Task GenerateResponseAsync(ChatParameters options)
+ {
+
+ }
+}
+```
+
+## Registering the Custom AI Service
+
+Register the custom AI service in the **~/Program.cs** file of your ASP.NET Core Application:
+
+```csharp
+using Syncfusion.EJ2;
+using Syncfusion.EJ2.AI;
+
+builder.Services.AddRazorPages();
+builder.Services.AddSyncfusionSmartComponents();
+builder.Services.AddSingleton();
+
+var app = builder.Build();
+// ...
+```
+
+## Implemented AI Services
+
+Here are examples of AI services integrated using the `IChatInferenceService` interface:
+
+| Service | Documentation |
+|---------|---------------|
+| Claude | [Claude Integration](claude-service) |
+| DeepSeek | [DeepSeek Integration](deepseek-service) |
+| Groq | [Groq Integration](groq-service) |
+| Gemini | [Gemini Integration](gemini-service) |
+
+## 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 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.
+
diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/customization.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/customization.md
new file mode 100644
index 0000000000..b0c3341f63
--- /dev/null
+++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/customization.md
@@ -0,0 +1,68 @@
+---
+layout: post
+title: Customize Suggestions ##Platform_Name## Smart TextArea Control | Syncfusion
+description: Learn how to customize suggestion display in ##Platform_Name## Smart TextArea of Syncfusion Essential JS 2 and more details.
+platform: ej2-asp-core-mvc
+control: Customizaion
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Customize Suggestions in ASP.NET Core Smart TextArea
+
+The Syncfusion ASP.NET Core Smart TextArea control provides AI-powered autocompletion for context-aware text input, with customizable suggestion display options. This section explains how to configure the appearance and behavior of suggestions to enhance user experience in applications like issue trackers or customer support systems.
+
+## Configure Suggestion Display
+
+The `show-suggestion-on-popup` attribute controls how AI-generated suggestions are presented to users in the Smart TextArea control. Suggestions are based on the `user-role` and optional `user-phrases` attributes, which define the context and predefined phrases for autocompletion.
+
+### Pop-up Suggestions
+
+Set `show-suggestion-on-popup="true"` to display suggestions in a pop-up window above the text area, ideal for scenarios where users need to select from multiple suggestions without cluttering the input area.
+
+Add the following code in the `~/Pages/Index.cshtml`:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+
+@{
+ var presets = new {
+ userRole = "Maintainer of an open-source project replying to GitHub issues",
+ userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." },
+ placeHolder = "Write your response to the GitHub issue..." };
+}
+
+ CompleteAsync(IList chatMessages)
+ {
+ var requestBody = new DeepSeekChatRequest
+ {
+ Model = _modelName,
+ Temperature = 0.7f, // Controls response randomness (0.0 to 1.0)
+ Messages = chatMessages.Select(m => new DeepSeekMessage
+ {
+ Role = m.Role == ChatRole.User ? "user" : "system", // Align with DeepSeek API roles
+ Content = m.Text
+ }).ToList()
+ };
+
+ var content = new StringContent(JsonSerializer.Serialize(requestBody, 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(responseString, JsonOptions);
+ return responseObject?.Choices?.FirstOrDefault()?.Message?.Content ?? "No response from DeepSeek.";
+ }
+ catch (Exception ex) when (ex is HttpRequestException || ex is JsonException)
+ {
+ throw new InvalidOperationException("Failed to communicate with DeepSeek API.", ex);
+ }
+ }
+}
+```
+
+N> Store the DeepSeek API key in `appsettings.json` (e.g., `{ "DeepSeek": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security.
+
+## Define Request and Response Models
+
+Define C# classes to match the DeepSeek API’s JSON request and response format.
+
+1. Create a new file named `DeepSeekModels.cs` in the `Services` folder.
+2. Add the following model classes:
+
+```csharp
+public class DeepSeekMessage
+{
+ public string Role { get; set; }
+ public string Content { get; set; }
+}
+
+public class DeepSeekChatRequest
+{
+ public string Model { get; set; }
+ public float Temperature { get; set; }
+ public List Messages { get; set; }
+}
+
+public class DeepSeekChatResponse
+{
+ public List Choices { get; set; }
+}
+
+public class DeepSeekChoice
+{
+ public DeepSeekMessage Message { get; set; }
+}
+```
+
+## Create a Custom AI Service
+
+Implement the `IChatInferenceService` interface to connect the Smart TextArea to the DeepSeek service, acting as a bridge for AI-generated responses.
+
+1. Create a new file named `DeepSeekInferenceService.cs` in the `Services` folder.
+2. Add the following implementation:
+
+```csharp
+using Syncfusion.EJ2.AI;
+using System.Threading.Tasks;
+
+public class DeepSeekInferenceService : IChatInferenceService
+{
+ private readonly DeepSeekAIService _deepSeekService;
+
+ public DeepSeekInferenceService(DeepSeekAIService deepSeekService)
+ {
+ _deepSeekService = deepSeekService;
+ }
+
+ public async Task GenerateResponseAsync(ChatParameters options)
+ {
+ return await _deepSeekService.CompleteAsync(options.Messages);
+ }
+}
+```
+
+## Configure the ASP.NET Core App
+
+Register the DeepSeek service and `IChatInferenceService` implementation in the dependency injection container.
+
+Update the **~/Program.cs** file as follows:
+
+```csharp
+using Syncfusion.EJ2;
+using Syncfusion.EJ2.AI;
+
+var builder = WebApplication.CreateBuilder(args);
+
+builder.Services.AddRazorPages();
+builder.Services.AddSyncfusionSmartComponents();
+builder.Services.AddSingleton();
+builder.Services.AddSingleton();
+
+var app = builder.Build();
+// ...
+```
+
+## Add ASP.NET Core Smart TextArea Control
+
+Add the Smart TextArea in the **~/Pages/Index.cshtml** file to test the DeepSeek AI integration.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+
+@{
+ var presets = new {
+ userRole = "Maintainer of an open-source project replying to GitHub issues",
+ userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." },
+ placeHolder = "Write your response to the GitHub issue..." };
+}
+
+Ctrl +F5 (Windows) or ⌘ +F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core
+Smart TextArea control will be rendered in the default web browser.
+
+
+
+## Troubleshooting
+
+If the DeepSeek AI integration does not work, try the following:
+- **No Suggestions Displayed**: Verify that the DeepSeek API key and model name are correct in the configuration. Check the `DeepSeekAIService` implementation for errors.
+- **HTTP Request Failures**: Ensure a stable internet connection and that the DeepSeek API endpoint (`https://api.deepseek.com/v1/chat/completions`) is accessible. Test with HTTP/2 if compatibility issues arise.
+- **Service Registration Errors**: Confirm that `DeepSeekAIService` and `DeepSeekInferenceService` are registered in **Program.cs**.
diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/features.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/features.md
new file mode 100644
index 0000000000..2120fa3d33
--- /dev/null
+++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/features.md
@@ -0,0 +1,19 @@
+---
+layout: post
+title: Styles and Appearances in ##Platform_Name## Smart TextArea | Syncfusion
+description: Checkout and learn here all about Styles and Appearances in ##Platform_Name## Smart TextArea of Syncfusion Essential JS 2 and more details.
+platform: ej2-asp-core-mvc
+control: Features
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Inherited Features from TextArea
+
+The Syncfusion® ASP.NET Core Smart TextArea control fully inherits all the properties, features, and styling options of the Syncfusion® ASP.NET Core TextArea control. This means that you can leverage the existing features of the Syncfusion® ASP.NET Core TextArea while benefiting from the enhanced functionality of the Smart TextArea.
+
+* [Form Support](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/form-support)
+* [Floating Labels](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/floating-label)
+* [Events](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/events)
+* [Methods](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/methods)
+* [Style and Appearance](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/style-appearance)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/gemini-service.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/gemini-service.md
new file mode 100644
index 0000000000..19984f4ebe
--- /dev/null
+++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/gemini-service.md
@@ -0,0 +1,255 @@
+---
+layout: post
+title: Gemini AI in ##Platform_Name## Smart TextArea Control | Syncfusion
+description: Learn how to implement a custom AI service using Google's Gemini AI with ##Platform_Name## Smart TextArea control of Syncfusion Essential JS 2 and more details.
+platform: ej2-asp-core-mvc
+control: Gemini AI
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Gemini AI Integration with ASP.NET Core Smart TextArea
+
+The Syncfusion ASP.NET Core Smart TextArea control provides AI-powered autocompletion for context-aware text input, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Google Gemini AI service with the Smart TextArea using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core Web App.
+
+## Setting Up Gemini
+
+1. **Obtain a Gemini API Key**
+ Visit [Google AI Studio](https://ai.google.dev/gemini-api/docs/api-key), sign in, and generate an API key.
+2. **Review Model Specifications**
+ Refer to [Gemini Models Documentation](https://ai.google.dev/gemini-api/docs/models) for details on available models.
+
+## Create a Gemini AI Service
+
+Create a service class to manage interactions with the Gemini API, including authentication, request/response handling, and safety settings for the Smart TextArea.
+
+1. Create a `Services` folder in your project.
+2. Add a new file named `GeminiService.cs` in the `Services` folder.
+3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`).
+
+
+```csharp
+using System.Net;
+using System.Text;
+using System.Text.Json;
+using Microsoft.Extensions.AI;
+
+public class GeminiService
+{
+ private readonly string _apiKey;
+ private readonly string _modelName = "gemini-2.0-flash"; // Example model
+ private readonly string _endpoint = "https://generativelanguage.googleapis.com/v1beta/models/";
+ private static readonly HttpClient HttpClient = new(new SocketsHttpHandler
+ {
+ PooledConnectionLifetime = TimeSpan.FromMinutes(30),
+ EnableMultipleHttp2Connections = true
+ })
+ {
+ DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility
+ };
+ private static readonly JsonSerializerOptions JsonOptions = new()
+ {
+ PropertyNamingPolicy = JsonNamingPolicy.CamelCase
+ };
+
+ public GeminiService(IConfiguration configuration)
+ {
+ _apiKey = configuration["Gemini:ApiKey"] ?? throw new ArgumentNullException("Gemini API key is missing.");
+ HttpClient.DefaultRequestHeaders.Clear();
+ HttpClient.DefaultRequestHeaders.Add("x-goog-api-key", _apiKey);
+ }
+
+ public async Task CompleteAsync(IList chatMessages)
+ {
+ var requestUri = $"{_endpoint}{_modelName}:generateContent";
+ var parameters = BuildGeminiChatParameters(chatMessages);
+ var payload = new StringContent(
+ JsonSerializer.Serialize(parameters, JsonOptions),
+ Encoding.UTF8,
+ "application/json"
+ );
+
+ try
+ {
+ using var response = await HttpClient.PostAsync(requestUri, payload);
+ response.EnsureSuccessStatusCode();
+ var json = await response.Content.ReadAsStringAsync();
+ var result = JsonSerializer.Deserialize(json, JsonOptions);
+ return result?.Candidates?.FirstOrDefault()?.Content?.Parts?.FirstOrDefault()?.Text
+ ?? "No response from model.";
+ }
+ catch (Exception ex) when (ex is HttpRequestException or JsonException)
+ {
+ throw new InvalidOperationException("Gemini API error.", ex);
+ }
+ }
+
+ private GeminiChatParameters BuildGeminiChatParameters(IList messages)
+ {
+ var contents = messages.Select(m => new ResponseContent(
+ m.Text,
+ m.Role == ChatRole.User ? "user" : "model"
+ )).ToList();
+
+ return new GeminiChatParameters
+ {
+ Contents = contents,
+ GenerationConfig = new GenerationConfig
+ {
+ MaxOutputTokens = 2000,
+ StopSequences = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences
+ },
+ SafetySettings = new List
+ {
+ new() { Category = "HARM_CATEGORY_HARASSMENT", Threshold = "BLOCK_ONLY_HIGH" },
+ new() { Category = "HARM_CATEGORY_HATE_SPEECH", Threshold = "BLOCK_ONLY_HIGH" },
+ new() { Category = "HARM_CATEGORY_SEXUALLY_EXPLICIT", Threshold = "BLOCK_ONLY_HIGH" },
+ new() { Category = "HARM_CATEGORY_DANGEROUS_CONTENT", Threshold = "BLOCK_ONLY_HIGH" }
+ }
+ };
+ }
+}
+```
+
+N> Store the Gemini API key in `appsettings.json` (e.g., `{ "Gemini": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. The `SafetySettings` filter harmful content; adjust thresholds based on your application’s needs.
+
+## Define Request and Response Models
+
+Define C# classes to match the Gemini API’s JSON request and response format.
+
+1. Create a new file named `GeminiModels.cs` in the `Services` folder.
+2. Add the following model classes:
+
+```csharp
+public class Part
+{
+ public string Text { get; set; }
+}
+
+public class Content
+{
+ public Part[] Parts { get; init; } = Array.Empty();
+}
+
+public class Candidate
+{
+ public Content Content { get; init; } = new();
+}
+
+public class GeminiResponseObject
+{
+ public Candidate[] Candidates { get; init; } = Array.Empty();
+}
+
+public class ResponseContent
+{
+ public List Parts { get; init; }
+ public string Role { get; init; }
+
+ public ResponseContent(string text, string role)
+ {
+ Parts = new List { new Part { Text = text } };
+ Role = role;
+ }
+}
+
+public class GenerationConfig
+{
+ public int Temperature { get; init; } = 0;
+ public int TopK { get; init; } = 0;
+ public int TopP { get; init; } = 0;
+ public int MaxOutputTokens { get; init; } = 2048;
+ public List StopSequences { get; init; } = new();
+}
+
+public class SafetySetting
+{
+ public string Category { get; init; } = string.Empty;
+ public string Threshold { get; init; } = string.Empty;
+}
+
+public class GeminiChatParameters
+{
+ public List Contents { get; init; } = new();
+ public GenerationConfig GenerationConfig { get; init; } = new();
+ public List SafetySettings { get; init; } = new();
+}
+```
+
+## Create a Custom AI Service
+
+Implement the `IChatInferenceService` interface to connect the Smart TextArea to the Gemini service, acting as a bridge for AI-generated responses.
+
+1. Create a new file named `GeminiInferenceService.cs` in the `Services` folder.
+2. Add the following implementation:
+
+```csharp
+using Syncfusion.EJ2.AI;
+using System.Threading.Tasks;
+
+public class GeminiInferenceService : IChatInferenceService
+{
+ private readonly GeminiService _geminiService;
+
+ public GeminiInferenceService(GeminiService geminiService)
+ {
+ _geminiService = geminiService;
+ }
+
+ public async Task GenerateResponseAsync(ChatParameters options)
+ {
+ return await _geminiService.CompleteAsync(options.Messages);
+ }
+}
+```
+
+## Configure the ASP.NET Core App
+
+Register the Gemini service and `IChatInferenceService` implementation in the dependency injection container.
+
+Update the **~/Program.cs** file as follows:
+
+```csharp
+using Syncfusion.EJ2;
+using Syncfusion.EJ2.AI;
+
+builder.Services.AddRazorPages();
+
+builder.Services.AddSyncfusionSmartComponents();
+builder.Services.AddSingleton();
+builder.Services.AddSingleton();
+
+var app = builder.Build();
+// ...
+```
+
+## Add ASP.NET Core Smart TextArea Control
+
+Add the Smart TextArea in the **~/Pages/Index.cshtml** file to test the Gemini AI integration.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+
+@{
+ var presets = new {
+ userRole = "Maintainer of an open-source project replying to GitHub issues",
+ userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." },
+ placeHolder = "Write your response to the GitHub issue..." };
+}
+
+Ctrl +F5 (Windows) or ⌘ +F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core
+Smart TextArea control will be rendered in the default web browser.
+
+
+
+## Troubleshooting
+
+If the Gemini AI integration does not work, try the following:
+- **No Suggestions Displayed**: Verify that the Gemini API key and model name are correct in the configuration. Check the `GeminiService` implementation for errors.
+- **HTTP Request Failures**: Ensure a stable internet connection and that the Gemini API endpoint (`https://generativelanguage.googleapis.com/v1beta/models/`) is accessible. Test with HTTP/2 if compatibility issues arise.
+- **Service Registration Errors**: Confirm that `GeminiService` and `GeminiInferenceService` are registered in **Program.cs**.
diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/getting-started.md
new file mode 100644
index 0000000000..227a08d68d
--- /dev/null
+++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/getting-started.md
@@ -0,0 +1,237 @@
+---
+layout: post
+title: Getting Started with ##Platform_Name## Smart TextArea Control | Syncfusion
+description: Checkout and learn about getting started with ##Platform_Name## Smart TextArea of Syncfusion Essential JS 2 and more details.
+platform: ej2-asp-core-mvc
+control: Getting Started
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Getting Started with ASP.NET Core Smart TextArea Control
+
+This section briefly explains about how to include `ASP.NET Core Smart TextArea` control in your ASP.NET Core application using Visual Studio.
+
+## Prerequisites
+
+[System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetcore/documentation/system-requirements)
+
+## Create ASP.NET Core web application with Razor pages
+
+* [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app)
+
+* [Create a Project using Syncfusion® ASP.NET Core Extension](https://ej2.syncfusion.com/aspnetcore/documentation/visual-studio-integration/create-project)
+
+## Install ASP.NET Core package in the application
+
+To add `ASP.NET Core` controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core/) and then install it. Alternatively, you can utilize the following package manager command to achieve the same.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion® ASP.NET Core controls are available in [nuget.org.](https://www.nuget.org/packages?q=syncfusion.EJ2) Refer to [NuGet packages topic](https://ej2.syncfusion.com/aspnetcore/documentation/nuget-packages) to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for validating Syncfusion® license key.
+
+## Add Syncfusion® ASP.NET Core Tag Helper
+Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper.
+
+{% tabs %}
+{% highlight C# tabtitle="~/_ViewImports.cshtml" %}
+
+@addTagHelper *, Syncfusion.EJ2
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add stylesheet and script resources
+
+Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows,
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+
+ ...
+
+ ® ASP.NET Core controls.
+
+N> Checkout the [Adding Script Reference](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your ASP.NET Core application.
+
+## Register Syncfusion® Script Manager
+
+Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+
+ ...
+
+ ® ASP.NET Core Smart TextArea tag helper in `~/Pages/Index.cshtml` page.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+
+@{
+ var presets = new {
+ userRole = "Maintainer of an open-source project replying to GitHub issues",
+ userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." },
+ placeHolder = "Write your response to the GitHub issue..." };
+}
+
+Ctrl +F5 (Windows) or ⌘ +F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core
+Smart TextArea control will be rendered in the default web browser.
+
+
+
+## Troubleshooting
+
+If you encounter issues, try the following:
+- **NuGet Installation Errors**: Ensure a stable internet connection and set the NuGet package source to `https://www.nuget.org`. Run `dotnet restore` again.
+- **AI Service Configuration Errors**: Verify the API key, endpoint, and model name in **Program.cs**. Check for typos or incorrect values.
diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/groq-service.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/groq-service.md
new file mode 100644
index 0000000000..8229b14c71
--- /dev/null
+++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/groq-service.md
@@ -0,0 +1,207 @@
+---
+layout: post
+title: Groq AI in ##Platform_Name## Smart TextArea Control | Syncfusion
+description: Learn how to implement a custom AI service using Groq AI with ##Platform_Name## Smart TextArea control of Syncfusion Essential JS 2 and more details.
+platform: ej2-asp-core-mvc
+control: Groq AI
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Groq AI Integration with ASP.NET Core Smart TextArea
+
+The Syncfusion ASP.NET Core Smart TextArea control provides AI-powered autocompletion for context-aware text input, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Groq AI service with the Smart TextArea using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core App.
+
+## Setting Up Groq
+
+1. **Create a Groq Account**
+ Visit [Groq Cloud Console](https://console.groq.com), sign up or sign in, and complete the verification process.
+2. **Obtain an API Key**
+ Navigate to [API Keys](https://console.groq.com/keys) in the Groq Console and click "Create API Key."
+3. **Review Model Specifications**
+ Refer to [Groq Models Documentation](https://console.groq.com/docs/models) 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 TextArea.
+
+1. Create a `Services` folder in your project.
+2. Add a new file named `GroqService.cs` in the `Services` folder.
+3. 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).
+
+```csharp
+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 CompleteAsync(IList 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 { "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(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);
+ }
+ }
+}
+```
+
+N> 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.
+
+1. Create a new file named `GroqModels.cs` in the `Services` folder.
+2. Add the following model classes:
+
+```csharp
+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 Messages { get; set; }
+ public List Stop { get; set; }
+}
+
+public class GroqResponseObject
+{
+ public string Model { get; set; }
+ public List Choices { get; set; }
+}
+```
+
+## Create a Custom AI Service
+
+Implement the `IChatInferenceService` interface to connect the Smart TextArea to the Groq service.
+
+1. Create a new file named `GroqInferenceService.cs` in the `Services` folder.
+2. Add the following implementation:
+
+```csharp
+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 GenerateResponseAsync(ChatParameters options)
+ {
+ return await _groqService.CompleteAsync(options.Messages);
+ }
+}
+```
+
+## Configure the ASP.NET Core App
+
+Register the Groq service and `IChatInferenceService` implementation in the dependency injection container.
+
+Update the **~/Program.cs** file as follows:
+
+```csharp
+using Syncfusion.EJ2;
+using Syncfusion.EJ2.AI;
+
+builder.Services.AddRazorPages();
+builder.Services.AddSyncfusionSmartComponents();
+builder.Services.AddSingleton();
+builder.Services.AddSingleton();
+
+var app = builder.Build();
+// ...
+```
+
+## Add ASP.NET Core Smart TextArea Control
+
+Add the Smart TextArea in the **~/Pages/Index.cshtml** file to test the Groq AI integration.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+
+@{
+ var presets = new {
+ userRole = "Maintainer of an open-source project replying to GitHub issues",
+ userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." },
+ placeHolder = "Write your response to the GitHub issue..." };
+}
+
+Ctrl +F5 (Windows) or ⌘ +F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core
+Smart TextArea control will be rendered in the default web browser.
+
+
+
+## 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**.
diff --git a/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Inline.gif b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Inline.gif
new file mode 100644
index 0000000000..8b1ff768fe
Binary files /dev/null and b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Inline.gif differ
diff --git a/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Popup.gif b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Popup.gif
new file mode 100644
index 0000000000..efcbf7fbeb
Binary files /dev/null and b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Popup.gif differ
diff --git a/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea.gif b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea.gif
new file mode 100644
index 0000000000..8b1ff768fe
Binary files /dev/null and b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea.gif differ
diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html
index 5bfd04cf54..2ee1cefdb6 100644
--- a/ej2-asp-core-toc.html
+++ b/ej2-asp-core-toc.html
@@ -606,6 +606,7 @@
Header Footer Templates Speech to Text Appearance Globalization Accessibility Smart Paste Button
+
+
+ Smart TextArea
+
+
Smith Chart
-
+
+ 31.2.9 Service Pack Release 31.2.2 Service Pack Release 31.1.17 Main Release Google Gemini
- Azure Open AI
+ Azure OpenAI
@@ -174,6 +174,16 @@
Custom views File attachments Templates Speech
+
+
Appearance Accessibility Methods Chat Bot Integrations
@@ -596,6 +606,7 @@
Header Footer Templates Speech to Text Appearance Globalization Accessibility 31.1.20 31.1.18 31.2.9 Service Pack Release 31.2.2 Service Pack Release 31.1.17 Main Release