For several years, a common problem for mobile device users has been typing text quickly. Although innovative features such as swipe typing and word autocompletion have been implemented, undoubtedly one of the most comfortable methods remains voice dictation.

In .NET MAUI, you can take advantage of the Progress Telerik UI for .NET MAUI SpeechToTextButton control, which allows converting speech to text. Let’s see how to use it in your own .NET MAUI apps!

Getting to Know the Telerik SpeechToTextButton Control for .NET MAUI

The SpeechToTextButton control uses platform-specific voice recognition services to perform speech-to-text conversion, including WinUI. The structure of the control is simple, and it is based on a button composed of a SpeechToTextButton Content and a SpeechToTextButton, which you can see in the following image:

Some possible use cases for the control are:

• Voice note-taking
• Chat applications
• Voice search
• Command control via voice
• Meeting transcription
• Among many others

In reality, the range of use cases is quite large. Now let’s analyze the control in more depth.

Creating a Practical Case

Let’s start by creating a demo application, which will help us see the different features of the speech-to-text control. The idea of the application is to be a personal note-taking app that allows actions like editing text, saving notes and sharing them.

For this example, we’ll use the CommunityToolkit.Mvvm package, which allows for rapid creation of view models. Below, I show you the initial code for the application in case you want to replicate it, which is as follows:

TextEditorPage.xaml:

<Grid
    Padding="20"
    RowDefinitions="Auto, Auto, *, Auto"
    RowSpacing="16">

    <!--  Header Section  -->

    <Label
        FontAttributes="Bold"
        FontSize="28"
        Text="Fast Note"
        TextColor="#1A1A2E" />

    <!--  Status Bar  -->
    <Border
        Grid.Row="1"
        Padding="16,12"
        BackgroundColor="#F3F4F6"
        StrokeShape="RoundRectangle 12"
        StrokeThickness="0">
        <Grid ColumnDefinitions="Auto, *, Auto">
            <Label
                Grid.Column="2"
                FontSize="12"
                Text="{Binding CharacterCount}"
                TextColor="#9CA3AF"
                VerticalOptions="Center" />
        </Grid>
    </Border>

    <!--  Main Editor Area  -->
    <Border
        Grid.Row="2"
        Padding="0"
        BackgroundColor="#FFFFFF"
        Stroke="#E5E7EB"
        StrokeShape="RoundRectangle 16"
        StrokeThickness="1">
        <Grid RowDefinitions="*, Auto">
            <Editor
                x:Name="MainEditor"
                Margin="16"
                AutoSize="TextChanges"
                BackgroundColor="Transparent"
                FontSize="16"
                Placeholder="Start typing or use voice input..."
                PlaceholderColor="#9CA3AF"
                Text="{Binding EditorText, Mode=TwoWay}"
                TextColor="#1F2937" />

            <!--  Editor Toolbar  -->
            <Border
                Grid.Row="1"
                Padding="12,0"
                BackgroundColor="#F9FAFB"
                HeightRequest="56"
                StrokeThickness="0">
                <Grid ColumnDefinitions="*, Auto, Auto">
                    <!--  Word Count  -->
                    <VerticalStackLayout VerticalOptions="Center">
                        <Label
                            FontSize="12"
                            Text="{Binding WordCount}"
                            TextColor="#6B7280" />
                    </VerticalStackLayout>

                    <!--  Clear Button  -->
                    <Button
                        Grid.Column="1"
                        Padding="12,8"
                        BackgroundColor="Transparent"
                        BorderWidth="0"
                        Command="{Binding ClearTextCommand}"
                        FontSize="14"
                        IsEnabled="{Binding HasText}"
                        Text="Clear"
                        TextColor="#EF4444" />

                    <!--  Copy Button  -->
                    <Button
                        Grid.Column="2"
                        Padding="12,8"
                        BackgroundColor="Transparent"
                        BorderWidth="0"
                        Command="{Binding CopyTextCommand}"
                        FontSize="14"
                        IsEnabled="{Binding HasText}"
                        Text="Copy"
                        TextColor="#3B82F6" />
                </Grid>
            </Border>
        </Grid>
    </Border>

    <!--  Quick Actions  -->
    <Grid
        Grid.Row="3"
        ColumnDefinitions="*, *, *"
        ColumnSpacing="12">
        <Button
            BackgroundColor="#E5E7EB"
            BorderWidth="0"
            Command="{Binding NewDocumentCommand}"
            CornerRadius="10"
            FontSize="14"
            HeightRequest="44"
            IsEnabled="{Binding HasText}"
            Text="New"
            TextColor="#374151" />
        <Button
            Grid.Column="1"
            BackgroundColor="#10B981"
            BorderWidth="0"
            Command="{Binding SaveTextCommand}"
            CornerRadius="10"
            FontSize="14"
            HeightRequest="44"
            IsEnabled="{Binding HasText}"
            Text="Save"
            TextColor="#FFFFFF" />
        <Button
            Grid.Column="2"
            BackgroundColor="#8B5CF6"
            BorderWidth="0"
            Command="{Binding ShareTextCommand}"
            CornerRadius="10"
            FontSize="14"
            HeightRequest="44"
            IsEnabled="{Binding HasText}"
            Text="Share"
            TextColor="#FFFFFF" />
    </Grid>

</Grid>

TextEditorPage.xaml.cs:

public partial class TextEditorPage : ContentPage
{
    private readonly TextEditorViewModel _viewModel;

    public TextEditorPage()
    {
        InitializeComponent();
        _viewModel = new TextEditorViewModel();
        BindingContext = _viewModel;
    }
}

TextEditorViewModel.cs:

public partial class TextEditorViewModel : ObservableObject
{
    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(CharacterCount))]
    [NotifyPropertyChangedFor(nameof(WordCount))]
    [NotifyPropertyChangedFor(nameof(HasText))]
    private string _editorText = string.Empty;

    [ObservableProperty]
    private string _statusText = "Ready";

    [ObservableProperty]
    private Color _statusColor = Colors.Gray;

    public string CharacterCount => $"{EditorText?.Length ?? 0} characters";

    public string WordCount
    {
        get
        {
            int words = string.IsNullOrWhiteSpace(EditorText)
                ? 0
                : EditorText.Split([' ', '\n', '\r'], StringSplitOptions.RemoveEmptyEntries).Length;
            return $"{words} words";
        }
    }

    public bool HasText => !string.IsNullOrEmpty(EditorText);

    #region Commands

    [RelayCommand]
    private void ClearText()
    {
        EditorText = string.Empty;
        UpdateStatus("Text cleared", null);
    }

    [RelayCommand]
    private async Task CopyTextAsync()
    {
        if (!HasText) return;

        await Clipboard.Default.SetTextAsync(EditorText);
        UpdateStatus("Copied to clipboard", "#10B981");

        await Task.Delay(2000);
        UpdateStatus("Ready", null);
    }

    [RelayCommand]
    private async Task NewDocumentAsync()
    {
        if (HasText)
        {
            if (Application.Current?.Windows.FirstOrDefault()?.Page is Page page)
            {
                bool confirm = await page.DisplayAlertAsync("New Document",
                    "Do you want to create a new document? Current text will be lost.",
                    "Yes", "No");

                if (!confirm) return;
            }
        }

        EditorText = string.Empty;
        UpdateStatus("New document created", "#10B981");
    }

    [RelayCommand]
    private async Task SaveTextAsync()
    {
        var page = Application.Current?.Windows.FirstOrDefault()?.Page;
        if (page == null) return;

        if (!HasText)
        {
            await page.DisplayAlertAsync("Save", "There is no text to save.", "OK");
            return;
        }

        try
        {
            string fileName = $"VoiceNote_{DateTime.Now:yyyyMMdd_HHmmss}.txt";
            string filePath = Path.Combine(FileSystem.AppDataDirectory, fileName);

            await File.WriteAllTextAsync(filePath, EditorText);

            UpdateStatus("Document saved", "#10B981");

            await page.DisplayAlertAsync("Saved", $"Document saved as {fileName}", "OK");
        }
        catch (Exception ex)
        {
            await page.DisplayAlertAsync("Error", $"Could not save document: {ex.Message}", "OK");
        }
    }

    [RelayCommand]
    private async Task ShareTextAsync()
    {
        if (!HasText)
        {
            if (Application.Current?.Windows.FirstOrDefault()?.Page is Page page)
            {
                await page.DisplayAlertAsync("Share", "There is no text to share.", "OK");
            }
            return;
        }

        await Share.Default.RequestAsync(new ShareTextRequest
        {
            Text = EditorText,
            Title = "Share Voice Note"
        });
    }

    #endregion

    #region Helper Methods

    private void UpdateStatus(string text, string? colorHex)
    {
        StatusText = text;
        StatusColor = string.IsNullOrEmpty(colorHex) ? Colors.Gray : Color.FromArgb(colorHex);
    }

    public void UpdateButtonState(Telerik.Maui.SpeechRecognizer.SpeechRecognizerState state)
    {
        switch (state)
        {
            case Telerik.Maui.SpeechRecognizer.SpeechRecognizerState.Listening:
                UpdateStatus("Listening...", "#2563EB");
                break;
            case Telerik.Maui.SpeechRecognizer.SpeechRecognizerState.Initializing:
                UpdateStatus("Initializing...", "#F59E0B");
                break;
            default:
                UpdateStatus("Ready", null);
                break;
        }
    }

    #endregion
}

The above code results in the following application when executed:

In the previous image, you can see the application, which only allows taking notes via the keyboard, which can be tedious, slow and boring. Therefore, we will use the speech-to-text control to improve quick note-taking.

Integrating the SpeechToTextButton Control into the Application

The first thing you need to do to use the speech-to-text control is to follow the Telerik .NET MAUI controls installation guide. Once you have done that, add the following namespace in the ContentPage where you want to use the control:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Next, add the control using the RadSpeechToTextButton tag where you want to place it; in our example, it will be located where the Editor Toolbar comment is:

<telerik:RadSpeechToTextButton
    x:Name="SpeechButton"
    Grid.Column="3"
    VerticalOptions="Center" />

Since we will be using the microphone in the app for obtaining the transcription, you need to grant the required permissions according to the platform to allow audio recording and voice recognition. For example, for Android, you need to add the following line to AndroidManifest.xml:

<uses-permission android:name="android.permission.RECORD_AUDIO" />

The integration of the control provides a button with the necessary functionality to start the speech-to-text process:

In the image above, you can see that when the button to start recording is pressed, the microphone is automatically activated in the status bar (if it’s the first execution, it will likely ask for microphone access), indicating that a recording process has started.

Now we need to handle the events or commands to obtain the transcription, which we will see next.

Available Events and Commands in the Speech to Text Control for .NET MAUI

The speech to text control has events and commands that we can use to react to different situations. For the events, we have the following available:

• SpeechRecognized: This occurs when there is a successful speech recognition and includes an argument SpeechRecognizerSpeechRecognizedEventArgs, which contains the FullText obtained from the recognition and FullTextConfidenceScore indicating the confidence level of the recognition.
• ErrorOccurred: This occurs when there is an error in the recognition process, includes the argument SpeechRecognizerErrorOccurredEventArgs, which contains the Message property with the error message, the Exception associated with the error and Handled to determine if the error has been handled.
• StateChanged: This is fired as soon as there is a change in the state of the speech recognizer.

On the other hand, we also have some commands that will allow us to handle events directly from the viewmodel if we need to, as is the case for us. To achieve this, we can modify the label of the RadSpeechToTextButton control by adding the commands SpeechRecognizedCommand and ErrorOccurredCommand as shown in the following example:

 <!--  Editor Toolbar  -->
 <Border...>
    <Grid ColumnDefinitions="*, Auto, Auto, Auto">
        ...
        <telerik:RadSpeechToTextButton
            x:Name="SpeechButton"
            Grid.Column="3"
            ErrorOccurredCommand="{Binding ErrorOccurredCommand}"
            SpeechRecognizedCommand="{Binding SpeechRecognizedCommand}"
            VerticalOptions="Center" />
    </Grid>
 </Border>

Next, we need to handle the commands from the viewmodel as seen below:

#region Speech Recognition Commands

[RelayCommand]
private void SpeechRecognized(SpeechToTextButtonSpeechRecognizedCommandContext context)
{
    EditorText = context.FullText;
    UpdateStatus("Speech recognized", "#10B981");
}

[RelayCommand]
private async Task ErrorOccurredAsync(SpeechToTextButtonErrorOccurredCommandContext context)
{
    UpdateStatus("Error occurred", "#EF4444");

    if (Application.Current?.Windows.FirstOrDefault()?.Page is Page page)
    {
        await page.DisplayAlertAsync("Voice Input Error",
            $"Unable to process voice input: {context.Message}",
            "OK");
    }
}

#endregion

In the previous code, you can see that the commands receive contexts similar to the arguments of the events. The first, SpeechToTextButtonSpeechRecognizedCommandContext, allows obtaining the FullText and FullTextConfidenceScore when there is speech recognition. The second, SpeechToTextButtonErrorOccurredCommandContext, contains the Message and Exception properties when there is an error in the speech recognition.

