Syncfusion Aspnetmvc Inline AI Assist

Syncfusion ASP.NET MVC Inline AI Assist

The Inline AI Assist control provides AI-powered text processing within ASP.NET MVC applications. It renders as a floating popup anchored to a trigger element, supporting prompt input, response display, command shortcuts, and toolbar customization.

Quick Start Example

@using Syncfusion.EJ2.InteractiveChat

<div style="height: 350px; width: 650px;">
    <button id="aiBtn" class="e-btn e-primary" Assist</button>

    @Html.EJS().InlineAIAssist("myAssist")
        .RelateTo("#aiBtn")
        .Created("onCreated")
        .PromptRequest("onPromptRequest")
        .ResponseSettings(new Syncfusion.EJ2.InteractiveChat.InlineAIAssistResponseSettings {
            ItemSelect = "onItemSelect"
        })
        .Render()
</div>

<script>
    var inlineAssist;

    function onCreated() { inlineAssist = this; }

    function onPromptRequest(args) {
        setTimeout(function () {
            inlineAssist.addResponse('Your AI response here.');
        }, 1000);
    }

    function onItemSelect(args) {
        if (args.command.label === 'Accept') {
            document.getElementById('content').innerHTML = inlineAssist.prompts[inlineAssist.prompts.length - 1].response;
            inlineAssist.hidePopup();
        } else if (args.command.label === 'Discard') {
            inlineAssist.hidePopup();
        }
    }

    function onBtnClick() {
        if (inlineAssist) inlineAssist.showPopup();
    }
</script>

public ActionResult Index()
{
    return View();
}

Documentation and Navigation Guide

Getting Started & Core Setup

📄 Read: references/getting-started.md

When user needs to:

• Install NuGet package, register namespace, add CDN stylesheet/script
• Configure RelateTo (anchor element) or Target (append container)
• Switch between Popup and Inline response display modes
• Set up the script manager in _Layout.cshtml

Inline Assist Configuration

📄 Read: references/inline-assist-config.md

When user needs to:

• Set default Prompt text or pre-load Prompts collection with prior conversations
• Customize Placeholder, PopupWidth, PopupHeight, ZIndex
• Apply custom CSS via CssClass

Commands & Response Settings

📄 Read: references/commands-and-response.md

When user needs to:

• Add a command popup (CommandSettings) with grouped shortcut actions
• Configure command item properties: label, prompt, iconCss, groupBy, tooltip, disabled
• Control command popup dimensions (PopupWidth, PopupHeight)
• Handle ItemSelect event on command selection
• Customize the response action popup (ResponseSettings) with built-in or custom items
• Group response items, disable items, handle response ItemSelect

Toolbar & Templates

📄 Read: references/toolbar-and-templates.md

When user needs to:

• Add custom items to the inline toolbar (InlineToolbarSettings)
• Configure toolbar item properties: type, iconCss, text, align, tooltip, cssClass, disabled, visible
• Set toolbar position (Inline or Bottom)
• Embed a custom widget (dropdown, input) via Template (type: Input)
• Replace the footer editor with EditorTemplate
• Customize response display with ResponseTemplate

Methods & Events

📄 Read: references/methods-and-events.md

When user needs to:

• Call addResponse, executePrompt programmatically
• Show/hide the main popup: showPopup, hidePopup
• Show/hide the command popup: showCommandPopup, hideCommandPopup
• Handle lifecycle events: created, promptRequest, open, close

Globalization

📄 Read: references/globalization.md

When user needs to:

• Localize UI strings (send button, stop responding, thinking indicator)
• Enable RTL layout with EnableRtl

Key Properties at a Glance

Common Patterns

Pattern 1 — Connect to a Real AI Service

In onPromptRequest, call your AI endpoint and pass the result to addResponse:

function onPromptRequest(args) {
    fetch('/api/ai', {
        method: 'POST',
        body: JSON.stringify({ prompt: args.prompt }),
        headers: { 'Content-Type': 'application/json' }
    })
    .then(r => r.json())
    .then(data => inlineAssist.addResponse(data.response));
}

Pattern 2 — Apply Accepted Response to DOM

function onItemSelect(args) {
    if (args.command.label === 'Accept') {
        var editable = document.getElementById('editableText');
        editable.innerHTML = '<p>' + inlineAssist.prompts[inlineAssist.prompts.length - 1].response + '</p>';
        inlineAssist.hidePopup();
    } else if (args.command.label === 'Discard') {
        inlineAssist.hidePopup();
    }
}

Pattern 3 — Get Component Instance

Always capture this in the Created event; all method calls require this reference:

var inlineAssist;
function onCreated() { inlineAssist = this; }