` element. Use it to apply custom styles or [override the theme]({%slug themes-override%}). |
+| `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. |
+| `Width` | `string` | The `width` style of the component in any [supported CSS unit]({%slug common-features/dimensions%}). The default AIPrompt dimensions depend on the CSS theme. |
+
+## AIPrompt Reference and Methods
+
+The AIPrompt exposes methods for programmatic operation. To use them, define a reference to the component instance with the `@ref` directive attribute.
+
+| Method | Description |
+| --- | --- |
+| `Refresh` | Re-renders the component. |
+| `AddOutput` | Insert a new output item to the AIPrompt. |
+
+>caption AIPrompt reference and method usage
+
+````CSHTML
+
+
+
+ Generate
+
+
+@code {
+ private string CustomPrompt { get; set; }
+ private TelerikAIPrompt AIPromptRef { get; set; }
+
+ private void ExternalGenerateHandler()
+ {
+ // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
+ AIPromptRef.AddOutput(
+ output: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+ title: "Generated from an external prompt",
+ subtitle: string.Empty,
+ prompt: CustomPrompt,
+ commandId: null,
+ openOutputView: true);
+ }
+
+ private void HandlePromptRequest(AIPromptPromptRequestEventArgs args)
+ {
+ // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
+ args.Output = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+ }
+}
+````
+
+
+## Next Steps
+
+* [Configure the AIPrompt ToolBar]({%slug aiprompt-toolbar%})
+* [Customize the AIPrompt Views]({%slug aiprompt-views-overview%})
+* [Make the AIPrompt Your Own through Custom Commands]({%slug aiprompt-views-commands%})
+* [Implement AIPrompt Views Templates]({%slug aiprompt-views-templates%})
+* [Implement AIPrompt Templates]({%slug aiprompt-templates%})
+* [Handle the AIPrompt Events]({%slug aiprompt-events%})
+
+## See Also
+
+* [Live Demo: AIPrompt](https://demos.telerik.com/blazor-ui/aiprompt/overview)
+* [AIPrompt API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikAIPrompt)
diff --git a/components/aiprompt/templates.md b/components/aiprompt/templates.md
new file mode 100644
index 0000000000..74a9355ca8
--- /dev/null
+++ b/components/aiprompt/templates.md
@@ -0,0 +1,74 @@
+---
+title: Templates
+page_title: AIPrompt Templates
+description: Discover the AIPrompt templates that let you customize the appearance of the component, for example, the rendering of the prompt suggestions.
+slug: aiprompt-templates
+tags: telerik,blazor,aiprompt,ai,prompt,templates
+published: True
+position: 30
+---
+
+# AIPrompt Templates
+
+The AIPrompt component provides the `PromptSuggestionItemTemplate` that allows you to change the appearance of the prompt suggestions made by the component.
+
+>tip The AIPrompt component also implements [View templates]({%slug aiprompt-templates%}) that control the rendering of the Prompt, Output, and Command views.
+
+The Prompt view of the AIPrompt renders any suggestions passed to the `PromptSuggestions` parameter in the form of elevated bubbles within a collapsible section. The `PromptSuggestionItemTemplate` allows you to control the rendering of individual suggestions.
+
+>note By default, clicking on a suggestion will populate the prompt's input with the suggestion's value and also trigger a `PromptTextChanged` event. If you use the `PromptSuggestionItemTemplate`, you should also handle [any event]({%slug aiprompt-events%}) you deem necessary (such as `onclick`).
+
+>caption Using the `PromptSuggestionItemTemplate` to alter the appearance of the suggestions
+
+````CSHTML
+
+
+
+
+ @context
+
+
+
+
+
+
+@code {
+ private string Prompt { get; set; }
+ private TelerikAIPrompt AIPromptRef { get; set; }
+
+ private List
Suggestions { get; set; } = new List()
+ {
+ "Explain quantum physics in simple terms.",
+ "What are the three laws of thermodynamics?"
+ };
+
+ private void OnSuggestionClick()
+ {
+ // handle suggestion click here.
+ }
+}
+````
+
+## See Also
+
+* [Views Templates]({%slug aiprompt-views-templates%})
\ No newline at end of file
diff --git a/components/aiprompt/toolbar.md b/components/aiprompt/toolbar.md
new file mode 100644
index 0000000000..250b3159ab
--- /dev/null
+++ b/components/aiprompt/toolbar.md
@@ -0,0 +1,98 @@
+---
+title: Toolbar
+page_title: AIPrompt - Toolbar
+description: Learn how to configure and use the Blazor AIPrompt toolbar and its buttons, and see how to define custom toolbar buttons.
+slug: aiprompt-toolbar
+tags: telerik,blazor,aiprompt,ai,prompt,toolbar
+published: True
+position: 20
+---
+
+# AIPrompt ToolBar
+
+The AIPrompt ToolBar renders buttons for the predefined views (Prompt, Output, and Command) and also allows you to add custom tools, which may invoke arbitrary commands or handlers.
+The toolbar buttons for the Prompt and Output views are always available, while the one for the Commands view is optional. Any custom buttons that you add will always appear after the view-related buttons.
+
+* [Built-in Tools](#built-in-tools)
+* [Custom Tools](#custom-tools)
+
+
+## Built-in Tools
+
+### AIPromptToolBarButton
+
+The AI Prompt ToolBar button is a plain button that you can click and it raises an event so the application can respond to that.
+
+You can add multiple buttons to the Telerik AIPrompt. To do that you should add the `` to the ``.
+
+### AIPromptToolBarButton parameters
+
+The `AIPromptToolBarButton` tag exposes parameters that allow you to customize the buttons:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type and Default Value | Description |
+| ----------- | ----------- | ----------- |
+| `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the AIPromptToolBarButton. You could use that class to cascade styles. |
+| `Icon` | `object` | Adds a font icon to the button. You can find more information on adding a font icon to a Telerik Component in [Telerik Font and Svg Icons article]({%slug common-features-icons%}#icon-in-telerik-component). |
+| `OnClick` | `EventCallback` | The onclick event handler. |
+| `ChildContent` | `RenderFragment` | The child content rendered within the button. |
+
+### AIPromptToolBarSpacer
+
+The spacer consumes the available empty space and push the rest of the tools next to one another.
+
+## Custom Tools
+
+To define custom tools within the ToolBar, use the `` tag, which is a standard Blazor `RenderFragment`.
+
+The example below omits any event handlers for brevity. Custom buttons are to be used for arbitrary logic which is not part of the AIPrompt component, thus feel free to attach the handlers you need.
+
+>caption Setting up the AIPrompt ToolBar
+
+````CSHTML
+
+
+ My Button
+
+
+
+ Insert
+
+ Insert above
+ Insert below
+
+
+
+
+
+
+@code {
+ private void HandlePromptRequest(AIPromptPromptRequestEventArgs args)
+ {
+ // handle the prompt request here.
+ }
+
+ private void OnToolBarButtonClick()
+ {
+ // handle the toolbar button click here.
+ }
+
+ private void OnSplitButtonClick()
+ {
+ // handle the split button click here.
+ }
+}
+````
+
+
+## Next Steps
+
+* [Customize the AIPrompt Views]({%slug aiprompt-views-overview%})
+* [Implement AIPrompt Templates]({%slug aiprompt-templates%})
+* [Handle AIPrompt Events]({%slug aiprompt-events%})
+
+## See Also
+
+* [Views Templates]({%slug aiprompt-views-templates%})
+* [Live Demo: AIPrompt Overview](https://demos.telerik.com/blazor-ui/aiprompt/overview)
\ No newline at end of file
diff --git a/components/aiprompt/views/commands.md b/components/aiprompt/views/commands.md
new file mode 100644
index 0000000000..6d66c997e2
--- /dev/null
+++ b/components/aiprompt/views/commands.md
@@ -0,0 +1,92 @@
+---
+title: Commands View
+page_title: AIPrompt - Commands View
+description: Explore the AIPrompt's Commands view that displays a set of predefined commands and learn how to define your custom commands.
+slug: aiprompt-views-commands
+tags: telerik,blazor,aiprompt,ai,prompt,commands
+published: True
+position: 30
+---
+
+# AIPrompt Commands View
+
+The Commands View displays a set of predefined commands, which the user can browse and execute. The commands are passed to the component through the `Commands` parameter, which expects a collection of type `List`. You can also organize commands in a hierarchy, through parent-child relationships.
+
+>note Parent commands cannot be directly executed, and only one level of nesting is supported.
+
+## AIPromptCommandDescriptor Parameters
+
+The following properties enable you to customize each command:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type | Description |
+| ----------- | ----------- | ----------- |
+| `Id` | `string` | The `Id` of the command. |
+| `Title` | `string` | The title of the command. Rendered as text within the Command view. |
+| `Icon` | `object` | The [Telerik Font or SVG icon]({%slug common-features-icons%}) rendered before the title within the Command view. |
+| `Children` | `List` | The nested commands (if any) of the command. |
+
+>caption Using the `Commands` parameter to pass a collection of predefined commands to the AIPrompt for Blazor
+
+````CSHTML
+
+
+
+@code {
+ private List PromptCommands { get; set; } = new List()
+ {
+ new AIPromptCommandDescriptor() { Id = "1", Title = "Correct Spelling and grammar", Icon = SvgIcon.SpellChecker },
+ new AIPromptCommandDescriptor() { Id = "2", Title = "Change Tone", Icon = SvgIcon.TellAFriend,
+ Children = new List
+ {
+ new AIPromptCommandDescriptor() { Id = "3", Title = "Professional" },
+ new AIPromptCommandDescriptor() { Id = "4", Title = "Conversational" },
+ new AIPromptCommandDescriptor() { Id = "5", Title = "Humorous" },
+ new AIPromptCommandDescriptor() { Id = "6", Title = "Empathic" },
+ new AIPromptCommandDescriptor() { Id = "7", Title = "Academic" },
+ }
+ },
+ new AIPromptCommandDescriptor() { Id = "8", Title = "Change Formality", Icon = SvgIcon.ApplyFormat,
+ Children = new List
+ {
+ new AIPromptCommandDescriptor() { Id = "9", Title = "Casual" },
+ new AIPromptCommandDescriptor() { Id = "10", Title = "Neutral" },
+ new AIPromptCommandDescriptor() { Id = "11", Title = "Formal" },
+ }
+ },
+ new AIPromptCommandDescriptor() { Id = "12", Title = "Translate", Icon = SvgIcon.EditTools,
+ Children = new List
+ {
+ new AIPromptCommandDescriptor() { Id = "13", Title = "English" },
+ new AIPromptCommandDescriptor() { Id = "14", Title = "Bulgarian" },
+ new AIPromptCommandDescriptor() { Id = "15", Title = "Spanish" },
+ }
+ },
+ new AIPromptCommandDescriptor() { Id = "16", Title = "Simplify", Icon = SvgIcon.MinWidth },
+ new AIPromptCommandDescriptor() { Id = "17", Title = "Expand", Icon = SvgIcon.MaxWidth },
+ };
+
+ private void HandlePromptRequest(AIPromptPromptRequestEventArgs args)
+ {
+ // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
+ args.Output = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel pretium lectus quam id leo in.";
+ }
+
+ private void HandleCommandExecute(AIPromptCommandExecuteEventArgs args)
+ {
+ // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
+ args.Output = "Nisl pretium fusce id velit ut tortor pretium. A pellentesque sit amet porttitor eget dolor. Lectus mauris ultrices eros in cursus turpis massa tincidunt.";
+ }
+}
+````
+
+## See Also
+
+ * [Live Demo: AIPrompt](https://demos.telerik.com/blazor-ui/aiprompt/overview)
+ * [Views Overview]({%slug aiprompt-views-overview%})
+ * [Prompt View]({%slug aiprompt-views-prompt%})
+ * [Output View]({%slug aiprompt-views-output%})
+ * [Views Templates]({%slug aiprompt-views-templates%})
\ No newline at end of file
diff --git a/components/aiprompt/views/output.md b/components/aiprompt/views/output.md
new file mode 100644
index 0000000000..323da1a0ab
--- /dev/null
+++ b/components/aiprompt/views/output.md
@@ -0,0 +1,60 @@
+---
+title: Output View
+page_title: AIPrompt - Output View
+description: Explore the AIPrompt Output view that shows the responses generated by the AI service, and learn how to handle output rating.
+slug: aiprompt-views-output
+tags: telerik,blazor,aiprompt,ai,prompt,output
+published: True
+position: 20
+---
+
+# AIPrompt Output View
+
+The Output view shows the responses generated by the underlying AI service. Each response renders in its dedicated output card and provides two options to the user—to copy the content of the response or to retry the request. The Output view is activated through interaction—once the user fills out a prompt within the Prompt view and requests a response, the Output view will become active.
+
+If the `ShowOutputRating` is enabled on the component level, the output card will also feature two additional options-to upvote or downvote the response. To handle this interaction, you can use the `OnOutputRate` event. For more information on how to handle the event, refer to the [AIPrompt events]({%slug aiprompt-events%}) article.
+
+By default, the Output view is rendered and is part of the predefined views. However, if you provide a render fragment of type `AIPromptViews` to the `TelerikAIPrompt` tag, you override the default rendering, meaning you must explicitly add `AIPromptOutputView` tag within it.
+
+>caption Use the `ButtonText` and `ButtonIcon` to alter the appearance of view button.
+
+````CSHTML
+
+
+
+
+
+
+
+@code {
+ private string Prompt { get; set; }
+}
+````
+
+>caption Use the `ShowOutputRating` to include visuals related to upvoting or downvoting a specific output.
+
+````CSHTML
+
+
+
+
+
+
+
+@code {
+ private string Prompt { get; set; }
+
+ private void OnOutputRateHandler(AIPromptOutputRateEventArgs args)
+ {
+ // Handle the output rate event here
+ }
+}
+````
+
+## See Also
+
+ * [Live Demo: AIPrompt](https://demos.telerik.com/blazor-ui/aiprompt/overview)
+ * [Views Overview]({%slug aiprompt-views-overview%})
+ * [Prompt View]({%slug aiprompt-views-prompt%})
+ * [Commands View]({%slug aiprompt-views-commands%})
+ * [Views Templates]({%slug aiprompt-views-templates%})
\ No newline at end of file
diff --git a/components/aiprompt/views/overview.md b/components/aiprompt/views/overview.md
new file mode 100644
index 0000000000..810a1424be
--- /dev/null
+++ b/components/aiprompt/views/overview.md
@@ -0,0 +1,81 @@
+---
+title: Overview
+page_title: AIPrompt - Views Overview
+description: Views basics in the AIPrompt for Blazor.
+slug: aiprompt-views-overview
+tags: telerik,blazor,aiprompt,ai,prompt,view,overview
+published: True
+position: 0
+---
+
+# AIPrompt Views
+
+The AIPrompt component provides three predefined views and also lets you create custom views. Through interaction with the component, the user can change the currently active view.
+
+The available built-in views are:
+
+* [Prompt View]({%slug aiprompt-views-prompt%})
+* [Output View]({%slug aiprompt-views-output%})
+* [Commands View]({%slug aiprompt-views-commands%})
+
+## Parameters
+
+The AIPrompt views provide various parameters that allow you to configure the component:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `ButtonText` | `string` | The text rendered within the toolbar button associated with the view. |
+| `ButtonIcon` | `object` | The [Telerik Font or SVG icon]({%slug common-features-icons%}) rendered within the toolbar button associated with the view. |
+| `ViewTemplate` | `RenderFragment` | The template controlling the rendering of the view's content. Read more in the [Templates]({%slug aiprompt-views-templates%}#viewtemplate) article. |
+| `FooterTemplate` | `RenderFragment` | The template controlling the rendering of the view's footer. Read more in the [Templates]({%slug aiprompt-views-templates%}#footertemplate) article. |
+
+By default, the AIPrompt will always render both the Prompt and the Output view. The Commands view will be rendered only if you pass a custom set of commands through the `Commands` parameter:
+
+
+````CSHTML
+@* The user can only navigate between the Prompt and Output views - the Commands view, for example, will not be rendered, as no commands have been passed to the `Commands` parameter. *@
+
+
+
+@code {
+ private void HandlePromptRequest(AIPromptPromptRequestEventArgs args)
+ {
+ // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
+ args.Output = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+ }
+}
+````
+
+>caption Using the `ButtonText` and `ButtonIcon` parameters to customize the appearance of the toolbar buttons
+
+
+````CSHTML
+@* The example showcases how to customize the appearance of the toolbar through the `ButtonText` and `ButtonIcon` parameters. *@
+
+
+
+
+
+
+
+
+
+@code {
+ private void HandlePromptRequest(AIPromptPromptRequestEventArgs args)
+ {
+ // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
+ args.Output = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel pretium lectus quam id leo in.";
+ }
+}
+````
+
+## See Also
+
+ * [Live Demo: AIPrompt](https://demos.telerik.com/blazor-ui/aiprompt/overview)
+ * [Prompt View]({%slug aiprompt-views-prompt%})
+ * [Output View]({%slug aiprompt-views-output%})
+ * [Commands View]({%slug aiprompt-views-commands%})
+ * [Views Templates]({%slug aiprompt-views-templates%})
+
diff --git a/components/aiprompt/views/prompt.md b/components/aiprompt/views/prompt.md
new file mode 100644
index 0000000000..58c304c0a8
--- /dev/null
+++ b/components/aiprompt/views/prompt.md
@@ -0,0 +1,44 @@
+---
+title: Prompt View
+page_title: AIPrompt - Prompt View
+description: Explore the AIPrompt Prompt view that allows users to type their queries, and learn how to pass a set of prompt suggestions.
+slug: aiprompt-views-prompt
+tags: telerik,blazor,aiprompt,prompt
+published: True
+position: 10
+---
+
+# AIPrompt Prompt View
+
+The Prompt view features the prompt input, where users can type their query. It also contains a button to trigger a response request.
+
+Additionally, the Prompt view can display prompt suggestions related to the prompt itself. To control these suggestions, use the `PromptSuggestions` parameter. The user can select any of the available suggestions, which in turn will populate the prompt input with the selected suggestion. This interaction will not trigger a response request right away—the user can modify the suggestion first.
+
+>caption Using `PromptSuggestions` to display a set of predefined prompts or hints.
+
+````CSHTML
+
+
+@code {
+ private List PromptSuggestions { get; set; } = new List()
+ {
+ "Act as a marketing specialist and content writer and write a compelling [type of text] that speaks directly to my [ideal customer persona] and encourages them to take [desired action] on my [website/product].",
+ "I'm looking for a [type of text] that will convince [ideal customer persona] to sign up for my [program/subscription] by explaining the value it brings and the benefits they'll receive.",
+ "Write a Twitter thread idea that will both go viral and attract high-quality leads for my [product/service] with a strong call-to-action and compelling visuals."
+ };
+
+ private void HandlePromptRequest(AIPromptPromptRequestEventArgs args)
+ {
+ // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
+ args.Output = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+ }
+}
+````
+
+## See Also
+
+ * [Live Demo: AIPrompt](https://demos.telerik.com/blazor-ui/aiprompt/overview)
+ * [Views Overview]({%slug aiprompt-views-overview%})
+ * [Prompt View]({%slug aiprompt-views-prompt%})
+ * [Output View]({%slug aiprompt-views-output%})
+ * [Views Templates]({%slug aiprompt-views-templates%})
\ No newline at end of file
diff --git a/components/aiprompt/views/templates.md b/components/aiprompt/views/templates.md
new file mode 100644
index 0000000000..a0af563104
--- /dev/null
+++ b/components/aiprompt/views/templates.md
@@ -0,0 +1,89 @@
+---
+title: Templates
+page_title: AIPrompt - Views Templates
+description: Explore the View Templates in the AIPrompt component for Blazor. Learn how to use them to customize the appearance of the individual views.
+slug: aiprompt-views-templates
+tags: telerik,blazor,aiprompt,ai,prompt,templates
+published: True
+position: 40
+---
+
+# AIPrompt Views Templates
+
+This article explains the available templates for the views of the AIPrompt for Blazor.
+
+- [View Template](#view-template)
+- [Footer Template](#footer-template)
+
+
+## View Template
+
+The `ViewTemplate` allows you to control the rendering of view's content. You can define it for each of the predefined views:
+
+>caption Using the `ViewTemplate` to alter the appearance of the Prompt view
+
+````CSHTML
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private TelerikAIPrompt AIPromptRef { get; set; }
+
+ private string Prompt { get; set; }
+}
+````
+
+## Footer Template
+
+The `FooterTemplate` allows you to control the rendering of the footer within individual views.
+
+>caption Using the `FooterTemplate` to define a custom button.
+
+````CSHTML
+
+
+
+
+ Generate
+
+
+
+
+
+
+
+@code {
+ private TelerikAIPrompt AIPromptRef { get; set; }
+
+ private string Prompt { get; set; }
+
+ private void HandlePromptRequest()
+ {
+ // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
+ AIPromptRef.AddOutput(
+ output: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+ title: "Generated response",
+ subtitle: string.Empty,
+ prompt: Prompt,
+ commandId: null,
+ openOutputView: true);
+ }
+}
+````
+
+## See Also
+
+ * [Live Demo: AIPrompt](https://demos.telerik.com/blazor-ui/aiprompt/overview)
+ * [Views Overview]({%slug aiprompt-views-overview%})
+ * [Prompt View]({%slug aiprompt-views-prompt%})
+ * [Output View]({%slug aiprompt-views-output%})
+ * [Commands View]({%slug aiprompt-views-commands%})
\ No newline at end of file