Prompting: using the SQLcl MCP server and AI agents to create a starter React app

You’ve been tasked with creating a new React-based web app; your backend is the Oracle AI Database 26ai. You need to quickly scaffold this app, but want to offload much of the mundane, repetitive coding work onto an LLM. Yet, you also need data that is representative of your actual data.

You can use the SQLcl MCP server in this exact workflow, all while remaining in your IDE.

This demonstration uses the SQLcl MCP server that ships natively with Oracle SQL Developer for VS Code. This demonstration also uses VS Code as its IDE, the Cline extension for VS Code, and a FreeSQL account for establishing a connection to an Oracle AI Database 26ai.

FYI: Setting up the SQLcl MCP Server for Cline is even easier now; all done through the Command Palette:

The prompt

Prompts can be extremely useful for scaffolding straightforward projects such as this one. For the latest version of this prompt (and the one we use for our LiveLab) visit this link.

As you can see, we’ll ask our AI Agent to rely on the SQLcl MCP Server to provide us with information about our backend, and later, provide us with data for populating our starter application.

New task

Using an AI Agent like Cline, you can create a new task that begins with this prompt. Its a good practice to being in Plan mode, since that makes the agent request explicit approval for many actions. You can of course add in additional context, but these prompts have been thoroughly tested, so the prompt alone is sufficient.

If you are using the prompt, and moving through this task, you might see something similar to the images below. Once satisfied with the agent’s plan, you can move on to the next phase of the task.

Introspecting with SQLcl MCP

The next phase of this task is where you’ll appreciate the SQLcl MCP Server. Once you’ve selected a database connection (using the SQLcl MCP Server’s list-connections tool) the AI Agent takes your intent (what you’d like to accomplish) and communicates this to the SQLcl MCP Server (using the Model Context Protocol).

So it is SQLcl, and it’s MCP Server Tools that achieve the database-related goals set out by you and your prompt. Once sufficient database introspection has occurred, and relevant meaning and context has been conveyed to your AI Agent, the next phase of the task can begin; with your input and approval of course. You might select 1-3 charts or visualizations for this starter application (as seen in the images below).

Scaffolding the app

The next step is to oversee the scaffolding of this starter application.

Since the prompt includes many helpful instructions and code examples, your AI Agent should complete this task with minimal intervention. You might choose to review the data structure, or optionally have the AI Agent show you the actual SQL that was used to retrieve results from your target database — a good thing to consider when thinking about version control (for your front end, as well as backend code).

After a few minutes, with some back-and-forth between you and the agent, you’ll have a Minimally Viable Product (MVP) of a starter application.

Finished product

At the end of this exercise, you might be left with something like images below. A minimal starter application, using your preferred libraries or framework. We relied on React in this example. In your IDE, you can even review a summary of work, provided by your AI Agent.

Next steps

Although, you might decide to expand on this project. You can re-prompt your AI Agent to provide you with “next steps”, or a task list for future enhancements. In this example, we ask the AI Agent to lay the groundwork for connecting to our Oracle database with node-oracledb.

A simple enhancement

By now you should have a MVP app based on the React library; ready to be integrated to your target database. But you might still decide to make some minor changes before initializing your Git repo. Take this small example — the Tooltips for this chart could be improved. What if you wanted to display additional information when clicking a Tooltip?

What if you wanted to display additional information when clicking a Tooltip? Right now the Tooltip (in this example) simply displays date and order count. Calling upon your AI Agent and the SQLcl MCP Server, you can go from ideation to prototyping in a matter of minutes.

You can prepare data such that it would resemble a response from a REST endpoint? Your workflow might look something like this:

Mission accomplished

You’ve scaffolded out a very simple and unique single-page web application. You’ve created a completely serviceable prototype for putting your ideas into action.

Tools provided by the SQLcl MCP Server and your AI Agents are not replacements, but rather augments to your existing workflows. They can save valuable time and energy, allowing you to focus on more meaningful and impactful work.

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