From Text to Summary: LLaMA 3.1 + .NET in Action!

In this video, we build a complete Blazor WebAssembly app that connects to a local LLaMA 3.1 model via Microsoft.Extensions.AI.Ollama to summarize any given text — right in your browser!

In this video, we build a complete Blazor WebAssembly app that connects to a local LLaMA 3.1 model via Microsoft.Extensions.AI.Ollama to summarize any given text — right in your browser! No cloud dependencies, no third-party APIs — just pure .NET + local AI magic. 🧠✨

---

---

🔍 What You'll Learn:

• How to install and set up Ollama with LLaMA 3.1

• Why running LLMs locally is a game-changer for developers (privacy, performance, and control)

• Creating a beautiful Blazor UI with a textarea, summary output, and file saving support

• Using `Microsoft.Extensions.AI.Ollama` to connect your .NET app with local LLMs

• Saving summaries as .md files directly from your app

---

Code Implementation:

1. Create a new blazor-wasm project:

dotnet new blazorwasm -n "TextSumarizationDemo"

2. Add the following NuGet packages:

dotnet add package Microsoft.Extensions.AI.Ollama --prerelease

3. Open the Home.razor file and update with the following code:
   
   

   	@page "/"
   	@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
   	@using Microsoft.Extensions.AI
   	<div class="row">
   	<div class="col-4">
   	<div class="form-group">
   	<h3>Text to summarize:</h3>
   	<textarea class="form-control" @bind="InputText" rows="10" cols="30"></textarea>
   	</div>
   	<br />
   	<button class="btn btn-success" @onclick="SummarizeText" disabled="@IsLoading">Summarize</button>
   	@if (IsLoading)
   	{
   	<p class="my-2">
   	<em>Summarizing...</em>
   	</p>
   	}
   	</div>
   	@if(ShowResultsArrow)
   	{
   	<div class="col-2 d-flex justify-content-center align-items-center display-4">=></div>
   	}
   	@if (!string.IsNullOrWhiteSpace(Summary))
   	{
   	<div class="col-4">
   	<div class="alert alert-success">
   	<h3>Summary:</h3>
   	<textarea class="form-control" readonly rows="10" cols="30">@Summary</textarea>
   	<hr class="my-4" />
   	<input @bind="FileName" placeholder="Enter file name..." />
   	<button class="btn btn-primary" @onclick="SaveSummary">Save as Markdown</button>
   	</div>
   	</div>
   	}
   	</div>
   	@code {
   	string InputText = "";
   	string Summary = "";
   	string FileName = "summary";
   	bool IsLoading = false;
   	bool ShowResultsArrow = false;
   	async Task SummarizeText()
   	{
   	IsLoading = true;
   	var client = new OllamaChatClient(
   	new Uri("http://localhost:11434"),
   	modelId: "llama3.1"
   	);
   	var result = await client.GetResponseAsync($"Summarize this: {InputText}");
   	ShowResultsArrow = true;
   	await Task.Delay(1000);
   	Summary = result.Text;
   	IsLoading = false;
   	}
   	void SaveSummary()
   	{
   	//TODO: Save summary to a markdown file!!!
   	}
   	}

   view raw Home.razor hosted with ❤ by GitHub

4. Run the project and test it out!