AI is all the rage in 2024 and its something that all companies seem to be adopting, however, for developers AI poses a problem. Developers already need to learn too much nowadays just to get by in their jobs, and AI simply adds another skill onto our ever increasing to learn list!

Fully understanding the ins and outs of AI is hard, however, if you just want to add some AI into your website Microsoft has released some new components that will make your life much easier!

Smart components will add AI to your website, making it easier for customers to fill in forms quicker, generate ideas quicker, as well as making you look like an AI superstar! If you want to learn more about smart components, as well as how to integrate them into your site within 20 minutes, read on 🔥🔥🔥

What Are Microsoft Smart Components?

As the name suggests, smart components are pre-built components created by Microsoft that have AI embed within them. Smart components are free to use and currently there are three that you can make use of:

  • Smart Paste: Add an AI powered paste to your forms, this is handy to help people copy their contact details and the different data automatically paste into the correct form fields
  • Smart TextArea: Add AI powered autocomplete to your text areas
  • Smart ComboBox: Add smart autocomplete to a combo-box

If these components found interesting and you want to get your hands on the official .NET Smart Components sample project, you can find it here.

Smart components can be installed via Nuget and work with Blazor and Razor. The only big installation caveat that you will need to consider before implementing this feature is the AI hosting.

In order for the AI within the components to work, the components will need to make a call back to a server in order to get the recommendation data. This data will need to be stored within a large language model (LLM). For the LLM you can use the OpenAI API, an Azure hosted version of OpenAI, or the more interesting option in my opinion... the self-hosted option!

The reason why I think self-hosted is interesting is because its free. This means that if you want to experiment with AI for your own learnings, I doubt you will want to pay money from your own pocket. By self-hosting, you can run your own free server and learn to your hearts content! Carry on learning, to learn how to do exactly that!

How To Install .NET Smart Components

In order to get Smart Components to work locally, you will need to install two things within your project, the components themselves and the AI server. First, do not panic if the thought of installing an AI server sounds daunting right now, within this tutorial I will also show you how to set-up a free local AI Large Language Model server (LLM) on Windows called ollama.

Your first task is to install Smart Components via NuGet. If you try to search for them within NuGet explorer, make sure you enable the prerelesead checkbox. After doing that run this command:

After installing these smart components, you will need to register them within Program.cs before you can get going. To do this, within your Program.cs, make a call to this helper on the Services object:

Next, within _ViewImports.cshtml (within the View folder), add this import:

These steps will install the components, however, the AI won't work until you configure your large language model.

For this article, I will assume that you want to use the AI locally on Windows. To do that, you can use the Windows version of a new tool/service called Ollama. Released for Windows in Feb 2024, Ollama can be thought of as an AI server rather than the LLM. After installing, Ollama you can use the terminal to then install a LLM. Ollama support several LLMs for you to choose from including:

  • gemma (Google Deepmind)
  • llama2
  • mistral

I won't cover all the options as there are about 30-40, however, you can review the full list here. Just to pre warn you, the model I installed llama, required about 4GB of my hard-drive space and took about 30 mins to download and install, so I would be cautious about how many models you install before going crazy!

To install Ollama, run this Nuget command within the terminal:

After you install server stuff, you will need to install a language model. To learn what models you can use, head over to this page. The model I used at the start was llama2 created by Meta. You can install this model with this command:

One thing to mention around AI model selection is accuracy. As this is all new the self-hosting models are not amazing yet. Here is the Smart Components team summary of the best options:

  • GPT 3.5: Produces good quality results and is fast.

  • Mistral: Good output for Smart TextArea, inconsistent for Smart Paste. Output speed is OK but slower than a hosted service.

  • Llama2: Output quality is insufficient with Smart Paste and Smart TextArea

  • Mixtral: Good output for Smart TextArea but not for Smart Paste. Runs slowly

For development, as long as the API returns data that is good enough for me, however, this is somethign to be mindful of!

Like everything .NET, after installing this package, you will need to register the related services within Program.cs using this line:

The final step is to add some config within your app.config, that tells the Smart components where the LLM exists. That config for Ollama, looks like this:

The snippet above is set to use llama2, make sure you change the DeploymentName value appropriately if you use a different model. If you do not want to use Ollama and instead you want to use either the OpenAI API or Azure OpenAI survive, this config will need to be modified slightly. Selfhosted should be false, and you need to add API URLs and access tokens.

If you want to learn the exact config to add for those services, head over to this page. This is the set-up done, lets start integrating these components into our website!

How To Implement Smart Paste

Smart paste is the dimpliest component to implement. All you need to do is add this HTML tag within a form tag and you will get intelligent copy and paste:

How To Implement Smart TextArea

This component will add auto-complete to a TextArea. Adding this component to a page can be done by adding this HTML:

There are two ways you can further improve and customize the Smart Textbox suggestions. First, you can add the mandatory user-role parameter. User role is a custom string you need to supply that describes who is typing and for what reason. For example you could add something like "Customer looking for product data", or, "Customer asking support for help", here.

The second parameter is phrases. Phrases allow you to further contextualize results. To set some phrases, create an array of different phrases you want the AI to use as responses like "Have you tried turning it off and on". Within a phrase you can also add use the NEED_INFO special token to prompt the user for more data like this "I need help with NEED_INFO". With these two props added, when you type you should now get better responses!

How To Implement Smart ComboBox

Configuring the Smart Combobox involves slightly different steps compared to the previous two examples. The first thing to note is that Smart ComboBox does not need the AI server to run, it works out-the-box. Smart Combobox works by calling an API for data and then giving intelligent filtering. For example of what this type of API might lookk like, you could create something like this within Program.cs:

This API will return dumb responses as the AI does not understand the mapping correctly just yet. In order to create better intelligence, you need to wrap your array within something called an embed. Embeddings allow for better semantic matching because they convert the natural-language strings into numerical vectors. The more conceptually related two strings are, the closer their vectors. Creating an embedding is done like this (add this code to Program.cs):

With your API set-up correctly, you can now add the HTML to render the combo box to the page:

Your Combobox should now work!

Happy Coding 🤘s