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

NuGet Package: DevExpress.AIIntegration.Blazor.Editors

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

Run Demo

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

Register AI services.

To build an AI-powered application, choose the approach that best fits your needs:
- Use the DevExpress Template Kit: Create a new project with pre-configured AI services and NuGet packages. This approach implements our recommended patterns for AI service integration.
- Add AI capabilities to your current application. The AI-powered Smart Autocomplete extension for Memo supports major cloud providers, self-hosted models, and proprietary in-house LLMs.
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.

Important
Never hardcode AI provider access keys, credentials, or API endpoints directly in your source code. Refer to the following help topic for additional information: Secret Management for Blazor AI Components.
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.