You can also see how FullText is assigned to the EditorText property, which is bound to the control of type Editor. This allows the transcription obtained to be displayed in the graphical interface, resulting in the following execution:

Now we can obtain the transcription; however, there is a need for visual indicators that allow users to know what is happening in the application, and we can solve this through the states of the control. Let’s see how.

States of the Speech-to-Text Control

One thing that is appreciated as a developer is that Progress Telerik documentation is very clear regarding the architecture and lifecycle of the .NET MAUI SpeechToTextButton control, as can be seen in the following image:

The diagram above shows us a series of states that we can detect thanks to the StateChanged event as seen below:

<telerik:RadSpeechToTextButton
    x:Name="SpeechButton"
    Grid.Column="3"
    ErrorOccurredCommand="{Binding ErrorOccurredCommand}"
    SpeechRecognizedCommand="{Binding SpeechRecognizedCommand}"
    StateChanged="OnStateChanged"
    VerticalOptions="Center" />

In the code behind, we can invoke a method from the viewmodel that allows us to determine what to do with the detected state:

private void OnStateChanged(object sender, EventArgs e)
{
    if (sender is RadSpeechToTextButton button)
    {
        MainThread.BeginInvokeOnMainThread(() =>
        {
            _viewModel.UpdateButtonState(button.State);
        });
    }
}

Within the viewmodel, we will compare the desired state using any of the states defined in the Telerik.Maui.SpeechRecognizer.SpeechRecognizerState enumeration.

For example, to react to state changes Listening and Initializing, the code would be as follows:

public void UpdateButtonState(Telerik.Maui.SpeechRecognizer.SpeechRecognizerState state)
{        
    switch (state)
    {            
        case Telerik.Maui.SpeechRecognizer.SpeechRecognizerState.Listening:
            UpdateStatus("Listening...", "#2563EB");
            break;
        case Telerik.Maui.SpeechRecognizer.SpeechRecognizerState.Initializing:
            UpdateStatus("Initializing...", "#F59E0B");
            break;
        default:
            UpdateStatus("Ready", null);
            break;
    }
}

Finally, in the graphical interface code, we can add visual indicators that provide feedback to the user about the state of the control. In our example, we do this in the comment section Status Bar:

<!--  Status Bar  -->
<Border
    Grid.Row="1"
    Padding="16,12"
    BackgroundColor="#F3F4F6"
    StrokeShape="RoundRectangle 12"
    StrokeThickness="0">
    <Grid ColumnDefinitions="Auto, *, Auto">
        <Ellipse
            BackgroundColor="{Binding StatusColor}"
            HeightRequest="10"
            VerticalOptions="Center"
            WidthRequest="10" />        
        <Label
            Grid.Column="1"
            Margin="12,0,0,0"
            FontSize="14"
            Text="{Binding StatusText}"
            TextColor="#374151"
            VerticalOptions="Center" />
        <Label
            Grid.Column="2"
            FontSize="12"
            Text="{Binding CharacterCount}"
            TextColor="#9CA3AF"
            VerticalOptions="Center" />
    </Grid>
</Border>

Once the previous code has been replaced, we will graphically see the state changes, to indicate to users that the component is ready to start transcription, if it is listening to speech or if speech has been recognized correctly:

In the above image, you can see the state changes in action, according to the actions performed by the user on the speech to text control.

Conclusion

Throughout this article, you have been able to learn about the SpeechToTextButton control from Telerik for .NET MAUI applications.

Implementing this type of component in your mobile applications can greatly simplify the friction that exists with users when it comes to entering lengthy or rapid text, something very trendy today with AI-based apps. I encourage you to try it out and help your users get the most out of your applications.

If you aren’t already using Telerik UI for .NET MAUI, it comes with a free 30-day trial:

Try Now

Progress ThemeBuilder is a visual styling tool for customizing Telerik and Kendo UI components. Instead of digging through component documentation, ThemeBuilder provides an intuitive interface that allows us to see styling changes applied in real time. We can adjust colors, spacing, typography and more, then export production-ready CSS/SASS for our applications.

With the 2025 Q4 release, ThemeBuilder introduced two cool updates: a dedicated Typography module for centralized font management and component-level AI theming enhancements that give us finer control over AI-generated styles. In this article, we’ll spend a little time exploring both.

Setting Up a Theme with AI

Before jumping into the new features, let’s quickly set up a theme using AI to see how these enhancements fit into the workflow. In the ThemeBuilder interface, we’ll find a Generate panel where we can describe our desired theme in plain English. To get started, we can enter something like: “Create a clean, modern analytics theme with a cool blue-gray palette that feels data-driven and professional, suitable for a B2B software dashboard.”

After generating, the AI analyzes the description and produces a cohesive design system. Within seconds, we’ll see a complete theme applied across all components: buttons adopt a refined blue accent, inputs feature subtle borders with appropriate focus states, and data visualization components like charts and grids receive complementary styling that maintains readability.

This theme serves as a good starting point. The colors work well together, the spacing feels balanced and there’s visual consistency across the component library.

But what if we want to adjust the appearance of specific components without altering the entire theme? This is where the new component-level AI theming comes in.

Component-Level AI Theming

One of the challenges with theme generation with AI has been the “all or nothing” approach. Previous AI theming would regenerate our entire theme, which was great for starting fresh, but less helpful when we only wanted to tweak how buttons looked or adjust the styling of our data grid headers.

The new component-level AI theming enhancements solve this problem. We can now target individual components with AI-assisted styling while preserving our overall theme. Instead of manually hunting through variables and properties, we can use the AI theming interface to target just, say, the React Button component.

To see an example of this, we can enter a specific prompt like: “Make the primary button more prominent with a stronger visual presence and subtle gradient that draws attention for call-to-action scenarios.”

The AI adjusted only the primary (solid) button-related variables and styles, enhancing the gradient effect and adding a bit more visual weight to the component. The rest of our theme remains untouched!

We can continue refining our design in the same way. For example, we can apply an AI-driven override to the specific React TextBox component to make it more visually distinctive and usable.

We might use a prompt like: “Redesign the TextBox component with a more prominent border, a subtle background tint, stronger focus glow, and slightly increased padding to make input fields visually distinct and easier to scan in complex layouts.”

The AI updates only the TextBox-related styles while preserving other existing styles in the components module.

New Typography Module

While AI theming handles creative decisions, the new Typography module provides structured, systematic control over typography settings of our theme and is located alongside the existing modules like Metrics, Colors, etc.

In the module, we can define reusable typography variables that bundle multiple text properties into a single unit. Each variable can include font family, size, line height, letter spacing, text transform, font style and text decoration.

Once defined, these typography variables can be assigned to component parts like inputs, headers and form labels. Here’s an example of applying a custom typography set to the text of the Button component.

This provides both flexibility and long-term maintainability, allowing typography variables to be defined once and applied consistently across components with just a few clicks.

Wrap-up

The 2025 Q4 updates to ThemeBuilder address two common pain points.

• Component-level AI theming lets us refine specific parts of our theme without starting over, making AI generation more practical for real-world projects.
• The Typography module brings font management into a centralized, reusable system, letting us define text styles once and apply them consistently across components with ease.

Ready to try these new capabilities? Explore ThemeBuilder and see how the latest updates can streamline your theming workflow.

If you aren’t already using Telerik or Kendo UI components, see how ThemeBuilder complements these robust libraries in the Telerik DevCraft bundles.

Try Telerik DevCraft

Building accessible components is one of those things we know we should do, but often skip because it feels overwhelming. We need to read about accessibility tips and tricks and a lot of documentation.

You start with a simple dropdown menu, knowing you need to handle keyboard navigation, ARIA attributes, focus management and screen reader support. Before you know it, your “simple” component has 200 lines of accessibility code you’re not even sure is correct. (Unless you’re using the Progress Kendo UI for Angular library, which has accessibility baked in for you. )

What if I told you there’s a way to get the accessibility magic you need, regardless of component library, with full control over your styling with the magic of Angular Aria?

But what is Angular Aria? Let’s make a small intro.

What Is Angular Aria?

Think of Angular Aria as a collection of accessibility superpowers for your components, but instead of manually implementing keyboard navigation, ARIA attributes and focus management, you import a directive, add it to your HTML and, boom, your component is accessible.

The Angular team built these directives following the W3C Accessibility Guidelines, so you don’t have to become an accessibility expert to build compliant components.

Hold On, What About Angular Material?

Great question! If you’ve been using Angular for a while, you’re probably thinking: “We already have Angular Material. Why do we need another library?”

Here are the key differences:

Angular Material gives you complete, prestyled components. They look great out of the box, but they come with Material Design opinions baked in. If you want a button that doesn’t look like a Material button, you’re going to fight the framework.

Angular Aria gives you headless directives—just the accessibility logic, zero styling. You get all the keyboard navigation, ARIA attributes and screen reader support, but you control every pixel of how it looks.

Think of it this way:

• Angular Material: It is plug and play, looks good, works immediately, but everyone has the same result. If you were building a physical doorway to your business, it would look like all other businesses, just with your business name on the sign.
• Angular Aria: This tool is more like the ramp to your front door, enabling anyone to access the business entrance, while allowing you to choose the awning, the window display and the door color.

So when should you use each one? We’ll dive deeper into that later in the article, but here’s the quick answer:

• Use Angular Material when you need to ship fast and Material Design works for you.
• Use Angular Aria when you have custom design requirements and need full control.

Remember, accessibility isn’t optional anymore. It’s a legal requirement in many countries, and, more importantly, it’s the right thing to do.

But implementing accessibility correctly is hard. You need to know:

• Which ARIA attributes to use (and when)
• How keyboard navigation should work for each pattern
• How to manage focus properly
• How screen readers interpret your markup

Angular Aria handles this complexity for you. You focus on the HTML structure, CSS styling and business logic, and Angular Aria takes care of accessibility.

But, as always, the best way to learn is by building something. Let’s do it!

Set Up the Project

First, create a new Angular application. In your terminal, run the following command (be sure to have Node.js installed).

npx @angular/cli@latest new angular-aria-demo

When CLI prompts stylesheet format, pick CSS.

  - **Which stylesheet format would you like to use?** → CSS

Now, navigate to your project and add Angular Aria:

cd angular-aria-demo
npm install @angular/aria

That’s it. We now have a fresh Angular project with Angular Aria installed. Let’s build something accessible!

Building an Accessible Toolbar

Let’s build a text formatting toolbar, the kind you see in rich text editors. This is a perfect example because it looks simple but has surprising accessibility complexity.

Using the CLI, generate a new component editor-toolbar:

ng generate c components/editor-toolbar

Perfect! Open the component with your editor, and import Toolbar, ToolbarWidget and ToolbarWidgetGroup directives provided by @angular/aria/toolbar.

  import { Component } from '@angular/core';
  import { Toolbar, ToolbarWidget, ToolbarWidgetGroup } from '@angular/aria/toolbar';
  
  @Component({
    selector: 'app-editor-toolbar',
    templateUrl: './editor-toolbar.component.html',
    styleUrl: './editor-toolbar.component.css',
    imports: [Toolbar, ToolbarWidget, ToolbarWidgetGroup],
  })
  export class EditorToolbarComponent {}

Now it’s time to build the HTML structure. We create a div container with the directive [ngToolbar], which works as the main container. We also need ToolbarWidget to use with individual buttons and ToolbarWidgetGroup for groups of related buttons.

In the following HTML, we use every directive with divs and button elements. Copy it and paste into the editor-toolbar.html.

  <div ngToolbar aria-label="Text Formatting Tools">
  <div class="group">
   <button ngToolbarWidget
           value="undo"
           type="button"
           aria-label="undo">
     Undo
   </button>
   <button ngToolbarWidget
           value="redo"
           type="button"
           aria-label="redo">
     Redo
   </button>
 </div>

 <div class="separator" role="separator"></div>

 <!-- Text formatting group -->
 <div class="group">
   <button ngToolbarWidget
           value="bold"
           type="button"
           aria-label="bold"
           #bold="ngToolbarWidget"
           [aria-pressed]="bold.selected()">
     Bold
   </button>
   <button ngToolbarWidget
           value="italic"
           type="button"
           aria-label="italic"
           #italic="ngToolbarWidget"
           [aria-pressed]="italic.selected()">
     Italic
   </button>
 </div>

 <div class="separator" role="separator"></div>

 <!-- Alignment group (radio buttons) -->
 <div ngToolbarWidgetGroup
      role="radiogroup"
      class="group"
      aria-label="Text alignment options">
   <button ngToolbarWidget
           role="radio"
           type="button"
           value="align left"
           aria-label="align left"
           #leftAlign="ngToolbarWidget"
           [aria-checked]="leftAlign.selected()">
     Left
   </button>
   <button ngToolbarWidget
           role="radio"
           type="button"
           value="align center"
           aria-label="align center"
           #centerAlign="ngToolbarWidget"
           [aria-checked]="centerAlign.selected()">
     Center
   </button>
   <button ngToolbarWidget
           role="radio"
           type="button"
           value="align right"
           aria-label="align right"
           #rightAlign="ngToolbarWidget"
           [aria-checked]="rightAlign.selected()">
     Right
   </button>
 </div>
</div>

