Promptless AI-First Blazor Apps

Create a promptless, AI-first Blazor application from start to finish using Progress Telerik UI for Blazor components.

Normally when we think about AI-based applications, we often think of chat-style apps. These apps consist mainly of a text box, some buttons to add context like images, and a button to start a conversation with an LLM model. However, we can talk about another type of AI-based applications, with a Promptless AI-First approach. Let’s see what it’s about.

What Is a Promptless Application?

The concept of promptless applications refers to those in which the user does not write a prompt to make a request. Instead, the user interacts with controls they are accustomed to, such as checkboxes, sliders, calendars, etc., with the application being responsible for creating the prompt according to the user’s selection.

Some advantages of this approach are:

• Reduces friction by preventing the user from having to write a prompt
• Guides the outcome, since you are the one who creates the default prompt that you can test to drive the best return information
• Acts as a guardrail, since by using standard controls with restrictions, you limit the output to valid options, avoid unusual cases, minimize attempts at prompt injection, among other things
• Improves traceability, by being able to know exactly which combination of options produced each response, which allows reproducing outputs and improving the system
• Improves accessibility by making interaction easier for all users

Undoubtedly this approach is beneficial for both businesses and users.

Building a Promptless Travel Planner App

We are going to create an application that implements the promptless AI-first concept using Blazor. To do this, let’s imagine that we want to create a page that helps users plan a trip through interaction with different Progress Telerik controls. Behind the scenes, we will use the entered information to send a request to an LLM model and display the resulting itinerary on the page.

Creating a Promptless AI-First Project

Let’s start by creating a project with the Blazor Web App template, selecting Interactive render mode as Server and Interactivity location as Global. Next, use the Telerik Blazor Web App (Progress) template or add the Blazor components to an existing app.

Once the project is created, install the following NuGet packages:

• Microsoft.Extensions.AI
• Microsoft.Extensions.AI.OpenAI
• Markdig

The above packages will enable communication with AI models, in this case OpenAI’s directly, thanks to the use of Microsoft.Extensions.AI packages. Additionally, the Markdig package will be used to render markdown content in the application.

Creating the Models for the Application

In our scenario, we will map a UI control to a model field. To do this, let’s start by creating a folder Models. Inside, we will add a file called TripPreferences.cs, which will look like the following:

In the code above, we create a pair of enumerations to control both the budget and the trip pace. Additionally, the class TripPreferences is created, which contains a field for each form input. Among the options we define the place to travel, the travel dates, number of adults and children, budget, interests, among others.

Creating a PromptBuilder Service

Since we will use controls for the user to select options in the UI, we need a service that translates the values into instructions usable by the AI model. For this demonstration, we will create a new class called PromptBuilder.cs that allows building both the system prompt and the user prompt:

In the BuildSystemPrompt method, we build a StringBuilder specifying how the model should behave, the format to use in the response, and preventing the conversation from being tracked. This is because we want responses designed as if the user does not reply.

Also, you can notice that at a certain point in the prompt, it specifies that there is access to the tool web_search, which we will enable later and which will allow obtaining fresh and relevant information.

On the other hand, the BuildUserPrompt method will be responsible for building the prompt that will be sent to the AI model, with all the user’s requirements. In the case of interests and diet, we only add them if something has been selected; otherwise that information is not added.

Additionally, if the user wants to include other notes, these are treated as a separate section in the prompt, indicating to the model that they cannot overwrite the initial rules.

Setting Up the Client to Query the AI Models

The next step will be to create the client that will allow querying the LLM model for the desired information. We will do this from Program.cs:

In the code above, we read the API key from the configuration. In this example we will check the correct configuration from the planning component, but you could add some mechanism to notify the user if it has not been configured from here, that is, when starting the application.

Another important point is that we make use of the Responses API thanks to the method GetResponsesClient. We configure it this way because we will use the web search tool.

Finally, we also add a singleton instance of the PromptBuilder service. Now, let’s see how to use everything we have done above in a Blazor component.

Creating a Component to Render the Markdown

AI models regularly respond in markdown format. To display this content correctly in the app’s user interface, let’s create a component called MarkdownContent.razor that allows rendering the content correctly:

