Generative UI

A few weeks ago I came across an intriguing new piece of research from Google on what they called Generative UI. The demo video on their blog page has some cool examples. I tried the same prompts in AI mode but i didn't get the generated ui applets. It is possible that this feature has not rolled to India.

Generative Infographic?

A few days ago our cofounder Kumaran Anandan (🤔🗝️ 😀) had done a post with an amazing infographic with so much details (provided below).

I asked Kumaran how he did it and he said he had a table of content covering all the cells in the infpgraphic in text form, passed it to Nano Banana Pro and this amazing image came out in a single shot. Wow!

He also went ahead and envisioned a bold new world where BI systems will spit out beautiful infographics on the fly to the users. Grateful to Kumaran for this thought provoking vision.

Specificity & Consistency?

For that to be done, we need to check if Nano Banana Pro can deal with a table full of actual data, do a beautiful infographic without losing any specific data and needs to be consistently accurate. After some trial and error I learnt that, Nana Banana Pro can take a JSON prompt and can follow it obediently [It did not surprise me, since I have generated many Veo videos, which also has this capability].

JSON Prompting

I then generated synthetic sales data for a Indian CG firm with 10 products A through J; constructed a JSON prompt and gave it to Nano Banana Pro. And out comes this fantastic image.

I have tested the JSON prompt and it produces a very uncannily similar infographic every time.

Interactivity?

Any business user encountering such an infographic in their BI system will expect that it is an interactive dashboard - to click through and understand the info better. How do we do that when we are generating the infographic through Nano Banana Pro?

After some tinkering I realized that we could do transparent SVG overlays on the image and the clicks can lead to additional info or other types of additional information.

Vibecoded Demo

I vibecoded this demo app just so all of you can:

1. Look at the actual JSON prompt for the Sales Dashboard;
2. Copy the prompt and try it on your own.
3. try the SVG overlay demo. You can toggle Debug Mode to see where i have added the SVG overlays. If you turn it off the overlays will become transparent and you can only see them when you hover in the exact location.
4. A bonus infographic on Strategy Frameworks. You can copy and try this one also.

By now you I am sure you can extend your imagination to having Gen AI generate the SVG overlays and the attendant click through functionality also.

What do you think? Are there other ideas you can think of for interactivity? In what types of Enterprise use cases will this approach create impact?