UseIChatClient.razor

@page "/useichatclient"
@using Microsoft.Extensions.AI
@inject IChatClient aiClient
@inject ILogger<Home> logger
@inject IConfiguration configuration

<div class="storybox" style="margin: 25%">
    @foreach (var message in chatMessages.Where(m => m.Role == ChatRole.Assistant))
    {
        <p style="font-size: 3em;">@message.Text</p>
    }

    <button @onclick="GenerateNextParagraph" autofocus>Generate</button>
</div>

@code {
    private List<ChatMessage> chatMessages = new List<ChatMessage>
    {
        new(ChatRole.System, "Pick a random topic and write a sentence of a fictional story about it.")
    };

    private async Task GenerateNextParagraph()
    {
        if (chatMessages.Count > 1)
        {
            chatMessages.Add(new (ChatRole.User, "Write the next sentence in the story."));
        }

        var response = await aiClient.CompleteAsync(chatMessages);
        chatMessages.Add(response.Message);
    }

    protected override async Task OnInitializedAsync()
    {
        await GenerateNextParagraph();
    }
}