Merge pull request #6689 from syncfusion-content/983466-AI-Base

983466: Updated the AI Base UG Sections.

Author: kmuthukumarmkm

blazor/smart-ai-solutions/ai/azure-openai.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Using Azure OpenAI with Syncfusion Blazor AI | Syncfusion
+title: Azure OpenAI Integration 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
@@ -9,15 +9,12 @@ documentation: ug
 
 # Azure OpenAI Integration with Syncfusion® Blazor AI
 
-## Introduction
-
-This section demonstrates configuring and using the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) to enable AI functionalities in Blazor applications. The package provides seamless integration with Azure OpenAI's API, empowering Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with intelligent features such as natural language querying, data analysis, and content processing.
+The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables seamless integration with [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) to add AI-driven features to Blazor applications. These features include natural language querying (converting plain English queries to structured data filters), data analysis (processing and summarizing datasets), and content processing (generating or refining text). 
 
 ## Prerequisites
 
-Before integrating Azure OpenAI with your Blazor application, ensure you have:
-
-* Installed the following NuGet packages:
+To integrate Azure OpenAI with a Blazor WebApp Server, ensure the following:
+- The following NuGet packages are installed:
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
 
@@ -28,17 +25,15 @@ Install-Package Azure.AI.OpenAI
 
 {% endhighlight %}
 {% endtabs %}