The final step is adding some CSS styles to make it look nice. Open the editor-toolbar.css and paste the following style:

  [ngToolbar] {
 display: flex;
 gap: 8px;
 padding: 8px;
 background: #f5f5f5;
 border-radius: 4px;
}

.group {
 display: flex;
 gap: 4px;
}

.separator {
 width: 1px;
 background: #ddd;
}

button {
 padding: 8px 12px;
 border: 1px solid #ddd;
 background: white;
 border-radius: 4px;
 cursor: pointer;
}

button[aria-pressed="true"],
button[aria-checked="true"] {
 background: #007acc;
 color: white;
}

Perfect, we just added HTML, CSS and Angular Aria directives. To test it, open the app.html and add <app-editor-toolbar></app-editor-toolbar>, save changes and run your app.

ng serve
Initial chunk files | Names         | Raw size
main.js             | main          | 10.50 kB | 
styles.css          | styles        | 95 bytes | 

                    | Initial total | 10.59 kB

Application bundle generation complete. [0.641 seconds] - 2026-01-25T10:16:33.843Z

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help

Try to use your toolbar with your keyboard. You’ll find it works, and we didn’t have to write any code for keyboard navigation logic (like: Arrow keys, Home, End), focus management, ARIA role attributes, screen reader announcements or selection state management. All of that complexity? Gone.

The ngToolbar, ngToolbarWidget and ngToolbarWidgetGroup directives handle all of that automatically.

We now have a fully accessible toolbar that works with keyboard navigation and screen readers, and we only wrote the HTML structure and CSS.

Angular Aria provides directives for the most common interactive patterns, we can get components for search and selection (like Autocomplete, Listbox and Select), navigation and actions (Menu, Menubar and Toolbar like we just built), and content organization (Accordion, Tabs, Tree and Grid). Every directive comes with complete documentation, working examples and API references. You can see the full list of available components in the official Angular Aria documentation.

But I’m a Fan of Angular Material

Yes, I understand Angular Material has a long relationship with Angular devs. You can continue using Angular Material when you:

1. Need to ship fast – You’re building an MVP or internal tool and don’t want to spend time on custom styling.
2. Like Material Design – You’re OK with the Google Material Design aesthetic.
3. Have limited design resources – Your team doesn’t have dedicated designers.

Remember, Angular Material is amazing, but it comes with opinions about how things should look.

If you try to heavily customize Material components, you’ll spend more time fighting the framework than building features. I’ve been there—overriding Material styles with ::ng-deep and !important until the CSS becomes unmaintainable.

And don’t even get me started on theming. Creating a custom theme for Angular Material is… let’s just say “special.” It’s doable, but it’s tricky and requires deep knowledge of Sass and Material’s theming system. (If you’re curious about the complexity, I wrote about it in Theme UI Frameworks in Angular: Part 2 - Custom Theme for Angular Material.)

Angular Aria solves this by giving you zero styles. You start with a blank canvas and build exactly what you need.

Remember for simple cases, native elements are already accessible when you use <button> for buttons, <input type="radio"> for radio buttons or <select> for simple dropdowns. But Angular Aria gives you a third option: headless accessible components that you can style however you want, we can meet accessibility requirements, maintain full design control and avoid reinventing the wheel.

Recap

We learned that accessibility doesn’t have to be overwhelming. Angular Aria gives you production-ready, WCAG-compliant directives that handle the complex parts.

We provide the HTML structure and CSS and Angular Aria provides the accessibility without pain!

But What About Kendo UI?

Maybe you want to ship faster (really fast) and have complex scenarios with datalist, charts, schedulers and complex UI patterns. If you read this article and are thinking: “This is great, but I still have to write all the HTML and CSS myself. Why not just use a complete component library?” you’re asking the right question.

Here’s when Progress Kendo UI for Angular makes more sense than Angular Aria or Angular Material:

Use Kendo UI when you want:

1. Everything out of the box – Prebuilt components with professional styling, themes and accessibility already done
2. Advanced features included – Things like data grids with sorting/filtering, charts, schedulers and complex UI patterns
3. Consistent design system – A cohesive look across all components without writing custom CSS
4. Enterprise-grade support – Professional support, regular updates and guaranteed compatibility
5. Speed PLUS customization – You need to ship fast and need options to customize (you’ll have five fully built theme options plus the ability to tweak those or create your own theme)

There’s no “wrong” choice—just different tools for different jobs.

If you’re building internal tools or you like the Kendo UI design system, Kendo UI saves you weeks of work, and, honestly? I can build complex stuff (data grids, schedulers, charts) in minutes, making Kendo UI the right answer for me.

Plus, you can use the Kendo UI for Angular AI Coding Assistant, an MCP server that automatically scaffolds components for AI agents. Instead of manually writing Kendo UI components, your AI assistant can do it for you.

Want to learn more? Check out my article: Angular and Kendo UI MCP: Making Agents Work for You

• Source code
• Angular Aria Documentation

Progress Telerik Document Processing Libraries, in addition to letting you work with a variety of document formats (PDF, DOCX, RTF, HTML, XLSX and more), are an example of the reason you buy into a suite of tools: All the tools bear a “family resemblance.”

The ideal scenario, of course, would be for a single tool that made all these document formats look the same. Given the differences in format and functionality between, for example, a PDF, a Microsoft Word (or RTF or HTML) document and an Excel spreadsheet, that’s not reasonable (though Progress Telerik has achieved that with DOCX, RTF and HTML documents).

The good news here is that, with Telerik Document Processing Libraries (DPL), the family resemblance is strong enough that, for all of the document types the library supports, I can show you how to load documents, start the editing process, convert between various document types and save a document in this one post.

Configuring Your Project

