OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-inline-ai-assist
Implement Blazor Inline AI Assist component for seamless AI-powered text editing and content generation. Covers setup in WebAssembly and Web App projects, event handling, AI provider integration (Azure OpenAI, OpenAI, Ollama, Gemini), customization, accessibility, and enterprise deployment patterns.
npx skills add syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-inline-ai-assist
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.
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:
📄 Read: references/getting-started.md
📄 Read: references/events-and-methods.md
📄 Read: references/commands-and-toolbar.md
📄 Read: references/ai-integration.md
📄 Read: references/customization-and-response.md
📄 Read: references/accessibility-and-globalization.md
Here's a minimal working example to verify your setup:
| Property | Type | Purpose |
|---|---|---|
RelateTo | string | Anchor element selector for popup positioning (e.g., "#aiButton") |
Target | string | DOM selector where the component container is appended (e.g., "body", "#app") |
Placeholder | string | Input field placeholder text (default: "Enter prompt") |
ResponseMode | ResponseDisplayMode | Display mode: Inline (at cursor) or Popup (overlay) |
PopupWidth | string | Popup width when ResponseMode is Popup (e.g., "400px") |
PopupHeight | string | Popup height for response display area (e.g., "300px" or "auto") |
ZIndex | int | CSS z-index for popup layering |
EnableStreaming | bool | Enable word-by-word streaming responses (default: false) |
CssClass | string | Custom CSS class for styling |
PromptRequested | EventCallback<PromptRequestedEventArgs> | Triggered when user submits a prompt |
Created | EventCallback | Fires when component is created and ready |
Opened | EventCallback<OpenEventArgs> | Triggered when popup opens |
Closed | EventCallback | Triggered when popup closes |
Prompts | IEnumerable<PromptRecord> | Read-only collection of submitted prompts and their responses |
The Inline AI Assist component provides async methods for programmatic control:
Opens the AI Assist popup at the RelatedTo element position:
Closes the AI Assist popup:
Sets or streams the AI response content:
Programmatically execute a prompt without user input:
Opens the command menu popup programmatically. The main popup should be open first.
Closes the command menu popup programmatically.
<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);
}
}<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" }
};
}<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" }
};
}@ref="inlineAssist"
private SfInlineAIAssist inlineAssist;
private async Task OpenAIAssist()
{
await inlineAssist.ShowPopupAsync();
}private async Task CloseAIAssist()
{
await inlineAssist.HidePopupAsync();
}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);
}private async Task ExecuteSamplePrompt()
{
await inlineAssist.ExecutePromptAsync("Summarize the selected text in 2 sentences");
}private async Task OpenCommands()
{
await inlineAssist.ShowPopupAsync();
await inlineAssist.ShowCommandPopupAsync();
}private async Task CloseCommands()
{
await inlineAssist.HideCommandPopupAsync();
}