Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control i

## Prerequisites

* Google account to generate API key on accessing `Gemini AI`.
* Google account to generate API key on accessing [Gemini](https://ai.google.dev/gemini-api/docs).
* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application

## Install Packages
Expand All @@ -43,7 +43,7 @@ NuGet\Install-Package Mscc.GenerativeAI

## Generate API Key

1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account.
1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your google account. If you don’t have one, create a new account.

2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard.

Expand Down Expand Up @@ -74,12 +74,12 @@ string apiKey = 'Place your API key here';
{% endhighlight %}
{% endtabs %}

![Gemini AI](../../images/gemini-ai.png)
![Gemini AI](../images/gemini-ai.png)

## Run and Test

Run the application in the browser using the following command.

Build and run the app (Ctrl + F5).

Open `https://localhost:44321` to interact with your Gemini AI for dynamic response.
Open the hosted link to interact with the Gemini AI for dynamic response
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ documentation: ug

# Integration of Azure Open AI With AI AssistView control

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 Angular applications.
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 MVC applications.

## Getting Started With the AI AssistView control

Expand All @@ -20,7 +20,7 @@ Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView contr

## Prerequisites

* An Azure account with access to `Azure Open AI` services and a generated API key.
* 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.
* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application

## Install Packages
Expand Down Expand Up @@ -49,7 +49,7 @@ NuGet\Install-Package Azure.Core

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 (e.g., 2024-07-01-preview) matches your resource configuration.
3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version matches your resource configuration.

4. Store these values securely, as they will be used in your application.

Expand Down Expand Up @@ -78,12 +78,12 @@ string deploymentName = "Your_Deployment_Name";
{% endhighlight %}
{% endtabs %}

![Azure Open AI](../../images/open-ai.png)
![Azure Open AI](../images/open-ai.png)

## Run and Test

Run the application in the browser using the following command.

Build and run the app (Ctrl + F5).

Open `https://localhost:44321` to interact with your Azure Open AI for dynamic response.
Open the Hosted link to interact with your Azure Open AI for dynamic response.
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control i

## Prerequisites

* Google account to generate API key on accessing `Gemini AI`.
* Google account to generate API key on accessing [Gemini](https://ai.google.dev/gemini-api/docs).
* [System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create Core application

## Install Packages
Expand All @@ -43,7 +43,7 @@ NuGet\Install-Package Mscc.GenerativeAI

## Generate API Key

1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account.
1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your google account. If you don’t have one, create a new account.

2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard.

Expand Down Expand Up @@ -74,12 +74,12 @@ string apiKey = 'Place your API key here';
{% endhighlight %}
{% endtabs %}

![Gemini AI](../../images/gemini-ai.png)
![Gemini AI](../images/gemini-ai.png)

## Run and Test

Run the application in the browser using the following command.

Build and run the app (Ctrl + F5).

Open `https://localhost:44321` to interact with your Gemini AI for dynamic response.
Open the hosted link to interact with the Gemini AI for dynamic response
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ documentation: ug

# Integration of Azure Open AI With AI AssistView control

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 Angular applications.
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 Core applications.

## Getting Started With the AI AssistView control

Expand All @@ -20,7 +20,7 @@ Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView contr

## Prerequisites

* An Azure account with access to `Azure Open AI` services and a generated API key.
* 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.
* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create Core application

## Install Packages
Expand Down Expand Up @@ -49,7 +49,7 @@ NuGet\Install-Package Azure.Core

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 (e.g., 2024-07-01-preview) matches your resource configuration.
3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version matches your resource configuration.

4. Store these values securely, as they will be used in your application.

Expand Down Expand Up @@ -78,12 +78,12 @@ string deploymentName = "Your_Deployment_Name";
{% endhighlight %}
{% endtabs %}

![Azure Open AI](../../images/open-ai.png)
![Azure Open AI](../images/open-ai.png)

## Run and Test

Run the application in the browser using the following command.

Build and run the app (Ctrl + F5).

Open `https://localhost:44321` to interact with your Azure Open AI for dynamic response.
Open the hosted link to interact with your Azure Open AI for dynamic response.
Binary file modified ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ej2-asp-core-mvc/ai-assistview/images/open-ai.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ documentation: ug

# Microsoft Bot Framework With ASP.NET MVC Chat UI component

The Syncfusion ASP.NET MVC Chat UI supports integration with a Microsoft Bot Framework bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring the bot in Azure, and integrating the Syncfusion Chat UI in an ASP.NET MVC application.
The Syncfusion ASP.NET MVC Chat UI supports integration with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring the bot in Azure, and integrating the Syncfusion Chat UI in an ASP.NET MVC application.

## Getting Started With the Chat UI Component

Expand All @@ -20,7 +20,7 @@ Before integrating Microsoft Bot Framework, ensure that the Syncfusion Chat UI c

## Prerequisites

* `Microsoft Azure Account`: Required to create and host the bot.
* [Microsoft Azure Account](https://portal.azure.com/#home): Required to create and host the bot.
* `Visual Studio`: With ASP.NET MVC development tools.
* `Syncfusion EJ2 ASP.NET MVC`: Install Syncfusion.EJ2.MVC5 in your project.
* `Deployed Azure Bot`: A bot should be created and published using the Bot Framework, accessible via an Azure App Service. Refer to [Microsoft's Bot Creation Guide](https://learn.microsoft.com/en-us/azure/bot-service/).
Expand Down Expand Up @@ -48,17 +48,17 @@ Install-Package Syncfusion.EJ2.MVC5

1. In the [Azure Portal](https://portal.azure.com/#home), navigate to your bot resource.

2. Enable the Direct Line channel:
2. Enable the direct line channel:
* Go to `Channels` > `Direct Line` > `Default-Site`.
* Copy one of the displayed secret keys.

3. Verify the Messaging endpoint in the Configuration section (e.g., https://your-bot-service.azurewebsites.net/api/messages).
3. Verify the messaging endpoint in the configuration section (e.g., https://your-bot-service.azurewebsites.net/api/messages).

> `Security Note`: Never expose the Direct Line secret key in frontend code. Use a backend token server to handle it securely.

## Set Up Token Server

Create a Web API controller in your ASP.NET MVC project to handle Direct Line token generation. Add `Controllers/TokenController.cs`:
Create a Web API controller in your ASP.NET MVC project to handle direct line token generation. Add `Controllers/TokenController.cs`:

{% tabs %}
{% highlight cs tabtitle="TokenController.cs" %}
Expand Down Expand Up @@ -121,9 +121,9 @@ Add the Direct Line secret to `Web.config`:

## Integrate ChatUI in ASP.NET MVC

Use the Chat UI `messageSend` event to handle message exchanges. This event is triggered before a message is sent, allowing you to forward it to the bot via the Direct Line API. Use the `addMessage` method to programmatically add the bot's reply to the Chat UI.
Use the Chat UI `messageSend` event to handle message exchanges. This event is triggered before a message is sent, allowing you to forward it to the bot via the direct line API. Use the `addMessage` method to programmatically add the bot's reply to the Chat UI.

Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the Direct Line API:
Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the direct line API:

{% tabs %}
{% highlight Html tabtitle="Index.cshtml" %}
Expand Down Expand Up @@ -232,7 +232,7 @@ To enable CORS for API requests, add to `Web.config` under `<system.webServer>`:
### Start the Application:

Run the project in Visual Studio or use IIS Express.
Open your app in the browser (e.g., `http://localhost:port`) to interact with your Microsoft Bot Framework chatbot.
Open your app in the browser Hosted link to interact with your Microsoft Bot Framework chatbot.

## Troubleshooting

Expand Down
Loading