Getting Started

Installing Wisej.AI

Wisej.AI is distributed through two distinct NuGet packages: Wisej-4-AI.4.0.x.x.nupkg and Wisej-3-AI.3.5.x.x.nupkg. These packages include the necessary designer assemblies for both the .NET Framework and .NET Core, eliminating the need for separate designer packages.

The NuGet packages will not be available on NuGet.org, instead you will need to deploy them locally on your file system. To utilize these local NuGet packages, you'll need to add the file path to Visual Studio's list of NuGet sources.

As an alternative you can simply add a NuGet.config file to your solution (at the same level as the .sln file) to include the configuration with the project. See nuget.config for details.

Adding AI Features to Your Application

After you've created a Wisej.NET application or opened an existing one, and added the Wisej-AI NuGet packages, you're ready to start using AI in your apps!

The fastest way is to drop a SmartHub component (you'll find it in the toolbox under the Wisej.AI tab) onto a Page (or any open designer).

Once you have the Hub (smartHub1) you have to select an endpoint (this is your AI provider, can be a public one or your own AI server, see AI Providers for more information).

Here are the initial steps:

Once everything is in place, the specific control or set of controls that have been connected to the SmartAdapter will have a new set of AI properties.

How to Create Endpoints

After adding a SmartHub component, you have two options to create an Endpoint. You can either click the quick actions arrow and select "Create Endpoint," or you can select the SmartHub component and click the "Create Endpoint" link located at the bottom of the property grid.

You will see the SmartEndpoint picker dialog:

Select the provider you want to use, verify that the default properties are set correctly, and click OK. See AI Providers for more information.

Wisej.AI will create the selected SmartEndpoint component and assign it to the Endpoint property of the SmartHub component. It is important to always check and make sure the SmartHub has an endpoint assigned.

How to Select Adapters

After the SmartHub is associated with an endpoint, it can filter which adapters can work with that specific AI provider. Click the quick actions arrow and select "Create Adapter", or click the link "Create Adapter" in the property grid.

The SmartAdapter Picker shows all the built-in adapters that can use the endpoint plus any custom adapter that you have created in your application. Please note the Documentation link provided in the description field of each adapter. This link directs you straight to the documentation for the adapter, ensuring you have easy access to the relevant materials.

Click OK to create the adapter component.

Once the SmartAdapter is created, you have to connect it to the components to augment. Some adapters may support augmenting multiple controls, while others may allow extending only one control at a time, in which case you can add the same adater multiple times, if needed.

The screenshot above displays the SmartDataEntry adapter linked to the splitContainer1.Panel1 control. Once connected, the adapter will enhance all child controls, at every level, by integrating the new AI properties required for it to perform its functions effectively.

Configuring Api Keys

Most Endpoints, Vector Databases, and Web Search Engines require an Api Key to get authenticated. You can set Api Key for each component that requires one in three ways:

1. Set the ApiKey property on the component

2. Save the api key in the ~/AI/ApiKeys.json file

3. Set the api key in an environment variable

ApiKeys.json File

To set up your Wisej.NET project properly, create a new folder named "AI" at the root level of your project. This folder will serve as an organized space for various AI features. Once the "AI" folder is in place, create a file named ApiKeys.json within it. This file will allow you to manage your api keys in one central location.

{
    // Endpoints
    "OpenAI": "<api key>",
    "AzureAI": "<api key>",

    // Vector DB Services
    "Pinecone": "<api key",
    
    // Web Search Eginens
    "BingWeb" : "<api key>"
}

// app.UseFileServer();
app.UseWhen(
    cx => !cx.Request.Path.StartsWithSegments("/AI"), 
     app => app.UseFileServer());

You can store various types of keys in the ApiKeys.json file. Wisej.AI utilizes these keys for its Endpoints, Vector Databases, and Web Search Engines by identifying the service by its name without suffixes. For instance, if the service is named "BingWebService", Wisej.AI will use "BingWeb" to locate the key within the ApiKeys.json file.

Api Keys in Environment Variables

You can manage API keys securely by storing them in environment variables through your cloud provider. For example, Azure App Services lets you manage environment variables for each service efficiently.

The name of the environment variable is:

WISEJ_AI_APIKEY_ + Endpoint Name without the "Endpoint" suffix.

For the OpenAIEndpoint the api key environment variable is WISEJ_AI_APIKEY_OPENAI.

Custom Api Keys

If you choose to store custom keys in ApiKeys.json or as environment variables, you can retrieve these keys using the Wisej.AI.Helper.ApiKeys class. Here’s how you can do it:

var apikey = ApiKeys.GetApiKey("MyCoolService", "", "KEY_");

In the example above, the method first attempts to read the environment variable named "KEY_MYCOOLSERVICE" with the second parameter (the name postfix) left empty. If this environment variable does not exist, it then checks for the key "MyCoolService" in the ApiKeys.json file.

If the final parameter, the envPrefix, is not specified, it defaults to "WISEJ_AI_APIKEY_" as the prefix for environment variables.

Your First AI Application

Start by creating a Wisej.NET new application with either a main page or a main form. And add a few fields and a button, like this:

Use the NuGet Package Manager to add Wisej-AI and Wisej-AI-Design to the project.

Add a new folder "AI" to the root of the project.

From the Toolbox, under "Wisej.AI Test" select SmartHub and drop it on the page being designed.

Now click the "Create Endpoint" link in the property grid or click the quick action arrow and select "Create Endpoint". See How to Create Endpoints above.

Pick your AI provider. In this case we use OpenAI. Make sure you have an api key from Open AI. Put the api key in the ApiKey property (see also Configuring Api Keys).

Now create the SmartDataEntryAdapter (see How to Select Adapters).

Leave all the default properties unchanged. Select the Page and you should see this in the properties panel.

Select the smartDataEntryAdapter1 component to assign it to the Adapter property.

Once the adapter is connected to the Page, all its child controls will gain new AI properties. In this case you will find the FieldName, FieldPrompt and FieldRectangleproperties under the group "AI Features"

For each field from top down, set the FieldName property to "First Name", "Last Name", "Email Address", "Summary". Then double click on the button and add this code to the button1_Click event handler. Notice that the handler is async.

private async void button1_Click(object sender, EventArgs e)
{
    await this.smartDataEntryAdapter1.FromClipboardAsync();
}

Private Async Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    Await Me.smartDataEntryAdapter1.FromClipboardAsync()
End Sub

Run the app. Then go to an email you received from someone, select the text including the signature and copy to the clipboard. Go back to the app, make sure to click somewhere on the page first or the browser will block clipboard access, and click the Smart Paste button.

This is already something! Now add a checkbox, set the text to "SPAM" but now set the FieldPrompt to "Detect if the text is likely to be a SPAM email."

Run it again and try now.

You can also try by select and copying an image to the clipboard. The SmartDataEntryAdapter supports just about anything.