Blazor Inline AI Assist Component Skill

The Inline AI Assist component enables developers to build AI-powered text editing experiences in Blazor applications. It provides a flexible UI for prompt entry, configurable AI provider integration, and comprehensive customization options for enterprise applications.

Component Overview

The SfInlineAIAssist component enables users to prompt AI services and receive intelligent responses directly within their interface, with flexible display modes and extensive customization options such as:

• Dual Response Modes: Display AI responses inline at the cursor position or in a popup overlay for flexible UI integration.
• Command Actions: Display predefined commands and quick-action suggestions using mention-style popups with customizable grouping and icons via CommandMenu.
• Response Actions: Configurable actions such as Accept, Discard, and custom items using ResponseActions to manage AI-generated content.
• Action Toolbar: Includes a toolbar in the prompt input area with a send button and custom actions.
• Markdown: Automatic conversion of Markdown responses to HTML for rich content rendering.
• Streaming Responses: Supports word-by-word or chunk-based streaming with real-time visual feedback and stop controls.
• Indicators: Shows processing states using inline indicators and skeleton loading in popup mode.
• Customization: Supports customization of templates, appearance, and response rendering.

Navigation Guide

Getting Started

📄 Read: [references/getting-started.md](references/getting-started.md)

• WebAssembly App setup (Visual Studio, VS Code, .NET CLI)
• Web App setup with interactive render modes
• NuGet package installation (Syncfusion.Blazor.InteractiveChat)
• Namespace imports and initial component rendering
• Minimal working example to verify setup

Events and Methods

📄 Read: [references/events-and-methods.md](references/events-and-methods.md)

• Events: Created, PromptRequested, Opened, Closed
• Methods: AddResponse, RefreshContent, ShowPopupAsync, HidePopupAsync
• Event handling patterns and error management
• Response lifecycle and management
• Real-world event scenarios

Commands and Toolbar

📄 Read: [references/commands-and-toolbar.md](references/commands-and-toolbar.md)

• Command configuration with labels, prompts, icons, and grouping
• CommandMenu tag helper and command popup sizing
• Inline toolbar with custom action buttons
• ItemSelect event for commands and ItemClick event for toolbar
• Real-world command examples (Summarize, Rewrite, Translate)

AI Provider Integration

📄 Read: [references/ai-integration.md](references/ai-integration.md)

• Microsoft.Extensions.AI framework setup
• Azure OpenAI integration step-by-step
• OpenAI direct integration
• Ollama local LLM integration
• Gemini API integration
• LiteLLM proxy setup and configuration
• Provider comparison and selection guidance

Customization and Response Settings

📄 Read: [references/customization-and-response.md](references/customization-and-response.md)

• ResponseMode property (Inline vs Popup display modes, dynamic switching)
• PopupWidth, PopupHeight, ZIndex configuration
• Placeholder, RelateTo, Target, EnableStreaming properties
• Response settings (streaming, formatting, templates)
• Custom response items configuration
• Appearance customization with CSSClass
• EditorTemplate and ResponseTemplate usage
• Responsive design patterns

Accessibility and Globalization

📄 Read: [references/accessibility-and-globalization.md](references/accessibility-and-globalization.md)

• WCAG 2.2 AA compliance features
• Keyboard navigation support (Tab, Arrow Keys, Enter)
• ARIA attributes and screen reader support
• Globalization and RTL (Right-to-Left) support
• Localization configuration
• Mobile device accessibility

Quick Start Example

Here's a minimal working example to verify your setup:

@using Syncfusion.Blazor.InteractiveChat
@using Syncfusion.Blazor.Buttons

<div style="height: 350px; width: 650px;">
    <SfButton id="aiButton" IsPrimary="true" @onclick="OnButtonClick">
        Ask AI
    </SfButton>
    <div id="editableText" contenteditable="true" style="border: 1px solid #ddd; padding: 10px; margin-top: 10px;">
        <p>Enter your text here for AI processing...</p>
    </div>
    <SfInlineAIAssist @ref="inlineAssist" 
                      RelateTo="#aiButton" 
                      PromptRequested="OnPromptRequested">
        <ResponseActions ItemSelect="OnResponseItemSelect"></ResponseActions>
    </SfInlineAIAssist>
</div>

