Quickchart.io を使用した動的データ可視化対応 AI SQLエージェント - n8n ワークフロー

• 会話形式でのデータ問い合わせ自動化を目指すデータアナリストおよびBI（ビジネスインテリジェンス）専門家。


• SQLデータベースのクエリ結果を動的かつ視覚的に表現する必要があるチーム。


• LangChainエージェントと生成AI（OpenAI）をデータソースと統合するための高度なn8nテンプレートを探している開発者。


• 複雑な意思決定ツリーとサブワークフローの実行を処理できる強力なn8nワークフローを探しているユーザー。

この強力なn8nワークフローは、標準的な会話型SQLエージェントを包括的なデータ可視化ツールへと変貌させます。LangChain SQLエージェントのクエリ能力と、OpenAIの構造化出力機能（特にgpt-4oとJSONスキーマ定義を使用）を組み合わせることで、データベースクエリへの応答を補強するためにチャートが必要かどうかをこのn8nテンプレートが自動的に判断します。

解決される主な課題は、SQLクエリによって返される生データと、有益で消化しやすいチャートとの間のギャップを埋めることです。このワークフローは必要なChart.jsの設定を動的に作成し、Quickchart.ioを使用して画像をレンダリングすることで、AIエージェントからのテキストによる説明と並行して、よりリッチな視覚的回答を提供します。このn8nワークフローは、あらゆるチームでのデータ分析の迅速化に非常に効果的です。

この高度なn8nワークフローは、複数のステップからなる会話プロセスで動作します:

1. トリガーと抽出: n8nトリガーが、When chat message received (チャットメッセージ受信時) n8nノードを介してチャットメッセージを受信するとアクティブになります。Information Extractor (情報抽出器) (OpenAI Chat Model n8nノードで動作) は、ユーザーのクエリから明示的なチャート関連の指示を削除してクエリをクリーニングし、コアとなる質問がSQLエージェントに確実に届くようにします。


2. SQLエージェントの実行: 抽出された質問は、AI Agent (AIエージェント) n8nノード (SQLエージェントとして設定) に渡されます。このエージェントはPostgreSQLデータベースに接続し、必要なSQLを実行して、会話形式のテキスト出力を提供します。会話履歴はWindow Buffer Memory (ウィンドウバッファメモリ) n8nノードを使用して維持されます。


3. 可視化の判断: Text Classifier - Chart required? (テキスト分類器 - チャートは必要か？) n8nノードは、元のユーザーリクエストとSQLエージェントからのデータ出力の両方を分析します。OpenAI Chat Model Classifier を使用して、このn8nノードがデータがチャートによってより良く理解されるかどうか (chart_required) を判断します。


4. テキストのみのパス: 分類器が必要ないと判断した場合（例：単一のデータポイントの場合）、Set Text output (テキスト出力の設定) n8nノードがエージェントの応答をフォーマットし、n8nワークフローの実行を完了します。


5. チャート生成パス (サブワークフロー): チャートが必要な場合、データはExecute Workflow (ワークフロー実行) n8nノードに渡され、チャート生成サブワークフローのパスが開始されます。


6. 構造化JSONの生成: サブワークフロー内で、OpenAI - Generate Chart definition (OpenAI - チャート定義の生成) n8nノード (OpenAIへのHTTPリクエスト) が生データとユーザーリクエストを受け取ります。Chart.jsの厳密なJSONスキーマ定義を利用してOpenAIの構造化出力を活用し、完全にフォーマットされたチャート設定オブジェクトを生成します。


7. Quickchart URLの組み立て: Set response (応答の設定) n8nノードは、OpenAIによって生成されたChart.js JSONを取得し、Quickchart.ioのURLに挿入して、動的な画像リンクを作成します。


8. 最終出力: Set Text + Chart output (テキストとチャートの出力の設定) n8nノードは、SQLエージェントの元のテキスト回答と、新しく生成されたQuickchart画像URL（Markdown画像リンクとしてフォーマット）をマージし、この強力なn8nテンプレートを通じてリッチな視覚的応答をユーザーに提供します。

この特定n8nワークフローテンプレートを正常にデプロイするには、次の手順に従ってください:

1. n8nワークフローのインポート: 提供されているJSONコードをコピーし、自己ホスト型またはクラウド型のn8nインスタンスに直接インポートします。


2. 認証情報の設定:

1. データベースの準備 (サンプルデータを使用する場合): ワークフローの例では、「Coffee Sales Postgres」データベース認証情報を参照しており、コーヒー販売データセットからのデータを照会するように設計されています。データベース認証情報と、AI Agent n8nノード内の Prefix Prompt を、スキーマが異なる場合は更新してください。


2. n8nトリガーのアクティブ化: When chat message received n8nトリガーノードがアクティブになっていることを確認し、n8nワークフローが受信するユーザークエリをリッスンできるようにします。このn8nワークフローは実行準備ができています。

この複雑なn8nワークフローは、目標達成のためにいくつかの専門的なn8nノードタイプを活用しています:

When chat message received (n8nトリガー):
機能: 統合されたチャットインターフェースでユーザーメッセージを受信すると、n8nワークフローの実行を開始します。
主要な設定: パブリックWebhookエンドポイントとして設定されます。
AI Agent (LangChain Agent n8nノード):
機能: データベースインタラクションの中核をなすコンポーネントです。自然言語の質問を実行可能なSQLクエリに変換し、接続されているPostgreSQLデータベースに対して実行し、結果を会話形式で整形します。
主要な設定: sqlAgent タイプを使用します。モデルに回答の返却、開発者特有の専門用語の回避、SQL構文（例：テーブル名の引用符付け）の適切な処理を指示する詳細な Prefix Prompt を含みます。
Text Classifier - Chart required? (LangChain Text Classifier n8nノード):
機能: コンテキストに基づいてn8nワークフローの次のパスを決定します。可視化の必要性を分類します。
主要な設定: データが多次元か単一の値かに基づいて、chartrequired と chartnotrequired の2つの出力カテゴリを定義します。
OpenAI - Generate Chart definition with Structured Output (HTTP Request n8nノード):
機能: これはn8nワークフローにおける極めて重要なステップです。OpenAI API (gpt-4o-2024-08-06) を呼び出し、応答形式が厳密なChart.jsスキーマに準拠したJSONオブジェクトであることを明示的に要求します。これにより、出力がQuickchart.ioで使用可能であることが保証されます。
主要な設定: responseformat を使用し、type、data、options (スケールやプラグインを含む) などの必須プロパティを定義する詳細なJSONスキーマを指定します。
Set response (Set n8nノード):
機能: 前述のn8nノードからのチャート定義JSON出力をエンコードし、Quickchart.ioの基本URLに追記することで、最終的なQuickchart.io URLを構築します。
* 主要な設定: 式 ="https://quickchart.io/chart?width=200&c=" + encodeURIComponent($json.choices[0].message.content) を使用します。