SQLcl MCPサーバーおよびAIエージェントを使用した初期HTMLダッシュボードの構築 (2025/12/01)
SQLcl MCPサーバーおよびAIエージェントを使用した初期HTMLダッシュボードの構築 (2025/12/01)
https://blogs.oracle.com/database/build-a-starter-html-dashboard-with-sqlcl-mcp-server
投稿者：Chris Hoina | Senior Product Manager
このデモでは、SQLcl MCP Sever LiveLabの同様のラボを使用します。ぜひお試しください。
SQLcl MCP サーバーと AI エージェントの機能を組み合わせて、開発、QA、UAT データベース環境からのテーブル、ビュー、メトリックを表示するためのシンプルなスターター HTML ダッシュボードを作成できます。
概要
この例ではClineを使用していますが、AIエージェントも同様のパフォーマンスを発揮するはずです。SQLcl MCP Serverのlist-connections、、、connectおよびツールを使用しています。またrun-sql、disconnect既製のプロンプトも使用しています。
プロンプトで学ぶ
MCPサーバーと、それがAIエージェント（ひいてはワークフロー）をどのように強化できるかについてまだ理解が浅い場合は、プロンプトを使って学習を加速させるのが良いでしょう。私たちが使用したプロンプトは以下のとおりです。
最新バージョンのプロンプトは、こちらからご覧いただけます。このようなプロンプトは、便利なガイドとして、また時間の節約にもなります。その方法については、読み進めてください。
FreeSQL
前の例と同様に、プロンプトの使用は比較的簡単です。ただし、このシナリオでは、SQLcl MCPサーバー（およびClineワークフロー）にFreeSQL接続（今すぐサインアップしてください。無料です）を使用します。
この FreeSQL 接続により、ホストされている Autonomous AI Database インスタンスの 1 つにある完全にメンテナンスフリーのユーザー アカウントにすばやくアクセスできるようになります (SQL と PL/SQL を学習するためのプレイグラウンドとして考えてください)。
SELECT ONよく知られているサンプル スキーマ (HR、CO、SH など) に対するロールも付与されています。
新しいタスクを開始する
プロンプトの読み込み
FreeSQL接続を使用している場合でも、独自の接続を使用している場合でも、このプロンプトは何度もテストされているため、結果はほぼ同じになるはずです。以前の記事で示したように、このプロンプトを新しいタスクに直接追加できます（ここではClineを使用しています）。追加のガイダンスも追加していただけると幸いです。
AI エージェントの計画を確認して承認すると、タスクが本格的に開始されます。
ダッシュボードの構築
念のため、最初はPlanモードで開始するのがベストプラクティスです。しかし、いずれActモードに移行します。以下の画像では、AIエージェントがSQLcl MCPサーバーを利用してターゲットデータベースで特定のタスクを実行する様子をご覧ください。十分なイントロスペクションが完了すると、AIエージェントは新しいHTMLダッシュボードを作成するための承認を求めます。
すぐに、HRスキーマのサンプルデータを含む完全なHTMLダッシュボードが表示されます。ダッシュボードを開いて結果を確認してください。
完成品
これでほぼ完了です！以下の画像のような画面が表示されるはずです。HTMLファイルを詳しく見てみると、プロンプトで要求された通り、最小限の依存関係しかないことがわかります。
しかし、「コミッション vs. 雇用日」のグラフをよく見てください。何かおかしい点はありませんか？この例では、その値は少し不合理に見えます（つまり、「sniff test」に合格していない）。
人間の介入
この小さなエラーは、これらのLLMが必ずしも完璧ではないことを如実に示しています。また、このエラーは、ワークフローにおいてLLMをどのように使用すべきかを示しています。私の提案は、LLMを既存の専門知識の代替ではなく、補足として活用することです。
この場合、JavaScriptとHTMLの知識、あるいは解析能力も必要になるかもしれません。幸いなことに、このエラーは単純な乗算エラーです。データ値が既に10分の1単位（例：0.1、0.2など）になっているため、どこにエラーがあるのかは明らかです。tooltipこの散布図の<code><code>は、100</code>ではなく1を掛けるべきです。
見た目も良くなりました。本当に簡単な修正です!
合計時間
でも、これで本当に時間が節約できるのでしょうか？AIエージェントに聞いてみてください。ちょっとした修正を加えるだけで、わずか数分でスマートなダッシュボードを作成できます。
Web 開発者、フロントエンド開発者、または意欲的な非開発者にとって、SQLcl MCP サーバーを統合するワークフローは、膨大な時間を節約できます。
これでこの例は終了です。最新のプロンプトをダウンロードして、ぜひご自身で試してみてください。そして、学習を続けてください。
コメント
コメントを投稿