Getting Started
diff --git a/blazor/ai/azure-openai.md b/blazor/ai/azure-openai.md
new file mode 100644
index 0000000000..4c2c72e7a9
--- /dev/null
+++ b/blazor/ai/azure-openai.md
@@ -0,0 +1,297 @@
+---
+layout: post
+title: Using Azure OpenAI with Syncfusion Blazor AI | Syncfusion
+description: Learn how to set up and use Syncfusion.Blazor.AI with Azure OpenAI for AI-powered features in your Blazor apps, including configuration and examples.
+platform: Blazor
+control: AI Integration
+documentation: ug
+---
+
+# Using Azure OpenAI with Syncfusion Blazor AI package
+
+This section helps to configuring and using the **Syncfusion.Blazor.AI** package with **Azure OpenAI** to enable AI functionalities in your Blazor applications. The package provides seamless integration with Azure OpenAI's API, allowing you to enhance any Syncfusion Blazor component with intelligent features.
+
+## Prerequisites
+- Install the following NuGet packages:
+ - `Syncfusion.Blazor.AI`
+ - `Azure.AI.OpenAI`
+- For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `apiKey`, `deploymentName` and `endpoint` will all be provided to you.
+- Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements).
+
+## Configuration
+To use Azure OpenAI, configure the AI service in your `Program.cs` file by registering the `AIServiceCredentials` and `IChatInferenceService`.
+
+### Steps
+1. Open your Blazor application's `Program.cs`.
+2. Add the following code to configure Azure OpenAI credentials:
+
+```csharp
+builder.Services.AddSingleton(new AIServiceCredentials
+{
+ ApiKey = "your-azure-openai-key", // Replace with your Azure OpenAI API key
+ DeploymentName = "your-deployment-name", // Specify the Azure OpenAI deployment name
+ Endpoint = new Uri("https://your-openai.azure.com/") // Replace with your Azure OpenAI endpoint
+});
+
+// Register the inference backend
+builder.Services.AddSingleton();
+```
+
+3. Ensure the required Syncfusion Blazor namespaces are included in your `Program.cs`:
+```csharp
+using Syncfusion.Blazor.AI;
+```
+
+## Example: Syncfusion Query Builder with Azure OpenAI in a Blazor Application
+
+This example demonstrates using the **Syncfusion.Blazor.AI** package with **Azure OpenAI** to enable natural language querying in a Blazor application. The application features a Syncfusion Tab component with a textarea for entering natural language queries, a QueryBuilder component to visualize the generated query rules, and a Grid component to display filtered results based on the query processed by Azure OpenAI.
+
+### Prerequisites
+- Install the following NuGet packages:
+ - `Syncfusion.Blazor.Grid`
+ - `Syncfusion.Blazor.Themes`
+ - `Syncfusion.Blazor.AI`
+ - `Syncfusion.Blazor.QueryBuilder`
+ - `Azure.AI.OpenAI`
+- Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements).
+- Add the following to `App.razor` for Syncfusion themes and scripts:
+
+```html
+
+ ....
+
+
+
+
+ ....
+
+
+```
+
+Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+
+{% tabs %}
+{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Syncfusion.Blazor;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.Add("#app");
+builder.RootComponents.Add("head::after");
+
+builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
+builder.Services.AddSyncfusionBlazor();
+await builder.Build().RunAsync();
+....
+
+{% endhighlight %}
+{% endtabs %}
+
+### Razor Component (`Home.razor`)
+```csharp
+@page "/"
+
+@using Syncfusion.Blazor.QueryBuilder
+@using Syncfusion.Blazor.Navigations
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.Spinner
+@using Syncfusion.Blazor.AI
+@inject IChatInferenceService AzureAIService
+
+Syncfusion - Smart Natural Language Querying
+
+
+
+
+
+
+
+ Query
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Results
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+(`Home.razor.cs`)
+```csharp
+using Microsoft.Extensions.AI;
+using Syncfusion.Blazor.AI;
+using Syncfusion.Blazor.QueryBuilder;
+
+namespace AzureOpenAIExample.Components.Pages
+{
+ public partial class Home
+ {
+ public bool VisibleProperty = false;
+ public class User
+ {
+ public int id { get; set; }
+ public string name { get; set; }
+ public string email { get; set; }
+ public string address { get; set; }
+ public string city { get; set; }
+ public string state { get; set; }
+ public int credits { get; set; }
+ }
+ private static readonly string[] Names = { "John", "Jane", "Bob", "Alice", "Tom", "Sally", "Jim", "Mary", "Peter", "Nancy" };
+ private static readonly string[] Cities = { "Los Angeles", "San Diego", "New York", "Chicago", "Houston", "Phoenix", "Philadelphia", "San Antonio", "Dallas", "San Jose" };
+ private static readonly string[] States = { "California", "New York", "Illinois", "Texas", "Arizona", "Pennsylvania" };
+ private static readonly string[] Streets = { "Elm St", "Oak St", "Maple Ave", "Pine St", "Cedar St", "Birch St" };
+ private static readonly string[] Emails = { "example.com", "test.com", "demo.com" };
+
+ public static List GenerateRandomUsers(int count)
+ {
+ var random = new Random();
+ var users = new List();
+
+ for (int i = 0; i < count; i++)
+ {
+ var id = i + 1;
+ var name = Names[random.Next(Names.Length)];
+ var email = $"{name.ToLower()}{id}@{Emails[random.Next(Emails.Length)]}";
+ var address = $"{random.Next(10000)} {Streets[random.Next(Streets.Length)]}";
+ var city = Cities[random.Next(Cities.Length)];
+ var state = States[random.Next(States.Length)];
+ var credits = random.Next(2001);
+
+ users.Add(new User
+ {
+ id = id,
+ name = name,
+ email = email,
+ address = address,
+ city = city,
+ state = state,
+ credits = credits
+ });
+ }
+
+ return users;
+ }
+
+ List Users = GenerateRandomUsers(7);
+
+ private string TextAreaValue { get; set; } = "Find all users who lives in Los Angeles and have over 500 credits";
+ SfQueryBuilder QueryBuilderObj;
+ private IEnumerable GridData { get; set; }
+ private IEnumerable DataSource { get; set; }
+ protected override void OnInitialized()
+ {
+ DataSource = Users;
+ }
+ private void GridCreated()
+ {
+ GridData = DataSource;
+ }
+
+ private async void GenBtnClick()
+ {
+ VisibleProperty = true;
+ string prompt = "Create an SQL query to achieve the following task: " + TextAreaValue + " from a single table. Focus on constructing a valid SQL query that directly addresses the specified task, ensuring it adheres to standard SQL syntax for querying a single table. NOTE: Return only the SQL query without any additional explanation or commentary. The response should contain the query itself, formatted correctly and ready for execution.";
+
+ ChatParameters chatParameters = new ChatParameters
+ {
+ Messages = new List
+ {
+ new ChatMessage(ChatRole.User, prompt)
+ }
+ };
+ string result = await AzureAIService.GenerateResponseAsync(chatParameters);
+
+ string value = result.Split("WHERE ")[1].Split(";\n")[0];
+ value = value.Replace("\n", " ");
+ value = value.Replace(";", "");
+ QueryBuilderObj.SetRulesFromSql(value);
+ GridData = QueryBuilderObj.GetFilteredRecords().ToList().AsEnumerable();
+ StateHasChanged();
+ VisibleProperty = false;
+ }
+ }
+}
+```
+
+
+
+### Explanation
+- **IChatInferenceService**: Injected to interact with the OpenAI service.
+- **ChatParameters**: Configures the AI request, including system and user messages, temperature, and token limits.
+- **GenerateResponseAsync**: Sends the request to OpenAI and retrieves the response asynchronously.
+- **Response**: Displays the AI-generated text.
+
diff --git a/blazor/ai/custom-ai-service.md b/blazor/ai/custom-ai-service.md
new file mode 100644
index 0000000000..7be1184a51
--- /dev/null
+++ b/blazor/ai/custom-ai-service.md
@@ -0,0 +1,93 @@
+---
+layout: post
+title: Using Custom AI Services with Syncfusion Blazor AI | Syncfusion
+description: Learn how to set up and use Syncfusion.Blazor.AI with custom AI providers, including configuration, integration steps, and practical examples.
+platform: Blazor
+control: AI Integration
+documentation: ug
+---
+
+# Using Custom AI Services with Syncfusion Blazor AI package (DeepSeek Example)
+
+This section helps to configuring and using the **Syncfusion.Blazor.AI** package with a **custom AI service** by implementing the `IChatInferenceService` interface, using DeepSeek as an example. This extensibility allows you to integrate DeepSeek or any custom AI provider into your Blazor applications, enhancing Syncfusion Blazor components with tailored AI functionalities.
+
+## Prerequisites
+- Install the **Syncfusion.Blazor.AI** NuGet package.
+- Obtain a DeepSeek API key from the [DeepSeek platform](https://platform.deepseek.com).
+- Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements).
+
+## Configuration
+To use DeepSeek as a custom AI service, implement the `IChatInferenceService` interface and configure it in your `Program.cs` file using `AIServiceCredentials` to provide the API key, deployment name, and endpoint.
+
+### Steps
+1. **Implement the Custom AI Service**:
+ Create a class that implements the `IChatInferenceService` interface for DeepSeek. The implementation below uses the provided DeepSeek code, modified to utilize `AIServiceCredentials` from `Program.cs`.
+
+```csharp
+using Microsoft.Extensions.AI;
+using Syncfusion.Blazor.AI;
+using System.Net.Http;
+using System.Text;
+using System.Text.Json;
+using System.Threading.Tasks;
+
+public class DeepSeekAIService : IChatInferenceService
+{
+ private readonly HttpClient _httpClient;
+ private readonly AIServiceCredentials _credentials;
+
+ public DeepSeekAIService(HttpClient httpClient, AIServiceCredentials credentials)
+ {
+ _httpClient = httpClient;
+ _credentials = credentials;
+ }
+
+ public async Task GenerateResponseAsync(ChatParameters options)
+ {
+ var requestBody = new
+ {
+ model = _credentials.DeploymentName ?? "deepseek-chat", // Use deployment name from credentials
+ messages = options.Messages.Select(m => new { role = m.Role.ToString().ToLower(), content = m.Content }).ToArray(),
+ temperature = options.Temperature,
+ max_tokens = options.MaxTokens
+ };
+
+ var requestContent = new StringContent(JsonSerializer.Serialize(requestBody), Encoding.UTF8, "application/json");
+ if (!string.IsNullOrEmpty(_credentials.ApiKey))
+ {
+ _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", _credentials.ApiKey);
+ }
+
+ var response = await _httpClient.PostAsync(_credentials.Endpoint?.ToString() ?? "https://api.deepseek.com/v1/chat/completions", requestContent);
+ response.EnsureSuccessStatusCode();
+
+ var responseJson = await response.Content.ReadAsStringAsync();
+ using var doc = JsonDocument.Parse(responseJson);
+ return doc.RootElement.GetProperty("choices")[0].GetProperty("message").GetProperty("content").GetString();
+ }
+}
+```
+
+2. **Register the Custom AI Service**:
+ Open your Blazor application's `Program.cs` and configure the DeepSeek AI service with `AIServiceCredentials`.
+
+```csharp
+builder.Services.AddSingleton(new AIServiceCredentials
+{
+ ApiKey = "your-deepseek-api-key", // Replace with your DeepSeek API key
+ DeploymentName = "deepseek-chat", // Specify the model (e.g., "deepseek-chat", "deepseek-coder")
+});
+
+// Register the custom inference backend
+builder.Services.AddSingleton();
+```
+
+3. **Include Required Namespaces**:
+ Ensure the required Syncfusion Blazor namespaces are included in your `Program.cs`:
+
+```csharp
+using Syncfusion.Blazor.AI;
+```
+
+
+
diff --git a/blazor/ai/images/adaptive-datastructuring.gif b/blazor/ai/images/adaptive-datastructuring.gif
new file mode 100644
index 0000000000..6d5ea6d4d3
Binary files /dev/null and b/blazor/ai/images/adaptive-datastructuring.gif differ
diff --git a/blazor/ai/images/anomaly-detection.gif b/blazor/ai/images/anomaly-detection.gif
new file mode 100644
index 0000000000..c9c87f40bd
Binary files /dev/null and b/blazor/ai/images/anomaly-detection.gif differ
diff --git a/blazor/ai/images/natural-languagequery.gif b/blazor/ai/images/natural-languagequery.gif
new file mode 100644
index 0000000000..da0c89a600
Binary files /dev/null and b/blazor/ai/images/natural-languagequery.gif differ
diff --git a/blazor/ai/ollama.md b/blazor/ai/ollama.md
new file mode 100644
index 0000000000..875697ee1e
--- /dev/null
+++ b/blazor/ai/ollama.md
@@ -0,0 +1,234 @@
+---
+layout: post
+title: Using Ollama with Syncfusion Blazor AI | Syncfusion
+description: Learn how to set up and use Syncfusion.Blazor.AI with Ollama, including configuration, integration steps, and practical examples.
+platform: Blazor
+control: AI Integration
+documentation: ug
+---
+
+# Using Ollama with Syncfusion Blazor AI package
+
+This section helps to configuring and using the **Syncfusion.Blazor.AI** package with **Ollama** to enable AI functionalities in your Blazor applications. The package provides seamless integration with Ollama's locally hosted AI models, allowing you to enhance any Syncfusion Blazor component with intelligent features.
+
+## Prerequisites
+- Install the following NuGet package:
+ - `Syncfusion.Blazor.AI`
+- Install **Ollama** on your local system (no virtual machines) following the instructions at [Ollama's official site](https://ollama.com/).
+- Download an Ollama model (e.g., `llama2`) using the command:
+ ```bash
+ ollama run llama2
+ ```
+
+- Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements).
+
+## Configuration
+To use Ollama, configure the AI service in your `Program.cs` file by registering the `AIServiceCredentials` and `IChatInferenceService`.
+
+### Steps
+1. Open your Blazor application's `Program.cs`.
+2. Add the following code to configure Ollama credentials:
+
+```csharp
+builder.Services.AddSingleton(new AIServiceCredentials
+{
+ DeploymentName = "llama2", // Specify the Ollama model (e.g., "llama2", "mistral", "codellama")
+ Endpoint = new Uri("http://localhost:11434"), // Replace with your Ollama endpoint URL
+ SelfHosted = true // Set to true for Ollama
+});
+
+// Register the inference backend
+builder.Services.AddSingleton();
+```
+
+3. Ensure the required Syncfusion Blazor namespaces are included in your `Program.cs`:
+```csharp
+using Syncfusion.Blazor.AI;
+```
+
+## Example: Syncfusion Tree Grid with Azure OpenAI in a Blazor Application
+
+This example demonstrates using the **Syncfusion.Blazor.AI** package with **Ollama** to perform smart data restructuring in a Syncfusion Blazor TreeGrid component. The application organizes hierarchical data by leveraging Ollama to assign appropriate `ParentId` values based on `CategoryName` relationships, updating the TreeGrid to reflect the corrected structure.
+
+### Prerequisites
+- Install the following NuGet packages:
+ - `Syncfusion.Blazor.Grid`
+ - `Syncfusion.Blazor.Themes`
+ - `Syncfusion.Blazor.AI`
+ - `Syncfusion.Blazor.QueryBuilder`
+ - `Azure.AI.OpenAI`
+- Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements).
+- Add the following to `App.razor` for Syncfusion themes and scripts:
+
+```html
+
+ ....
+
+
+
+
+ ....
+
+
+```
+
+Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+
+{% tabs %}
+{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Syncfusion.Blazor;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.Add("#app");
+builder.RootComponents.Add("head::after");
+
+builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
+builder.Services.AddSyncfusionBlazor();
+await builder.Build().RunAsync();
+....
+
+{% endhighlight %}
+{% endtabs %}
+
+### Razor Component (`Home.razor`)
+```csharp
+@page "/"
+
+@inject IChatInferenceService OllamaAIService
+@using Syncfusion.Blazor.TreeGrid
+@using Syncfusion.Blazor.Navigations
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.AI
+@using System.Text.Json;
+
+
+```
+
+`Home.razor.cs`
+```csharp
+using Microsoft.Extensions.AI;
+using Syncfusion.Blazor.AI;
+using Syncfusion.Blazor.TreeGrid;
+using System.Text.Json;
+
+namespace OllamaExample.Components.Pages
+{
+ public partial class Home
+ {
+ public SfTreeGrid TreeGrid;
+ private string AIPrompt = string.Empty;
+ private string message = string.Empty;
+ public List TreeGridData { get; set; }
+ protected override void OnInitialized()
+ {
+ this.TreeGridData = TreeData.GetAdaptiveStructureData().ToList();
+ }
+
+ private async Task OpenAIHandler()
+ {
+ await TreeGrid.ShowSpinnerAsync();
+ List sortedCollection = new List();
+ var AIPrompt = GeneratePrompt(TreeGridData);
+ ChatParameters chatParameters = new ChatParameters
+ {
+ Messages = new List
+ {
+ new ChatMessage(ChatRole.User, AIPrompt)
+ }
+ };
+ var result = await OllamaAIService.GenerateResponseAsync(chatParameters);
+ result = result.Replace("```json", "").Replace("```", "").Trim();
+
+ string response = JsonDocument.Parse(result).RootElement.GetProperty("TreeGridData").ToString();
+ if (response is not null)
+ {
+ sortedCollection = JsonSerializer.Deserialize>(response);
+ }
+ if (sortedCollection is not null && sortedCollection.Count > 0)
+ {
+ TreeGridData = sortedCollection.Cast().ToList();
+ }
+ else
+ {
+ message = "Oops.! Please try Again !";
+ }
+ await TreeGrid.HideSpinnerAsync();
+ await Task.CompletedTask;
+ }
+
+ private string GeneratePrompt(List TreeGridData)
+ {
+ Dictionary> treeData = new Dictionary>();
+ treeData.Add("TreeGridData", TreeGridData);
+ var jsonData = JsonSerializer.Serialize(treeData);
+ return @"I want you to act as a TreeGrid Data Organizer.
+ Your task is to organize a dataset based on a hierarchical structure using 'CategoryId' and 'ParentId'.
+ Each item in the dataset has a 'CategoryName' representing categories, and some categories have a null 'ParentId', indicating they are top-level categories.
+ Your role will be to meticulously scan the entire dataset to identify related items based on their 'CategoryName' values and nest them under the appropriate top-level categories by updating their 'ParentId' to match the 'CategoryId' of the corresponding top-level category.
+ For example, if a category like 'Furniture' exists, you should scan the dataset for items such as 'Chair' and 'Table' and update their 'ParentId' to the 'CategoryId' of 'Furniture'.
+ The output should be the newly prepared TreeGridData with correctly assigned 'ParentId' values. Please ensure that all subcategories are correctly nested under their respective top-level categories.
+ Return the newly prepared TreeGridData alone and don't share any other information with the response: Here is the dataset " + jsonData + "/n Note: Return response must be in json string and with no other explanation. ";
+ }
+ public class TreeData
+ {
+ public class BusinessObject
+ {
+ public int CategoryId { get; set; }
+ public string CategoryName { get; set; }
+ public string Status { get; set; }
+ public DateTime OrderDate { get; set; }
+ public int? ParentId { get; set; }
+ }
+
+ public static List GetAdaptiveStructureData()
+ {
+ List BusinessObjectCollection = new List();
+ BusinessObjectCollection.Add(new BusinessObject() { CategoryId = 1, CategoryName = "Electronics", Status = "Available", OrderDate = new DateTime(2021, 7, 12), ParentId = null });
+ BusinessObjectCollection.Add(new BusinessObject() { CategoryId = 2, CategoryName = "Cell phone", Status = "out of Stock", OrderDate = new DateTime(2021, 6, 17), ParentId = 1 });
+ BusinessObjectCollection.Add(new BusinessObject() { CategoryId = 3, CategoryName = "Computer", Status = "Available", OrderDate = new DateTime(2021, 7, 12), ParentId = 7 });
+ BusinessObjectCollection.Add(new BusinessObject() { CategoryId = 4, CategoryName = "Cloth", Status = "Available", OrderDate = new DateTime(2021, 10, 5), ParentId = null });
+ BusinessObjectCollection.Add(new BusinessObject() { CategoryId = 5, CategoryName = "Silk", Status = "Out of Stock", OrderDate = new DateTime(2021, 9, 2), ParentId = 7 });
+ BusinessObjectCollection.Add(new BusinessObject() { CategoryId = 6, CategoryName = "Chair", Status = "Available", OrderDate = new DateTime(2021, 3, 3), ParentId = 1 });
+ BusinessObjectCollection.Add(new BusinessObject() { CategoryId = 7, CategoryName = "Furniture", Status = "Available", OrderDate = new DateTime(2021, 3, 5), ParentId = null });
+ BusinessObjectCollection.Add(new BusinessObject() { CategoryId = 8, CategoryName = "Bed", Status = "Available", OrderDate = new DateTime(2021, 3, 5), ParentId = 7 });
+ BusinessObjectCollection.Add(new BusinessObject() { CategoryId = 9, CategoryName = "Fabrics", Status = "Available", OrderDate = new DateTime(2021, 10, 5), ParentId = 4 });
+ return BusinessObjectCollection;
+ }
+ }
+ }
+}
+```
+
+
+
+### Explanation
+- **IChatInferenceService**: Injected to interact with the OpenAI service.
+- **ChatParameters**: Configures the AI request, including system and user messages, temperature, and token limits.
+- **GenerateResponseAsync**: Sends the request to OpenAI and retrieves the response asynchronously.
+- **Response**: Displays the AI-generated text.
diff --git a/blazor/ai/openAI.md b/blazor/ai/openAI.md
new file mode 100644
index 0000000000..fdd4807153
--- /dev/null
+++ b/blazor/ai/openAI.md
@@ -0,0 +1,302 @@
+---
+layout: post
+title: Using OpenAI with Syncfusion Blazor AI | Syncfusion
+description: Learn how to configure and use the Syncfusion.Blazor.AI library with OpenAI, including setup, integration steps, and practical examples.
+platform: Blazor
+control: AI Integration
+documentation: ug
+---
+
+# Using OpenAI with Syncfusion Blazor AI package
+
+This section helps to configuring and using the **Syncfusion.Blazor.AI** package with **OpenAI** to enable AI functionalities in your Blazor applications. The package allows seamless integration with OpenAI's API, empowering any Syncfusion Blazor component with intelligent features.
+
+## Prerequisites
+- Install the **Syncfusion.Blazor.AI** package via NuGet.
+- Obtain an OpenAI API key from the OpenAI platform.
+- Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements).
+
+## Configuration
+To use OpenAI, configure the AI service in your `Program.cs` file by registering the `AIServiceCredentials` and `IChatInferenceService`.
+
+### Steps
+1. Open your Blazor application's `Program.cs`.
+2. Add the following code to configure OpenAI credentials:
+
+```csharp
+builder.Services.AddSingleton(new AIServiceCredentials
+{
+ ApiKey = "your-openai-key", // Replace with your OpenAI API key
+ DeploymentName = "gpt-4", // Specify the model (e.g., "gpt-4", "gpt-3.5-turbo")
+ Endpoint = null // Must be null for OpenAI
+});
+
+// Register the inference backend
+builder.Services.AddSingleton();
+```
+
+3. Ensure the required Syncfusion Blazor namespaces are included in your `Program.cs`:
+```csharp
+using Syncfusion.Blazor.AI;
+```
+
+## Example: Syncfusion Grid with Azure OpenAI in a Blazor Application
+
+This example demonstrates using the **Syncfusion.Blazor.AI** package with OpenAI to perform anomaly detection in a Syncfusion Blazor Grid component. The grid displays machine data (e.g., MachineID, Temperature, Pressure, Voltage, MotorSpeed, ProductionRate), and OpenAI identifies rows with irrelevant production rates relative to other factors, updating the grid with anomaly descriptions and visual styling.
+
+### Prerequisites
+- Install the following NuGet packages:
+ - `Syncfusion.Blazor.Grid`
+ - `Syncfusion.Blazor.Themes`
+ - `Syncfusion.Blazor.AI`
+- Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements?utm_source=nuget&utm_medium=listing&utm_campaign=blazor-smart-nuget).
+- Add the following to `App.razor` for Syncfusion themes and scripts:
+
+```html
+
+ ....
+
+
+
+
+ ....
+
+
+```
+
+Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+
+{% tabs %}
+{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Syncfusion.Blazor;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.Add("#app");
+builder.RootComponents.Add("head::after");
+
+builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
+builder.Services.AddSyncfusionBlazor();
+await builder.Build().RunAsync();
+....
+
+{% endhighlight %}
+{% endtabs %}
+
+### Razor Component (`Home.razor`)
+```cshtml
+@page "/"
+
+@inject IChatInferenceService OpenAIService
+@using Newtonsoft.Json
+@using Syncfusion.Blazor.AI
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Navigations
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.Spinner
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+`Home.razor.cs`
+```cshtml
+using Microsoft.Extensions.AI;
+using Newtonsoft.Json;
+using Syncfusion.Blazor.AI;
+using Syncfusion.Blazor.Grids;
+
+namespace OpenAIExample.Components.Pages
+{
+ public partial class Home
+ {
+ SfGrid Grid { get; set; }
+ private List machineDataList = new List();
+ private List AIgeneratedData = new List();
+ private bool anomalyColumnVisibility { get; set; }
+ private bool spinnerVisibility { get; set; }
+
+ public void CustomizeCell(QueryCellInfoEventArgs args)
+ {
+ if (AIgeneratedData != null && AIgeneratedData.Count > 0)
+ {
+ if (AIgeneratedData.Where(e => (!string.IsNullOrEmpty(e.AnomalyFieldName)) && (e.AnomalyFieldName.Equals(args.Column.Field, StringComparison.Ordinal) && e.MachineID.Equals(args.Data.MachineID))).Any())
+ {
+ args.Cell.AddClass(new string[] { "anomaly-cell" });
+ }
+ else if (args.Column.Field.Equals("AnomalyDescription", StringComparison.Ordinal))
+ {
+ string defaultDescription = machineDataList[0].AnomalyDescription;
+ string anomalyDescription = args.Data.AnomalyDescription;
+ if (defaultDescription.Equals(anomalyDescription, StringComparison.Ordinal))
+ {
+ args.Cell.AddClass(new string[] { "normal-cell" });
+ }
+ else
+ {
+ args.Cell.AddClass(new string[] { "anomaly-cell" });
+ }
+ }
+ }
+ }
+
+ public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
+ {
+ if (args.Item.Id == "Anomaly")
+ {
+ DetectAnomalyData();
+ }
+ }
+
+ private async void DetectAnomalyData()
+ {
+ spinnerVisibility = true;
+ GridReport gridReport = new GridReport()
+ {
+ DataSource = machineDataList,
+ };
+ var gridReportJson = GetSerializedGridReport(gridReport);
+ string userInput = ValidateAndGeneratePrompt(gridReportJson);
+ ChatParameters chatParameters = new ChatParameters
+ {
+ Messages = new List
+ {
+ new ChatMessage(ChatRole.User, userInput)
+ }
+ };
+ var result = await OpenAIService.GenerateResponseAsync(chatParameters);
+ if (result != null)
+ {
+ GridReport deserializeResult = new GridReport();
+ try
+ {
+ result = result.Replace("```json", "").Replace("```", "").Trim();
+ deserializeResult = DeserializeResult(result);
+ AIgeneratedData = deserializeResult.DataSource;
+ spinnerVisibility = false;
+ anomalyColumnVisibility = true;
+ if (AIgeneratedData != null && AIgeneratedData.Count > 0)
+ {
+ foreach (var data in AIgeneratedData)
+ {
+ await Grid.SetCellValueAsync(data.MachineID, "AnomalyDescription", data.AnomalyDescription);
+ }
+ }
+ }
+ catch (Exception ex)
+ {
+ throw ex;
+ }
+ }
+ }
+
+ private static string ValidateAndGeneratePrompt(string data)
+ {
+ return $"Given the following datasource are bounded in the Grid table\n\n{data}.\n Return the anomaly data rows (ie. pick the ir-relevant datas mentioned in the corresponding table) present in the table mentioned above as like in the same format provided do not change the format. Example: Watch out the production rate count and the factors that is used to acheive the mentioned production rate(Temprature, Pressure, Motor Speed) If the production rate is not relevant to the concern factors mark it as anomaly Data. If it is anomaly data then due to which column data it is marked as anomaly that particular column name should be updated in the AnomalyFieldName. Also Update the AnomalyDescription stating that due to which reason it is marked as anomaly a short description. Example if the data is marked as anomaly due to the Temperature column, Since the mentioned temperature is too high than expected, it is marked as anomaly data.\n\nGenerate an output in JSON format only and Should not include any additional information or contents in response";
+ }
+
+ private string GetSerializedGridReport(GridReport report)
+ {
+ return JsonConvert.SerializeObject(report);
+ }
+
+ private GridReport DeserializeResult(string result)
+ {
+ return JsonConvert.DeserializeObject(result);
+ }
+
+ protected override void OnInitialized()
+ {
+ string description = "The factors that supporting the Production rate is relevant to the count produced, hence the row data is marked as normal data.";
+ machineDataList = new List
+ {
+ new MachineData { MachineID = "M001", Temperature = 85, Pressure = 120, Voltage = 220, MotorSpeed = 1500, ProductionRate = 100, AnomalyDescription = description },
+ new MachineData { MachineID = "M002", Temperature = 788, Pressure = 115, Voltage = 230, MotorSpeed = 1520, ProductionRate = 105, AnomalyDescription = description },
+ new MachineData { MachineID = "M003", Temperature = 90, Pressure = 118, Voltage = 225, MotorSpeed = 1480, ProductionRate = 95, AnomalyDescription = description },
+ new MachineData { MachineID = "M004", Temperature = 87, Pressure = 122, Voltage = 228, MotorSpeed = 1515, ProductionRate = 110, AnomalyDescription = description },
+ new MachineData { MachineID = "M005", Temperature = 92, Pressure = 116, Voltage = 222, MotorSpeed = 21475, ProductionRate = 980, AnomalyDescription = description },
+ new MachineData { MachineID = "M006", Temperature = 85, Pressure = 119, Voltage = 220, MotorSpeed = 1490, ProductionRate = 102, AnomalyDescription = description },
+ new MachineData { MachineID = "M007", Temperature = 88, Pressure = 114, Voltage = 230, MotorSpeed = 1500, ProductionRate = 104, AnomalyDescription = description },
+ new MachineData { MachineID = "M008", Temperature = 90, Pressure = 1120, Voltage = 225, MotorSpeed = 1470, ProductionRate = 89, AnomalyDescription = description },
+ new MachineData { MachineID = "M009", Temperature = 87, Pressure = 121, Voltage = 228, MotorSpeed = 1505, ProductionRate = 108, AnomalyDescription = description },
+ new MachineData { MachineID = "M010", Temperature = 92, Pressure = 117, Voltage = 222, MotorSpeed = 1480, ProductionRate = 100, AnomalyDescription = description },
+ };
+ }
+
+ public class MachineData
+ {
+ public string MachineID { get; set; }
+ public int Temperature { get; set; }
+ public int Pressure { get; set; }
+ public int Voltage { get; set; }
+ public int MotorSpeed { get; set; }
+ public int ProductionRate { get; set; }
+ public string AnomalyDescription { get; set; }
+ public string AnomalyFieldName { get; set; }
+ }
+
+ public class GridReport
+ {
+ public List DataSource { get; set; }
+ }
+ }
+}
+```
+
+
+
+### Explanation
+- **IChatInferenceService**: Injected to interact with the OpenAI service.
+- **ChatParameters**: Configures the AI request, including system and user messages, temperature, and token limits.
+- **GenerateResponseAsync**: Sends the request to OpenAI and retrieves the response asynchronously.
+- **Response**: Displays the AI-generated text.
+
+
diff --git a/blazor/ai/overview.md b/blazor/ai/overview.md
new file mode 100644
index 0000000000..8e6d1ecbf9
--- /dev/null
+++ b/blazor/ai/overview.md
@@ -0,0 +1,20 @@
+---
+layout: post
+title: Overview of Syncfusion Blazor AI Library | Syncfusion
+description: Learn about the Syncfusion.Blazor.AI library, its key features, supported AI providers, and how it enables intelligent features in Blazor applications.
+platform: Blazor
+control: AI Integration
+documentation: ug
+---
+
+# Overview
+The **Syncfusion.Blazor.AI** package provides seamless AI integration for Blazor applications, supporting services like OpenAI, Azure OpenAI, Ollama, and custom AI providers. It serves as the foundation for Syncfusion's AI-powered components, such as the [Smart TextArea](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started) and [Smart Paste Button](https://blazor.syncfusion.com/documentation/smart-paste/getting-started), enabling developers to build intelligent, responsive applications. This package currently supports **text completion** as its primary AI feature.
+
+## Key Features
+- **Multi-Provider Support**: Integrate with OpenAI, Azure OpenAI, and Ollama local models.
+- **Custom AI Service Extensibility**: Easily extend functionality to include custom AI providers.
+- **Foundation for Smart UI Components**: Enhances any Syncfusion Blazor component with AI capabilities.
+
+## See Also
+- [Smart TextArea](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started)
+- [Smart Paste Button](https://blazor.syncfusion.com/documentation/smart-paste/getting-started)
\ No newline at end of file