Building AI Powered Applications.

var builder = DistributedApplication.CreateBuilder(args);  
  
var cache = builder.AddRedis("cache");  
  
var apiService = builder.AddProject<Projects.AspireSample_ApiService>("apiservice");  
  
var ollama = builder.AddOllama(name: "ollama", port: 11434)  
    .WithOpenWebUI()  
    .WithDataVolume()  
    .PublishAsContainer()  
    .AddModel("llama3");  
  
builder.AddProject<Projects.AspireSample_Web>("webfrontend")  
    .WithExternalHttpEndpoints()  
    .WithReference(cache)  
    .WaitFor(cache)  
    .WithReference(apiService)  
    .WaitFor(apiService)  
    .WithReference(ollama)  
    .WaitFor(ollama);      
  
builder.Build().Run();

using System.Text;  
using System.Text.Json;  
  
public class AIApiService  
{  
    private readonly HttpClient _httpClient;  
  
    public AIApiService()  
    {  
        _httpClient = new HttpClient();  
    }  
  
    public async Task<string> PullModelAsync(string ollamaUrl, string modelName)  
    {  
        var requestUri = $"{ollamaUrl}/api/pull";  
        var jsonContent = $"";  
        var content = new StringContent(jsonContent, Encoding.UTF8, "application/json");  
  
        var response = await _httpClient.PostAsync(requestUri, content);  
        response.EnsureSuccessStatusCode();  
  
        var responseString = await response.Content.ReadAsStringAsync();  
        // split the responseString into an array of string with a new element for each appearance of the string '{"status":'  
        var responseArray = responseString.Split("{\"status\":");  
  
        // remove the char '}' from the each element of the array  
        var responseHtml = "";  
        for (int i = 0; i < responseArray.Length; i++)  
        {  
            responseArray[i] = responseArray[i].Replace("}", "");  
            responseHtml += $"<p>{responseArray[i]}</p>";  
        }  
  
  
        return responseHtml;  
    }  
}

using AspireSample.Web;  
using AspireSample.Web.Components;  
using Microsoft.Extensions.AI;  
  
var builder = WebApplication.CreateBuilder(args);  
  
builder.AddServiceDefaults();  
builder.AddRedisOutputCache("cache");  
  
builder.Services.AddRazorComponents()  
    .AddInteractiveServerComponents();  
  
builder.Services.AddHttpClient<WeatherApiClient>(client =>  
    {  
        client.BaseAddress = new("https+http://apiservice");  
    });  
  
builder.Services.AddLogging();  
builder.Logging.ClearProviders();  
builder.Logging.AddConsole();  
builder.Logging.AddDebug();  
builder.Logging.AddEventSourceLogger();  
builder.Logging.AddFilter("Microsoft", LogLevel.Information);  
builder.Logging.AddFilter("System", LogLevel.Information);  
builder.Logging.AddFilter("YourProject's Name", LogLevel.Debug);  
  
builder.WebHost.UseStaticWebAssets();  
  
builder.Services.AddSingleton<ILogger>(static serviceProvider =>  
{  
    var lf = serviceProvider.GetRequiredService<ILoggerFactory>();  
    return lf.CreateLogger(typeof(Program));  
});  
  
builder.Services.AddSingleton<IChatClient>(static serviceProvider =>  
{  
    var logger = serviceProvider.GetRequiredService<ILogger>();  
    var config = serviceProvider.GetRequiredService<IConfiguration>();  
    var AICnnString = config.GetConnectionString("ollama");  
    var LLM = config.GetConnectionString("llama3");  
    logger.LogInformation("AI connection string: {0}", AICnnString);  
    logger.LogInformation("LLM: {0}", LLM);  
  
    var chatClient = new OllamaChatClient(new Uri(AICnnString), LLM);  
  
    return chatClient;  
});  
  
