Render Charts in your AI Chatbot

We've always had the ability to display images and even generate images with our AI chatbot technology. By combining this with dynamically generating URLs with query parameters, we've now implemented the ability to render charts in our AI chatbot.

This allows us to deliver AI chatbots that can render charts as an integral part of their features. See screenshot below for an example.

The implementation relies upon our AI chatbot's ability to dynamically render images inline into the chat output surface, for then to combine this with our AI agent technology. Let me show you how it's tied together in the following video.

The code

First we create a Hyperlambda HTTP endpoint resembling the following:

/*
 * Returns a grouped chart image to caller.
 * 
 * Values is a mandatory comma separated list of values.
 */
.arguments:*
.type:public

// Sanity checking invocation.
validators.mandatory:x:@.arguments/*/ticks
validators.mandatory:x:@.arguments/*/legend
validators.mandatory:x:@.arguments/*/values1

// Creating our individual bars.
.bars
for-each:x:@.arguments/*
   get-name:x:@.dp/#
   if
      strings.starts-with:x:@get-name
         .:values
      .lambda

         // Adding primary node for bar.
         add:x:@.bars
            .
               .

         // Adding values for individual cells.
         add:x:@.bars/0/-
            strings.split:x:@.dp/#
               .:,

// Creating our individual ticks.
add:x:../*/image.chart/*/ticks
   strings.split:x:@.arguments/*/ticks
      .:,

// Creating our legend.
add:x:../*/image.chart/*/legend
   strings.split:x:@.arguments/*/legend
      .:,

// Parametrizing [image.chart] invocation.
add:x:../*/image.chart/*/bars
   get-nodes:x:@.bars/*
image.chart:grouped
   width:800
   height:500
   bars
   ticks
   legend

// Applying correct HTTP header.
response.headers.set
   Content-Type:application/octet-stream

// Returning chart to caller.
return:x:@image.chart

This gives us an HTTP GET endpoint we can invoke as follows;

/magic/modules/finovo/grouped-chart?ticks=2018-2019,2019-2020,2020-2021,2021-2022,2022-2023&legend=Return%20on%20Total%20Capital,Solidity,Profit%20Margin&values1=58,10.3,2.16&values2=37.6,13.9,1.96&values3=91.5,27.3,8.78&values4=57.1,29.8,6.92&values5=18.9,35,3.01

In the above URL we've got the following query parameters.

• ticks being X-axis labels
• legend being the different components within a group or a stack
• values1 being values for group1 or stack1
• values2 being values for group2 or stack2
• values3 being values for group3 or stack3
• Etc ...

The chart is dynamically created on the fly and never persisted to disc, to simplify things for us. And we've currently got support for;

• bar charts
• stacked charts
• grouped charts

But we intend to expand upon this in the future to provide support for other types of charts, such as pie charts, area charts, etc.

Conclusion

Having an AI chatbot that dynamically generates charts is highly valuable, especially for financial chatbots where charts makes the data much more accessible and readable. Starting from today, AINIRO can deliver AI chatbots and AI expert systems that dynamically generates charts. Notice, these charts are generated exactly as they're supposed to be generated, and we're not using DALL-E, which would distort the charts making them completely unredable.

Have a Custom AI Solution

At AINIRO we specialise in delivering custom AI solutions and AI chatbots with AI agent features. If you want to talk to us about how we can help you implement your next custom AI solution, you can reach out to us below.

• Contact AINIRO