diff --git a/blazor-toc.html b/blazor-toc.html index 15a31b60c1..0602ff390d 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -496,7 +496,7 @@
  • AI Integrations
  • Toolbar items
    • diff --git a/blazor/ai-assistview/ai-integrations/gemini-integration.md b/blazor/ai-assistview/ai-integrations/gemini-integration.md index 3b2189b3d1..e144fa6af0 100644 --- a/blazor/ai-assistview/ai-integrations/gemini-integration.md +++ b/blazor/ai-assistview/ai-integrations/gemini-integration.md @@ -7,55 +7,61 @@ control: AI AssistView documentation: ug --- -# Gemini AI With Blazor AI AssistView component +# Integrate Gemini AI With Blazor AI AssistView component -The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs/quickstart), enabling advanced conversational AI features in applications. +The AI AssistView component integrates with Google’s [Gemini](https://ai.google.dev/gemini-api/docs/quickstart) API to deliver intelligent conversational interfaces. It leverages advanced natural language understanding to interpret user input, maintain context throughout interactions, and provide accurate, relevant responses. By configuring secure authentication and data handling, developers can unlock powerful AI-driven communication features that elevate user engagement and streamline support experiences. ## Prerequisites -* Google account to generate an API key for accessing [Gemini AI](https://ai.google.dev/gemini-api/docs/quickstart) -* Syncfusion AI AssistView for Blazor package [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed in the project. -* [Markdig](https://www.nuget.org/packages/Markdig) package available in the project for Markdown-to-HTML conversion (required by the sample code). +Before starting, ensure you have the following: -## Getting Started with the AI AssistView Component +* **Google Account**: For generating a Gemini API key. -Before integrating Gemini AI, ensure that the Syncfusion AI AssistView renders correctly in the application and that prerequisites are met: +* **Syncfusion AI AssistView**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed. -[Blazor Getting Started Guide](../getting-started) +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the AI AssistView Component + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView component in the application and that prerequisites are met. ## Install Dependencies -Install the Syncfusion Blazor package in the application. +Install the required packages: + +1. Install the `Gemini AI` nuget package in the application. ```bash -Nuget\Install-Package Syncfusion.Blazor.InteractiveChat +Nuget\Install-Package Mscc.GenerativeAI ``` -Install the Gemini AI package in the application. +2. Install the `Markdig` nuget packages in the application. ```bash -Nuget\Install-Package Mscc.GenerativeAI +Nuget\Install-Package Markdig ``` ## Generate API Key -1. Go to [Google AI Studio](https://aistudio.google.com/app/api-keys) and sign in with a google account. Create a new account if needed. +1. **Access Google AI Studio**: Instructs users to sign into [Google AI Studio](https://aistudio.google.com/app/apikey) with a Google account or create a new account if needed. -2. Select `Get API key` from the left menu or the top-right of the dashboard. +2. **Navigate to API Key Creation**: Go to the `Get API Key` option in the left-hand menu or top-right corner of the dashboard. Click the `Create API Key` button. -3. Choose `Create API key`. Select an existing google cloud project or create a new one, then proceed. +3. **Project Selection**: Choose an existing Google Cloud project or create a new one. -4. After creating or selecting a project, an API key is generated and displayed. Copy the key and store it securely, as it may be shown only once. +4. **API Key Generation**: After project selection, the API key is generated. Users are instructed to copy and store the key securely, as it is shown only once. -> Security note: Do not commit API keys to version control. Use environment variables, a secret manager, or a server-side proxy in production. +> Security note: Advises against committing the API key to version control and recommends using environment variables or a secret manager in production. ## Gemini AI with AI AssistView -* Add the generated API key in the following line. +Modify the razor file to integrate the Gemini AI with the AI AssistView component. + +* update your Gemini API key securely in the configuration: ```bash @@ -72,6 +78,7 @@ const string GeminiApiKey = 'Place your API key here'; @using Markdig
    +// Initializes the AI Assist component @@ -98,13 +105,15 @@ const string GeminiApiKey = 'Place your API key here'; "What are the best tools for organizing my tasks?", "How can I maintain work-life balance effectively?" }; + // Initialize Gemini API private readonly string geminiApiKey = ""; + // Handle user prompt: call Gemini model private async Task OnPromptRequest(AssistViewPromptRequestedEventArgs args) { try { - var gemini = new GoogleAI(apiKey: geminiApiKey); - var model = gemini.GenerativeModel(model: "gemini-1.5-flash"); + var gemini = new GoogleAI(apiKey: geminiApiKey); // Replace with your Gemini API key + var model = gemini.GenerativeModel(model: "gemini-2.5-flash"); // Select the Gemini model (update model name as needed) var response = await model.GenerateContent(args.Prompt); var responseText = response.Text; var pipeline = new MarkdownPipelineBuilder() diff --git a/blazor/ai-assistview/ai-integrations/openai-integration.md b/blazor/ai-assistview/ai-integrations/openai-integration.md index 57b85c5649..661836d8a6 100644 --- a/blazor/ai-assistview/ai-integrations/openai-integration.md +++ b/blazor/ai-assistview/ai-integrations/openai-integration.md @@ -1,57 +1,65 @@ --- layout: post -title: Azure Open AI with Blazor AI AssistView Component | Syncfusion -description: Checkout and learn about Azure Open AI with Blazor AI AssistView component in Blazor WebAssembly Application. +title: Azure OpenAI with Blazor AI AssistView Component | Syncfusion +description: Checkout and learn about Azure OpenAI with Blazor AI AssistView component in Blazor WebAssembly Application. platform: Blazor control: AI AssistView documentation: ug --- -# Azure OpenAI With Blazor AI AssistView component +# Integrate Azure OpenAI with Blazor AI AssistView component -The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your applications. +The AI AssistView component integrates with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) to enable advanced conversational AI features in your applications. The component acts as a user interface, where user prompts are sent to the Azure OpenAI service via API calls, providing natural language understanding and context-aware responses. ## Prerequisites -- An Azure account with access to [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key. -- Syncfusion AI AssistView for Blazor [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed in the project +Before starting, ensure you have the following: -## Getting Started with the AI AssistView Component +* **An Azure account**: with access to [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key. -Before integrating Azure OpenAI, ensure the Syncfusion AI AssistView component renders correctly in the application: +* **Syncfusion AI AssistView**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed. -[Blazor Getting Started Guide](../getting-started) +* [Markdig](https://www.nuget.org/packages/Markdig) package available in the project for Markdown-to-HTML conversion (required by the sample code). + +## Set Up the AI AssistView Component + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView component in the application and that prerequisites are met. ## Install Dependencies -Install the Syncfusion Blazor package in the application. +Install the required packages: + +1. Install the `OpenAI` and `Azure` nuget packages in the application. ```bash -Nuget\Install-Package Syncfusion.Blazor.InteractiveChat +NuGet\Install-Package OpenAI +NuGet\Install-Package Azure.AI.OpenAI +NuGet\Install-Package Azure.Core ``` -Install the `Open AI` and `Markdig` nuget packages in the application. +2. Install the `Markdig` nuget packages in the application. ```bash -NuGet\Install-Package OpenAI -NuGet\Install-Package Azure.AI.OpenAI -NuGet\Install-Package Azure.Core Nuget\Install-Package Markdig ``` Note: The sample below uses HttpClient directly and does not require the Azure/OpenAI SDKs. -## Configure Azure Open AI +## Configure Azure OpenAI -1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure OpenAI resource. -2. Under Resource Management, select keys and endpoint to retrieve your API key and endpoint URL. +2. Under resource Management, select keys and endpoint to retrieve your API key and endpoint URL. -3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version matches your resource configuration. +3. Note the following values: + - API key + - Endpoint + - API version (must be supported by your resource) + - Deployment name (for example, gpt-4o-mini) 4. Store these values securely, as they will be used in your application. @@ -65,6 +73,8 @@ Note: The sample below uses HttpClient directly and does not require the Azure/O - Inject and use the service in your Razor component. +Modify the razor file to integrate the Azure OpenAI with the AI AssistView component. + {% tabs %} {% highlight c# tabtitle="razor" %} @@ -73,6 +83,7 @@ Note: The sample below uses HttpClient directly and does not require the Azure/O @using Syncfusion.Blazor.Navigations @inject AzureOpenAIService OpenAIService +// Initialize AI AssistView component
    @@ -101,7 +112,8 @@ Note: The sample below uses HttpClient directly and does not require the Azure/O "What are the best tools for organizing my tasks?", "How can I maintain work-life balance effectively?" }; - + + // Handle user prompt: call Azure OpenAI Chat Completions private async Task PromptRequest(AssistViewPromptRequestedEventArgs args) { // Reset the response for this prompt @@ -233,6 +245,7 @@ namespace AIAssistView_AzureAI.Components.Services {% endhighlight %} {% highlight c# tabtitle="Server(~/_Program.cs)" %} +// Initialize Azure OpenAI var endpoint = "https://azure-testresource.openai.azure.com"; var apiKey = ""; // Replace with your API key; var deploymentName = "gpt-4o-mini"; @@ -240,4 +253,4 @@ var deploymentName = "gpt-4o-mini"; {% endhighlight %} {% endtabs %} -![Blazor AI AssistView Azure Open AI Integration](../images/openai-integration.png) \ No newline at end of file +![Blazor AI AssistView Azure OpenAI Integration](../images/openai-integration.png)