Blog

All Blog Posts  |  Next Post  |  Previous Post



AI-powered HTML Reports with Embedded Browser Visualization

Wednesday, September 3, 2025

AI-powered HTML Reports with Embedded Browser Visualization

In our previous blog article, we introduced the concept of toolsets in TMS AI Studio and how they can be used to extend AI-assisted workflows in Delphi or C++Builder applications. We demonstrated how toolsets allow seamless integration between AI-powered functionality and application-specific features.

In this follow-up, we take the concept further by showing how you can use AI to generate HTML reports enriched with Google Charts and visualize them directly inside your Delphi application using the TTMSFNCWebBrowser. Imagine the sheer power you give in the hands of your software users to generate the reports they want in the format they want with minimum effort.


Introducing the Browser Toolset

To bridge the gap between an AI-generated HTML report and an embedded browser in Delphi, here the TTMSFNCWebBrowser from TMS FNC Core, we introduce a new toolset:

TTMSMCPCloudAIBrowser = class(TTMSMCPCloudAIToolSet)
private
  FBrowser: TTMSFNCWebBrowser;
protected
  procedure DoLoadHTML(Sender: TObject; Args: TJSONObject; var Result: string);
public
  procedure DefineTools; override;
  property Browser: TTMSFNCWebBrowser read FBrowser write FBrowser;
end;

This toolset exposes a LoadHTML tool to the AI engine, allowing it to dynamically generate and render HTML content within the application. The tool definition looks like this:

procedure TTMSMCPCloudAIBrowser.DefineTools;
var
  tool: TTMSMCPCloudAITool;
  p: TTMSMCPCloudAIParameter;
begin
  inherited;

  BeginUpdate;
  tool := Tools.Add;
  tool.Description := 'load and show HTML into the browser';
  tool.Name := 'LoadHTML';

  p := tool.Parameters.Add;
  p.Description := 'the HTML to load into the browser';
  p.&Type := ptString;
  p.Required := true;
  p.Name := 'html';
  p.Description := 'string of the HTML/JavaScript that was generated for the browser';

  tool.OnExecute := DoLoadHTML;

  EndUpdate;
end;

With this setup, your application can act as a host for HTML reports, combining AI-generated text and data visualizations.


Example 1: Global CO₂ Emissions Report

Using a natural language prompt, we can instruct the AI to generate both descriptive text and a Google Chart inside an HTML page:

Prompt:

Create a HTML report with a text description of the evolution of co2 emissions in the last 50 years in the world from information you find on the internet. Add also a Google line chart to this HTML report showing how the co2 output evolves from 10 countries with most emissions in the world. Make sure the chart has a legend to show the country names. Show this HTML report in the browser.

The AI responds by producing an HTML file with a Bootstrap-styled layout and a Google Line Chart showing emission trends. The LoadHTML toolset then automatically loads this HTML into the embedded browser for interactive visualization.

TMS Software Delphi  Components tmsaistudio


Example 2: Dataset-driven Report

We can also combine this with the TTMSMCPCloudAIDataSet toolset to allow AI to directly process and visualize application data.

Prompt:

Make a HTML report with the 10 biggest fish from the dataset. Show the report with all fish characteristics in a modern nice Bootstrap styled table in the HTML and show it in the browser.

Here, the dataset toolset provides structured data (fish size, weight, habitat, etc.), while the AI generates a fully formatted Bootstrap HTML table. The browser toolset then takes over to present the result inside the Delphi application.

TMS Software Delphi  Components tmsaistudio


Unlocking Interactive AI-powered Dashboards

With these building blocks in place, Delphi and C++Builder developers can now:

  • Create data-driven HTML reports directly from datasets.

  • Enhance reports with Google Charts and modern Bootstrap styling.

  • Display these reports seamlessly inside applications using the embedded browser.

This architecture makes it possible to build interactive dashboards powered by AI, blending the strengths of Delphi applications with dynamic web-based visualizations.


Download & play

If you have TMS AI Studio installed and TMS FNC Core, go ahead and download the full source code of this example application and you can play and modify it yourself. Let yourself be inspired on how to add additional AI flexibility in your own applications.

TMS Software Delphi  Components tmsaistudio  Sample source code


What’s Next?

The combination of toolsets, HTML generation, and embedded browsing opens the door to countless possibilities: AI-generated dashboards, reporting assistants, live dataset analysis, and much more.

In upcoming posts, we’ll continue to expand on this concept, exploring multi-tool workflows and domain-specific integrations.


👉 What kind of AI-generated reports or AI based interactions would you like to see integrated into Delphi applications?



Bruno Fierens


  1. Add AI superpower to your Delphi & C++Builder apps part 1

  2. Add AI superpower to your Delphi & C++Builder apps part 2: function calling

  3. Add AI superpower to your Delphi & C++Builder apps part 3: multimodal LLM use

  4. Add AI superpower to your Delphi & C++Builder apps part 4: create MCP servers

  5. Add AI superpower to your Delphi & C++Builder apps part 5: create your MCP client

  6. Add AI superpower to your Delphi & C++Builder apps part 6: RAG

  7. Introducing TMS AI Studio: Your Complete AI Development Toolkit for Delphi

  8. Automatic invoice data extraction in Delphi apps via AI

  9. AI based scheduling in classic Delphi desktop apps

  10. Voice-Controlled Maps in Delphi with TMS AI Studio + OpenAI TTS/STT

  11. Creating an n8n Workflow to use a Logging MCP Server

  12. Supercharging Delphi Apps with TMS AI Studio v1.2 Toolsets: Fine-Grained AI Function Control

  13. AI-powered HTML Reports with Embedded Browser Visualization

  14. Additional audio transcribing support in TMS AI Studio v1.2.3.0 and more ...

  15. Introducing Attributes Support for MCP Servers in Delphi

  16. Using AI Services securely in TMS AI Studio



This blog post has received 5 comments.


1. Saturday, September 6, 2025 at 1:49:26 PM

I like the idea that you don''t need to build any reports, just let the user ask in English.. Are there any plans to do this from tws webcore ? ( forgive my ignorance here, I''m a hobby programmer with web app using tms webcore front end and Web Broker API & MS SQL server backend )

charliepaterson


2. Sunday, September 7, 2025 at 8:52:44 PM

Typically the actual invoke of the LLM for the report generation is done from the backend.
So, you could build an XData https://www.tmssoftware.com/site/xdata.asp REST server with an endpoint that will do the report generation via a cloud LLM and then send the result back to the web app.

Bruno Fierens


3. Wednesday, September 10, 2025 at 8:16:10 AM

I can compile the application in Delphi 12 but the execute prompt does not update the Chomium browser. it seems it does not call the DoLoadHTML method to load the data into the browser on the form. The logs show me the AI Gemini is returning HTML data .
Anything I need to setup with the browswer locally to show the html data?

Thank you

tecun jose


4. Wednesday, September 10, 2025 at 8:18:56 AM

Is your prompt sufficiently instructive to show the generated HTML in the embedded browser? The LLM needs to deduct from the prompt and tool description that it needs to call the DoLoadHTML function.

Bruno Fierens


5. Saturday, September 13, 2025 at 3:35:07 PM

Thank you Bruno.. I forgot I had made code changes to use Gemini model since I pay for this one. this was giving me a CORS error with Gemini. therefore never calling the doloadHTML. I switch back to openAI and put my CC information.. now it works as per your demo.

tecun jose




Add a new comment

You will receive a confirmation mail with a link to validate your comment, please use a valid email address.
All fields are required.



All Blog Posts  |  Next Post  |  Previous Post