MemoSmartAutoComplete Class

Implements AI-powered Smart Autocomplete functionality in the Blazor Memo component.

Namespace: DevExpress.AIIntegration.Blazor.Editors

Assembly: DevExpress.AIIntegration.Blazor.Editors.v25.2.dll

Declaration

public class MemoSmartAutoComplete :
    ComponentBase,
    IDisposable

Remarks

The Memo component includes an AI-powered Smart Autocomplete extension that helps users compose text. As users type, an AI service analyzes their input and context and generates relevant text suggestions.

Users can interact with suggestions in the following ways:

Press Tab to accept a suggestion.
Press Esc or Backspace, continue typing, or click outside the editor to dismiss a suggestion.

Blazor Memo — AI Smart Autocomplete

Follow the steps below to add the Smart Autocomplete extension to the Memo component:

Register an AI model and a service.

The AI-powered Smart Autocomplete extension for Memo is compatible with major cloud AI providers and self-hosted language models. Its architecture also allows you to integrate custom AI providers or implement support for proprietary, in-house LLMs.

For a complete list of supported AI providers and detailed integration instructions, refer to the following help topic: DevExpress AI-powered Extensions for Blazor.

Note
DevExpress AI-powered extensions operate on a “bring your own key” (BYOK) model. We do not provide a proprietary REST API or bundled language models (LLMs/SLMs).

You can either deploy a self-hosted model or connect to a cloud AI provider and obtain necessary connection parameters (endpoint, API key, language model identifier, and so on). These parameters must be configured at application startup to register an AI client and enable extension functionality.
Register the DevExpress.AIIntegration.Blazor.Editors namespace in the Components/Imports.razor file or in your Razor file:
- _Imports.razor
```
@using DevExpress.AIIntegration.Blazor.Editors
```

Use the Extensions property to add the AI-powered Smart Autocomplete functionality to the Memo editor.

<label for="memoSmartAutoComplete" class="demo-text cw-480 mb-1">
    To see autocomplete suggestions, move the caret to the end and start typing.
</label>
<DxMemo @bind-Text=@TextValue
        Rows="5"
        CssClass="cw-480"
        InputId="memoSmartAutoComplete">
    <Extensions>
        <MemoSmartAutoComplete InputDelay="1000" SuggestionReceived="@OnSuggestionReceived" />
    </Extensions>
</DxMemo>
<div class="demo-text cw-480 mt-2">
    <p class="mb-0">Request count: <b>@_requestCount</b></p>
    <p>Current suggestion: <b>@GetSuggestionText()</b></p>
</div>

@code {
    string _lastSuggestionText { get; set; }
    int _requestCount { get; set; }
    string GetSuggestionText() {
        if(string.IsNullOrWhiteSpace(_lastSuggestionText))
            return "Empty string";
        return _lastSuggestionText;
    }
    void OnSuggestionReceived(MemoSmartAutoCompleteSuggestionReceivedEventArgs e) {
        _requestCount++;
        _lastSuggestionText = e.SuggestionText;
    }
    string TextValue { get; set; } =
    "Taylor continues to have problems managing expectations. " +
    "She is too optimistic and refuses to be realistic about the workload involved. " +
    "I recommend";
}

Note

The DevExpress Blazor Memo component is only responsible for displaying AI-generated text suggestions. The actual text analysis and suggestion generation are performed by the connected AI model. Since AI models may not always generate suggestions, we recommend that you handle the SuggestionReceived event and verify whether a suggestion is available.