Skip to content

Commit a6d4efc

Browse files
github-actions[bot]dimodi
github-actions[bot]
and
dimodi
authored
docs(Editor): Update Editor AI documentation with latest IChatClient API (#3233)
Co-authored-by: Dimo Dimov <[email protected]>
1 parent 5f8ab3e commit a6d4efc

File tree

2 files changed

+30
-55
lines changed

2 files changed

+30
-55
lines changed

‎components/editor/ai-integration/integration-with-aiprompt.md

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -35,21 +35,21 @@ To enable the AIPrompt in the Editor:
3535
</TelerikEditor>
3636
3737
@code {
38-
39-
private string EditorValue { get; set; } = "<p>Sample Editor content</p>";
40-
38+
private string EditorValue { get; set; } = "<p>Editor content</p>";
4139
}
4240
````
4341
````C# Program.cs
4442
// ...
4543
46-
// This example uses Azure OpenAI but you must configure the service depending on the model you are using. Read more at
47-
// https://www.telerik.com/blazor-ui/documentation/common-features/microsoft-extensions-ai-integration
48-
services.AddSingleton(new AzureOpenAIClient(
44+
// This example uses Azure OpenAI but you must configure the service depending on the model you are using.
45+
// Read more at https://www.telerik.com/blazor-ui/documentation/common-features/microsoft-extensions-ai-integration
46+
47+
builder.Services.AddSingleton(new AzureOpenAIClient(
4948
new Uri("YOUR_AZURE_OPENAI_ENDPOINT"),
50-
new AzureKeyCredential("YOUR_AZURE_OPENAI_CREDENTIAL")));
49+
new AzureKeyCredential("YOUR_AZURE_OPENAI_API_KEY")
50+
));
5151

52-
services.AddChatClient(services => services.GetRequiredService<AzureOpenAIClient>().AsChatClient("gpt-4o-mini"));
52+
builder.Services.AddChatClient(services => services.GetRequiredService<AzureOpenAIClient>().GetChatClient("YOUR_MODEL_NAME").AsIChatClient());
5353

5454
// ...
5555
````
@@ -67,20 +67,19 @@ The Editor allows customizing some of the integrated AIPrompt's settings. For th
6767

6868
>caption Customizing the AIPrompt in the Editor
6969
70-
<div class="skip-repl"></div>
71-
````RAZOR Editor
70+
````RAZOR.skip-repl
7271
<TelerikEditor @bind-Value="@EditorValue"
7372
EnableAIPrompt="true"
7473
Height="400px">
7574
<EditorSettings>
76-
<EditorAIPromptSettings Commands="@Commands"></EditorAIPromptSettings>
75+
<EditorAIPromptSettings Commands="@AIPromptCommands" />
7776
</EditorSettings>
7877
</TelerikEditor>
7978
8079
@code {
8180
private string EditorValue { get; set; } = "Sample Editor content";
8281
83-
private List<AIPromptCommandDescriptor> Commands { get; set; } = new List<AIPromptCommandDescriptor>
82+
private List<AIPromptCommandDescriptor> AIPromptCommands { get; set; } = new()
8483
{
8584
new AIPromptCommandDescriptor() { Id = "1", Title = "Simplify", Icon = SvgIcon.MinWidth, Prompt = "Simplify the text" },
8685
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
9594
};
9695
}
9796
````
98-
````C# Program.cs
99-
// ...
100-
101-
// 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
102-
services.AddSingleton(new AzureOpenAIClient(
103-
new Uri("YOUR_AZURE_OPENAI_ENDPOINT"),
104-
new AzureKeyCredential("YOUR_AZURE_OPENAI_CREDENTIAL")));
105-
106-
services.AddChatClient(services => services.GetRequiredService<AzureOpenAIClient>().AsChatClient("gpt-4o-mini"));
107-
108-
// ...
109-
````
11097

11198
## See Also
11299

‎components/editor/ai-integration/integration-with-inline-prompt.md

Lines changed: 19 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,20 @@ To enable the Inline Prompt in the Editor:
4040
@code {
4141
4242
private string EditorValue { get; set; } = "<p>Sample Editor content</p>";
43-
4443
}
4544
````
4645
````C# Program.cs
4746
// ...
4847
49-
// 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
50-
services.AddSingleton(new AzureOpenAIClient(
48+
// This example uses Azure OpenAI but you must configure the service depending on the model you are using.
49+
// Read more at https://www.telerik.com/blazor-ui/documentation/common-features/microsoft-extensions-ai-integration
50+
51+
builder.Services.AddSingleton(new AzureOpenAIClient(
5152
new Uri("YOUR_AZURE_OPENAI_ENDPOINT"),
52-
new AzureKeyCredential("YOUR_AZURE_OPENAI_CREDENTIAL")));
53+
new AzureKeyCredential("YOUR_AZURE_OPENAI_API_KEY")
54+
));
5355

54-
services.AddChatClient(services => services.GetRequiredService<AzureOpenAIClient>().AsChatClient("gpt-4o-mini"));
56+
builder.Services.AddChatClient(services => services.GetRequiredService<AzureOpenAIClient>().GetChatClient("YOUR_MODEL_NAME").AsIChatClient());
5557

5658
// ...
5759
````
@@ -65,51 +67,37 @@ The Editor allows customizing some of the integrated Inline Prompt's settings. F
6567
| Parameter | Type and Default value | Description |
6668
|-----------|------------------------|-------------|
6769
| `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). |
68-
| `Commands` | `List<Inline PromptCommandDescriptor>` | 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). |
70+
| `Commands` | `List<InlineAIPromptCommandDescriptor>` | 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). |
6971

7072
>caption Customizing the Inline Prompt in the Editor
7173
72-
<div class="skip-repl"></div>
73-
````RAZOR Editor
74+
````RAZOR.skip-repl
7475
<TelerikEditor @bind-Value="@EditorValue"
7576
EnableInlineAIPrompt="true"
7677
Height="400px">
7778
<EditorSettings>
78-
<EditorInlineAIPromptSettings Commands="@Commands"></EditorInlineAIPromptSettings>
79+
<EditorInlineAIPromptSettings Commands="@InlineAIPromptCommands" />
7980
</EditorSettings>
8081
</TelerikEditor>
8182
8283
@code {
84+
private string EditorValue { get; set; } = "<p>Editor content.</p>";
8385
84-
private string EditorValue { get; set; } = "Sample Editor content";
85-
86-
private List<AIPromptCommandDescriptor> Commands { get; set; } = new List<AIPromptCommandDescriptor>
86+
private List<InlineAIPromptCommandDescriptor> InlineAIPromptCommands { get; set; } = new()
8787
{
88-
new AIPromptCommandDescriptor() { Id = "1", Title = "Simplify", Icon = SvgIcon.MinWidth, Prompt = "Simplify the text" },
89-
new AIPromptCommandDescriptor() { Id = "2", Title = "Expand", Icon = SvgIcon.MaxWidth , Prompt = "Expand the text" },
90-
new AIPromptCommandDescriptor() { Id = "3", Title = "Translate", Icon = SvgIcon.EditTools,
91-
Children = new List<AIPromptCommandDescriptor>
88+
new InlineAIPromptCommandDescriptor() { Id = "1", Title = "Simplify", Icon = SvgIcon.MinWidth, Prompt = "Simplify the text" },
89+
new InlineAIPromptCommandDescriptor() { Id = "2", Title = "Expand", Icon = SvgIcon.MaxWidth , Prompt = "Expand the text" },
90+
new InlineAIPromptCommandDescriptor() { Id = "3", Title = "Translate", Icon = SvgIcon.EditTools,
91+
Children = new List<InlineAIPromptCommandDescriptor>
9292
{
93-
new AIPromptCommandDescriptor() { Id = "4", Title = "English", Prompt = "Translate the text to English" },
94-
new AIPromptCommandDescriptor() { Id = "5", Title = "Bulgarian", Prompt = "Translate the text to Bulgarian" },
95-
new AIPromptCommandDescriptor() { Id = "6", Title = "Spanish", Prompt = "Translate the text to Spanish" },
93+
new InlineAIPromptCommandDescriptor() { Id = "4", Title = "English", Prompt = "Translate the text to English" },
94+
new InlineAIPromptCommandDescriptor() { Id = "5", Title = "Bulgarian", Prompt = "Translate the text to Bulgarian" },
95+
new InlineAIPromptCommandDescriptor() { Id = "6", Title = "Spanish", Prompt = "Translate the text to Spanish" },
9696
}
9797
}
9898
};
9999
}
100100
````
101-
````C# Program.cs
102-
// ...
103-
104-
// 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
105-
services.AddSingleton(new AzureOpenAIClient(
106-
new Uri("YOUR_AZURE_OPENAI_ENDPOINT"),
107-
new AzureKeyCredential("YOUR_AZURE_OPENAI_CREDENTIAL")));
108-
109-
services.AddChatClient(services => services.GetRequiredService<AzureOpenAIClient>().AsChatClient("gpt-4o-mini"));
110-
111-
// ...
112-
````
113101

114102
## See Also
115103

0 commit comments

Comments
 (0)