Skip to content

Commit b7844ef

Browse files
ntachevaikoevskadimodi
authored
Editor AI integration documentation (#2957)
* chore(editor): add ai integration docs * chore(editor): add code samples * chore(editor): fixes * Update components/aiprompt/views/commands.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * Update components/editor/ai-integration/integration-with-aiprompt.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * Update components/editor/ai-integration/integration-with-inline-prompt.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * Update components/editor/ai-integration/integration-with-aiprompt.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * chore(editor0: address feedback * Update components/aiprompt/views/commands.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/editor/ai-integration/overview.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/editor/ai-integration/overview.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/editor/ai-integration/overview.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/editor/ai-integration/integration-with-aiprompt.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/editor/ai-integration/integration-with-aiprompt.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/editor/ai-integration/integration-with-aiprompt.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/editor/ai-integration/integration-with-inline-prompt.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/editor/ai-integration/integration-with-inline-prompt.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/editor/ai-integration/integration-with-aiprompt.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/editor/ai-integration/integration-with-inline-prompt.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/editor/ai-integration/integration-with-aiprompt.md Co-authored-by: Dimo Dimov <[email protected]> --------- Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> Co-authored-by: Dimo Dimov <[email protected]>
1 parent a6cd435 commit b7844ef

File tree

6 files changed

+288
-13
lines changed

6 files changed

+288
-13
lines changed

‎components/aiprompt/overview.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ The table below lists the AIPrompt parameters. For a full list of the AIPrompt A
9898
| `Class` | `string` | The `class` attribute of the `<div class="k-prompt">` element. Use it to apply custom styles or [override the theme](slug:themes-override). |
9999
| `Commands` | `List<AIPromptCommandDescriptor>` | The predefined commands displayed within the Commands view. |
100100
| `Height` | `string` | The `height` style of the component in any [supported CSS unit](slug:common-features/dimensions). The default AIPrompt dimensions depend on the CSS theme. |
101+
| `PromptContext` | `string` | This text is appended to the prompt when sending the request. This is required in order to allow the component to work with external context, which is not visible in the prompt box.
101102
| `PromptText` | `string` | The value of the text within the prompt view. Use it when you need to add some form of transformation to the prompt. The parameter supports two-way binding. |
102103
| `PromptTextChanged` | `EventCallback<string>` | The handler called whenever the `PromptText` changes. |
103104
| `PromptSuggestions` | `List<string>` | The prompt suggestions displayed within the Prompt view. |

‎components/aiprompt/views/commands.md

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ The following properties enable you to customize each command:
2525
| `Id` | `string` | The `Id` of the command. |
2626
| `Title` | `string` | The title of the command. Rendered as text within the Command view. |
2727
| `Icon` | `object` | The [Telerik Font or SVG icon](slug:common-features-icons) rendered before the title within the Command view. |
28+
| `Prompt` | `string` | The text to send as the prompt when this command is executed by the AIPrompt. |
2829
| `Children` | `List<AIPromptCommandDescriptor>` | The nested commands (if any) of the command. |
2930

3031
>caption Using the `Commands` parameter to pass a collection of predefined commands to the AIPrompt for Blazor
@@ -42,31 +43,31 @@ The following properties enable you to customize each command:
4243
new AIPromptCommandDescriptor() { Id = "2", Title = "Change Tone", Icon = SvgIcon.TellAFriend,
4344
Children = new List<AIPromptCommandDescriptor>
4445
{
45-
new AIPromptCommandDescriptor() { Id = "3", Title = "Professional" },
46-
new AIPromptCommandDescriptor() { Id = "4", Title = "Conversational" },
47-
new AIPromptCommandDescriptor() { Id = "5", Title = "Humorous" },
48-
new AIPromptCommandDescriptor() { Id = "6", Title = "Empathic" },
49-
new AIPromptCommandDescriptor() { Id = "7", Title = "Academic" },
46+
new AIPromptCommandDescriptor() { Id = "3", Title = "Professional", Prompt = "Change the tone of the following text to professional" },
47+
new AIPromptCommandDescriptor() { Id = "4", Title = "Conversational", Prompt = "Change the tone of the following text to conversational" },
48+
new AIPromptCommandDescriptor() { Id = "5", Title = "Humorous", Prompt = "Change the tone of the following text to humorous" },
49+
new AIPromptCommandDescriptor() { Id = "6", Title = "Empathic", Prompt = "Change the tone of the following text to empathic" },
50+
new AIPromptCommandDescriptor() { Id = "7", Title = "Academic", Prompt = "Change the tone of the following text to academic" },
5051
}
5152
},
5253
new AIPromptCommandDescriptor() { Id = "8", Title = "Change Formality", Icon = SvgIcon.ApplyFormat,
5354
Children = new List<AIPromptCommandDescriptor>
5455
{
55-
new AIPromptCommandDescriptor() { Id = "9", Title = "Casual" },
56-
new AIPromptCommandDescriptor() { Id = "10", Title = "Neutral" },
57-
new AIPromptCommandDescriptor() { Id = "11", Title = "Formal" },
56+
new AIPromptCommandDescriptor() { Id = "9", Title = "Casual", Prompt = "Change the formality of the following text to casual" },
57+
new AIPromptCommandDescriptor() { Id = "10", Title = "Neutral", Prompt = "Change the formality of the following text to neutral" },
58+
new AIPromptCommandDescriptor() { Id = "11", Title = "Formal", Prompt = "Change the formality of the following text to formal" },
5859
}
5960
},
6061
new AIPromptCommandDescriptor() { Id = "12", Title = "Translate", Icon = SvgIcon.EditTools,
6162
Children = new List<AIPromptCommandDescriptor>
6263
{
63-
new AIPromptCommandDescriptor() { Id = "13", Title = "English" },
64-
new AIPromptCommandDescriptor() { Id = "14", Title = "Bulgarian" },
65-
new AIPromptCommandDescriptor() { Id = "15", Title = "Spanish" },
64+
new AIPromptCommandDescriptor() { Id = "13", Title = "English", Prompt = "Translate the following text to English" },
65+
new AIPromptCommandDescriptor() { Id = "14", Title = "Bulgarian", Prompt = "Translate the following text to Bulgarian" },
66+
new AIPromptCommandDescriptor() { Id = "15", Title = "Spanish", Prompt = "Translate the following text to Spanish" },
6667
}
6768
},
68-
new AIPromptCommandDescriptor() { Id = "16", Title = "Simplify", Icon = SvgIcon.MinWidth },
69-
new AIPromptCommandDescriptor() { Id = "17", Title = "Expand", Icon = SvgIcon.MaxWidth },
69+
new AIPromptCommandDescriptor() { Id = "16", Title = "Simplify", Icon = SvgIcon.MinWidth, Prompt = "Simplify the following text" },
70+
new AIPromptCommandDescriptor() { Id = "17", Title = "Expand", Icon = SvgIcon.MaxWidth, Prompt = "Expand the following text" },
7071
};
7172
7273
private void HandlePromptRequest(AIPromptPromptRequestEventArgs args)

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

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
title: Integration with AIPrompt
3+
page_title: Editor Integration with AIPrompt
4+
description: Integration of the AIPrompt component in the Editor for Blazor.
5+
slug: editor-aiprompt-integration
6+
tags: telerik,blazor,editor,ai,ai integration,aiprompt
7+
published: True
8+
position: 3
9+
---
10+
11+
# Editor Integration with AIPrompt
12+
13+
The Editor provides a built-in integration with the [AIPrompt component](slug:aiprompt-overview) to help users apply AI-driven suggestions and completions to their Editor.
14+
15+
The integration with the AIPrompt component covers the following use cases:
16+
17+
* Standalone prompting - The user can ask the AIPrompt without any context provided by the Editor. This could be useful for idea generation, writing a whole piece of content (blog post), or just random questions.
18+
* Prompting with context - The user prompt will use additional context from the Editor (the UI allows the user to decide whether to use the selected text, if any, or the whole content).
19+
* Command with context - The user can select a command that will be applied to the selected content (if any) or the whole content if no text is selected.
20+
21+
## Enabling the AIPrompt
22+
23+
To enable the AIPrompt in the Editor:
24+
25+
1. Set the `EnableAIPrompt` parameter to `true`.
26+
1. Register an [`IChatClient` service](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.ai.ichatclient?view=net-9.0-pp) to generate the AIPrompt responses. Configure the service according to the model you are using. The AIPrompt is designed to automatically use the registered `IChatClient` as the component provides a [built-in integration with the **Microsoft.Extensions.AI** library](slug:common-features-microsoft-extensions-ai-integration).
27+
28+
>caption Enabling the AIPrompt in the Editor
29+
30+
<div class="skip-repl"></div>
31+
````RAZOR Editor
32+
<TelerikEditor @bind-Value="@EditorValue"
33+
EnableAIPrompt="true"
34+
Height="400px">
35+
</TelerikEditor>
36+
37+
@code {
38+
39+
private string EditorValue { get; set; } = "<p>Sample Editor content</p>";
40+
41+
}
42+
````
43+
````C# Program.cs
44+
// ...
45+
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(
49+
new Uri("YOUR_AZURE_OPENAI_ENDPOINT"),
50+
new AzureKeyCredential("YOUR_AZURE_OPENAI_CREDENTIAL")));
51+
52+
services.AddChatClient(services => services.GetRequiredService<AzureOpenAIClient>().AsChatClient("gpt-4o-mini"));
53+
54+
// ...
55+
````
56+
57+
## Customizing the AIPrompt
58+
59+
The Editor allows customizing some of the integrated AIPrompt's settings. For that purpose, use the `<EditorAIPromptSettings>` tag. It provides the following parameters that you can configure:
60+
61+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
62+
63+
| Parameter | Type and Default value | Description |
64+
|-----------|------------------------|-------------|
65+
| `SystemPrompt` | `string` | The system prompt that will be passed to the integrated AIPrompt. If not provided, the AIPrompt will use its [default `SystemPrompt` value](slug:aiprompt-overview#aiprompt-parameters). |
66+
| `Commands` | `List<AIPromptCommandDescriptor>` | The commands displayed within the Commands view. If not set the AIPrompt will use the [default predefined commands](slug:editor-ai-integration-overview#ai-integration-capabilities). |
67+
68+
>caption Customizing the AIPrompt in the Editor
69+
70+
<div class="skip-repl"></div>
71+
````RAZOR Editor
72+
<TelerikEditor @bind-Value="@EditorValue"
73+
EnableAIPrompt="true"
74+
Height="400px">
75+
<EditorSettings>
76+
<EditorAIPromptSettings Commands="@Commands"></EditorAIPromptSettings>
77+
</EditorSettings>
78+
</TelerikEditor>
79+
80+
@code {
81+
private string EditorValue { get; set; } = "Sample Editor content";
82+
83+
private List<AIPromptCommandDescriptor> Commands { get; set; } = new List<AIPromptCommandDescriptor>
84+
{
85+
new AIPromptCommandDescriptor() { Id = "1", Title = "Simplify", Icon = SvgIcon.MinWidth, Prompt = "Simplify the text" },
86+
new AIPromptCommandDescriptor() { Id = "2", Title = "Expand", Icon = SvgIcon.MaxWidth , Prompt = "Expand the text" },
87+
new AIPromptCommandDescriptor() { Id = "3", Title = "Translate", Icon = SvgIcon.EditTools,
88+
Children = new List<AIPromptCommandDescriptor>
89+
{
90+
new AIPromptCommandDescriptor() { Id = "4", Title = "English", Prompt = "Translate the text to English" },
91+
new AIPromptCommandDescriptor() { Id = "5", Title = "Bulgarian", Prompt = "Translate the text to Bulgarian" },
92+
new AIPromptCommandDescriptor() { Id = "6", Title = "Spanish", Prompt = "Translate the text to Spanish" },
93+
}
94+
}
95+
};
96+
}
97+
````
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+
````
110+
111+
## See Also
112+
113+
* [Live Demo: AI Integration](https://demos.telerik.com/blazor-ui/editor/ai-integration)
114+
* [AI Integration Overview](slug:editor-ai-integration-overview)
115+
* [Editor Integration with Inline Prompt](slug:editor-inline-prompt-integration)

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

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
---
2+
title: Integration with Inline Prompt
3+
page_title: Editor Integration with Inline Prompt
4+
description: Integration of the Inline Prompt in the Editor for Blazor.
5+
slug: editor-inline-prompt-integration
6+
tags: telerik,blazor,editor,ai,ai integration,Inline Prompt
7+
published: True
8+
position: 3
9+
---
10+
11+
# Editor Integration with Inline Prompt
12+
13+
The Editor provides a built-in integration with an inline prompt component to help users add AI-driven suggestions and completions to their Editor.
14+
15+
The inline prompt displays inside a Popup which appears when the user selects text in the Editor. Once enabled, each command prompt will work only with this selected context. The result appears in the card and can be replaced or appended directly inside the Editor, or discarded if the result is not good.
16+
17+
The Inline prompt will automatically appear and it will align its top left corner with the bottom left corner of the selection.
18+
19+
The integration with the Inline Prompt covers the following use cases:
20+
21+
* Prompting with context - The user prompt will use the selected text in the Editor as additional context.
22+
* Command with context - The user will run a command that will be applied to the selected content.
23+
24+
## Enabling the Inline Prompt
25+
26+
To enable the Inline Prompt in the Editor:
27+
28+
1. Set the `EnableInlineAIPrompt` parameter to `true`.
29+
1. Register an [`IChatClient` service](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.ai.ichatclient?view=net-9.0-pp) to generate the Inline Prompt responses. Configure the service according to the model you are using. The Inline Prompt is designed to automatically use the registered `IChatClient` as the component provides a [built-in integration with the **Microsoft.Extensions.AI** library](slug:common-features-microsoft-extensions-ai-integration).
30+
31+
>caption Enabling the Inline Prompt in the Editor
32+
33+
<div class="skip-repl"></div>
34+
````RAZOR Editor
35+
<TelerikEditor @bind-Value="@EditorValue"
36+
EnableInlineAIPrompt="true"
37+
Height="400px">
38+
</TelerikEditor>
39+
40+
@code {
41+
42+
private string EditorValue { get; set; } = "<p>Sample Editor content</p>";
43+
44+
}
45+
````
46+
````C# Program.cs
47+
// ...
48+
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(
51+
new Uri("YOUR_AZURE_OPENAI_ENDPOINT"),
52+
new AzureKeyCredential("YOUR_AZURE_OPENAI_CREDENTIAL")));
53+
54+
services.AddChatClient(services => services.GetRequiredService<AzureOpenAIClient>().AsChatClient("gpt-4o-mini"));
55+
56+
// ...
57+
````
58+
59+
## Customizing the Inline Prompt
60+
61+
The Editor allows customizing some of the integrated Inline Prompt's settings. For that purpose, use the `<EditorInlineAIPromptSettings>` tag. It provides the following parameters that you can configure:
62+
63+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
64+
65+
| Parameter | Type and Default value | Description |
66+
|-----------|------------------------|-------------|
67+
| `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:Inline Prompt-overview#Inline Prompt-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). |
69+
70+
>caption Customizing the Inline Prompt in the Editor
71+
72+
<div class="skip-repl"></div>
73+
````RAZOR Editor
74+
<TelerikEditor @bind-Value="@EditorValue"
75+
EnableInlineAIPrompt="true"
76+
Height="400px">
77+
<EditorSettings>
78+
<EditorInlineAIPromptSettings Commands="@Commands"></EditorInlineAIPromptSettings>
79+
</EditorSettings>
80+
</TelerikEditor>
81+
82+
@code {
83+
84+
private string EditorValue { get; set; } = "Sample Editor content";
85+
86+
private List<AIPromptCommandDescriptor> Commands { get; set; } = new List<AIPromptCommandDescriptor>
87+
{
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>
92+
{
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" },
96+
}
97+
}
98+
};
99+
}
100+
````
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+
````
113+
114+
## See Also
115+
116+
* [Live Demo: AI Integration](https://demos.telerik.com/blazor-ui/editor/ai-integration)
117+
* [AI Integration Overview](slug:editor-ai-integration-overview)
118+
* [Editor Integration with AIPrompt](slug:editor-aiprompt-integration)

‎components/editor/ai-integration/overview.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
title: Overview
3+
page_title: Editor AI Integration Overview
4+
description: Overview of the AI integration options that the Editor for Blazor provides.
5+
slug: editor-ai-integration-overview
6+
tags: telerik,blazor,editor,ai,ai integration, aiprompt
7+
published: True
8+
position: 0
9+
---
10+
11+
# AI Integration Overview
12+
13+
The Editor provides AI integration to enhance the user productivity and streamline workflows. This integration is available in two ways:
14+
15+
* **AIPrompt Component**: An [AIPrompt component](slug:aiprompt-overview) that is rendered next to the Editor.
16+
17+
* **Inline Prompt**: A lightweight AI prompt rendered in a popup that is shown once the user selects text in the Editor.
18+
19+
## AI Integration Capabilities
20+
21+
Both features are designed to improve the user experience by leveraging AI capabilities directly within the Editor environment. The built-in AI integration allows the user to type their prompt and get a response based on the text in the Editor. The users can also use a set of built-in commands:
22+
23+
* Rewrite
24+
* Fix Mistakes
25+
* Tone (Neutral, Friendly, Casual, Formal)
26+
* Polish Formatting
27+
* Adjust Length (Shorter, Longer)
28+
* Translate (English, Spanish, German)
29+
30+
These can be customized through the nested configuration options for the [AIPrompt](slug:editor-aiprompt-integration) and [Inline Prompt](slug:editor-inline-prompt-integration).
31+
32+
## Next Steps
33+
34+
See how you can enable and configure the available AI integration options:
35+
36+
* [Integration with AIPrompt component](slug:editor-aiprompt-integration)
37+
* [Integration with Inline Prompt](slug:editor-inline-prompt-integration)

‎docs-builder.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -414,6 +414,9 @@ meta:
414414
"*components/editor/edit-modes":
415415
title: Edit Modes
416416
position: 80
417+
"*components/editor/ai-integration":
418+
title: AI Integration
419+
position: 90
417420
"*components/scheduler/templates":
418421
title: Templates
419422
position: 35

0 commit comments

Comments
 (0)