-* [Deployed an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) to obtain values for `apiKey`, `deploymentName` and `endpoint`
-* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components
-* Configured secure credential storage using Azure Key Vault or environment variables
+- An [Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) is deployed to obtain `apiKey`, `deploymentName`, and `endpoint` values.
+- The [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met.
+- Credentials are stored securely using Azure Key Vault or environment variables (see [Microsoft’s guide on secure storage](https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets)).
 
 ## Configuration Steps
 
-Follow these steps to configure Azure OpenAI as your AI provider:
-
 ### Register AI Services in Program.cs
 
-Open your Blazor application's `Program.cs` file and add the following configuration:
+To configure Azure OpenAI in a Blazor WebApp Server, update the `Program.cs` file as follows:
 
 ```csharp
 // Add required namespaces
@@ -48,9 +43,9 @@ using Microsoft.Extensions.AI;
 using System.ClientModel;
 
 // Register Azure OpenAI credentials
-string azureOpenAiKey = "AZURE_OPENAI_KEY";
-string azureOpenAiEndpoint = "AZURE_OPENAI_ENDPOINT";
-string azureOpenAiModel = "AZURE_OPENAI_MODEL";
+string azureOpenAiKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_KEY"); // Use secure storage
+string azureOpenAiEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
+string azureOpenAiModel = "gpt-4"; // Specify a deployed Azure OpenAI model
 AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
      new Uri(azureOpenAiEndpoint),
      new ApiKeyCredential(azureOpenAiKey)
@@ -64,10 +59,9 @@ builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
 
 ## Natural Language Querying with Azure OpenAI
 
-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<sup style="font-size:70%">&reg;</sup> 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
+This example demonstrates using the Syncfusion Blazor AI library with Azure OpenAI to enable natural language querying. The application uses a Syncfusion Tab component with a textarea for entering natural language queries, a QueryBuilder component to visualize generated query rules, and a Grid component to display filtered results based on the Azure OpenAI-processed query.
 
+### Setup Prerequisites
 - Install the following NuGet packages:
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -82,31 +76,31 @@ Install-Package Azure.AI.OpenAI
 
 {% endhighlight %}
 {% endtabs %}
-- Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements).
-- Add the following to `App.razor` for Syncfusion<sup style="font-size:70%">&reg;</sup> themes and scripts:
+- Ensure the Blazor application meets the [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements).
+- Add the following to `App.razor` for Syncfusion themes and scripts:
 
 ```html
 <head>
-    ....
+    ...
     <link href="_content/Syncfusion.Blazor.Themes/tailwind.css" rel="stylesheet" />
 </head>
 
 <body>
-    ....
+    ...
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </body>
 ```
 
-### Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+### Register Syncfusion Blazor Service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+Register the Syncfusion Blazor service in the `~/Program.cs` file based on the interactive render mode.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+**For WebAssembly or Auto Render Mode**:
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service should be registered in both **~/Program.cs** files.
 
 {% tabs %}
-{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
+{% highlight c# tabtitle="Server (~/Program.cs)" hl_lines="3 11" %}
 
-...
 ...
 using Syncfusion.Blazor;
 
@@ -119,10 +113,10 @@ builder.Services.AddRazorComponents()
 builder.Services.AddSyncfusionBlazor();
 
 var app = builder.Build();
-....
+...
 
 {% endhighlight %}
-{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %}
+{% highlight c# tabtitle="Client (~/Program.cs)" hl_lines="2 5" %}
 
 ...
 using Syncfusion.Blazor;
@@ -135,7 +129,8 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
+**For Server Render Mode**:
+If the **Interactive Render Mode** is set to `Server`, the project will contain a single **~/Program.cs** file. In this case, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service should be registered within that `~/Program.cs` file.
 
 {% tabs %}
 {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
@@ -151,12 +146,13 @@ builder.Services.AddRazorComponents()
 builder.Services.AddSyncfusionBlazor();
 
 var app = builder.Build();
-....
+...
 
 {% endhighlight %}
 {% endtabs %}
 
-### Razor Component (`Home.razor`)
+### Razor Component (Home.razor)
+
 ```csharp
 @page "/"
 
@@ -255,7 +251,8 @@ var app = builder.Build();
 </style>
 ```
 
-(`Home.razor.cs`)
+### Code-Behind (Home.razor.cs)
+
 ```csharp
 using Microsoft.Extensions.AI;
 using Syncfusion.Blazor.AI;
@@ -353,20 +350,27 @@ namespace AzureOpenAIExample.Components.Pages
 }
 ```
 
-![Natural Query Language - Output](images/natural-languagequery.gif)
+![Natural Language Query Output](images/natural-languagequery.gif)
 
 ## How It Works
 
-The example above demonstrates how to use Azure OpenAI with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components for natural language query processing:
+This example illustrates how the Syncfusion Blazor AI library integrates with Azure OpenAI to process natural language queries:
 
-1. **Setup**: Configuring the Azure OpenAI service in `Program.cs` with appropriate credentials.
-2. **Component Integration**: Using the `IChatInferenceService` to process natural language queries.
-3. **Prompt Engineering**: Creating appropriate prompts for the AI model to convert natural language to SQL.
-4. **Response Processing**: Parsing the SQL response and applying it to the QueryBuilder component.
+1. **Setup**: Configure Azure OpenAI in `Program.cs` using a secure API key, endpoint, and deployed model (e.g., `gpt-4`).
+2. **Component Integration**: Inject `IChatInferenceService` to process user queries entered in a textarea.
+3. **Prompt Engineering**: Craft a prompt to convert natural language input into a valid SQL query for filtering data.
+4. **Response Processing**: Parse the SQL query from Azure OpenAI, apply it to the QueryBuilder component, and update the Grid with filtered results.
 
 ### Key Components
-
-- **IChatInferenceService**: Injected to interact with the Azure OpenAI models.
-- **ChatParameters**: Configures the AI request, including system prompt and user messages.
-- **GenerateResponseAsync**: Sends the request to Azure OpenAI and retrieves the response asynchronously.
-- **UI Components**: Syncfusion<sup style="font-size:70%">&reg;</sup> Tab, QueryBuilder, and Grid components work together with the AI service.
+- **IChatInferenceService**: Injected service for interacting with Azure OpenAI models.
+- **ChatParameters**: Configures the AI request with prompts and user messages.
+- **GenerateResponseAsync**: Sends asynchronous requests to Azure OpenAI and retrieves responses.
+- **UI Components**: Syncfusion Tab, QueryBuilder, and Grid components integrate with the AI service for dynamic query processing.
+
+## Error Handling
+- **Invalid Credentials**: Ensure the API key, endpoint, and model are valid and correctly configured in environment variables or Azure Key Vault.
+- **Rate Limits**: Azure OpenAI usage may be limited based on your subscription. Check [Azure OpenAI pricing documentation](https://azure.microsoft.com/en-us/pricing/details/cognitive-services/openai-service/) for details.
+
+## See Also
+- [Syncfusion Blazor QueryBuilder Documentation](https://blazor.syncfusion.com/documentation/query-builder/getting-started-webapp)
+- [Syncfusion Blazor Grid Documentation](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)

blazor/smart-ai-solutions/ai/custom-ai-service.md

@@ -1,42 +1,36 @@
 ---
 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.
+title: Custom AI Service Integration with Syncfusion Blazor AI | Syncfusion
+description: Learn how to configure and use Syncfusion Blazor AI with custom AI providers, such as DeepSeek, to enable AI-driven features in Blazor applications.
 platform: Blazor
 control: AI Integration
 documentation: ug
 ---
 
 # Custom AI Service Integration with Syncfusion® Blazor AI
 
-## Introduction
-
-This section demonstrates configuring and using the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with a **custom AI service** by implementing the `IChatInferenceService` interface, using DeepSeek as an example. This extensibility feature empowers developers to integrate any AI provider into Blazor applications, enabling Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components to work with specialized or proprietary AI services beyond the standard providers.
+The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables integration with custom AI providers by implementing the `IChatInferenceService` interface, using DeepSeek as an example. This extensibility feature allows developers to connect Blazor applications to proprietary or specialized AI services, such as enterprise-specific models or local AI servers, enhancing Syncfusion Blazor components with tailored AI functionality like text generation or data processing.
 
 ## Prerequisites
 
-Before integrating a custom AI service with your Blazor application, ensure you have:
-
-* Installed the following NuGet packages:
+To integrate a custom AI service with a Blazor application, ensure the following:
+- The following NuGet package is installed:
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
 
 Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
-* Obtained an API key from your chosen AI provider (DeepSeek in this example) from the [DeepSeek platform](https://platform.deepseek.com)
-* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components
-* Understanding of HTTP client usage and JSON serialization in .NET applications
+- An API key is obtained from the chosen AI provider (e.g., DeepSeek via the [DeepSeek API documentation](https://platform.deepseek.com)).
+- The [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met.
+- Familiarity with HTTP client usage and JSON serialization in .NET applications.
 
 ## Configuration Steps
 
-Follow these steps to integrate a custom AI service with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI:
-
 ### Implement the Custom AI Service
 
-Create a class that implements the `IChatInferenceService` interface for your custom AI provider. The implementation below demonstrates DeepSeek integration using `AIServiceCredentials` for secure configuration management.
-
+Create a class that implements the `IChatInferenceService` interface for the custom AI provider. The example below demonstrates DeepSeek integration using `AIServiceCredentials` for secure configuration management.
 
 ```csharp
 using Microsoft.Extensions.AI;
