Getting Started
Step-by-step instructions to start using Wisej.AI.
Last updated
Step-by-step instructions to start using Wisej.AI.
Last updated
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.
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).
Selecting the endpoint first is important because it determines which adapters are compatible. Not all adapters work with every endpoint. For instance, some endpoints might support vision, while others require TTS or voice recognition.
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.
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.
All the designer dialogs are under development and will change before the release.
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.
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:
Set the ApiKey property on the component
Save the api key in the ~/AI/ApiKeys.json file
Set the api key in an environment variable
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.
To ensure the security of your ApiKeys.json file when deploying with .NET Core (ASP.NET Core), you should prevent the server from allowing its download. A simple way to do this is by modifying the code in Startup.cs.
When deploying using .NET Framework, all json files are blocked in web.config.
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.
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.
Environment variables override the settings in the ApiKeys.json file.
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.
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.
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.
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 for details.
If you choose to store custom keys in ApiKeys.json or as environment variables, you can retrieve these keys using the class. Here’s how you can do it:
