From Chat to Charts: Build an AI-Powered .NET MAUI Chatbot That Converts Text into Charts

What if users could describe the chart they want and have an AI assistant create it instantly? In today’s data-driven landscape, creating compelling visualizations traditionally requires technical expertise in data formats, chart libraries, and complex coding. This tutorial changes that paradigm entirely.

In this blog post, we’re taking our chart generation journey to the next level with a complete AI-powered chatbot experience. Building on our previous explorations of JSON-based chart generation and natural language processing, we’ve now created a fully-featured ChatGPT-like assistant that can seamlessly convert conversational requests into interactive Syncfusion^® MAUI Charts. Think ChatGPT, but it specializes in data visualization with full cross-platform support.

Building on proven natural language processing techniques and robust charting frameworks, this solution empowers users to create interactive visualizations through simple conversation.

The Vision: From words to visual insights

Our objective was to develop an intuitive, conversational interface where users can:

• Engage naturally with an AI assistant to address data visualization needs.
• Request charts using plain language descriptions.
• View dynamically generated, professionally styled charts directly within the chat.
• Modify visualizations through follow-up conversations.
• Maintain a persistent conversation history similar to popular AI assistants.

The result is an application that feels familiar to users of modern AI tools while featuring specialized chart-generation capabilities powered by Syncfusion’s robust .NET MAUI toolkit.

Building the foundation with Syncfusion’s SfAIAssistView

At the core of our application lies Syncfusion’s SfAIAssistView control, which provides the foundation for ChatGPT-like chat experiences. This component manages:

• Message threading and conversation flow.
• User input processing and validation.
• Response formatting and rendering.
• Chat history management.

We’ve enhanced this foundation with custom elements, including:

• A sidebar for managing conversation history.
• Custom response templates for different content types.
• A familiar three-dot menu with additional options.

<syncfusion:SfAIAssistView x:Name="assistView"
                           ShowHeader="False"
                           AssistItems="{Binding Messages}"
                           ItemLongPressedCommand="{Binding LongPressedCommand}"
                           Background="#FDFBF7">
   <syncfusion:SfAIAssistView.Behaviors>
      <local:AssistViewBehavior EditorView="{StaticResource EditorView}" 
                                HeaderView="{x:Reference headerView}"/>
</syncfusion:SfAIAssistView.Behaviors>

The AI-powered Chart Generation pipeline

When a user requests a chart, several powerful systems work together in sequence:

• Capture: The user’s natural language request is captured through the chat interface.
• Structure: This request is formatted into a structured prompt for the Azure OpenAI service.
• Process: Our AI service returns a JSON-formatted chart specification.
• Deserialize: The application converts this JSON into a ChartConfig object.
• Select: A custom ChatTemplateSelector determines which chart type to render based on the configuration.
• Render: Syncfusion’s charting components (Cartesian or Circular) display the final visualization.

The seamless integration of these technologies creates a smooth user experience. For instance, our chart template selector intelligently determines which type of chart to render:

public class ChatTemplateSelector : ResponseItemTemplateSelector
{
    public DataTemplate DefaultTemplate { get; set; }
    public DataTemplate CartesianTemplate { get; set; }
    public DataTemplate CircularTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if (item is CartesianAssistItem)
        {
            return CartesianTemplate;
        }
        else if (item is CircularAssistItem)
        {
            return CircularTemplate;
        }
        else
            return DefaultTemplate;
    }
}

Intelligent prompt engineering

Our prompt engineering ensures that the AI returns precisely the chart configuration we need:

private string GetUserAIPrompt(string userPrompt, string jsonString)
 {
     string userQuery = $"Given a user query and chart data: {userPrompt + jsonString}" +
            "\nPlease adhere to the following conditions:" +
            "\n1. Provide a clear title for the topic in bold." +
            "\n2. Offer a simplified answer consisting of 4 key points, formatted with numbers." +
            "\n3. Ensure the response is a plain string." +
            "\n4. If the text is in markdown format, convert it to HTML." +
            "\n5. Provide the response based on chat history." +
            "\n6. Eliminate any asterisks (**) and any quotation marks in the string." +
            "\n7. Provide nested list as mentioned {userPrompt}";

     return userQuery;
 }