The sample code in this post was all written using the DPL for Windows libraries (even though I was working in ASP.NET Core—the more technical name for the version I used is “.NET(Target OS: Windows).” The suite is also available for the .NET Framework.

To create an ASP.NET Core project that would work with “all the documents,” I added these NuGet packages to my project:

• To work with PDF files: Telerik.Windows.Documents.Fixed
• To work with DOCX, HTML and RTF files: Telerik.Windows.Documents.Flow
• To work with Excel spreadsheets: Telerik.Windows.Documents.Spreadsheet

For the Excel spreadsheets, I’m only going to work with XLSX files, so I added the Telerik.Windows.Documents.Spreadsheet.FormatProviders.OpenXml package to my project. (If I was going to work with, for example, XLS spreadsheet, then I would have added the Telerik.Documents.Spreadsheet.FormatProviders.Xls package.)

Loading Your Document

The code to load a document from a file into any of these libraries is very similar:

1. Create the appropriate provider.
2. Use the .NETFile object’s OpenRead to create a Stream that points to the file.
3. Use the provider’s Import method to load the stream into the document object.

Here, for example, is the code to load a PDF file into a RadFixedDocument object (I used this code in an ASP.NET Core application with documents in my project’s wwwroot folder):

RadFixedDocument doc;
PdfFormatProvider prov = new();

using (Stream str = File.OpenRead(@"wwwroot/documents/Priorities.pdf"))
{
    doc = prov.Import(str, TimeSpan.FromSeconds(10));
}

And here’s the code to load a DOCX file into a RadFlowDocument:

RadFlowDocument doc;
DocxFormatProvider prov = new();

using (Stream str = File.OpenRead(@"wwwroot/documents/Priorities.docx"))
{
    doc = prov.Import(str, TimeSpan.FromSeconds(10));
}

As you can see, the code is identical except for the provider (PdfFormatProvider vs. DocxFormatProvider) and document objects (RadFlowDocument vs. RadFixedDocument).

Because both RTF and HTML documents load into the same RadFlowDocument object as a DOCX document, only the provider object changes (HtmlFormatProvider or RtfFormatProdiver instead of DocxFormatProvider) when working with those file formats. Here’s the code to load an RTF document:

RadFlowDocument doc;
RtfFormatProvider prov = new();

using (Stream str = File.OpenRead(@"wwwroot/documents/Priorities.rtf"))
{
    doc = prov.Import(str, TimeSpan.FromSeconds(10));
}

And here’s the almost identical code to load an HTML file:

RadFlowDocument doc;
HtmlFormatProvider prov = new();

using (Stream str = File.OpenRead(@"wwwroot/documents/Priorities.html"))
{
    doc = prov.Import(str, TimeSpan.FromSeconds(10));
}

The code to load an Excel workbook is also similar to what you’ve seen before, just swapping in a new document object (Workbook) and provider (XlsxFormatProvider):

Workbook doc;
XlsxFormatProvider prov = new();
using (Stream str = File.OpenRead(@"wwwroot/documents/priority.xlsx"))
{
    doc = prov.Import(str, TimeSpan.FromSeconds(10));
}

A note: The Workbook object assumes that you’re going to load the whole Excel workbook into memory. For very large workbooks, that may not make sense. For that scenario, you should look at the SpreadStreamProcessing Library.

Modifying the Documents

Once you’ve loaded the documents, you can start working with them. You can often simplify your code by using the RadFixedDocumentEditor with PDF documents or the RadFlowDocumentEditorwith Word/RTF/HTML documents. Not surprisingly, the code for creating an editor is almost identical for these two document types: create an editor object and pass the document you want loaded into the editor.

The code to create an editor for a PDF document looks like this:

RadFixedDocumentEditor editor = new RadFixedDocumentEditor(doc);

The code for Word/RTF/HTML documents looks like this:

RadFlowDocumentEditor editor = new RadFlowDocumentEditor(doc);

That’s not to say that, as you start working with those documents, there aren’t going to be differences. These are, after all, very different kinds of documents. Having said that, some functionality does work in a similar way across all the document types.

If, for example, I want to search a PDF document for the text “ASP.NET,” I create a TextSearch instance from my document object. I then use the TextSearch object’s FindAll method to search for text in my PDF document, passing two things: my search text and a TextSearchOptions object that specifies how I want my search conducted. That FindAll object returns a collection of SearchResult objects that I can loop through.

Typical code, then, looks like this:

TextSearch search = new TextSearch(doc);
TextSearchOptions opts = new() {
CaseSensitive = false,
WholeWordsOnly = true,
UseRegularExpression = true
                                                              };

IEnumerable<SearchResult> items = search.FindAll("ASP.NET", opts);

Debug.Print($"Found {items.Count()} items.");
foreach (SearchResult item in items)
{
    Debug.Print($"Found at {item.Range.StartPosition} ");
    Debug.Print($"Found: {item.Result}");
}

The process is almost identical for the RadFlowDocument object, except:

• You call the FindAllmethod directly from the RadFlowDocumentEditor.
• There isn’t a separate options object (though all the search options from the TextSearch object are still available).
• The FindAll method on the editor returns FindResult objects instead of SearchResult objects.

As a result, the equivalent search code for a DOCX, RTF or HTML document looks like this:

RadFlowDocumentEditor editor = new RadFlowDocumentEditor(doc);

IEnumerable<FindResult> items = editor.FindAll("ASP.NET");

Debug.Print($"Found {items.Count()} items.");
foreach (FindResult item in items)
{
    Debug.Print($"Found at {item.RelativeStartIndex} ");
    Debug.Print($"Found: {item.FullMatchText}");
}

Searching a spreadsheet works similarly. The differences:

• The FindAll method is built right into the Workbook object.
• You have more search options available with the spreadsheet object.
• You pass your search string as part of the options object.

My find code with a workbook would look like this:

FindOptions opts = new() {
FindWhat = "ASP.NET",
MatchCase = false,
MatchEntireCellContents = true,
                                                };

IEnumerable<FindResult> items = doc.FindAll(opts);

Debug.Print($"Found {items.Count()} items.");
foreach(FindResult item in items)
{
    Debug.Print($"Found at {item.FoundCell.CellIndex} ");
    Debug.Print($"Found: {item.ResultValue}");
}

One note: It is certainly convenient when objects from the different libraries share the same name (like the FindResult object that’s defined in both the RadFlowDocument and Workbook libraries). However, if you try to use both FindResult objects in the same code file, the compiler will get confused because the two objects are in different namespaces. In the unlikely case that you’re working with both Excel and Word documents in the same code file, you’ll have to fully qualify the object names—something I haven’t done in this post.

Saving Your Documents

To save your modified documents back to disk, you just need to use the provider’s Export method. The code for all the document types is identical:

using (Stream str = File.Create(@"wwwroot/documents/Prioritiesnew.<filetype>"))
{
    prov.Export(doc,str, TimeSpan.FromSeconds(10));
}

Converting Documents

You can convert from one type in the suite to other types and, not surprisingly, the conversion processes look very much alike. As you’ve seen before, it often comes down to using the right provider.

If, for example, you want plain text version of your PDF file, you use the TextFormatProvider object’s Export method:

TextFormatProvider prov = new();
string text = prov.Export(doc, TimeSpan.FromSeconds(10));

For Word/HTML/RTF document types, the code is almost identical except it uses the TxtFormatProvider object:

TxtFormatProvider txProv = new();
string text = prov.Export(doc, TimeSpan.FromSeconds(10));            

One note: There is a downside to having the classes that do similar things to different document types have the same name. If you are mixing document types and, as a result, using the Fixed, Flow and spreadsheet libraries in the same application, the compiler can get confused about which class from which library you’re using. If so, you’ll have to fully qualify your class names by including their namespaces in the class names. That makes for hard-to-read code, so I haven’t done that here.

But, as an example of how different documents require different functionality, you probably wouldn’t ever want to convert an Excel workbook to a string … but you might want to save your workbook as a CSV file. As you might expect by now, the code to save your imported workbook into a CSV file just means using the Export method on the appropriate provider—the CsvFormatProvider object in this case.

Typical code would look like this:

CsvFormatProvider prov = new();

using (Stream str = File.Create("Priority.csv"))
{
    prov.Export(doc, str, TimeSpan.FromSeconds(10));
}

Converting any of these document types (Excel, Word, HTML, etc.) to PDF is equally straightforward. Because all the libraries look very much alike, it’s really just a matter of adding the library with the provider you need.

But you can also convert your Workbook object into a RadFixedDocument if you wanted to manipulate your spreadsheet as a PDF object. That conversion is handled by the PdfFormatProvider from the Telerik.Windows.Documents.Spreadsheet.Formatproviders.Pdf package and using its ExportToFixedDocumentmethod:

PdfFormatProvider prov = new();

RadFixedDocument fixedDoc = 
        prov.ExportToFixedDocument(doc, TimeSpan.FromSeconds(10));

The code is identical if you want to convert a Word/RTF/HTML document to a RadFixedDocument to work with it as a PDF file. That conversion also uses a PdfFormatProvider object but, this time, from the Telerik.Windows.Documents.Flow.FormatProviders.Pdf namespace.

But, because the providers from the two libraries have the same name, if you’re using both libraries in the same code file, you will need to fully qualify your provider names to make sure you’re getting the appropriate PdfFormatProvider.

Of course, once you start using these tools to create or modify the documents you’ve loaded, you’ll find more differences—the functionality in a spreadsheet is very different from the functionality in an HTML document. But, while the family resemblances among this suite won’t eliminate those differences, it does cut those differences down to what matters: how those documents differ in their functionality. Which is, after all, what you want.

Explore Telerik Document Processing Libraries, plus component libraries, reporting and more with a free trial of the Telerik DevCraft bundle:

Try DevCraft

Blazor is Microsoft’s framework ideal for creating single-page applications (SPAs), complementing the stack for developing applications entirely in .NET. This is why each year we see significant updates in the framework that allows developers to create secure and robust applications. These changes, along with Blazor control suites like the one from Progress Telerik, undoubtedly accelerate the development of complete apps.

In this article, I will tell you about the new interop features with JavaScript, which certainly marks a significant improvement in handling objects from the C# language. Let’s get started!

Understanding the Problem to Solve

Until .NET 10, interoperability with JS was mainly done by invoking JS functions, without being able to directly handle live objects from C# code, which involved creating wrappers and code that could often lead to failures and runtime errors due to syntax errors.

We can get an idea of the above through a practical case. Suppose that in our application, we have a Blazor Data Grid control that allows displaying products from an online store. Each row has a column with a button to show a lightbox popup, where images are displayed. The demonstration code, for you to gain a complete idea, looks as follows.

First, I created a JavaScript file with the necessary functionality to display the lightbox image gallery:

lightboxGallery.js

window.lightboxGallery = {
    LightboxGallery: class LightboxGallery {
        constructor(imageUrls, startIndex = 0) {
            this.images = imageUrls;
            this.currentIndex = startIndex;
            this.overlayElement = null;
            this.keyHandler = null;
        }

        show() {
            this.createOverlay();
            this.displayImage();
        }

        createOverlay() {
            if (this.overlayElement) {
                this.overlayElement.remove();
            }

            this.overlayElement = document.createElement('div');
            this.overlayElement.className = 'lightbox-overlay';
            this.overlayElement.innerHTML = `
            <div class="lightbox-container">
                <button class="lightbox-close">&times;</button>
                <button class="lightbox-prev">&lsaquo;</button>
                <div class="lightbox-content">
                    <img class="lightbox-image" src="https://www.telerik.com" alt="Gallery Image">
                    <div class="lightbox-counter"></div>
                </div>
                <button class="lightbox-next">&rsaquo;</button>
            </div>
        `;

            document.body.appendChild(this.overlayElement);
            
            this.overlayElement.querySelector('.lightbox-close').addEventListener('click', () => this.close());
            this.overlayElement.querySelector('.lightbox-prev').addEventListener('click', () => this.prev());
            this.overlayElement.querySelector('.lightbox-next').addEventListener('click', () => this.next());

            this.overlayElement.addEventListener('click', (e) => {
                if (e.target === this.overlayElement) {
                    this.close();
                }
            });

            this.keyHandler = (e) => {
                if (e.key === 'Escape') this.close();
                if (e.key === 'ArrowLeft') this.prev();
                if (e.key === 'ArrowRight') this.next();
            };
            document.addEventListener('keydown', this.keyHandler);
        }

        displayImage() {
            if (!this.overlayElement) return;

            const img = this.overlayElement.querySelector('.lightbox-image');
            const counter = this.overlayElement.querySelector('.lightbox-counter');

            img.src = this.images[this.currentIndex];
            counter.textContent = `${this.currentIndex + 1} / ${this.images.length}`;
        }

        next() {
            this.currentIndex = (this.currentIndex + 1) % this.images.length;
            this.displayImage();
        }

        prev() {
            this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
            this.displayImage();
        }

        close() {
            if (this.overlayElement) {
                this.overlayElement.remove();
                this.overlayElement = null;
            }
            if (this.keyHandler) {
                document.removeEventListener('keydown', this.keyHandler);
                this.keyHandler = null;
            }
        }
        
        getCurrentIndex() {
            return this.currentIndex;
        }
        
        getImagesLength() {
            return this.images.length;
        }
    }
};

The above code shows the definition of a JS class LightboxGallery with some properties to control the gallery. In addition, methods are also defined to enable interaction with it, such as next, prev, show, etc.

This file needs to be registered in App.razor to be able to use it from the application, as I show you below:

....
<head>
    ...
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <ReconnectModal />
    <script src="https://www.telerik.com@Assets["_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"]"></script>
    <script src="https://www.telerik.com@Assets["js/lightboxGallery.js"]"></script>
    <script src="https://www.telerik.com@Assets["_framework/blazor.web.js"]"></script>
</body>

</html>

Finally, I created a Razor page where I use the Blazor Data Grid and Blazor Button components to create a quick and functional graphic interface.

@page "/products-traditional"
@inject IJSRuntime JSRuntime

<PageTitle>Products - Traditional JS Interop</PageTitle>

<div class="container-fluid mt-4">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="display-6">Product Gallery</h1>          
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <TelerikGrid Data="@Products"
                         Pageable="true"
                         PageSize="10"
                         Sortable="true"
                         FilterMode="@GridFilterMode.FilterRow"
                         Resizable="true"
                         Height="600px">
                <GridColumns>
                    <GridColumn Field="@nameof(Product.Id)" 
                                Title="ID" 
                                Width="80px" />
                    <GridColumn Field="@nameof(Product.Name)" 
                                Title="Product Name" 
                                Width="200px" />
                    <GridColumn Field="@nameof(Product.Category)" 
                                Title="Category" 
                                Width="150px" />
                    <GridColumn Field="@nameof(Product.Price)" 
                                Title="Price" 
                                Width="120px">
                        <Template>
                            @{
                                var product = context as Product;
                                <span>$@product?.Price.ToString("N2")</span>
                            }
                        </Template>
                    </GridColumn>
                    <GridColumn Field="@nameof(Product.Stock)" 
                                Title="Stock" 
                                Width="100px" />
                    <GridColumn Title="Actions" 
                                Width="150px" 
                                Filterable="false" 
                                Sortable="false">
                        <Template>
                            @{
                                var product = context as Product;
                                <TelerikButton OnClick="@(async () => await ShowImagesTraditional(product))"
                                               ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">
                                    Show Images
                                </TelerikButton>
                            }
                        </Template>
                    </GridColumn>
                </GridColumns>
            </TelerikGrid>
        </div>
    </div>

If we want to invoke the methods from the JS code, there are various ways, although in the following example I show you one of the easiest. To display the gallery, we would use the following code:

private async Task ShowImagesTraditional(Product? product)
{
    if (product == null || product.ImageUrls.Count == 0)
        return;
        
    var imageUrlsJson = System.Text.Json.JsonSerializer.Serialize(product.ImageUrls);
    
    // Step 1
    await JSRuntime.InvokeVoidAsync("eval", 
        $"window.__tempGallery = new lightboxGallery.LightboxGallery({imageUrlsJson}, 0)");
    
    // Step 2
    await JSRuntime.InvokeVoidAsync("eval", "window.__tempGallery.show()");
    
    // Step 3
    var currentIndex = await JSRuntime.InvokeAsync<int>("eval", "window.__tempGallery.currentIndex");
    
    // Step 4
    var imagesCount = await JSRuntime.InvokeAsync<int>("eval", "window.__tempGallery.images.length");
    
    // Step 5
    Console.WriteLine($"Traditional: Showing {imagesCount} images, starting at index {currentIndex}");
    
    isGalleryOpen = true;
    StateHasChanged();    
}

Here’s what we do in the above code:

• Step 1: We use eval and global variables in window to maintain the reference to the gallery.
• Step 2: The method show defined in the class LightboxGallery is called.
• Step 3: We obtain the index of the image from the gallery.
• Step 4: The number of images is obtained using lenght.
• Step 5: The results are displayed based on the information obtained.

The same applies to perform operations like navigating forward or backward:

Navigating Forward

await JSRuntime.InvokeVoidAsync("eval", "window.__tempGallery.next()");

Navigating Backward

await JSRuntime.InvokeVoidAsync("eval", "window.__tempGallery.prev()");

Or even to close the gallery:

await JSRuntime.InvokeVoidAsync("eval", "window.__tempGallery.close()");

await JSRuntime.InvokeVoidAsync("eval", "delete window.__tempGallery");

The example being executed looks as follows:

In the previous example, you can notice several problems, starting with the use of eval, which allows executing text as JavaScript code. Although it is an easy way to run code, it poses a danger as it opens the door to code injection. Moreover, it is slow as it cannot be optimized, is difficult to debug and is generally considered a bad practice.

Another problem is the direct use of global variables in window, as there is a risk of collisions with other libraries in the project; there is no management of galleries or lifecycle, plus there is no control over when to destroy it.

A third serious problem is that there can be a memory leak if the object in memory isn’t destroyed since the browser’s garbage collection (GC) cannot collect the reference, leaving listeners and live DOM references.

New JavaScript Interop Features in Blazor 10

We could continue discussing the multiple issues in the example from the previous section, but let’s focus on the new features of Blazor in .NET 10 to address this.

The InvokeConstructorAsync Method

In .NET 10, it is possible to use the method InvokeConstructorAsync, which allows you to invoke a JS constructor asynchronously. This method will execute the new operator and return a type IJSObjectReference. For example, to display a gallery, it would be done as follows:

@code {
    ...
    private IJSObjectReference? galleryInstance;
    private GalleryInfo? currentGalleryInfo;
    ...
    private async Task ShowImagesModern(Product? product)
    {
        if (product == null || product.ImageUrls.Count == 0)
            return;

        try
        {            
            if (galleryInstance != null)
            {
                await galleryInstance.DisposeAsync();
            }
            
            var imageUrls = product.ImageUrls.ToArray();
            
            // Step 1
            galleryInstance = await JSRuntime.InvokeConstructorAsync(
                "lightboxGallery.LightboxGallery", 
                imageUrls, 
                0);

            // Step 2
            await galleryInstance.InvokeVoidAsync("show");

            // Step 3
            var currentIndex = await galleryInstance.GetValueAsync<int>("currentIndex");
            
            // Step 4
            var imagesLength = await galleryInstance.GetValueAsync<int>("images.length");
            
            //Step 5
            currentGalleryInfo = new GalleryInfo
            {
                CurrentIndex = currentIndex,
                TotalImages = imagesLength
            };

            StateHasChanged();
            
            Console.WriteLine($"Modern: Showing {imagesLength} images, starting at index {currentIndex}");
            
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error showing images: {ex.Message}");
        }
    }
}

In the above code, the exact same steps are followed to display the gallery, but with cleaner code. InvokeConstructorAsync is used to create the object and maintain its reference, which can in turn be used to invoke other methods using the traditional method InvokeVoidAsync. In our example, we invoke the method show defined in the JavaScript class.

To perform other actions, a similar approach is followed:

To advance:

await galleryInstance.InvokeVoidAsync("next");

To go back:

await galleryInstance.InvokeVoidAsync("prev");

To close the gallery:

await galleryInstance.InvokeVoidAsync("close");
currentGalleryInfo = null;
StateHasChanged();

With this new approach, we have a drastic change not only aesthetically but also internally. For example, each component has its own instance, which prevents collisions between them. Additionally, there is a controlled lifecycle with no memory leaks. You may also notice that parameter passing is much simpler and safer.

The GetValueAsync and SetValueAsync Methods

In addition to the method for invoking a JS function constructor, we can also access the values of the instance obtained through the methods GetValueAsync<TValue>(string identifier) and SetValueAsync<TValue>(string identifier, TValue value). A clear example of this can be seen when we obtain the value of the current image and the length for debugging purposes:

// Step 3
var currentIndex = await galleryInstance.GetValueAsync<int>("currentIndex");

// Step 4
var imagesLength = await galleryInstance.GetValueAsync<int>("images.length");

//Step 5
currentGalleryInfo = new GalleryInfo
{
    CurrentIndex = currentIndex,
    TotalImages = imagesLength
};

StateHasChanged();

Console.WriteLine($"Modern: Showing {imagesLength} images, starting at index {currentIndex}");

In the above code, these values are displayed through an Console.WriteLine, but you could perfectly use them to modify other UI elements or to perform operations.

Conclusion

Throughout this article, you have been introduced to the new JavaScript interop features available in .NET 10, which undoubtedly marks an evolution in the way interaction with JS occurs when necessary. It is time to create safer and typeable code in web apps based on Blazor.

Remember, you can try Telerik UI for Blazor free for 30 days:

Try Now

AI-powered coding assistants have become an important part of modern software engineering workflows. While AI tools excel at generating code quickly, they still require solid context to deliver their full value. This context becomes even more important when working with a UI library like Progress Kendo UI for jQuery, where correct APIs and configuration patterns matter. This is where the Kendo UI for jQuery AI Coding Assistant comes in.

In this article, we’ll explore what the AI Coding Assistant offers and how it helps speed up component development and prototyping when building applications with Kendo UI for jQuery.

Prerequisites: To use the Kendo UI for jQuery AI Coding Assistant, you’ll need a compatible MCP client (we’ll be using Cursor in this article), an active Kendo UI for jQuery license (or trial) and an application that includes Kendo UI for jQuery.

MCP (Model Context Protocol)

Model Context Protocol (MCP) is an open standard developed by Anthropic that standardizes how applications provide context to AI models and agents. Think of it as a common language that allows different systems to share information with AI in a structured way.

MCP works through servers that expose specific tools and knowledge to AI clients. When we install an MCP server, we’re essentially giving our AI assistant access to specialized expertise in a particular domain. For Kendo UI for jQuery, this means the AI can understand component APIs, configuration options and implementation patterns that it wouldn’t otherwise know about.

The Kendo UI for jQuery AI Coding Assistant is integrated into an MCP Server, which means any MCP-compatible client (like Cursor or VS Code) can tap into this specialized knowledge.

Check out the article The Promise of Model Context Protocol for more details on MCP and what it offers.

Setting Up the MCP Server with Cursor

Cursor is an AI-powered code editor that has native support for MCP servers. Let’s walk through the setup process.

Configuring the MCP Server

The first step is creating the MCP configuration file. In the root of our Kendo UI for jQuery project, we’ll create a .cursor folder with an mcp.json file:

{
  "mcpServers": {
    "kendo-jquery-assistant": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@progress/kendo-jquery-mcp@latest"],
      "env": {
        "TELERIK_LICENSE_PATH": "./telerik-license.txt"
      }
    }
  }
}