The component’s operation is very simple. It receives the markdown text as a parameter, uses the Markdig library to convert it into safe HTML, and returns the result in a MarkupString that Blazor can render as HTML.

Creating the AI Travel Planner Page

Now let’s build the page-like component that will allow interaction with users. This component will be called Planner.razor and will look as follows:

In the code above we can highlight some details:

• We define the route /planner to access the page.
• We use Telerik components such as TelerikCard, TelerikDropDownList, TelerikDateRangePicker, TelerikNumericTextBox, TelerikButtonGroup, TelerikLoader, among many others, which help us create Blazor interfaces quickly and reliably.
• Data such as destination, dates, number of travelers, budget and pace are captured with visual controls recognizable by users, such as dropdowns, date pickers, numeric boxes, etc., which help prevent errors and validate data.
• For interests and dietary preferences we use a TelerikChip, which allows choosing multiple options at once, changing their visual properties according to the selected state.
• We add an optional TelerikTextArea so the user can add an event of interest, but limited to 30 characters to prevent it from becoming a new prompt.
• Immediately after showing the user the response generated in MarkdownContent, we display the web sources consulted.
• For demonstration purposes, we show the generated prompt that is sent to the AI model.

Now, let’s see how the component’s logic looks.

Adding State and Component Logic

To complete the page-like component, we will create the file Planner.razor.cs to separate the graphical definition from the component logic. We will start by creating the state properties, the list of operations, and the methods:

In the code above we can see some important things:

• We use dependency injection to obtain the instance of PromptBuilder and IChatClient from the constructor.
• Preferences: It is the instance of the model bound to the form controls.
• Itinerary: The markdown text returned by the model.
• LastPrompt: The last prompt sent, which we will use for demonstration purposes to show the prompt sent to the AI model.
• ErrorMessage: Error message in case something fails.
• WebSources: List of URLs consulted by the model.
• Destinations, Languages, AllInterests and AllDiets: Lists that feed the dropdown and chip controls.

Next, we add a couple of methods that help manage multi-selection of chips:

Here we use a trick where we take advantage of the fact that the method Remove returns a true value if the item exists in the collection and can be removed, or false if it was not found for removal. If a false value is obtained, it is added to the corresponding list.

Finally, we proceed to add the method GenerateItineraryAsync, which triggers the call to the AI model to obtain the recommended itinerary:

This method is what works the magic to give an accurate response to the user. Let’s see what it does:

• Any leftover interaction is cleared to start with a clean UI.
• We use the PromptBuilder service to translate the Preferences object to plain text.
• We validate that the IChatClient has been correctly initialized with an API KEY. Otherwise, an error is shown to the user.
• At this point we configure ChatOptions with a HostedWebSearchTool in the list of Tools. This allows the AI model to search the internet for relevant information. ToolMode = ChatToolMode.RequireAny forces the model to invoke at least one tool, which translates into always activating the web search, which is the only configured tool. Also, with IncludedProperties = { "web_search_call.action.sources" } we can obtain the consulted sources.
• A call is made to the provider’s API to obtain a response from the selected AI model.

With the above code ready, it’s time to test the application. For this example, suppose someone is planning to visit New York to attend the 2026 FIFA World Cup final and wants to explore events and activities related to the tournament around the dates of the final:

In the image above, you can see how the user should interact with standard web controls, allowing the search to be configured in an easy and intuitive way.

On the other hand, when starting the search, behind the scenes fresh and relevant information has been fetched to create an ideal itinerary for the selected options.

Likewise, a series of links that helped the AI model propose an excellent itinerary based on the dates and event described can be seen.

Conclusion

Throughout this article, you have seen how to create a promptless AI-first Blazor application from start to finish. We have looked at some Telerik components that can help you build graphical interfaces for this type of apps.

In addition, you have learned how to translate component values into a prompt to send to an AI model. Finally, you have learned how the use of tools can help you provide better results to users, based on their needs. Now it’s your time to implement such solutions in your applications, to make the most of AI and Telerik UI for Blazor controls.

If you’re new to Telerik UI for Blazor, you can access the full 120+ component library for a free trial.

Try Now