@@ -49,31 +43,31 @@ using System.Threading.Tasks;
 public class DeepSeekAIService : IChatInferenceService
 {
     private readonly HttpClient _httpClient;
-    private readonly AIServiceCredentials _credentials;
+    private readonly string _apiKey = "Your API Key";
+    private readonly string _modelName = "deepseek-chat"; // Example model
 
-    public DeepSeekAIService(HttpClient httpClient, AIServiceCredentials credentials)
+    public DeepSeekAIService(HttpClient httpClient)
     {
         _httpClient = httpClient;
-        _credentials = credentials;
     }
 
     public async Task<string> GenerateResponseAsync(ChatParameters options)
     {
         var requestBody = new
         {
-            model = _credentials.DeploymentName ?? "deepseek-chat", // Use deployment name from credentials
+            model = _modelName, // 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))
+        if (!string.IsNullOrEmpty(_apiKey))
         {
-            _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", _credentials.ApiKey);
+            _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", _apiKey);
         }
 
-        var response = await _httpClient.PostAsync(_credentials.Endpoint?.ToString() ?? "https://api.deepseek.com/v1/chat/completions", requestContent);
+        var response = await _httpClient.PostAsync("https://api.deepseek.com/v1/chat/completions", requestContent);
         response.EnsureSuccessStatusCode();
 
         var responseJson = await response.Content.ReadAsStringAsync();
@@ -85,33 +79,30 @@ public class DeepSeekAIService : IChatInferenceService
 
 ### Register the Custom AI Service
 
-   Open your Blazor application's `Program.cs` and configure the DeepSeek AI service with `AIServiceCredentials`.
+Update the Blazor application's `Program.cs` to configure the DeepSeek AI service with `AIServiceCredentials`.
 
 ```csharp
 using Syncfusion.Blazor.AI;
 
-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
+// Register the custom inference service
 builder.Services.AddSingleton<IChatInferenceService, DeepSeekAIService>();
 ```
 
-## Custom AI Integration with Syncfusion<sup style="font-size:70%">&reg;</sup> Components
-The `GenerateResponseAsync` method in the DeepSeekAIService class serves as the core interface for AI communication. This method:
+## How It Works
+
+This example illustrates how the Syncfusion Blazor AI library integrates with a custom AI service (DeepSeek):
 
-1. **Formats Requests:** Converts Syncfusion<sup style="font-size:70%">&reg;</sup> AI parameters into the custom provider's expected format
-2. **Handles Authentication:** Manages API key authentication securely
-3. **Processes Responses:** Parses the provider's response format into standard AI responses
+1. **Setup**: Implement and register the custom AI service in `Program.cs` using secure credentials.
+2. **Component Integration**: Inject `IChatInferenceService` to process AI requests within Syncfusion components like Smart TextArea.
+3. **Request Formatting**: Convert Syncfusion AI parameters into the custom provider’s API format (e.g., DeepSeek’s JSON structure).
+4. **Response Processing**: Parse the provider’s response and update the component (e.g., displaying text suggestions).
 
-## See Also
+### Key Components
+- **IChatInferenceService**: Interface for interacting with custom AI providers.
+- **AIServiceCredentials**: Syncfusion class for managing API keys, endpoints, and model names.
+- **GenerateResponseAsync**: Sends asynchronous requests to the custom AI provider and retrieves responses.
 
-- [Overview](https://blazor.syncfusion.com/documentation/smart-ai-solutions/ai/overview)
-- [OpenAI Integration](https://blazor.syncfusion.com/documentation/smart-ai-solutions/ai/openai)
-- [Azure OpenAI Integration](https://blazor.syncfusion.com/documentation/smart-ai-solutions/ai/azure-openai)
-- [Ollama Integration](https://blazor.syncfusion.com/documentation/smart-ai-solutions/ai/ollama)
-- [Smart TextArea](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started)
-- [Smart Paste Button](https://blazor.syncfusion.com/documentation/smart-paste/getting-started)
+## Error Handling
+- **Invalid API Key**: Ensure the API key is valid and stored securely in environment variables or a configuration service.
+- **Rate Limits**: Check the custom AI provider’s documentation (e.g., [DeepSeek API docs](https://platform.deepseek.com)) for rate limit details.
+- **Network or Parsing Errors**: Handle HTTP or JSON errors gracefully, as shown in the `DeepSeekAIService` implementation.