Want to get started with AI development, but not sure where to start? I’ve got a treat for you – we have a new AI Chat Web App template now in preview. This template is part of our ongoing effort to make AI development with .NET easier to discover and use, with scaffolding and guidance within Visual Studio, Visual Studio Code, and the .NET CLI.

Please note that this template is in preview, and future versions may change based on your feedback and the rapid advancements in AI.

Install the template now Copy link

To get started with the first Preview of the template, you install the Microsoft.Extensions.AI.Templates from your Terminal. Just run:

dotnet new install Microsoft.Extensions.AI.Templates

Once installed, the template is available in Visual Studio, Visual Studio Code (with the C# Dev Kit), or you can just run dotnet new aichatweb to create it in your working directory.

Getting Started with the .NET AI Chat Template Copy link

The .NET AI Chat template is designed to help you quickly build an AI-powered chat application to start chatting with custom data. This initial release focuses on a Blazor-based web app, built using the Microsoft.Extensions.AI and Microsoft.Extensions.VectorData abstractions. The template uses the Retrieval Augmented Generation (RAG) pattern commonly used for chat applications.

Key Features and Configuration Options Copy link

• Chat with Custom Data: The template allows you to create a chat-based UI that can interact with sample PDFs or your own data using the RAG pattern.
• Local and Azure Integration: The template supports both a local vector store for prototyping and Azure AI Search for more advanced configurations.
• Customizable Code: The generated code includes UI components for chat interactions, citation tracking, and follow-up suggestions. You can customize or remove these components as needed.
• Data Ingestion: The template includes code for data ingestion, caching, and processing, allowing you to handle various data sources and formats.

Using the template in Visual Studio Copy link

Once the template is installed from the command line, you can find the template in Visual Studio by using the File > New Project… menu. You can search for AI Chat, or choose the AI project type to find the template:

After choosing your project name and location, you can select an AI model provider and vector store to get started. By default we’re using GitHub Models with a local vector store, which is the easiest way to get started with minimal setup.

You can learn about each of the options from the .NET AI Templates documentation.

Using Visual Studio Code and the C# Dev Kit Copy link

To use the template in Visual Studio Code, first install the C# Dev Kit extension. Then, use the .NET: New Project… command:

Creating a new project in Visual Studio Code using the "AI Chat Web App" template via the new AI Template feature., image

By default this will create a new project using the GitHub Models model provider and a local vector store. You can learn about additional options from the .NET AI Templates documentation.

Chatting with your own data Copy link

This template includes two sample PDF files and an example of data ingestion code to process the PDFs. This data ingestion code is flexible so that you swap out the sample PDFs. To chat with your own data, do the following:

1. If you have your project running, stop it.
2. Remove the sample PDF files from the /wwwroot/Data folder.
3. Add your own PDF files to the /wwwroot/Data folder.
4. Run the application again.

On startup of the app, the data ingestion code (located in /Services/Ingestion/DataIngestor.cs) will compare the contents of the Data folder; it will remove old files from the configured vector store and add new ones. Note: depending on how many files you have, and how big they are, you may run into quota and rate limits with your configured AI model provider. When you hit a limit, you may see an error message or experience long delays in the startup of the application. See the AI Template Documentation for help troubleshooting.

Extending the chatbot’s behavior Copy link

The code is built using Microsoft.Extensions.AI, which makes it very straightforward to plug in custom behaviors. You can give the chatbot access to call any C# function. This can extend its capabilities to include retrieving additional data or taking actions.

As a very simple example, you can try giving it access to “weather” data. In Pages/Chat/Chat.razor, define a C# function in the @code block:

private async Task<string> GetWeather([Description("The city, correctly capitalized")] string city)
{
    string[] weatherValues = ["Sunny", "Cloudy", "Rainy", "Snowy", "Balmy", "Bracing"];
    return city == "London" ? "Drizzle" : weatherValues[Random.Shared.Next(weatherValues.Length)];
}

Then, inside the OnInitialized method, update chatOptions.Tools to include your method:

chatOptions.Tools =
[
    AIFunctionFactory.Create(SearchAsync),
    AIFunctionFactory.Create(GetWeather)
];

Now try setting a breakpoint inside GetWeather and ask the chatbot about the weather. You’ll find it will call your method and will use the result in its answer.

You can use this to retrieve any information from external systems, including via asynchronous calls. Bear in mind that the parameters passed in from the LLM should be treated as untrusted input.

See it in action Copy link

Check out the latest episode of the .NET AI Community Standup as Alex, Bruno, and Jordan overview the new templates!

What’s Coming Next – Share Your Thoughts Copy link

In future releases, we plan to expand the template offerings to include an AI Console template, Minimal API template, support for .NET Aspire, and including the templates by default in the .NET SDK. We’ll also be exploring support for Azure AI Foundry and working with the Semantic Kernel team to expand template options for Semantic Kernel users.

We want to learn from you and use your feedback to help us shape these templates. Please share your thoughts about the template – both what works well for you, and what you’d like to see change!

Thank you and happy coding!