@code {
    private SfInlineAIAssist inlineAssist = new();

    private async Task OnButtonClick()
    {
        await inlineAssist.ShowPopupAsync();
    }

    private async Task OnPromptRequested(PromptRequestedEventArgs args)
    {
        // Connect to your AI provider here (Azure OpenAI, OpenAI, etc.)
        // For this example, return a simple response
        string response = $"Processing your request: {args.Prompt}";
        await inlineAssist.UpdateResponseAsync(response, true);
    }

    private async Task OnResponseItemSelect(ResponseItemSelectEventArgs args)
    {
        if (args.Item.Label == "Accept")
        {
            await inlineAssist.HidePopupAsync();
        }
        else if (args.Item.Label == "Discard")
        {
            await inlineAssist.HidePopupAsync();
        }
    }
}

Common Patterns

Pattern 1: Content Summarization

<SfButton id="summarizeButton" @onclick="OnSummarizeClick">
    Summarize
</SfButton>

<SfInlineAIAssist @ref="inlineAssist" 
                  RelateTo="#summarizeButton"
                  PromptRequested="OnSummarizeRequest">
</SfInlineAIAssist>

@code {
    private async Task OnSummarizeClick()
    {
        await inlineAssist.ShowPopupAsync();
    }

    private async Task OnSummarizeRequest(PromptRequestedEventArgs args)
    {
        // Send to AI provider with system prompt:
        // "Summarize the following text in 2-3 sentences: " + selectedText
        await inlineAssist.UpdateResponseAsync(summaryResult, true);
    }
}

Pattern 2: Custom Commands

<SfInlineAIAssist @ref="inlineAssist" PromptRequested="OnPromptRequested">
    <CommandMenu Commands="commandItems"></CommandMenu>
</SfInlineAIAssist>

@code {
    private List<CommandItem> commandItems = new List<CommandItem>
    {
        new CommandItem { Label = "Summarize", Prompt = "Summarize this text", IconCss = "e-icons e-collapse-2" },
        new CommandItem { Label = "Translate", Prompt = "Translate to Spanish", IconCss = "e-icons e-translate" },
        new CommandItem { Label = "Rewrite", Prompt = "Rewrite in professional tone", IconCss = "e-icons e-edit" }
    };
}

Pattern 3: Response Management

<SfInlineAIAssist @ref="inlineAssist" PromptRequested="OnPromptRequested">
    <ResponseActions Items="customResponseItems" ItemSelect="OnResponseAction">
    </ResponseActions>
</SfInlineAIAssist>

@code {
    private List<ResponseItem> customResponseItems = new()
    {
        new ResponseItem { Label = "Regenerate", IconCss = "e-icons e-refresh", Tooltip = "Generate new response" },
        new ResponseItem { Label = "Copy", IconCss = "e-icons e-copy", Tooltip = "Copy to clipboard" },
        new ResponseItem { Label = "Insert", IconCss = "e-icons e-insert", Tooltip = "Insert into document" }
    };
}

Key Props

Programmatic Methods

The Inline AI Assist component provides async methods for programmatic control:

ShowPopupAsync()

Opens the AI Assist popup at the RelatedTo element position:

@ref="inlineAssist"

private SfInlineAIAssist inlineAssist;

private async Task OpenAIAssist()
{
    await inlineAssist.ShowPopupAsync();
}

HidePopupAsync()

Closes the AI Assist popup:

private async Task CloseAIAssist()
{
    await inlineAssist.HidePopupAsync();
}

UpdateResponseAsync(string response, bool isFinal)

Sets or streams the AI response content:

private async Task OnPromptRequested(PromptRequestedEventArgs args)
{
    // Non-streaming response
    await inlineAssist.UpdateResponseAsync("Generated response", true);
    
    // Streaming response (call multiple times)
    foreach (var chunk in streamedResponse)
    {
        await inlineAssist.UpdateResponseAsync(chunk, false);
    }
    // Final call with isFinal=true
    await inlineAssist.UpdateResponseAsync(lastChunk, true);
}

ExecutePromptAsync(string prompt)

Programmatically execute a prompt without user input:

private async Task ExecuteSamplePrompt()
{
    await inlineAssist.ExecutePromptAsync("Summarize the selected text in 2 sentences");
}

ShowCommandPopupAsync()

Opens the command menu popup programmatically. The main popup should be open first.

private async Task OpenCommands()
{
    await inlineAssist.ShowPopupAsync();
    await inlineAssist.ShowCommandPopupAsync();
}

HideCommandPopupAsync()

Closes the command menu popup programmatically.

private async Task CloseCommands()
{
    await inlineAssist.HideCommandPopupAsync();
}

Common Use Cases

1. Content Summarization - Summarize selected text with AI
2. Grammar & Tone Refinement - Rewrite content in professional tone
3. Translation - Translate selected text to different languages
4. Code Generation - Generate code snippets from descriptions
5. Email Composition - Draft emails with AI assistance
6. Form Completion - Auto-fill form fields with AI suggestions