TL;DR: Let’s see how to integrate AI-powered task management with the Syncfusion Blazor Kanban component. This blog guides you in setting up Microsoft AI Extensions, configuring Syncfusion tools, and creating a seamless interface for AI-driven task generation. Features include smart task suggestions, a Kanban layout for task visualization, and a project details dialog.
In today’s fast-evolving tech landscape, combining artificial intelligence (AI) with rich user interface (UI) components can significantly enhance the functionality and user experience of your web apps.
Additionally, Microsoft released the AI Extensions packages to simplify the AI integration process.
In this blog, we’ll walk you through the process of integrating Microsoft’s AI Extension packages with Syncfusion Blazor Kanban component, offering a comprehensive guide to bringing AI-driven features seamlessly into your Blazor WebApps. By following the steps outlined, you’ll learn how to combine the intelligence of AI with the interactive UI elements provided by Syncfusion, making your apps smarter and more responsive to user needs.
Overview
When managing a project, generating tasks from project details can be time-consuming. By integrating AI, tasks can be automatically generated based on user input, displayed on a Kanban board, and managed with smart suggestions that adapt to the project’s needs. This integration streamlines task management, making it more efficient, intuitive, and responsive to changes in real-time.
Getting started with Blazor Kanban Board and Microsoft’s AI Extension
Prerequisites
Before we begin, ensure you have the following:
- Visual Studio 2022 with ASP.NET and web development environment.
- .NET 8 / .NET 9 SDK.
- Create a new Blazor web app with server interactivity.
- An OpenAI / Azure OpenAI account to use the AI models.
Step 1: Create a new Blazor project
You can create a new Blazor project with interactive server mode using Visual Studio via Microsoft Templates or the Syncfusion Blazor Extension.
Step 2: Install Syncfusion Blazor and Microsoft’s AI Extension packages
To enable AI Integration with Blazor Kanban Board, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install the Syncfusion.Blazor.Kanban, Syncfusion.Blazor.Themes, Microsoft.Extensions.AI.OpenAI and Azure.AI.OpenAI packages.
Alternatively, you can use the following package manager commands to achieve the same.
Install-Package Syncfusion.Blazor.Kanban -Version 27.2.2
Install-Package Syncfusion.Blazor.Themes -Version 27.2.2
Install-Package Microsoft.Extensions.AI.OpenAI -Version 9.0.1-preview.1.24570.5
Install-Package Azure.AI.OpenAI -Version 2.0.0
Step 3: Register Syncfusion Blazor Service
Now, register the Syncfusion Blazor Service in the ~/ Program.cs file of your Blazor web app.
....
using Syncfusion.Blazor;
....
builder.Services.AddSyncfusionBlazor();
....
Step 4: Add stylesheet and script resources
The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Refer to the stylesheet and script in the < head> and < body> tags in the App.razor page as follows:
- For the .NET 8 Blazor web app, include it in the ~Components/App.razor file.
<head>
....
<link href="_content/Syncfusion.Blazor.Themes/tailwind.css" rel="stylesheet" />
</head>
….
<body>
....
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>
Step 5: Create a UI
Now, create a clean and simple UI with the following sections:
- AI smart task suggestion: To input project details and generate tasks.
- Kanban Board: To manage tasks using a Kanban layout.
- Project details dialog: A modal for entering project details and task count, with a button to generate tasks via AI.
AI smart task suggestion
Now, set up a simple interface to allow users to input project details and specify how many tasks should be generated:
- TextBox for project details: A multiline text box for users to input project descriptions.
- TextBox for task count: Users can specify the number of tasks to generate.
- Progress button: This button triggers the task generation logic.
Kanban Board
Build the Kanban Board to visually display tasks across columns like To Do, In Progress, Review, and Done.
Project details dialog
The Dialog allows adding new projects, including input fields for project details and the number of tasks:
- Modal dialog: Provides a smooth user experience when entering project details.
- Progress button: Starts the task generation process upon submission.
To integrate the AI smart task suggestion, Kanban Board for task management, and project details Dialog into your Blazor app, add the following code in the Pages/Home.razor file.
@page "/"
@using Syncfusion.Blazor.Kanban
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Notifications
@using Syncfusion.Blazor.SplitButtons
@using BlazorApp.Models
@if (IsHomepage)
{
<div class="row" id="customcontainer">
<div class="col-12 text-center my-3">
<h3>AI Smart Task Suggestion</h3>
</div>
<div class="col-12 text-center my-3">
<div class="d-flex justify-content-center">
<div class="col-12 col-md-6 d-flex cuscol-1 justify-content-center">
<div style="width:100%; max-width: 500px;">
<!-- Syncfusion TextBox for Project Details -->
<div class="e-rte-label1">
<label>Project Details</label>
</div>
<div class="e-rte-field" style="margin: 10px">
<SfTextBox @bind-Value="@ProjectName" Multiline=true />
</div>
<!-- Syncfusion TextBox for Task Count -->
<div class="e-rte-label2">
<label>Number of tasks</label>
</div>
<div class="e-rte-field" style="margin: 10px">
<SfTextBox @bind-Value="@TaskCount" min="1" Type="InputType.Number" />
</div>
<!-- Syncfusion ProgressButton to trigger task generation -->
<div class="d-flex justify-content-center" style="margin: 10px;">
<SfProgressButton Content="@ContentGenerateTask" OnClick="@GenerateTasks" Duration=1000>
<ProgressButtonEvents OnBegin="BeginGenerateTasks" OnEnd="EndGenerateTasks"></ProgressButtonEvents>
</SfProgressButton>
</div>
</div>
</div>
</div>
</div>
</div>
}
else
{
<div class="row" id="toast-kanban-observable">
<div class="col-12 text-center my-3">
<h3>Kanban Board</h3>
<div style="float: right;">
<!-- Syncfusion Button to open project details dialog -->
<SfButton OnClick="OpenProjectDetailsDialog">Add New Projects</SfButton>
</div>
</div>
<div>
<!-- Syncfusion Kanban board to display tasks -->
<SfKanban TValue="SmartSuggestionDataModel" KeyField="Status" DataSource="@SmartSuggestions">
<KanbanColumns>
<KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
<KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
<KanbanColumn HeaderText="Review" KeyField="@(new List<string>() {"Review"})"></KanbanColumn>
<KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
</KanbanColumns>
<KanbanCardSettings HeaderField="Title" ContentField="Description" GrabberField="Color">
<Template>
@{
SmartSuggestionDataModel card = (SmartSuggestionDataModel)context;
<div class="card-template">
<div class="e-card-header">
<div class="e-card-header-caption">
<div class="e-card-header-title e-tooltip-text">@card.Title</div>
</div>
</div>
<div class="e-card-content">
<div class="e-text e-tooltip-text">@card.Description</div>
</div>
<div class="e-card-footer">
@{
<div class="e-card-tag e-tooltip-text">@card.StoryPoints</div>
}
</div>
</div>
}
</Template>
</KanbanCardSettings>
</SfKanban>
</div>
</div>
}
<!-- Syncfusion Toast for showing messages -->
<SfToast @ref="ToastObj" ID="toast_type" Target="@ToastTarget" ShowCloseButton="true">
<ToastPosition X="Right" Y="Top" />
</SfToast>
<!-- Syncfusion Dialog for providing project details as input -->
<SfDialog ShowCloseIcon="true" IsModal="true" Width="400px" @bind-Visible="@IsProjectDetailsDialogEnabled" CssClass="custom-dialog">
<DialogTemplates>
<Header>AI Smart Task Suggestion</Header>
<Content>
<div class="custom-row-1">
<div class="col-12 d-flex cuscol-1 justify-content-start e-left">
<div class="w-100">
<!-- Syncfusion TextBox for Project Details in Dialog -->
<div class="e-rte-label1" style="margin: 10px">
<label>Project Details</label>
</div>
<div class="e-rte-field" style="margin: 10px">
<SfTextBox @bind-Value="@ProjectName" Multiline=true />
</div>
<!-- Syncfusion TextBox for Task Count in Dialog -->
<div class="e-rte-label2" style="margin: 10px; padding-top: 20px;">
<label>Number of tasks</label>
</div>
<div class="e-rte-field" style="margin: 10px">
<SfTextBox @bind-Value="@TaskCount" min="1" Type="InputType.Number" />
</div>
</div>
</div>
</div>
</Content>
<FooterTemplate>
<div class="custom-row-2">
<div class="col-12 d-flex cuscol-0">
<div class="w-100">
<!-- Syncfusion ProgressButton to trigger task generation from dialog -->
<SfProgressButton Content="@ContentGenerateTask" OnClick="@GenerateTasks" EnableProgress="false">
<ProgressButtonEvents OnBegin="BeginGenerateTasks" OnEnd="EndGenerateTasks"></ProgressButtonEvents>
</SfProgressButton>
</div>
</div>
</div>
</FooterTemplate>
</DialogTemplates>
</SfDialog>
Now, add the following code to the Home.razor.cs file to manage AI task generation and Kanban Board.
using Microsoft.AspNetCore.Components;
using BlazorApp.Models;
using Syncfusion.Blazor.Notifications;
using System.Text.Json;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
namespace BlazorApp.Components.Pages
{
public partial class Home
{
// Syncfusion Toast object to display notifications
SfToast ToastObj;
// The target element for the Toast notification
private string ToastTarget { get; set; } = "#toast-kanban-observable";
// The text displayed on the "Generate Tasks" button
public string ContentGenerateTask { get; set; } = "Generate Tasks";
// The name of the project for which tasks will be generated
private string ProjectName { get; set; } = string.Empty;
// The number of tasks to be generated
private string TaskCount { get; set; } = string.Empty;
// Boolean to control the visibility of the project details dialog
private bool IsProjectDetailsDialogEnabled { get; set; } = false;
// Indicates whether tasks have been successfully generated
private bool IsProjectTasksGenerated { get; set; } = false;
// Boolean to manage visibility of the homepage
private bool IsHomepage { get; set; } = true;
// A list to store the task recommendations generated by AI
private List<SmartSuggestionDataModel> SmartSuggestions { get; set; } = new List<SmartSuggestionDataModel>();
// Stores any warning text to be displayed for validation errors
private string WarningText { get; set; }
// Template for displaying error messages in the Toast notification
private RenderFragment GetErrorTemplate() => builder =>
{
builder.OpenElement(0, "div");
builder.AddContent(1, "An error occurred during the AI process, please try again.");
builder.CloseElement();
};
// Triggered when the "Generate Tasks" button is clicked, updates its text to indicate progress
public void BeginGenerateTasks(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args)
{
ContentGenerateTask = "Generating...";
}
// Manages the end of the task generation process, resets the UI, and closes the dialog
public async Task EndGenerateTasks(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args)
{
while (!IsProjectTasksGenerated)
{
await Task.Delay(1000);
IsHomepage = false;
}
ContentGenerateTask = "Generate Tasks";
CloseDialog();
}
// Opens the project details dialog to allow user input for project and task count
private void OpenProjectDetailsDialog()
{
IsProjectDetailsDialogEnabled = true;
}
// Starts the task generation process and sets the state
private async Task GenerateTasks()
{
IsProjectTasksGenerated = false;
await GenerateProjectTasks();
}
// Closes the project details dialog and clears the input fields
private void CloseDialog()
{
IsProjectDetailsDialogEnabled = false;
TaskCount = string.Empty;
ProjectName = string.Empty;
IsProjectTasksGenerated = false;
StateHasChanged();
}
}
}
Step 6: Add Model class
Next, create a data model to represent the tasks in your app. The SmartSuggestionDataModel class is designed to store essential information about each task, such as its title, status, color, detailed description, and story points. This model is useful for managing tasks on a Kanban Board.
Refer to the following code example.
namespace BlazorApp.Models
{
public class SmartSuggestionDataModel
{
// The title of the task.
public string Title { get; set; }
// The current status of the task.
public string Status { get; set; }
// The color associated with the task for visual representation.
public string Color { get; set; }
// A detailed description of the task.
public string Description { get; set; }
// The story points for the task, representing its complexity or effort.
public int StoryPoints { get; set; }
}
}
Step 7: Initialize the AI client
The AzureOpenAIClient API from Azure.AI.OpenAI connects to your Azure OpenAI resource using the endpoint and API key. Specify the model to use for task generation with the .AsChatClient() method. Then, add the prompt that is sent to the AI to get the right results.
What does the prompt do?
The prompt is a message you send to the AI to guide it in generating the right output. In our case, we ask the AI to generate a specific number of tasks for a project, each with fields like Title, Status, Description, StoryPoints, and Color.
Why is the prompt important?
The prompt defines the structure of the AI response. By being clear and specific about what you need (like fields and format), you ensure that the AI generates exactly what you expect.
In this case, by specifying that you want tasks with Title, Status, Description, StoryPoints, and Color, the AI can return data that you can directly use in your app.
Refer to the following code example for Azure OpenAI.
namespace BlazorApp.Components.Pages
{
public partial class Home
{
………
// Generates project tasks using AI and updates the task list
private async Task GenerateProjectTasks()
{
try
{
if (!string.IsNullOrEmpty(ProjectName) && !string.IsNullOrEmpty(TaskCount))
{
string result = string.Empty;
var description = $"Generate {TaskCount} task recommendations for {ProjectName}. Each task should include the following fields: Title, Status, Description, StoryPoints and Color, formatted according to the dataset. Set the Status to 'Open', and use black for the Color. Use the dataset provided below to create your recommendations. IMPORTANT: Return the data strictly in JSON format with all the required fields. Only the JSON data is needed, no additional text. Return only the JSON array format without any explanations.";
result = await GetCompletionAsync(description); // Get AI response
string data = result.Replace("```
{% endraw %}
json", "").Replace("
{% raw %}
```", "").Replace("\r", "").Replace("\n", "").Replace("\t", "").Trim();
var modifiedData = JsonSerializer.Deserialize<List<SmartSuggestionDataModel>>(data);
SmartSuggestions = modifiedData != null ? SmartSuggestions.Concat(modifiedData).ToList() : SmartSuggestions;
IsProjectTasksGenerated = true;
}
else
{
WarningText = string.IsNullOrEmpty(ProjectName) && string.IsNullOrEmpty(TaskCount)
? "Enter the required task creation details.”
: !string.IsNullOrEmpty(TaskCount) ? "Enter the Project Details" : "Enter the number of tasks";
IsProjectTasksGenerated = true;
await ToastObj.ShowAsync(new ToastModel { Content = WarningText, ShowCloseButton = true, Timeout = 3000 });
}
}
catch
{
await ToastObj.ShowAsync(new ToastModel { ContentTemplate = @GetErrorTemplate(), ShowCloseButton = true, Timeout = 0 });
}
}
// Sends a request to Azure OpenAI and retrieves the task recommendations
private async Task<string> GetCompletionAsync(string description)
{
// Initialize the Azure OpenAI client with required configurations
IChatClient client =
new AzureOpenAIClient(
new Uri("Your Endpoint"),
new System.ClientModel.ApiKeyCredential("Your Azure OpenAI Api Key"))
.AsChatClient(modelId: "Your Azure OpenAI Deployment Name");
// Fetch the AI completion result
var response = await client.CompleteAsync(description);
return response.Message.Text;
}
}
}
For OpenAI, you can use the following code.
private async Task<string> GetCompletionAsync(string description)
{
IChatClient client =
new OpenAIClient("Your API key")
.AsChatClient(modelId: "Your Model name");
var response = await client.CompleteAsync(description);
return response.Message.Text;
}
For Ollama, install the Microsoft.Extensions.AI.Ollama NuGet package.
Install-Package Microsoft.Extensions.AI.Ollama -Version 9.0.1-preview.1.24570.5
For Ollama, you can use the following code.
private async Task<string> GetCompletionAsync(string description)
{
IChatClient client =
new OllamaChatClient(new Uri("Your Endpoint"), "Your Model Name");
var response = await client.CompleteAsync(description);
return response.Message.Text;
}
Step 8: Run the app
Finally, press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the app. This will render the output in your default web browser. We will get the output that resembles the following image.
Note: Each model can generate different results, so the task data, such as title, description, and story points, may change based on the AI model’s processing and context.
Conclusion
Thanks for reading! By this guide, you have successfully integrated Microsoft’s AI Extension packages with Syncfusion Blazor Kanban component. This integration allows you to leverage AI to dynamically generate and manage tasks within a Kanban board, enhancing productivity and user experience. By leveraging the power of AI, you can dynamically generate tasks, automate workflows, and create a Kanban board system that adapts intelligently to user needs.
For more Syncfusion AI solutions for Blazor, Angular, React, Vue, and TypeScript/JavaScript platforms. Feel free to experiment further with different AI models and Syncfusion components to tailor the solution to your specific needs. Happy coding!
If you’re an existing Syncfusion user, you can download the latest version of Essential Studio® from the License and Downloads page. For those new to Syncfusion, we offer a 30-day free trial so you can experience these exciting features firsthand.
Need help? Feel free to reach out via our support forum, support portal, or feedback portal. We’re always here to assist you!
Top comments (0)