This configuration tells Cursor to set up the Kendo UI for jQuery MCP server with the name kendo-jquery-assistant. The TELERIK_LICENSE_PATH environment variable should point to the location of our Telerik license file.

After creating the mcp.json file, you may need to restart Cursor to pick up the new MCP configuration.

Enabling MCP in Cursor Settings

Once we’ve set up the configuration file, we’ll need to verify the MCP server is enabled in Cursor’s settings. We can open Cursor settings and navigate to the “MCP Tools” section, and we should see our kendo-jquery-assistant server listed there. We can toggle it on to enable the server.

When the server appears in the list and is enabled, we’re ready to start using the AI Coding Assistant.

Using the AI Coding Assistant

Before we dive into examples, there are a couple of things to keep in mind when working with the Kendo UI for jQuery AI Coding Assistant.

First, we need to make sure our prompts start with one of these trigger phrases: /kendojquery or @kendojquery, which tells Cursor to use the MCP server.

Second, we should verify that the MCP server is actually being used. We’ll look for confirmation messages like “Running kendo-jquery-assistant” or similar statements in the output. If we don’t see this, we might need to rephrase our prompt or check our configuration.

Building a Grid with the Help of the AI Coding Assistant

Now that we have the Kendo UI for jQuery AI Coding Assistant configured, let’s explore how it enhances our development workflow by building a Kendo UI Grid.

Before we start prompting, here’s the base HTML file we’ll be working with. It includes the Kendo UI theme, jQuery and the Kendo UI for jQuery scripts:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Kendo UI jQuery Grid Example</title>

    <!-- Kendo UI default theme -->
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/12.3.0/default/default-main.css" />

    <!-- jQuery first -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <!-- Kendo UI for jQuery -->
    <script src="https://kendo.cdn.telerik.com/2025.4.1321/js/kendo.all.min.js"></script>

    <!-- License script -->
    <script src="telerik-license.js"></script>
  </head>
  <body>
    <h1>My Kendo UI Grid</h1>
  </body>
</html>

With this foundation in place, we can start using the AI Coding Assistant to build our Grid.

Creating a Basic Grid with Sorting and Paging

We’ll start with a simple prompt to create a Grid from scratch:

Prompt: @kendojquery Generate a Kendo UI for jQuery Grid with sorting and paging enabled. Bind the Grid to dummy data.

The MCP server processes this request and provides us with a complete implementation.

The generated code includes everything we need to get started:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Kendo UI jQuery Grid Example</title>

    <!-- Kendo UI default theme -->
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/12.3.0/default/default-main.css" />

    <!-- jQuery first -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <!-- Kendo UI for jQuery -->
    <script src="https://kendo.cdn.telerik.com/2025.4.1321/js/kendo.all.min.js"></script>

    <!-- License script -->
    <script src="telerik-license.js"></script>
  </head>
  <body>
    <h1>My Kendo UI Grid</h1>

    <div id="grid"></div>

    <script>
      $(document).ready(function () {
        // Dummy data for the Grid
        const orderData = [
          { OrderID: 1, OrderDate: new Date("2024-11-06"), Freight: 12.34, ShipCity: "Antwerp", ShipCountry: "Belgium" },
          { OrderID: 2, OrderDate: new Date("2024-03-02"), Freight: 23.45, ShipCity: "Singapore", ShipCountry: "Singapore" },
          { OrderID: 3, OrderDate: new Date("2024-06-26"), Freight: 34.56, ShipCity: "Shanghai", ShipCountry: "China" },
          { OrderID: 4, OrderDate: new Date("2024-09-20"), Freight: 45.67, ShipCity: "Hamburg", ShipCountry: "Germany" },
          { OrderID: 5, OrderDate: new Date("2024-12-12"), Freight: 56.78, ShipCity: "Mumbai", ShipCountry: "India" },
          { OrderID: 6, OrderDate: new Date("2025-02-08"), Freight: 67.89, ShipCity: "Shanghai", ShipCountry: "China" },
          { OrderID: 7, OrderDate: new Date("2025-05-05"), Freight: 78.90, ShipCity: "Tokyo", ShipCountry: "Japan" },
          { OrderID: 8, OrderDate: new Date("2025-08-03"), Freight: 89.01, ShipCity: "Port Klang", ShipCountry: "Malaysia" },
          { OrderID: 9, OrderDate: new Date("2025-10-29"), Freight: 90.12, ShipCity: "Rotterdam", ShipCountry: "Netherlands" },
          { OrderID: 10, OrderDate: new Date("2025-01-23"), Freight: 10.32, ShipCity: "Vancouver", ShipCountry: "Canada" },
          { OrderID: 11, OrderDate: new Date("2024-04-17"), Freight: 21.43, ShipCity: "Colón", ShipCountry: "Panama" },
          { OrderID: 12, OrderDate: new Date("2024-07-11"), Freight: 32.54, ShipCity: "Manila", ShipCountry: "Philippines" }
        ];

        // Initialize the Grid
        $("#grid").kendoGrid({
          dataSource: {
            data: orderData,
            schema: {
              model: {
                fields: {
                  OrderID: { type: "number" },
                  OrderDate: { type: "date" },
                  Freight: { type: "number" },
                  ShipCity: { type: "string" },
                  ShipCountry: { type: "string" }
                }
              }
            },
            pageSize: 5
          },
          columns: [
            { field: "OrderID", title: "Order ID", width: 100 },
            { field: "OrderDate", title: "Order Date", format: "{0:yyyy-MM-dd}", width: 150 },
            { field: "Freight", title: "Freight", format: "{0:c2}", width: 120 },
            { field: "ShipCity", title: "Ship City", width: 150 },
            { field: "ShipCountry", title: "Ship Country" }
          ],
          sortable: true,
          pageable: true,
          height: 400
        });
      });
    </script>
  </body>
</html>

The code includes realistic dummy data, proper Grid initialization with jQuery’s document ready pattern and appropriate configuration for sorting and paging.

This is where the AI Coding Assistant really shines. Instead of receiving generic code that may not work correctly with Kendo UI for jQuery, we’re getting code that follows the library’s practices and patterns.

Adding Filtering Capabilities

Building on our basic Grid, let’s add filtering functionality with a follow-up prompt:

Prompt: @kendojquery Can we add filtering to this Grid?

The MCP server understands our existing context and enhances the implementation:

$("#grid").kendoGrid({
  dataSource: {
    data: orderData,
    schema: {
      // ...
    },
    pageSize: 5
  },
  columns: [
    // ...
  ],
  sortable: true,
  filterable: true, // filterable is added
  pageable: true,
  height: 400
});

The MCP server intelligently added the filterable: true property to our Grid configuration, which demonstrates how we can iteratively build up our components through conversation with the AI.

Enabling Inline Editing

We’ll take our Grid one step further by adding the ability to edit cells inline:

Prompt: @kendojquery Can we make the ship city and ship country columns editable inline?

The MCP server enhances our Grid with editing capabilities:

$("#grid").kendoGrid({
  dataSource: {
    data: orderData,
    schema: {
      OrderID: { type: "number", editable: false },
      OrderDate: { type: "date", editable: false },
      Freight: { type: "number", editable: false },
      // adding editable: true to these columns
      ShipCity: { type: "string", editable: true },
      ShipCountry: { type: "string", editable: true }
    },
    pageSize: 5
  },
  columns: [
    // ...
  ],
  // ...
});

The MCP server understood exactly what we needed. It added the editable property and configured the dataSource schema to specify which fields should be editable. The OrderID, OrderDate and Freight fields are marked as non-editable, while ShipCity and ShipCountry can be edited directly in the Grid cells.

This iterative approach shows the power of working with the AI Coding Assistant. We started with a basic Grid and progressively added sorting, paging, filtering, and now inline editing, all through natural conversation.

Wrap-up

While much of the AI coding hype focuses on newer frameworks, the Kendo UI for jQuery AI Coding Assistant shows that teams working with established technologies like jQuery can still benefit from these same productivity gains.

In this article, we’ve seen how the MCP server provides contextually aware code that follows Kendo UI patterns. Instead of fixing generic AI output or cross-referencing documentation, we can iterate quickly and let the assistant handle the component-specific details.

For more details, check out the official Kendo UI for jQuery AI Coding Assistant documentation. And don’t forget, you can try it yourself, free for 30 days!

Try Kendo UI for jQuery

If you have not yet read Learning Vercel AI SDK—Part 1, that is the best way to get started to follow along today.

In this article, we will learn how to build your first AI agent using the Vercel AI SDK and OpenAI. We are going to use:

• TypeScript
• Vercel AI SDK
• OpenAI

Before getting started, make sure you have the required setup and OpenAI API key. You can get an API key from here.

Setting Up the Project

To get started, create a new Node.js application and set it up to use TypeScript. For that, in your terminal, run the following commands:

npm install -D typescript @types/node ts-node
npx tsc  -init

Once the commands have been executed, replace the contents of your tsconfig.json file with the configuration shown below.

