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

Client-side API

  • Demo Configurator
Change Views
Get Views
Add Output

The AIPrompt comes with a set of API configurations. This demo shows how to utilize some of its functions such as changing and getting the views, and adding outputs dynamically.

You can check the full list of the supported API methods in the WebForms AIPrompt Client-Side Programming documentation.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • script.js
  • style.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>
    <script src="script.js"></script>
    <link href="style.css" rel="stylesheet" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium flex-center">
        <telerik:RadWindowManager runat="server" />

        <telerik:RadAIPrompt ID="RadAIPrompt1" runat="server" Width="450px">
            <Views>
                <telerik:AIPromptView Type="Prompt" />
                <telerik:AIPromptView Type="Output" />
                <telerik:AIPromptView Type="Commands" />
            </Views>
            <PromptCommands>
                <telerik:ViewPromptCommand ID="Command1" Text="Simplify" Icon="min-width" />
                <telerik:ViewPromptCommand ID="Command2" Text="Extend" Icon="arrows-left-right" />
            </PromptCommands>
            <ClientEvents OnPromptRequest="onPromptRequest" />
        </telerik:RadAIPrompt>
    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Change Views" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbSize" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeView">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Prompt" Value="0" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Output" Value="1" />
                                    <telerik:RadComboBoxItem Text="Commands" Value="2" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Get Views" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button Width="100" ID="Button1" Text="Get Active View" AutoPostBack="false" runat="server" OnClientClicked="getAttiveView" />
                        </li>
                        <li>
                            <qsf:Button Width="100" ID="Button2" Text="Get All Views" AutoPostBack="false" runat="server" OnClientClicked="getAllViews" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Title="Add Output" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <telerik:RadTextBox ID="TextBox1" runat="server" />
                        </li>
                        <li>
                            <qsf:Button runat="server" ID="RadButton2" Text="Add Output" AutoPostBack="false" OnClientClicked="addOutput" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance