AI Mo

[Keith A Price]

I couldn't find any properties for an ai api key.

What model is AI Assist using?

Where is it hosted?

Is it possible to use our own API keys for our preferred models?

[Vigneshwaran Govindharajan]

Hi Keith,

Sorry for the delay in getting back to you.

#1 I couldn't find any properties for an AI Api key

The AI AssistView component does not have a property to configure an AI API key. Instead, the integration with any AI model (like OpenAI, Azure OpenAI, or local models) is handled in your server-side logic.

#2 What model is AI Assist using?

The AI AssistView component does not include or enforce a specific model. You have the flexibility to connect it with any AI service of your choice, including:

• OpenAI (ChatGPT)
• Azure OpenAI Service
• Local models via APIs (e.g., Ollama or custom LLM endpoints)

#3 Where is it hosted?

The AI AssistView is a client-side UI component, hosted within your Blazor WebAssembly or Server application. The actual AI service (e.g., OpenAI) is hosted in the cloud or through a third-party provider, or on your local infrastructure.

#4 Is it possible to use our own API keys for our preferred models?

Yes, you can integrate the AI AssistView with your own AI service endpoints and use your own API keys. All AI-related calls from the AssistView can be routed through your backend.

Additionally, we have prepared a sample demonstrating how to integrate the Syncfusion AI AssistView component with the Azure OpenAI service. This sample showcases how to configure the model, manage hosting, and securely reference API keys. Please check the below shared code block and attached sample for reference.

Home.razor

@using AIAssistView_AzureAI.Components.Services

@using Syncfusion.Blazor.InteractiveChat

@inject AzureOpenAIService OpenAIService

 

<div class="aiassist-container" style="height: 450px; width: 650px;">

    <SfAIAssistView @ref="assistView" PromptRequested="@PromptRequest"></SfAIAssistView>

</div>

 

@code {

    private SfAIAssistView assistView;

    private string finalResponse { get; set; }

    private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)

    {

        // Reset the response for this prompt

        ….

        finalResponse = string.Empty;

        try

        {

            await foreach (var chunk in OpenAIService.GetChatResponseStreamAsync(args.Prompt))

            {

                await UpdateResponse(args, chunk);

            }

            args.Response = finalResponse;

        }

        catch (Exception ex)

        …..

    }

 

    private async Task UpdateResponse(AssistViewPromptRequestedEventArgs args, string response)

    {

        var lastIdx = assistView.Prompts.Count - 1;

        …..

        finalResponse = assistView.Prompts[lastIdx].Response;

    }

}

AzureOpenAIService.cs

using System.Text.Json;

….

 

namespace AIAssistView_AzureAI.Components.Services

{

    public class AzureOpenAIService

    {

        private readonly HttpClient _httpClient;

        ….

        public AzureOpenAIService(HttpClient httpClient, string endpoint, string apiKey, string deploymentName)

        {

            _httpClient = httpClient;

            ….

        }

       

        public async IAsyncEnumerable<string> GetChatResponseStreamAsync(string prompt)

        {

            var request = new

            {

                messages = new[] { new { role = "user", content = prompt } },

                max_tokens = 500,

            };

            var url = $"{_endpoint}/openai/deployments/{_deploymentName}/chat/completions?api-version=2024-02-15-preview";

            _httpClient.DefaultRequestHeaders.Add("api-key", _apiKey);

            ….

            try

            {

                var response = await _httpClient.PostAsJsonAsync(url, request);

                if (response.IsSuccessStatusCode)

                {

                    ….

                    var choices = jsonDocument.RootElement.GetProperty("choices");

                    if (choices.GetArrayLength() > 0)

                    {

                        var content = choices[0].GetProperty("message").GetProperty("content").GetString();

                        var htmlContent = Markdown.ToHtml(content);

                        ….

                        foreach (var chunk in htmlContent)

                        {

                            results.Add(chunk.ToString());

                        }

                    }

                    ….

                }

                …..

            }

            catch (Exception ex)

            {

                ….

            }

            finally

            {

                ….

            }

            // Now yield each collected result

            foreach (var result in results)

            {

                yield return result;

            }

        }

    }

}

Program.cs

builder.Services.AddSyncfusionBlazor();

builder.Services.AddHttpClient();

builder.Services.AddScoped<AzureOpenAIService>(sp =>

{

    var httpClientFactory = sp.GetRequiredService<IHttpClientFactory>();

    var httpClient = httpClientFactory.CreateClient();

 

    var endpoint = "https://azure-testresource.openai.azure.com";

    var apiKey = "<Your API Key>"; // Replace with your API key;

    var deploymentName = "gpt-4o-mini";

 

    return new AzureOpenAIService(httpClient, endpoint, apiKey, deploymentName);

});

Output:

Please let us know if you need any further assistance on this.

Regards,

Vigneshwaran

Attachment: AIAssistView_AzureAI_b9a7671d.zip