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