{
  "compilerOptions": {
    "target": "ES2022", 
    "module": "ES2022",
    "moduleResolution": "node",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

After that, install the dependencies below:

• npm install dotenv
• npm install -D @types/dotenv
• npm install -D @types/node tsx typescript
• npm i --save-dev @types/json-schema
• npm install ai @ai-sdk/openai zod

Next, add the .env file to the project root and paste the OpenAI key information below inside the file.

OPENAI_API_KEY= ""

Now that you’ve added your API key and installed all the dependencies, you’ll notice that your package.json file has been updated with these changes.

{
  "name":"agent1",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "build": "tsc",
    "start": "tsc && node dist/index.js"
  },

  "devDependencies": {
    "@types/dotenv": "^6.1.1",
    "@types/json-schema": "^7.0.15",
    "@types/node": "^25.0.6",
    "ts-node": "^10.9.2",
    "tsx": "^4.21.0",
    "typescript": "^5.9.3"
  },
  "dependencies": {
    "@ai-sdk/openai": "^3.0.7",
    "ai": "^6.0.27",
    "dotenv": "^17.2.3",
    "zod": "^4.3.5"
  }
}

In your setup, the package name and version may differ. Next, create a src folder in your project and add an index.ts file inside it. In that file, log the value of your OpenAI key to verify that the project has been configured correctly.

import dotenv from 'dotenv';
dotenv.config();
const openaiApiKey: string | undefined = process.env.OPENAI_API_KEY;
console.log(`OpenAI API Key: ${openaiApiKey}`);

When you execute npm run start in your terminal, you should see your OpenAI key printed in the console.

Agents use tools to perform tasks. So let’s start with creating tools.

Creating a Tool

We’ll begin by creating a very simple tool. The Vercel AI SDK makes it very straightforward to create a tool. You call the tool function and pass an object in it. The input object has properties such as, description, inputSchema and asynchronous execute function.

import { tool, zodSchema } from "ai";
import z from "zod";

export const getTimeTool = tool({
    description: 'Returns the current date and time in ISO format.',
    inputSchema: zodSchema(z.object({})),
    execute: async () => {
      return { time: new Date().toISOString() };
    },
});

The above tool returns the time in ISO format. Notice:

• Schema: z.object({}) : That means model is instructed that to call this tool by passing an empty object.
• inputSchema: zodSchema(z.object({})): That means the tool’s input is an empty object; the model should not pass any arguments, and the SDK will enforce that.

So, the getTimeTool returns an object containing current time in ISO format.

Next, let’s create one more tool to greet the person.

import { tool, zodSchema } from 'ai';
import { z } from 'zod';

export const greetTool = tool({
    description: 'Greets a person by name. Use when the user says hello or asks to greet someone.',
    inputSchema: zodSchema(z.object({
      name: z.string().describe('Name of the person to greet'),
    })),
    execute: async ({ name }) => {
      return { message: `Hello, ${name}!` };
    },
  });

This tool takes person name as input parameter and a prints greeting message.

Creating Agent

We will now use these two tools within an agent to generate a greeting that includes the current time in ISO 8601 format.

To orchestrate tool execution, instantiate an agent using the ToolLoopAgent class. This agent is responsible for iterative tool invocation and model coordination. As shown below, the constructor requires three primary inputs:

• model — The underlying LLM responsible for reasoning and tool selection
• instructions — A system-level directive that constrains behavior (e.g., instructing the agent to greet the user and include the current time in ISO format)
• tools — An array of tool definitions that the agent is authorized to invoke during execution

By injecting the previously defined tools into the tools array, the agent can call them as needed, retrieve the current timestamp, format it in ISO 8601 and construct the greeting deterministically.

var system = `You are a helpful assistant. For this task you MUST:
1. First call the gettime tool to get the current time in ISO format.
2. Then call the greet tool with the person's name (e.g. DJ).
3. After you have called BOTH tools and received their results, write one short final message that greets the person and includes the time in ISO format (e.g. "Hey DJ, here is the time in ISO format: ...").
Do not skip the tools. Call both gettime and greet first, then write your final combined message.`;

const myAgent = new ToolLoopAgent({
    model: openai("gpt-4o-mini"),
    instructions: `${system}`,
    tools: {
      timetool: getTimeTool,
      greettool: greetTool,
    },
    toolChoice: 'auto',
    stopWhen: stepCountIs(3),
});

You can use this agent as shown below, by calling the generate function and passing the user message in the prompt.

const { output } = await myAgent.generate({
    prompt: [
        {
            role: 'user',
            content: "Greet Tom Cruise"
        },
    ],
})
console.log(output);

You should get this output from the agent:

Debugging Agent

You can debug the agent’s behavior by inspecting the steps returned during execution. These steps show each model decision and tool call, making it easier to trace how the agent reached its final output.

const { output,steps } = await myAgent.generate({
    prompt: [
        {
            role: 'user',
            content: "Greet Tom Cruise"
        },
    ],
})

console.log(steps[0].toolCalls[0].toolName);
console.log(steps);

The output should include the name of the first toolName alongside metadata of all tools being invoked.

As you see from the steps output, you can print result of the tool, input and other details. For example, the below snippet prints the first toolName and the output of second tool.

const { output,steps } = await myAgent.generate({
    prompt: [
        {
            role: 'user',
            content: "Greet Tom Cruise"
        },
    ],
})

console.log(steps[0].toolCalls[0].toolName);
console.log(steps[0].toolResults[1].output);

You should get the output:

Agent Loop Control

By default, the agent runs for 20 steps, but we are overriding that for three steps by passing a value to stopWhen property.

const myAgent = new ToolLoopAgent({
    //rest of code
    stopWhen: stepCountIs(3),
});

By default, an agent runs for up to 20 steps. In each step, the model can either generate a final response or call a tool.

If the model generates text, the agent finishes. If it calls a tool, the AI SDK executes that tool and feeds the result back to the model.

To allow the agent to call multiple tools in sequence, we need to increase the stopWhen limit. After each tool execution, the agent starts a new generation step, giving the model another chance to call a tool or produce the final output.

Each step represents one generation that is either generated text or call to the tool. The loop continues until:

• A finish reasoning other than tool calls is returned, or
• A tool that is invoked does not have an execute function, or
• A tool call needs approval, or
• A stop condition is met

To stop the loop, you can combine the multiple stop conditions such as:

1. stepCountIs
2. hasTooCall
3. custom condition

hasToCall is a built-in stopping condition and stops the agent loop when a particular tool is called. You can combine two stop conditions as shown below:

const myAgent = new ToolLoopAgent({
    model: openai("gpt-4o-mini"),
    instructions: `${system}`,
    tools: {
      timetool: getTimeTool,
      greettool: greetTool,
    },
    toolChoice: 'auto',
    stopWhen: [stepCountIs(3), 
        hasToolCall('greettool')
    ]
});

Agent to Send Blog Summary

Putting everything together, let’s build an agent that fetches a blog post, generates a summary and sends it to a specified email address. We’ll use the following libraries:

1. Resend – To send the email. You’ll need an API key from Resend to authenticate requests.
2. Cheerio – To parse and extract content from the blog’s HTML page.

Before implementing the agent, install the required dependencies in your project:

npm install resend
npm install cheerio

Once installed, the agent can use Cheerio to scrape the blog content, generate a summary via the model and then use Resend to deliver that summary via email.

Let’s start by defining a tool that extracts content from a given webpage. This tool will fetch the page, parse its HTML and return the relevant information needed for further processing.

import { tool, zodSchema } from 'ai';
import { z } from 'zod';
import * as cheerio from 'cheerio';

export const extractWebpageTool = tool({
  description: 'Fetches a webpage URL and returns its main text content.',
  inputSchema: zodSchema(z.object({
    url: z.string().url().describe('Webpage URL'),
  })),
  execute: async ({ url }) => {
    try {
      const res = await fetch(url, { headers: { 'User-Agent': 'Agent/1.0' } });
      if (!res.ok) return { success: false, content: '', error: `HTTP ${res.status}` };
      const html = await res.text();
      const $ = cheerio.load(html);
      $('script, style, nav, footer').remove();
      const content = $('body').text().replace(/\s+/g, ' ').trim().slice(0, 15_000);
      return { success: true, url, content };
    } catch (err) {
      return { success: false, content: '', error: err instanceof Error ? err.message : String(err) };
    }
  },
});

Next let’s create a tool to send an email, as shown below:

import { tool, zodSchema } from 'ai';
import { z } from 'zod';
import { Resend } from 'resend';

const resend = new Resend('key);  // your key

export const sendEmailTool = tool({
  description: 'Sends an email. Pass to and body.',
  inputSchema: zodSchema(z.object({ to: z.string().email(), body: z.string() })),
  execute: async ({ to, body }) => {
    const { data, error } = await resend.emails.send({
      from: 'hello@nomadcoder.ai',
      to: [to],
      subject: 'From Agent',
      html: body.includes('<') ? body : `<p>${body.replace(/\n/g, '</p><p>')}</p>`,
    });
    return error ? { success: false, error: error.message } : { success: true, message: `Sent to ${to}` };
  },
});

Next, combine these two tools and register them with the agent so it can orchestrate their execution as part of its workflow.

var system = `You are a helpful assistant. For this task you MUST:
1. First call the extractwebpagetool to get the content of the webpage.
2. Create a summary of the webpage content.
3. After that call the sendemail tool to send the email to the recipient.
3. After you have called BOTH tools and received their results, write one short final message that greets the person and includes the time in ISO format (e.g. "Hey DJ, here is the time in ISO format: ...").
Do not skip the tools.`;

const myAgent = new ToolLoopAgent({
    model: openai("gpt-4o-mini"),
    instructions: `${system}`,
    tools: {
      extractWebpageTool: extractWebpageTool,
      senemail: sendEmailTool,
    },
    toolChoice: 'auto',
    stopWhen: stepCountIs(3),
});

Next, invoke the agent in loop as shown below:

const { output,steps } = await myAgent.generate({
    prompt: [
        {
            role: 'user',
            content: "Send summary of https://www.telerik.com/blogs/how-to-use-cursor-modern-angular to debugmode@outlook.com"
        },
    ],
})

console.log(output);

This agent will send the summary of the given post to the passed email address.

Summary

In this article, we explored how to build an agent using the Vercel AI SDK and implemented a practical example that generates a blog summary and sends it to a specified email address. I hope you found it helpful. Thanks for reading.

Prompting is the primary way we provide input to AI models. When we need a model to generate something for us, we begin the process by prompting it with a plain-language request to complete the task. When we’re having simple, back-and-forth personal exchanges with conversational models, our prompts can be extremely casual—sometimes even identical to the way we’d talk to another human being!

However, when we’re considering generative AI in the context of a feature we’re adding to our applications, casual prompts will no longer suffice. To leverage AI in production applications, the results need to be 1) relatively consistent and 2) formatted in an expected, parseable structure. If a user asks the same question twice, the output should be similar both times. If our frontend was built to map over a JSON object, we don’t want the model to output markdown.

Because AI models are non-deterministic by nature, even the most perfect, precise prompt cannot prevent the occasional hallucination or error. However, prompt engineering is one of our most effective and accessible tools for getting a model to behave in the way we would like.

Why Engineer Prompts?

In the 2020 paper Language Models are Few-Shot Learners, Brown, et al. demonstrate that GPT-3 is able to successfully leverage in-prompt demonstrations (or “shots”) to perform tasks it was not explicitly trained to complete.

This approach is known as “in-context learning.” The team tested the model with “zero-shot” (only the instruction), “one-shot” (one demonstration) and “few-shot” prompts (in the case of this study, 10-100 demonstrations, depending on available context—but worth noting that the term “few-shot” prompting today generally only refers to the inclusion of 2-10 demonstrations).

As we can see in the chart below, they prove that, “While zero-shot performance improves steadily with model size, few-shot performance increases more rapidly, demonstrating that larger models are more proficient at in-context learning.”

The important takeaway from this study for us is that, by using this approach, they were able to achieve results with non-finetuned models that were on par or exceeding the results from finetuned models.

Models have, of course, advanced since the writing of this paper—it’s no longer entirely accurate to say that prompt engineering alone will offer equivalent results to finetuning (or other newer techniques, like RAG). However, it is still fair to say that if we engineer our prompts, we will achieve noticeably high-quality results. Depending on our project goal and budget, that may be good enough.

The Structure of a Well-Engineered Prompt

As of the time of this writing, there’s a common structure that has emerged as a best practice approach for prompt engineering: role + task + format + example.

Prompts that include at least one of each of these pieces tend to perform better than prompts that do not—although there has been some documented difference between the models as to which order is preferable. For example, one model might do better when the task is the first thing listed, another when the task is last. Experimenting with your model of choice to see what gets the best results is still a required aspect of the prompt engineering process.

If you’re totally new to prompt engineering and would like a deeper dive into that structural method, you might enjoy Understanding the Architecture of a Prompt, which explains in greater detail how to most effectively write each part.

To look at a sample prompt using this structure, this is the system prompt from a playlist generating app I built with my fellow Progress DevRel (and friend) Alyssa Nicoll:

const SYSTEM_PROMPT =You are a music recommendation assistant. Given a user's prompt (mood, activity, genre, era, etc.), return a JSON object with a "tracks" array that includes at least 10 tracks. Each track must have: title (string), artist (string), album (string), release year (number), confidence ranking for how well this song fits the prompt (number 0-100), one sentence explaining why this song fits the prompt (string). Return an error for unusable prompts: offensive content, gibberish, or explicitly impossible requests. Otherwise always try to generate recommendations. Return ONLY valid JSON, no markdown or explanation. Example success: {"tracks":[{"title":"Song Name","artist":"Artist Name","album":"Album Name","year":2020,"confidence":92,"reason":"The driving rhythm and anthemic chorus perfectly match the high-energy workout vibe."}]}``;

As we do in that example, you may also find it helpful to think about the “system prompt” and the “user prompt” separately. In fact, many model APIs offer these as distinct inputs. The system prompt is intended to specify the context and description for the task, while the user prompt contains the task itself.

In the playlist generator example, you’ll note that the end user’s input (the actual genre, mood, etc. that the model is meant to generate the playlist around) is not included. In this case, the system and user prompts get passed in via the OpenAI API under separate system and user roles.