builder.Services.AddSingleton<List<ChatMessage>>(static serviceProvider =>  
{  
    return new List<ChatMessage>()  
    { new ChatMessage(ChatRole.System, "You are a useful assistant that replies using short and precise sentences.")};  
});  
  
var app = builder.Build();  
  
if (!app.Environment.IsDevelopment())  
{  
    app.UseExceptionHandler("/Error", createScopeForErrors: true);  
    app.UseHsts();  
}  
  
app.UseHttpsRedirection();  
  
app.UseStaticFiles();  
app.UseAntiforgery();  
  
app.UseOutputCache();  
  
app.MapRazorComponents<App>()  
    .AddInteractiveServerRenderMode();  
  
app.MapDefaultEndpoints();  
  
app.Run();

using System.Text;  
using System.Text.Encodings.Web;  
using System.Text.RegularExpressions;  
using Microsoft.AspNetCore.Components;  
  
namespace AspireApp.WebApp.Chatbot;  
  
public static partial class MessageProcessor  
{  
    public static MarkupString AllowImages(string message)  
    {  
        // Processing markdown and deal with HTML encoding
        var result = new StringBuilder();  
        var prevEnd = 0;  
        message = message.Replace("&lt;", "<").Replace("&gt;", ">");  
  
        foreach (Match match in FindMarkdownImages().Matches(message))  
        {  
            var contentToHere = message.Substring(prevEnd, match.Index - prevEnd);  
            result.Append(HtmlEncoder.Default.Encode(contentToHere));  
            result.Append($"<img title=\"{(HtmlEncoder.Default.Encode(match.Groups[1].Value))}\" src=\"{(HtmlEncoder.Default.Encode(match.Groups[2].Value))}\" />");  
  
            prevEnd = match.Index + match.Length;  
        }  
        result.Append(HtmlEncoder.Default.Encode(message.Substring(prevEnd)));  
  
        return new MarkupString(result.ToString());  
    }  
  
    public static MarkupString ProcessMessageToHTML(string message)  
    {  
        return new MarkupString(message);  
    }  
  
    [GeneratedRegex(@"\!?\[([^\]]+)\]\s*\(([^\)]+)\)")]  
    private static partial Regex FindMarkdownImages();  
}

using Microsoft.Extensions.AI;  
using System.Security.Claims;  
  
namespace AspireApp.WebApp.Chatbot;  
  
public class ChatState  
{  
    private readonly ILogger _logger;  
    private readonly IChatClient _chatClient;  
    private List<ChatMessage> _chatMessages;  
  
    public List<ChatMessage> ChatMessages { get => _chatMessages; set => _chatMessages = value; }  
  
    public ChatState(ClaimsPrincipal user, IChatClient chatClient, List<ChatMessage> chatMessages, ILogger logger)  
    {  
        _logger = logger;  
        _chatClient = chatClient;  
        ChatMessages = chatMessages;  
    }  
  
    public async Task AddUserMessageAsync(string userText, Action onMessageAdded)  
    {  
        ChatMessages.Add(new ChatMessage(ChatRole.User, userText));  
        onMessageAdded();  
  
        try  
        {  
            _logger.LogInformation("Sending message to chat client.");  
            _logger.LogInformation($"user Text: {userText}");  
  
            var result = await _chatClient.CompleteAsync(ChatMessages);  
            ChatMessages.Add(new ChatMessage(ChatRole.Assistant, result.Message.Text));  
              
            _logger.LogInformation($"Assistant Response: {result.Message.Text}");  
        }  
        catch (Exception e)  
        {  
            if (_logger.IsEnabled(LogLevel.Error))  
            {  
                _logger.LogError(e, "Error getting chat completions.");  
            }  
  
            ChatMessages.Add(new ChatMessage(ChatRole.Assistant, $"We encountered an unexpected error.\n\n<p style=\"color: red\">{e}</p>"));  
        }  
        onMessageAdded();  
    }  
}

@inject NavigationManager Nav  
  
