This demo uses a similar Lab in our SQLcl MCP Sever LiveLab. Try it out!
You can combine the power of the SQLcl MCP Server and your AI Agent to create a simple starter HTML dashboard for displaying tables, views, and metrics from your dev, QA, and UAT database environments.
About
In this example we use Cline, but your AI Agent should perform similarly. We rely on SQLcl MCP Server’s list-connections, connect, run-sql, and disconnect Tools. We use a premade prompt too.
Learn with prompts
If you are still getting familiar with MCP Servers and how they can enhance your AI Agents (and subsequently your workflows), then you might want to accelerate your learning by using a prompt. Here is the one we used:
You can find the latest version of the prompt here. Having a prompt like this can be a useful guide and a time saver too; keep reading to see how.
FreeSQL
Similarly to a previous example, the use of a prompt is relatively straightforward. However, for this scenario we use a FreeSQL connection (Sign-up today, it’s free) for the SQLcl MCP Server (and the Cline workflow too).
This FreeSQL connection grants me quick access to a completely maintenance-free user account in one of our hosted Autonomous AI database instances (view it as a playground for learning SQL and PL/SQL).
You have also been granted SELECT ON roles to the well-known sample schemas too (HR, CO, SH, etc.).
Start a new task
Loading the prompt
Whether you are using a FreeSQL connection, or your own, this prompt has been tested and retested quite a bit so your results should be pretty similar. As demonstrated in a previous article, you can add the prompt directly to a new task (we use Cline here). Maybe you add some additional guidance too:
After reviewing and approving the AI Agent’s plan, the task truly begins.
Dashboard construction
Recall, it’s a best practice to start out in Plan mode. But at some point, you will transition to Act mode. In the following images you’ll see how the AI Agent relies on the SQLcl MCP Server to perform certain tasks in the target database. Eventually after enough introspection has been done, your AI Agent will request your approval to create a new HTML dashboard.
In a short time, you’ll see the complete HTML dashboard with sample data (from the HR schema). Open the dashboard and take a look at the results.
Finished product
And that’s [almost] it! You might see something like the images below. If you take a closer look at the HTML file, you’ll see there are minimal dependencies too (just as was requested in the prompt).
But take a closer look at the Commission vs. Hire Date chart. Anything look odd? In our example, that value looks a little unreasonable (i.e., doesn’t pass the “sniff test”).
Human intervention
This small error illustrates perfectly how these LLMs aren’t always, well, perfect. This error also demonstrates how you should use LLMs in your workflow. My suggestion? Use them as a supplement to your existing domain expertise not a replacement for.
In this case, you might need to know, or be able to parse, JavaScript and HTML too. Luckily, this error comes down to a simple multiplication error. Since our data values are already in tenths (e.g. 0.1, 0.2, etc.) it’s pretty clear where the error lies; the tooltip of this Scatter chart should be multiplying by 1, instead of 100.
That looks better; a quick fix indeed!
Total time
But does this save me any time? Well, just ask your AI Agent. Even with our small fix, we’ve created a smart-looking dashboard in a matter of minutes.
For a Web developer, a Front End Developer, or an enterprising non-developer, workflows that integrate the SQLcl MCP Server can save you a ton of time.
And that wraps up this example. Download the latest prompt and try it out for yourself. And keep on learning.
Want to learn more?
- Try the LiveLab: Explore the SQLcl MCP Server
- Docs: Introducing SQLcl MCP Server for Oracle database
- Docs: Using the SQLcl MCP Server
- VS Code: SQL Developer for VS Code