Comprehensive visualization options with Syncfusion Charts

The application supports a comprehensive range of chart types and styles through Syncfusion’s charting components:

Chart type support

• Cartesian Charts: Line, area, column, spline, etc.
• Circular Charts: Pie, doughnut, and radial charts.

Advanced customization features:

Each chart is fully customizable with configurable:

• Color palettes (defined in ChartResources.xaml).
• Axes and legends.
• Tooltips and interactivity.
• Animations and transitions.

<x:Array x:Key="Pallet1" Type="{x:Type Brush}">
   <SolidColorBrush Color="#1089E9" />
   <SolidColorBrush Color="#08CDAA" />
   <SolidColorBrush Color="#F58400" />
   <SolidColorBrush Color="#9656FF" />
</x:Array>

Implementing persistent chat History

Our application maintains user conversations through a robust history management system:

• Chat histories are saved using XML serialization for reliability.
• Archive functionality for organizing previous conversations.
• Cross-platform file storage handling.

The XmlFileCreator class handles the persistence logic:

public class XmlFileCreator
{
   private string xmlFilePath;

   public XmlFileCreator()
   {
#if ANDROID
      xmlFilePath = Path.Combine(FileSystem.AppDataDirectory, "ChatHistory.xml");
#elif IOS
      xmlFilePath = Path.Combine(FileSystem.AppDataDirectory, "ChatHistory.xml");
#else
      xmlFilePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "ChatHistory.xml");
#endif
   }

   // Methods for loading, saving, and managing chat histories
   public ObservableCollection<ChatHistoryModel> LoadFromXml()
   {
      // Implementation...
   }

   public void SaveToXml(ObservableCollection<ChatHistoryModel> chatHistories)
   {
      // Implementation...
   }
}

Multi-modal Input: Images to Charts

One of the most advanced features of our application is its ability to interpret images containing data and generate charts from them. Using Azure OpenAI’s vision capabilities, the app can:

• Accept uploaded images containing data visualizations or tables.
• Process images with AI to extract underlying data structures.
• Generate new charts based on interpreted information.
• Maintain context between image input and chart output.

This feature significantly expands the application’s utility by allowing users to digitize and reformat existing visual data.

internal async Task<string> InterpretImageBase64(string base64, string textInput)
 {

     try
     {
         var imageDataUri = $"data:image/jpeg;base64,{base64}";
         var chatHistory = new Microsoft.Extensions.AI.ChatMessage();
         chatHistory.Text = "You are an AI assistant that describes images.";
         chatHistory.Contents = (new List<AIContent>
         {
     new TextContent("Describe this image:"),
     new TextContent($"{textInput}"),
     new ImageContent(imageDataUri)
         });

         var result = await Client.CompleteAsync(new []{ chatHistory});
         return result?.ToString() ?? "No description generated.";
     }
     catch (Exception ex)
     {
         return $"Error generating OpenAI response: {ex.Message}";
     }     
 }

Cross-platform capabilities with .NET MAUI

One of the most powerful aspects of this application is its ability to run natively across multiple platforms using .NET MAUI:

• Windows: Desktop applications with full feature support.
• macOS: Applications via Mac Catalyst with native performance.
• Android: Mobile apps optimized for touch interfaces.
• iOS: Native iOS apps with platform-specific optimizations.

The application intelligently adapts its layout and behavior to each platform while maintaining core functionality:

<Grid x:Name="mainGrid" 
      RowDefinitions="60,Auto,*" 
      HorizontalOptions="{OnPlatform WinUI=Center, MacCatalyst=Center, Default=Fill}"
      MaximumWidthRequest="{OnPlatform WinUI=650, MacCatalyst=670}">
   ….
</Grid>

Technical implementation architecture

For developers interested in the underlying architecture, the application follows a clean MVVM (Model-View-ViewModel) pattern:

Core components:

• Models: Data structures like ChatHistoryModel and ChartConfig that define the application’s data.
• ViewModels: ChatGPTViewModel manages application logic and state.
• Views: XAML-defined UI components, including MainPage and SideBarPage.
• Behaviors: Custom behaviors like AssistViewBehavior that enhance control functionality.

public App()
{
    Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");
    InitializeComponent();
}

Key implementation classes

• SfAIAssistView: The central UI component that provides the chat interface.
• ChatTemplateSelector: Determines which template to use for different response types.
• CartesianCategory & CircularCategory: Custom chart renderers for different chart types.
• XmlFileCreator: Handles persistent storage of chat histories.
• AzureBaseService: Manages communication with Azure OpenAI.

Getting started

To build your version of this AI chatbot application, you’ll need:

Development requirements:

1. .NET 8 SDK with MAUI workload: The foundation for cross-platform development.
2. Visual Studio 2022+ or Visual Studio Code: Your development environment.
3. Azure subscription: To access Azure OpenAI services.
4. Azure OpenAI access: To process natural language and generate chart configurations.
5. Syncfusion .NET MAUI controls: For the UI components and chart visualizations.

Essential NuGet packages used.

<ItemGroup>
 <PackageReference Include="Azure.AI.OpenAI" Version="2.1.0" />
 <PackageReference Include="Azure.Identity" Version="1.14.0" />
 <PackageReference Include="Microsoft.Extensions.AI.OpenAI" Version="9.0.0-preview.9.24556.5" />
 <PackageReference Include="Microsoft.Maui.Controls" Version="9.0.71" />
 <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="9.0.6" />
 <PackageReference Include="Syncfusion.Maui.AIAssistView" Version="*" />
 <PackageReference Include="Syncfusion.Maui.Core" Version="*" />
 <PackageReference Include="Syncfusion.Maui.DataForm" Version="*" />
 <PackageReference Include="Syncfusion.Maui.ListView" Version="*" />
 <PackageReference Include="Syncfusion.Maui.Popup" Version="*" />
 <PackageReference Include="Syncfusion.Maui.Toolkit" Version="1.0.5" />
        <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
</ItemGroup>

Future possibilities and enhancement opportunities

This technology foundation opens numerous possibilities for enhancing data communication across various domains:

Potential Applications:

• Enterprise Dashboards: Enabling non-technical users to create and modify business visualizations.
• Data Analysis: Allowing conversational exploration of complex datasets.
• Educational Tools: Making data visualization accessible to students and educators.
• Reporting Systems: Simplifying the creation of dynamic, interactive reports.

Enhancement Opportunities:

• Advanced Customization: Adding more granular options for users to refine their charts.
• Real-time Data Sources: Connecting to live data feeds for up-to-date visualizations.
• Collaborative Features: Enabling teams to work together on visualizations.
• Export Capabilities: Supporting various output formats for different use cases.

GitHub reference

The complete source code for this project is available on GitHub.

Supercharge your cross-platform apps with Syncfusion's robust .NET MAUI controls.

Try It Free

Conclusion

Thanks for reading! This blog showcases an app that combines conversational AI with Syncfusion’s .NET MAUI chart components to transform how users interact with and visualize data. Integrating natural language processing via Azure OpenAI, rich UI elements, and cross-platform support makes data visualization accessible to users without technical expertise. Whether you’re a developer or organization, this project offers a compelling, intuitive approach to democratizing data visualization for all.

Existing customers can download the latest version of Essential Studio^® from the license and downloads page. If you’re not a Syncfusion^® customer, try our 30-day free trial to explore our powerful features.

If you’ve any questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Recommended resources (related links)

For more information on the technologies used in this project:

• .NET MAUI documentation
• Syncfusion .NET MAUI Toolkit
• Azure OpenAI Service

Try building your version today and experience the future of conversational data visualization!