How to Use New AI-Powered .NET Smart Components with ComponentOne

What You Will Need

• ComponentOne Blazor Edition
• OpenAI account
• Visual Studio 2022

Controls Referenced

• ComponentOne Blazor Input

Tutorial Concept

How to get started using the new AI-powered .NET Smart Components along with ComponentOne Blazor input controls.

If you haven’t heard, Microsoft has begun building a UI component library that uses AI to bring new and exciting runtime features to end users. These new components are called .NET Smart Components and are currently available as an experimental preview for ASP.NET MVC, Razor, and Blazor apps.

In this blog, we will:

• Introduce the new .NET smart components
• Get started with .NET smart components
• Integrate smart components with ComponentOne controls

What Are .NET Smart Components?

Integrating AI capabilities and features into your application can be a challenge right now for the average .NET developer. AI is evolving rapidly, and the concepts can be challenging to grasp. The new .NET Smart Components aim to give .NET developers easier access to integrate useful AI-powered features into their business applications.

Currently, there are three experimental components available for MVC, Razor, and Blazor pages:

• Smart Paste - Uses AI to help sift clipboard content into the most appropriate form fields on the page.
• Smart TextArea - Uses AI to provide intelligent autosuggest as the user types.
• Smart ComboBox - Uses AI to filter items in the dropdown beyond standard “Begins With” or “Contains” logic operators. For example, if you type “Pets,” the dropdown could show “Cats, Dogs, Horses” if those were possible values for your ComboBox.

You can check out the samples on Microsoft’s dotnet-smartcomponents GitHub page. It’s easy to get started with the samples.

How to Get Started with .NET Smart Components

1. Download the smart components samples from GitHub.
2. Create a free OpenAI account.
3. Generate an API Key (secret key) on this page: https://platform.openai.com/settings/profile?tab=api-keys
4. Paste that key into the RepoSharedConfig.json file, as shown below.
5. Set the DeploymentName to “gpt-3.5-turbo“ in the same file.

    "SmartComponents": {
      "ApiKey": "<API key>",
      "DeploymentName": "gpt-3.5-turbo"
    }

Then, you can build and run all the features for either the Blazor or MVC projects. These steps are the quick how-to, but for more details, you can read the documentation.

How to Integrate Smart Components with ComponentOne Controls

The Smart Paste component is designed to work with other UI elements on the page. So, it’s important that it should work with all different types of input controls, including third-party ones, like ComponentOne.

Fortunately, there’s no extra work needed to integrate this with input controls built upon the native HTML input elements. You can follow some of our previous tutorials on how to get started with ComponentOne controls for Blazor or MVC.

• How to Add Blazor UI Controls to Your Web Application
• How to Add ASP.NET MVC UI Controls to Your Web Applications

The feature works nicely when swapping out the form controls with ComponentOne - for example, you could use our specialized numeric, masked, and date inputs.

Conclusion

The .NET Smart Components are currently an experimental preview. It will be interesting to see what additional components Microsoft and other developers may create, especially if the smart components are provided as open source.

You can learn more about these components live at the next .NET Conf: Focus on AI - August 20th.

So far, we’ve seen two types of smart components - ones that can be integrated with standard and third-party UI controls, like Smart Paste, and others with built-in AI features, like the ComboBox and text area. We’re also looking into providing similar levels of AI-powered features to our components - so stay tuned!