Bring AI to Your Blazor Apps: Build Smart, Interactive Maps with Azure OpenAI [Webinar]

Bring AI to Your Blazor Apps: Build Smart, Interactive Maps with Azure OpenAI [Webinar]

In this session, Shriram Sankaran, Senior Product Manager at Syncfusion, walks you through how to build smart, AI-powered, interactive maps in your Blazor applications using Azure OpenAI—all without traditional geospatial APIs or databases. You’ll learn how to take a user query like “cafes in Paris” or “hospitals in New York” and transform it into dynamic, real-time map markers enriched with detailed descriptions and even images. Using Blazor (.NET 9), Azure OpenAI Chat Completions, and Syncfusion Blazor components, Shriram demonstrates how quickly you can build a fully functional, natural-language-driven mapping experience. Whether you're exploring AI-powered features for enterprise apps or experimenting with .NET’s growing AI ecosystem, this demo gives you a complete, working example you can start using today. Find the Source Code here: https://github.com/SyncfusionExamples... You’ll Learn How To: Set up a Blazor Web App using .NET 9 with server interactivity Connect to Azure OpenAI using Chat Completions Generate structured JSON geolocation data from natural language prompts Parse AI responses and bind them to an interactive map Use Syncfusion Blazor Maps, TextBox, and Spinner components Display contextual tooltips with dynamic images Build a fully interactive AI-powered map with minimal configuration Who This Session Is For: .NET developers adopting AI in their applications Blazor developers building interactive UI features Teams exploring Azure OpenAI integrations Beginners with no geospatial or mapping background BOOKMARK DETAILS ----------------- [00:00] Welcome & Session Overview [00:33] What You’ll Build Today [01:27] Agenda & Learning Path [02:12] Demo Overview [03:01] Why AI for Geospatial Experience? [03:56] Prerequisites & Setup [04:18] Starting the Live Demo [05:32] Installing Syncfusion Packages [08:16] Registering Services & Configuring the App [09:38] Creating the Azure OpenAI Service Class [16:49] Handling AI Response Success & Error Paths [18:12] Registering DI, License Keys & Models [21:06] Building the Marker Model [23:16] Implementing the AI-Powered Marker Fetch [25:43] Adding Syncfusion Map Components [27:18] Adding a Natural Language Search Box [30:19] Adding Dynamic Tooltip Images [32:04] Live Demo Showcase [33:20] Key Takeaways & Resources SUBSCRIBE ------------- Syncfusion on YouTube:    / syncfusioninc       Sign up to receive email updates: https://www.syncfusion.com/account/em...     SOCIAL COMMUNITIES ----------------------------- Facebook:   / syncfusion   X: https://x.com/Syncfusion LinkedIn:   / syncfusion   Instagram:   / syncfusionofficial       #blazor #dotnet #azureopenai #syncfusion #blazormaps #aiapps #dotnet9 #developers #webdevelopment