From 1c7ca3d2cd99fbaeca62f39cc14482dc6953da09 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 11 Sep 2025 16:03:54 +0300 Subject: [PATCH] docs(Editor): Update Editor AI documentation with latest IChatClient API --- .../integration-with-aiprompt.md | 35 ++++--------- .../integration-with-inline-prompt.md | 50 +++++++------------ 2 files changed, 30 insertions(+), 55 deletions(-) diff --git a/components/editor/ai-integration/integration-with-aiprompt.md b/components/editor/ai-integration/integration-with-aiprompt.md index 8c41cd72db..197a328311 100644 --- a/components/editor/ai-integration/integration-with-aiprompt.md +++ b/components/editor/ai-integration/integration-with-aiprompt.md @@ -35,21 +35,21 @@ To enable the AIPrompt in the Editor: @code { - - private string EditorValue { get; set; } = "

Sample Editor content

"; - + private string EditorValue { get; set; } = "

Editor content

"; } ```` ````C# Program.cs // ... -// This example uses Azure OpenAI but you must configure the service depending on the model you are using. Read more at -// https://www.telerik.com/blazor-ui/documentation/common-features/microsoft-extensions-ai-integration -services.AddSingleton(new AzureOpenAIClient( +// This example uses Azure OpenAI but you must configure the service depending on the model you are using. +// Read more at https://www.telerik.com/blazor-ui/documentation/common-features/microsoft-extensions-ai-integration + +builder.Services.AddSingleton(new AzureOpenAIClient( new Uri("YOUR_AZURE_OPENAI_ENDPOINT"), - new AzureKeyCredential("YOUR_AZURE_OPENAI_CREDENTIAL"))); + new AzureKeyCredential("YOUR_AZURE_OPENAI_API_KEY") +)); -services.AddChatClient(services => services.GetRequiredService().AsChatClient("gpt-4o-mini")); +builder.Services.AddChatClient(services => services.GetRequiredService().GetChatClient("YOUR_MODEL_NAME").AsIChatClient()); // ... ```` @@ -67,20 +67,19 @@ The Editor allows customizing some of the integrated AIPrompt's settings. For th >caption Customizing the AIPrompt in the Editor -
-````RAZOR Editor +````RAZOR.skip-repl - + @code { private string EditorValue { get; set; } = "Sample Editor content"; - private List Commands { get; set; } = new List + private List AIPromptCommands { get; set; } = new() { new AIPromptCommandDescriptor() { Id = "1", Title = "Simplify", Icon = SvgIcon.MinWidth, Prompt = "Simplify the text" }, new AIPromptCommandDescriptor() { Id = "2", Title = "Expand", Icon = SvgIcon.MaxWidth , Prompt = "Expand the text" }, @@ -95,18 +94,6 @@ The Editor allows customizing some of the integrated AIPrompt's settings. For th }; } ```` -````C# Program.cs -// ... - -// This example uses Azure OpenAI but you must configure the service depending on the model you are using. Read more at https://www.telerik.com/blazor-ui/documentation/common-features/microsoft-extensions-ai-integration -services.AddSingleton(new AzureOpenAIClient( - new Uri("YOUR_AZURE_OPENAI_ENDPOINT"), - new AzureKeyCredential("YOUR_AZURE_OPENAI_CREDENTIAL"))); - -services.AddChatClient(services => services.GetRequiredService().AsChatClient("gpt-4o-mini")); - -// ... -```` ## See Also diff --git a/components/editor/ai-integration/integration-with-inline-prompt.md b/components/editor/ai-integration/integration-with-inline-prompt.md index 39ef15a808..6881f01902 100644 --- a/components/editor/ai-integration/integration-with-inline-prompt.md +++ b/components/editor/ai-integration/integration-with-inline-prompt.md @@ -40,18 +40,20 @@ To enable the Inline Prompt in the Editor: @code { private string EditorValue { get; set; } = "

Sample Editor content

"; - } ```` ````C# Program.cs // ... -// This example uses Azure OpenAI but you must configure the service depending on the model you are using. Read more at https://www.telerik.com/blazor-ui/documentation/common-features/microsoft-extensions-ai-integration -services.AddSingleton(new AzureOpenAIClient( +// This example uses Azure OpenAI but you must configure the service depending on the model you are using. +// Read more at https://www.telerik.com/blazor-ui/documentation/common-features/microsoft-extensions-ai-integration + +builder.Services.AddSingleton(new AzureOpenAIClient( new Uri("YOUR_AZURE_OPENAI_ENDPOINT"), - new AzureKeyCredential("YOUR_AZURE_OPENAI_CREDENTIAL"))); + new AzureKeyCredential("YOUR_AZURE_OPENAI_API_KEY") +)); -services.AddChatClient(services => services.GetRequiredService().AsChatClient("gpt-4o-mini")); +builder.Services.AddChatClient(services => services.GetRequiredService().GetChatClient("YOUR_MODEL_NAME").AsIChatClient()); // ... ```` @@ -65,51 +67,37 @@ The Editor allows customizing some of the integrated Inline Prompt's settings. F | Parameter | Type and Default value | Description | |-----------|------------------------|-------------| | `SystemPrompt` | `string` | The system prompt that will be passed to the integrated Inline Prompt. If not provided, the Inline Prompt will use its [default `SystemPrompt` value](slug:aiprompt-overview#aiprompt-parameters). | -| `Commands` | `List` | The commands displayed within the Commands view. If not set the Inline Prompt will use the [default predefined commands](slug:editor-ai-integration-overview#ai-integration-capabilities). | +| `Commands` | `List` | The commands displayed within the Commands view. If not set the Inline Prompt will use the [default predefined commands](slug:editor-ai-integration-overview#ai-integration-capabilities). | >caption Customizing the Inline Prompt in the Editor -
-````RAZOR Editor +````RAZOR.skip-repl - + @code { + private string EditorValue { get; set; } = "

Editor content.

"; - private string EditorValue { get; set; } = "Sample Editor content"; - - private List Commands { get; set; } = new List + private List InlineAIPromptCommands { get; set; } = new() { - new AIPromptCommandDescriptor() { Id = "1", Title = "Simplify", Icon = SvgIcon.MinWidth, Prompt = "Simplify the text" }, - new AIPromptCommandDescriptor() { Id = "2", Title = "Expand", Icon = SvgIcon.MaxWidth , Prompt = "Expand the text" }, - new AIPromptCommandDescriptor() { Id = "3", Title = "Translate", Icon = SvgIcon.EditTools, - Children = new List + new InlineAIPromptCommandDescriptor() { Id = "1", Title = "Simplify", Icon = SvgIcon.MinWidth, Prompt = "Simplify the text" }, + new InlineAIPromptCommandDescriptor() { Id = "2", Title = "Expand", Icon = SvgIcon.MaxWidth , Prompt = "Expand the text" }, + new InlineAIPromptCommandDescriptor() { Id = "3", Title = "Translate", Icon = SvgIcon.EditTools, + Children = new List { - new AIPromptCommandDescriptor() { Id = "4", Title = "English", Prompt = "Translate the text to English" }, - new AIPromptCommandDescriptor() { Id = "5", Title = "Bulgarian", Prompt = "Translate the text to Bulgarian" }, - new AIPromptCommandDescriptor() { Id = "6", Title = "Spanish", Prompt = "Translate the text to Spanish" }, + new InlineAIPromptCommandDescriptor() { Id = "4", Title = "English", Prompt = "Translate the text to English" }, + new InlineAIPromptCommandDescriptor() { Id = "5", Title = "Bulgarian", Prompt = "Translate the text to Bulgarian" }, + new InlineAIPromptCommandDescriptor() { Id = "6", Title = "Spanish", Prompt = "Translate the text to Spanish" }, } } }; } ```` -````C# Program.cs -// ... - -// This example uses Azure OpenAI but you must configure the service depending on the model you are using. Read more at https://www.telerik.com/blazor-ui/documentation/common-features/microsoft-extensions-ai-integration -services.AddSingleton(new AzureOpenAIClient( - new Uri("YOUR_AZURE_OPENAI_ENDPOINT"), - new AzureKeyCredential("YOUR_AZURE_OPENAI_CREDENTIAL"))); - -services.AddChatClient(services => services.GetRequiredService().AsChatClient("gpt-4o-mini")); - -// ... -```` ## See Also