const completion = await openai.chat.completions.create({
      model: "gpt-4o-mini",
      messages: [
        { role: "system", content: SYSTEM_PROMPT },
        { role: "user", content: prompt.trim() },
      ],
      temperature: 0.7,
    });

Why Does Prompt Engineering Work?

While it’s helpful to know best practices, as developers it often serves us better to know the “why” behind the methodology. In this case, why does a prompt that’s engineered like the one above perform better than a prompt that just says, “Recommend 10 songs based on the user’s input and format it as a JSON object”?

Mostly, it has to do with how models work at a high level. Prompts tend to be more successful when they mirror the types of data that the model was trained on.

For now, what’s most important to remember is that AI models are—at their core—document completion machines. Early AI models (before the chat interface became popular) didn’t “respond” to a prompt, they just continued them. So if my prompt was “Mary had a little,” the LLM would likely return “lamb” to complete the line. If you haven’t read the Tokens, Predictions and Temperature article from earlier in this series, I’d encourage you to go give it a quick skim—it explains that prediction process in more detail.

Even the chat models we’re so familiar with today are still doing exactly this. They’ve just been trained on transcripts of conversations, so they can “understand” the patterns of a back-and-forth exchange. When we interact with a conversational AI (like ChatGPT or Claude), the API is just wrapping our inputs (and its own outputs) in the structure of a transcript, so that the LLM can process them together in a structured context—like a document. This allows it to leverage its prediction mechanisms in order to “complete” that document. To the user, it feels like having a real conversation. To the LLM, it’s more like we submitted a half-finished play script and asked it to generate the rest for us.

There is, admittedly, very little functional difference between thinking that a model is conversing with us vs. understanding that it’s completing our conversational transcript. However, making that mental shift can help us shape our prompts more effectively.

Often, when we think about NLP, we assume it means that because a computer can understand our “natural” language, we can instruct it in the same way we would another human. While it’s true that we can use natural language—as in words and sentences instead of code—the LLM is not going to process our request like a human would. Instead, it’s going to insert our prompt as the most recent line in its script, and attempt to continue the script to the best of its ability, based on all the other sample scripts it was trained on.

By phrasing our requests like the samples in the training data and giving it as much context as possible directly in the prompt, we can enable it to make better, more accurate completions.

Stay tuned: Join us in the ever-evolving conversation about AI.

Ever since the significant changes that landed with .NET 8, we’ve seen incremental updates to Blazor over several releases.

This year seems set to continue that trend, with some key gaps being filled and refinements to key features. So no structural shifts, new hosting models or render modes, but we do finally get a Label component for forms!

Here are some notable Blazor changes and new features that landed in .NET 11 Previews 1 and 2.

TempData for Static SSR

Ever since .NET 8, we’ve had SSR mode for Blazor. It’s a way of building applications using Blazor’s Razor components, but without resorting to Blazor Server or Blazor WASM to run those components.

With SSR, when a user requests your page, Blazor runs on the server, locates the relevant page component, renders it and returns the generated HTML which is then displayed in the browser.

In this mode you can also use forms to capture user input.

But sometimes you want to take information and persist it between page navigations. For example, maybe a user enters their name in a form, and you want to show them a personalized message on the subsequent confirmation screen, “Thanks, Jon, for your order.”

Prior to .NET 11, this required you to pass the value along somehow, with common solutions involving query string, session state or custom cookies.

But MVC and Razor Pages developers have long been able to use something called Temp Data to store that information between screens. Temp Data is specifically for capturing short-lived messages or data that only need to survive one redirect, then disappear.

In .NET 11, Temp Data is coming to Blazor and will be available as a cascading parameter in static SSR components, with no extra registration needed beyond the usual AddRazorComponents():

[CascadingParameter]
public ITempData? TempData { get; set; }

Let’s say you’re about to redirect your user to a different page. You can write a value to TempData:

private void HandleSubmit()
{
    TempData["SuccessMessage"] = $"Thanks {Input.Name}, your message has been sent!";
    Navigation.NavigateTo("/contact/confirmation");
}

Then pick that up on the page they’re redirected to:

protected override void OnInitialized()
{
    // Get() reads and marks for deletion - one-shot read
    confirmationMessage = TempData?.Get("SuccessMessage") as string;
}

Under the hood, these values are stored in a cookie in the user’s browser.

Once you’ve retrieved a value via Get, it’s marked for deletion. So if you want to check the value without it being deleted, you can use Peek instead. If you want to keep something that has been marked for deletion you can call Keep to cancel the deletion.

IHostedService in Blazor WebAssembly

If you’re using Blazor WebAssembly, you may well have realized there’s one thing you can’t easily do with Blazor running in the browser: schedule jobs to run in the background.

This is a challenge because sometimes you want to separate background work from your component lifecycles. For example, you might want to poll an API (maybe a pricing or notifications endpoint).

In WASM apps, prior to .NET 11, this has been tricky to achieve, often requiring the use of timers within specific components (tied to component lifecycles and only running when the component is rendered), or singleton services with a manual timer.

.NET 11 simplifies this with IHostedService.

You can add a hosted service to your Blazor WASM app and it will start with the app (not a specific component), and run independently of navigation.

AddHostedService<T>() now works with WebAssemblyHostBuilder:

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddHostedService<PricePollingService>();
await builder.Build().RunAsync();

The service itself is standard BackgroundService, identical to its server-side equivalent:

public class PricePollingService(PriceState state) : BackgroundService
{
    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        while (!stoppingToken.IsCancellationRequested)
        {
            await FetchPricesAsync();
            state.NotifyUpdate();
            await Task.Delay(TimeSpan.FromSeconds(3), stoppingToken);
        }
    }
}

This example uses a Singleton PriceState service and a component which listens for updates to that state.

The PriceState service acts as a shared state container which the background service writes to:

Program.cs

builder.Services.AddSingleton<PriceState>();

PriceState.cs

public class PriceState
{
    public event Action? OnChange;

    public List<PriceQuote> Quotes { get; private set; } = [];
    public DateTimeOffset LastUpdated { get; private set; }

    public void UpdateQuotes(List<PriceQuote> quotes)
    {
        Quotes = quotes;
        LastUpdated = DateTimeOffset.UtcNow;
        OnChange?.Invoke();
    }
}

And then you can subscribe to the OnChange event when that data changes:

PriceWatcher.razor

@implements IDisposable
@inject PriceState State

<p>Last updated: @State.LastUpdated</p>

<!-- render price data here -->

@code {
    protected override void OnInitialized()
    {
        State.OnChange += HandleStateChanged;
    }

    private void HandleStateChanged()
    {
        InvokeAsync(StateHasChanged);
    }

    public void Dispose()
    {
        State.OnChange -= HandleStateChanged;
    }
}

Important note: WASM is single-threaded. BackgroundService gives you a convenient way to abstract background tasks, but not true parallelism.

I/O-bound work (polling, fetching) is typically fine because it’s mostly waiting (await), which frees the thread up in the meantime. But CPU-heavy work would block the UI.

But fear not, there’s a solution for that too!

Web Worker Template

For anything CPU-heavy, you want to keep the main thread (which also handles the UI) free.

.NET 11 introduces dotnet new webworker, which scaffolds a Razor class library with the JS plumbing needed to run .NET code in a browser web worker. Modern web browsers support web workers as a convenient way to run tasks completely separately from your main application’s thread.

The template will create a WebWorkerClient class which uses a factory pattern to create worker instances. Then you can define your worker methods using [JSExport].

Here’s an example, which computes primes (a CPU-heavy task).

PrimesWorker.cs

[SupportedOSPlatform("browser")]
public static partial class PrimesWorker
{
    [JSExport]
    public static string ComputePrimes(int limit)
    {
        // CPU-intensive work runs on the worker thread
        // UI stays responsive
        var result = SieveOfEratosthenes(limit);
        return JsonSerializer.Serialize(new PrimeResult(primes.Count, primes.TakeLast(5).ToArray(), sw.ElapsedMilliseconds));
    }
}

public record PrimeResult(int Count, int[] LastFive, long ElapsedMs);

You can invoke this method from a component (via a web worker).

private const int limit = 50_000_000;

var worker = await WebWorkerClient.CreateAsync(JSRuntime);
var result = await worker.InvokeAsync<PrimeResult>(
    "WebWorkerAppDemo.PrimesWorker.ComputePrimes",
    args: [limit]);

If you were to run that same prime number code directly in a component, it would lock UI updates for as long as it’s running. Try it with the above approach (using web workers), and the UI will stay entirely responsive throughout.

Some important notes about web workers:

• Class must be static partial with [SupportedOSPlatform("browser")].
• Return types: primitives or strings only (complex types must be serialized to JSON).
• Your project needs <AllowUnsafeBlocks>true</AllowUnsafeBlocks> set in its csproj.
• The worker loads a second .NET runtime, so startup is slow but compute is genuinely parallel.
• Template produces a class library, which you can then reference from your main project.

Relative Navigation

This is one of those “if you know, you know” challenges.

In previous versions of .NET, when you want to render a relative link, things got tricky. Say you wanted a link to an FAQ page at /faq. .NET would assume you wanted to navigate to /faq at the app root. But if you were already on /docs/, you might well have wanted that link to go to /docs/faq.

The workaround up to now has been to use hardcoded full paths everywhere, which is asking for trouble when you start moving things around.

NavigationManager.NavigateTo() and NavLink now accept RelativeToCurrentUri, which, when set to true, means relative paths will resolve against the current page path instead of the app root:

@page "/docs/getting-started"

@* .NET 11 - resolves to /docs/getting-started/overview *@
<NavLink href="overview" RelativeToCurrentUri="true">Overview</NavLink>

@* Before - had to hardcode the full path *@
<NavLink href="/docs/getting-started/overview">Overview</NavLink>

Programmatic navigation:

Navigation.NavigateTo("faq", new NavigationOptions
{
    RelativeToCurrentUri = true
});

Note: Path must not have a leading slash for relative resolution (“overview” not “/overview”).

DisplayName and Label Components

This may well be one of those features that leaves you wondering how it took so long to appear, but Blazor now has a Label component (and a handy DisplayName one too).

Both components read display names from model attributes:

public class ProductModel
{
    [Display(Name = "Production Date")]  // DisplayName and Label read this
    public DateOnly? ProductionDate { get; set; }

    [DisplayName("Unit Price (£)")]     // Also supported, but [Display] takes precedence
    public decimal Price { get; set; }

    public int StockCount { get; set; }  // Falls back to raw property name
}

Here’s how you can use them in a form:

@* Label wraps the input - accessible by default *@
<Label For="@(() => Model.ProductionDate)" class="form-label">
    <InputDate @bind-Value="Model.ProductionDate" class="form-control" />
</Label>

@* DisplayName standalone *@
<th><DisplayName For="@(() => Model.Price)" /></th>

Previously you had to write your own <label> components, so this is a welcome addition.

EnvironmentBoundary Component

Ever felt the need to show different information on the screen depending on which environment your app’s running in? (Think UI that only shows up when you’re running locally, or on staging.)

Now you can conditionally render content based on the hosting environment:

<EnvironmentBoundary Include="Development">
    <p>Debug tools enabled</p>
</EnvironmentBoundary>

<EnvironmentBoundary Exclude="Production">
    <p>Test banner</p>
</EnvironmentBoundary>

<EnvironmentBoundary Include="Staging,Production">
    <p>Analytics script</p>
</EnvironmentBoundary>

Previously, you had to inject IWebHostEnvironment and write manual conditional statements. This declarative approach is cleaner (note the matching of environment is case-insensitive).

BasePath Component

Another small but handy change.

<BasePath /> in App.razor replaces the hardcoded <base href="https://www.telerik.com/">:

<head>   
    <BasePath />   
</head>

This will take the value from NavigationManager.BaseUri and essentially returns whatever UsePathBase sets (which you can configure in Program.cs).

This is handy if you’re running your app on a subpath, as the base href will be automatically set to the correct value.

SignalR ConfigureConnection

If you need to configure your SignalR connection for Blazor Server, you now have easier config available via AddInteractiveServerRenderMode.

In .NET 11, it accepts a ConfigureConnection callback for the underlying SignalR connection:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode(options =>
    {
        options.ConfigureConnection = connectionOptions =>
        {
            connectionOptions.ApplicationMaxBufferSize = 512 * 1024;
            connectionOptions.TransportMaxBufferSize = 512 * 1024;
            connectionOptions.Transports = HttpTransportType.WebSockets;
          connectionOptions.AllowStatefulReconnects = true;
            connectionOptions.CloseOnAuthenticationExpiration = true;
        };
    });

Previously, you had to resort to global SignalR hub config. Now you can target Blazor’s hub specifically.

You’ll probably find yourself spending time here if you run into errors because your components hold too much state, you want to tweak stateful reconnection logic or have other reasons to tweak how the SignalR part of Blazor Server works.

What to Watch

That wraps up a quick tour of some of the highlights of .NET 11 Previews 1 and 2 for Blazor.

Here are a few things that look set to land in future previews:

• SessionData for static SSR – The session-scoped counterpart to TempData
• Cache component – Component-level output caching
• Client-side validation without a circuit – No need to resort to Blazor Server for your statically rendered forms
• Aspire integration improvements
• Virtualize with variable-height items
• [SupplyParameterFromTempData] attribute

.NET 11 will be released in November, with preview releases dropping every month until then.

Angular developers spend a lot of time on repetitive UI tasks like scaffolding components, wiring data into views and adjusting layouts. Or, at least they used to, before the age of AI.

Now, MCP-powered tools can automate much of that work—letting coding assistants generate Angular code and tools like Agentic UI Generator turn prompts or data into working UI so developers can move faster.

“AI made refactoring and handling technical debt much faster, allowing us to focus on market features. Validating ideas, creating POCs, and writing tests are also areas where we’ve seen huge impact. The whole development lifecycle changed, and it opened the door for exploration and innovation.”
— Progress Product Team Insight

Model Context Protocol (MCP) is a way for AI assistants to connect directly to tools and dev environments instead of generating code in isolation.

Without that connection, AI can only make suggestions based on patterns it has seen before. It doesn’t know what Angular version you’re using, what components exist in your UI library or what APIs are actually available in your project. (Unless your assistant is built into a full-blown IDE, like Cursor.)

Often, with AI, the output might look correct, but developers end up fixing hallucinated APIs or rewriting scaffolding to make it fit their app. MCP closes that gap by giving AI access to real context—frameworks, component libraries, project structure and tooling. Instead of guessing what code might work, the assistant can generate output grounded in the tools you’re actually using.

So if you love VS Code, for example, but Copilot just isn’t cutting it for frontend AI-generated code, this is where MCP can fill the gap.

This is especially true for frontend work. Angular developers spend a lot of time on repetitive UI tasks like scaffolding components, wiring data into views and configuring layouts. MCP-powered tools can automate much of that groundwork. Coding assistants can generate valid Angular structures, and tools like Agentic UI Generator can turn prompts or data into working UI.

The result isn’t magic code generation—it’s a faster starting point. AI helps developers get moving, while humans still shape the final result.

Task #1: Scaffolding Angular Components Faster

Creating components is one of the most common tasks in Angular development. Even with Angular CLI, developers still need to generate the component, add inputs, wire services and start building the template.

If your coding assistant is connected to the Progress Kendo UI for Angular MCP server, it understands the components available in your UI library and can generate valid Angular structures using them.

With an MCP-powered coding assistant, you can start with a simple prompt:

#kendo_component_assistant Create a ProductCard Angular component that displays a product image,
name, and price using Kendo UI components.

The assistant can generate a working Angular component structure:

@Component({
  selector: 'app-product-card',
  imports: [KENDO_LAYOUT, NgOptimizedImage],
  template: `
    <kendo-card class="product-card" width="100%">
      <img
        kendoCardMedia
        [ngSrc]="product().imageUrl"
        [width]="product().imageWidth"
        [height]="product().imageHeight"
        [alt]="product().imageAlt"
      />

      <kendo-card-body>
        <h3 kendoCardTitle>{{ product().name }}</h3>
        <p class="product-price" [attr.aria-label]="'Price: ' + formattedPrice()">
          {{ formattedPrice() }}
        </p>
      </kendo-card-body>
    </kendo-card>
    ...

Instead of starting from scratch, developers get a valid Angular starting point immediately and can focus on refining the UI.

Task #2: Turning Data Into UI

A large portion of frontend work isn’t writing complex logic—it’s translating data and ideas into working UI.

As devs, we are accustomed to taking API responses or product requirements and turn them into forms, dashboards or application layouts. That process usually starts with sketching the structure of the interface and then building the components to support it.

With the Angular Agentic UI Generator, you can start that process with a prompt instead.

Because the tool connects to your UI library through MCP, it understands the components available in your stack and can generate layouts using them. Instead of manually assembling the structure of the page, the generator produces a working Angular layout you can refine.

For example, you might start with a prompt like this:

#kendo-ui-generator Create a responsive Workflow Composer app layout that includes: a left sidebar that only takes up 1/3 max of the UI for available workflow steps (this is essentially a column that is a list of individual cards/tasks), and main canvas area for building connected flows.

From there, the generator produces a starting UI layout using Kendo UI for Angular components.

Task #3: Updating and Iterating on UI

Building the first version of a UI is only the beginning. Most frontend work happens in the iteration phase—adjusting layouts, adding interactions and refining components as requirements evolve.

This is another area where MCP-connected assistants can help speed things up. Instead of manually digging through templates and wiring new behavior, developers can describe the change they want and let the assistant update the structure.

For this last task, I took our generated Workflow Composer app and added drag-and-drop support with a simple prompt:

#kendo_ui_generator let’s add drag and drop

Rather than rewriting the layout or manually integrating interaction logic, the assistant extends the generated UI and adds the new behavior.

One thing I’ve noticed while experimenting with this workflow is that single task prompts tend to work best. Breaking changes into bite-sized requests often produces cleaner results when working with MCP-powered tools and Copilot.

Why MCP Matters

AI coding tools are useful, but without access to your real development environment, they can only generate suggestions based on patterns they’ve seen before.

MCP changes that by connecting AI assistants directly to the tools developers already use. Instead of guessing which components exist or how your project is structured, the assistant can interact with real frameworks, libraries and development workflows.

That connection is what makes tasks like generating Angular components, creating UI layouts or iterating on interfaces possible with simple prompts. Rather than starting from scratch each time, devs get a working starting point that fits their stack.

Conclusion

Angular developers spend a lot of time on repetitive UI work—scaffolding components, turning data into layouts and iterating on interfaces as requirements evolve.

MCP-powered tools can help automate much of that groundwork. Coding assistants can generate valid Angular structures, and tools like the Angular Agentic UI Generator can turn prompts into working UI layouts that developers can refine and extend.

If you’d like to try it yourself, you can install our MCP servers and learn how to get started with Coding Assistant and Agentic UI Generator in the documentation.

Explore the MCP setup guide in the docs.

In some modern mobile applications, we can see a component called Bottom Sheet in action, which allows the user to slide a section up from the bottom of the application to display actions or information without changing the screen.

This type of component does not exist as part of the native .NET MAUI controls. Fortunately, the Progress Telerik suite of controls for .NET MAUI offers the .NET MAUI BottomSheet component, which we will analyze during this post. Let’s get started!

Discovering the Telerik .NET MAUI BottomSheet Component for .NET MAUI

We will explore different features of the Bottom Sheet component, for which I will show you a window created with XAML code that could well represent a section of a real application. Next, I will show you how to implement the Bottom Sheet control to display selection options to users in the same window.

Creating an Example Project

Suppose we have a project that allows users to order food from restaurants through an application. For the creation of the XAML page, I have used different controls from the Telerik UI for .NET MAUI suite, which enable the quick creation of custom graphical interfaces:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height=".2*" />
        <RowDefinition Height=".8*" />
    </Grid.RowDefinitions>

    <!--  Header Section  -->
    <VerticalStackLayout Padding="25,25,25,0" Spacing="10">
        <Label
            FontAttributes="Bold"
            FontSize="12"
            Text="DELIVERY ADDRESS"
            TextColor="White" />

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnAddressTapped" />
            </Grid.GestureRecognizers>

            <Label
                x:Name="CurrentAddressLabel"
                FontSize="16"
                Text="123 Main Street, City"
                TextColor="White"
                VerticalOptions="Center" />

            <Label
                Grid.Column="1"
                Margin="10,0,0,0"
                FontSize="14"
                Text="▼"
                TextColor="White"
                VerticalOptions="Center" />
        </Grid>

        <!--  Search Bar  -->
        <telerik:RadBorder
            Padding="10"
            BackgroundColor="#6B5BAF"
            CornerRadius="10">
            <Grid ColumnDefinitions="Auto,*">
                <Label
                    Margin="0,0,10,0"
                    FontSize="16"
                    Text=""
                    VerticalOptions="Center" />
                <telerik:RadEntry
                    x:Name="StoreSearchEntry"
                    Grid.Column="1"
                    BackgroundColor="Transparent"
                    BorderThickness="0"
                    ClearButtonVisibility="WhileEditing"
                    Placeholder="Search a restaurant or dish"
                    PlaceholderColor="#B8B0D0"
                    TextColor="White" />
            </Grid>
        </telerik:RadBorder>
    </VerticalStackLayout>

    <!--  Store List  -->
    <telerik:RadBorder
        Grid.Row="1"
        Margin="0,10,0,0"
        BackgroundColor="#F2F1F6"
        CornerRadius="25,25,0,0">
        <telerik:RadCollectionView
            x:Name="StoresCollection"
            Margin="15"
            SelectionChanged="OnStoreSelected"
            SelectionMode="Single">
            <telerik:RadCollectionView.ItemsLayout>
                <telerik:CollectionViewLinearLayout ItemSpacing="15" />
            </telerik:RadCollectionView.ItemsLayout>
            <telerik:RadCollectionView.ItemTemplate>
                <DataTemplate>
                    <Border
                        Padding="0"
                        BackgroundColor="White"
                        StrokeShape="RoundRectangle 15"
                        StrokeThickness="0">
                        <Border.Shadow>
                            <Shadow
                                Brush="#CFD0D4"
                                Opacity="0.5"
                                Radius="10"
                                Offset="5,5" />
                        </Border.Shadow>
                        <Grid Padding="0" RowDefinitions="150,Auto">
                            <!--  Store Header Image  -->
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height=".6*" />
                                    <RowDefinition Height=".4*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width=".4*" />
                                    <ColumnDefinition Width=".2*" />
                                    <ColumnDefinition Width=".4*" />
                                </Grid.ColumnDefinitions>

                                <!--  Header Image  -->
                                <Image
                                    Grid.RowSpan="2"
                                    Grid.ColumnSpan="3"
                                    Aspect="AspectFill"
                                    Source="{Binding Header}" />

                                <!--  Logo with gradient border  -->
                                <Grid
                                    Grid.Row="1"
                                    Grid.Column="0"
                                    Margin="10,0,0,0"
                                    HeightRequest="70"
                                    HorizontalOptions="Start"
                                    VerticalOptions="End"
                                    WidthRequest="70">
                                    <Border
                                        HeightRequest="65"
                                        HorizontalOptions="Center"
                                        StrokeShape="Ellipse"
                                        StrokeThickness="3"
                                        WidthRequest="65">
                                        <Border.Stroke>
                                            <LinearGradientBrush EndPoint="0,1">
                                                <GradientStop Offset="0.0" Color="#FEFEEF" />
                                                <GradientStop Offset="0.25" Color="#EBD570" />
                                                <GradientStop Offset="0.5" Color="#FF94C3" />
                                                <GradientStop Offset="0.75" Color="#A573E4" />
                                                <GradientStop Offset="1.0" Color="#A9E2EE" />
                                            </LinearGradientBrush>
                                        </Border.Stroke>
                                        <Image
                                            Aspect="AspectFill"
                                            HorizontalOptions="Center"
                                            Source="{Binding Logo}" />
                                    </Border>
                                </Grid>

                                <!--  Rating Badge  -->
                                <Border
                                    Grid.Row="1"
                                    Grid.Column="2"
                                    Margin="0,0,10,10"
                                    Padding="10,5"
                                    BackgroundColor="#F8F8F7"
                                    HeightRequest="35"
                                    HorizontalOptions="Center"
                                    StrokeShape="RoundRectangle 10"
                                    StrokeThickness="0"
                                    VerticalOptions="End"
                                    WidthRequest="70">
                                    <HorizontalStackLayout
                                        HorizontalOptions="Center"
                                        Spacing="8"
                                        VerticalOptions="Center">
                                        <Label
                                            FontSize="14"
                                            Text="⭐"
                                            VerticalOptions="Center" />
                                        <Label
                                            FontAttributes="Bold"
                                            FontSize="14"
                                            Text="{Binding Rating}"
                                            TextColor="Black"
                                            VerticalOptions="Center" />
                                    </HorizontalStackLayout>
                                </Border>
                            </Grid>

                            <!--  Store Info  -->
                            <VerticalStackLayout
                                Grid.Row="1"
                                Padding="15"
                                Spacing="8">
                                <Label
                                    FontAttributes="Bold"
                                    FontSize="18"
                                    Text="{Binding Name}"
                                    TextColor="Black" />

                                <Grid ColumnDefinitions="*,*,*">
                                    <Label
                                        FontSize="13"
                                        Text="{Binding Minimum, StringFormat='${0} min'}"
                                        TextColor="#666666" />
                                    <Label
                                        Grid.Column="1"
                                        FontSize="13"
                                        HorizontalOptions="Center"
                                        Text="{Binding ServiceFee, StringFormat='Fee: ${0}'}"
                                        TextColor="#666666" />
                                    <Label
                                        Grid.Column="2"
                                        FontSize="13"
                                        HorizontalOptions="End"
                                        Text="{Binding DeliveryTime}"
                                        TextColor="#666666" />
                                </Grid>
                            </VerticalStackLayout>
                        </Grid>
                    </Border>
                </DataTemplate>
            </telerik:RadCollectionView.ItemTemplate>
        </telerik:RadCollectionView>
    </telerik:RadBorder>
</Grid>