New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

    WebForms AIPrompt Overview

    About Telerik WebForms AIPrompt for ASP.NET AJAX

    The WebForms AIPrompt is a standalone view control that allows users to provide pre-determined ways to interact with a trained language model of your choice. It comprises an input field, a customizable menu with pre-defined commands, and user-selectable options for query management.

    In this demo, you can see the AIPrompt within a Window, which is opened from a FloatingActionButton. Upon generating text from the AI component, the result will be displayed in a TextArea that imitates an e-mail message.

    Telerik WebForms AIPrompt is part of Telerik UI for ASP.NET AJAX, which is a comprehensive toolset containing over 120 controls and taking care of the common functionalities, allowing you more time to focus mainly on the business-specific logic of your application.

    For more information about the Telerik WebForms AIPrompt Control, please refer to the documentation.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • prompt-data.js
      • prompt-data.js
      • script.js
    • styles.css
    <%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Demos.AIPrompt.Overview.DefaultCS"  %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
     
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <link href="styles.css" rel="Stylesheet" type="text/css" />
        <script src="prompt-data.js"></script>
        <script src="script.js"></script>
    </head>
     
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <style>
            .mysparkle .k-fab-icon::before {
                font-family: "KendoWebComponentsIcons";
                content: "\e088";
            }
     
            .k-spacer {
                flex: 1 1 auto;
            }
        </style>
        <div class="demo-container flex-center">
            <telerik:RadWindow runat="server" ID="RadWindow1" Width="500" Height="525" VisibleOnPageLoad="false" Behaviors="Move">
                <ContentTemplate>
                    <telerik:RadAIPrompt ID="RadAIPrompt1" runat="server" Width="450px">
                        <ToolbarItems>
                            <telerik:AIPromptToolbarItem Type="Spacer" />
                            <telerik:AIPromptToolbarItem Type="Button" Icon="x" Click="closeWindow" />
                        </ToolbarItems>
                        <Views>
                            <telerik:AIPromptView Type="Prompt" />
                            <telerik:AIPromptView Type="Output" />
                            <telerik:AIPromptView Type="Commands" />
                        </Views>
                        <PromptCommands>
                            <telerik:ViewPromptCommand ID="Command1" Text="Change Formality" Icon="edit-tools">
                                <Items>
                                    <telerik:ViewPromptCommand ID="Command1_1" Text="Casual" />
                                    <telerik:ViewPromptCommand ID="Command1_2" Text="Formal" />
                                    <telerik:ViewPromptCommand ID="Command1_3" Text="Neutral" />
                                </Items>
                            </telerik:ViewPromptCommand>
                            <telerik:ViewPromptCommand ID="Command2" Text="Change Language" Icon="brush">
                                <Items>
                                    <telerik:ViewPromptCommand ID="Command2_1" Text="German" />
                                    <telerik:ViewPromptCommand ID="Command2_2" Text="English" />
                                    <telerik:ViewPromptCommand ID="Command2_3" Text="Spanish" />
                                </Items>
                            </telerik:ViewPromptCommand>
                            <telerik:ViewPromptCommand ID="Command3" Text="Simplify" Icon="min-width" />
                            <telerik:ViewPromptCommand ID="Command4" Text="Extend" Icon="arrows-left-right" />
                        </PromptCommands>
                        <ClientEvents OnPromptRequest="onPromptRequest" OnCommandExecute="onCommandExecute" />
                    </telerik:RadAIPrompt>
                </ContentTemplate>
            </telerik:RadWindow>
     
            <div class="email-wrapper">
                <div class="sidebar"></div>
                <div class="email-container">
                    <div class="email-header">
                        <div class="avatar"></div>
                        <span class="title">New E-mail</span>
                    </div>
                    <div class="rect-field-sm"></div>
                    <div class="rect-field"></div>
                    <div class="rect-field"></div>
                    <label class="message-label">Message body</label>
                    <div>
                        <textarea id="textarea1" class="textarea"></textarea>
     
                        <telerik:RadFloatingActionButton ID="FAB1" runat="server" Icon="sparkle" CssClass="mysparkle" Align="BottomEnd" PositionMode="Absolute">
                            <ClientEvents OnClick="onClick" />
                        </telerik:RadFloatingActionButton>
                    </div>
                </div>
            </div>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance