syncfusion-aspnetmvc-inline-ai-assist

name	syncfusion-aspnetmvc-inline-ai-assist
description	Implement Syncfusion ASP.NET MVC Inline AI Assist control. Use when building AI-powered inline text editing, prompt-response UIs, command popups, toolbar customization, response actions, and localization in ASP.NET MVC Razor views. Triggers when user needs to integrate InlineAIAssist, configure CommandSettings, ResponseSettings, InlineToolbarSettings, EditorTemplate, ResponseTemplate, or call methods like addResponse, executePrompt, showPopup, hidePopup in ASP.NET MVC applications.
metadata	{"author":"Syncfusion Inc","version":"34.1.29"}

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" onclick="onBtnClick()">AI 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

Event	Trigger
Created	Component rendering is complete
PromptRequest	User submits a prompt (or executePrompt is called)
Open	The popup is opened
Close	The popup is closed

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

Property	Type	Purpose
RelateTo	string / HTMLElement	Anchor element for popup positioning
Target	string / HTMLElement	Container element where popup appends
ResponseMode	string	Popup (default) or Inline
Prompt	string	Default prompt text
Prompts	array	Pre-loaded prompt-response collection
Placeholder	string	Textarea placeholder (default: Ask or generate AI content..)
PopupWidth	string	Popup width (default: 400px)
PopupHeight	string	Popup height (default: auto)
ZIndex	int	Popup z-index (default: 1000)
CssClass	string	Custom CSS class on popup
EnableRtl	bool	Right-to-left layout
Locale	string	Culture code for localization
CommandSettings	object	Command popup configuration
ResponseSettings	object	Response action popup configuration
InlineToolbarSettings	object	Inline toolbar items and position
EditorTemplate	string	Custom footer/editor area template
ResponseTemplate	string	Custom response item template

---

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; }