<a class="show-chatbot" href="@Nav.GetUriWithQueryParameter("chat", true)" title="Show chatbot"></a>  
  
@if (ShowChat)  
{  
    <Chatbot />  
}  
  
@code {  
    [SupplyParameterFromQuery(Name = "chat")]  
    public bool ShowChat { get; set; }  
}

@rendermode @(new InteractiveServerRenderMode(prerender: false))  
@using Microsoft.AspNetCore.Components.Authorization  
@using AspireApp.WebApp.Chatbot  
@using Microsoft.Extensions.AI  
@inject IJSRuntime JS  
@inject NavigationManager Nav  
  
@inject AuthenticationStateProvider AuthenticationStateProvider  
@inject ILogger Logger  
@inject IConfiguration Configuration  
@inject IServiceProvider ServiceProvider  
  
<div class="floating-pane">  
    <a href="@Nav.GetUriWithQueryParameter("chat", (string?)null)" class="hide-chatbot" title="Close Chat"><span>✖</span></a>  
  
    <div class="chatbot-chat" @ref="chat">  
        @if (chatState is not null)  
        {  
            foreach (var message in chatState.ChatMessages.Where(m => m.Role == ChatRole.Assistant || m.Role == ChatRole.User))  
            {  
                if (!string.IsNullOrEmpty(message.Contents[0].ToString()))  
                {  
                    <p @key="@message" class="message message-@message.Role">@MessageProcessor.AllowImages(message.Contents[0].ToString()!)</p>                      
}  
            }  
        }  
        else if (missingConfiguration)  
        {  
            <p class="message message-assistant"><strong>The chatbot is missing required configuration.</strong> Please review your app settings.</p>  
        }  
  
        @if (thinking)  
        {  
            <p class="thinking">[@Configuration["Aspire:OllamaSharp:ollama:Models:0"]] is Thinking...</p>  
        }  
  
    </div>  
  
    <form class="chatbot-input" @onsubmit="SendMessageAsync">  
        <textarea placeholder="Start chatting..." @ref="@textbox" @bind="messageToSend"></textarea>  
        <button type="submit" title="Send" disabled="@(chatState is null)">Send</button>  
    </form>  
</div>  
  
@code {  
    bool missingConfiguration;  
    ChatState? chatState;  
    ElementReference textbox;  
    ElementReference chat;  
    string? messageToSend;  
    bool thinking;  
    IJSObjectReference? jsModule;  
  
    protected override async Task OnInitializedAsync()  
    {  
        IChatClient chatClient = ServiceProvider.GetService<IChatClient>();  
        List<ChatMessage> chatMessages = ServiceProvider.GetService<List<ChatMessage>>();  
        if (chatClient is not null)  
        {  
            AuthenticationState auth = await AuthenticationStateProvider.GetAuthenticationStateAsync();  
            chatState = new ChatState(auth.User, chatClient, chatMessages, Logger);  
        }  
        else  
        {  
            missingConfiguration = true;  
        }  
    }  
  
    private async Task SendMessageAsync()  
    {  
        var messageCopy = messageToSend?.Trim();  
        messageToSend = null;  
  
        if (chatState is not null && !string.IsNullOrEmpty(messageCopy))  
        {  
            thinking = true;  
            await chatState.AddUserMessageAsync(messageCopy, onMessageAdded: StateHasChanged);  
            thinking = false;  
        }  
    }  
  
    protected override async Task OnAfterRenderAsync(bool firstRender)  
    {  
        jsModule ??= await JS.InvokeAsync<IJSObjectReference>("import", "/Components/ChatBot/Chatbot.razor.js");  
        await jsModule.InvokeVoidAsync("scrollToEnd", chat);  
  
        if (firstRender)  
        {  
            await textbox.FocusAsync();  
            await jsModule.InvokeVoidAsync("submitOnEnter", textbox);  
        }  
    }  
}