AI SQL Agent with Dynamic Data Visualization using Quickchart.io - n8n Workflow

• Data Analysts and Business Intelligence professionals looking to automate conversational data querying.


• Teams needing dynamic, visual representations of SQL database query results.


• Developers seeking advanced n8n templates for integrating LangChain agents and generative AI (OpenAI) with data sources.


• Users looking for a powerful n8n workflow that handles complex decision trees and sub-workflow execution.

This powerful n8n workflow transforms a standard conversational SQL Agent into a comprehensive data visualization tool. By combining the querying power of the LangChain SQL Agent with the structured output generation capabilities of OpenAI (specifically using gpt-4o and JSON Schema definitions), this n8n template automatically decides if a chart is needed to support the database query response.

The core problem solved is bridging the gap between raw data returned by an SQL query and meaningful, easy-to-digest charts. The workflow dynamically creates the necessary Chart.js configuration and renders the image using Quickchart.io, providing a richer, visual answer alongside the textual explanation from the AI Agent. This n8n workflow is highly effective for fostering faster data analysis within any team.

This advanced n8n workflow operates in a multi-step conversational process:

1. Trigger and Extraction: The n8n trigger is activated upon receiving a chat message via the When chat message received n8n node. The Information Extractor (powered by an OpenAI Chat Model n8n node) cleans the user query, removing any explicit chart-related instructions, ensuring the core question reaches the SQL Agent.


2. SQL Agent Execution: The extracted question is passed to the AI Agent n8n node (configured as an SQL Agent). This agent connects to the PostgreSQL database, executes the necessary SQL, and provides a conversational text output containing the data analysis. Conversation history is maintained using the Window Buffer Memory n8n node.


3. Visualization Decision: The Text Classifier - Chart required? n8n node analyzes both the original user request and the data output from the SQL Agent. Using an OpenAI Chat Model Classifier, this n8n node determines if the data would be better understood with a chart (chart_required).


4. Text-Only Path: If the classifier deems a chart unnecessary (e.g., a single data point), the Set Text output n8n node formats the agent's response, completing the n8n workflow run.


5. Chart Generation Path (Sub-Workflow): If a chart is required, the data is passed to an Execute Workflow n8n node, which initiates the chart generation sub-workflow path.


6. Structured JSON Generation: Within the sub-workflow, the OpenAI - Generate Chart definition n8n node (an HTTP Request to OpenAI) receives the raw data and user request. It uses a strict JSON Schema definition for Chart.js, leveraging OpenAI's structured output feature to generate a perfectly formatted chart configuration object.


7. Quickchart URL Assembly: The Set response n8n node takes the OpenAI-generated Chart.js JSON and inserts it into a Quickchart.io URL, creating a dynamic image link.


8. Final Output: The Set Text + Chart output n8n node merges the SQL Agent's original text answer with the newly generated Quickchart image URL (formatted as a Markdown image link), providing a rich, visual response to the user via this powerful n8n template.

To deploy this specific n8n workflow template successfully, follow these steps:

1. Import the n8n Workflow: Copy the provided JSON code and import it directly into your self-hosted or cloud n8n instance.


2. Set Up Credentials:

1. Database Preparation (If using the example data): The workflow example references a 'Coffee Sales Postgres' database credential and is designed to query data from a coffee sales dataset. Update the database credentials and the Prefix Prompt within the AI Agent n8n node if your schema differs.


2. Activate the n8n Trigger: Ensure the When chat message received n8n trigger node is active so that the n8n workflow can listen for incoming user queries. This n8n workflow is ready to run.

This complex n8n workflow leverages several specialized n8n node types to achieve its goal:

When chat message received (n8n trigger):
Function: Starts the n8n workflow execution upon receiving a user message in the integrated chat interface.
Key Configuration: Configured as a public webhook endpoint.
AI Agent (LangChain Agent n8n node):
Function: The central component for database interaction. It translates natural language questions into executable SQL queries, runs them against the connected PostgreSQL database, and formats the results conversationally.
Key Configuration: Uses the sqlAgent type. Includes an extensive Prefix Prompt instructing the model to focus on returning answers, avoid developer jargon, and properly handle SQL syntax (e.g., table name quoting).
Text Classifier - Chart required? (LangChain Text Classifier n8n node):
Function: Decides the subsequent path of the n8n workflow based on context. It classifies the need for visualization.
Key Configuration: Defines two output categories: chartrequired and chartnotrequired based on whether the data is multi-dimensional or a single value.
OpenAI - Generate Chart definition with Structured Output (HTTP Request n8n node):
Function: This is a crucial step in the n8n workflow. It calls the OpenAI API (gpt-4o-2024-08-06) and explicitly mandates the response format be a JSON object conforming to a strict Chart.js schema. This guarantees the output is usable by Quickchart.io.
Key Configuration: Uses responseformat with a detailed JSON Schema defining required properties like type, data, and options (including scales and plugins).
Set response (Set n8n node):
Function: Constructs the final Quickchart.io URL by encoding the chart definition JSON output from the previous n8n node and appending it to the base URL.
* Key Configuration: Uses an expression: ="https://quickchart.io/chart?width=200&c=" + encodeURIComponent($json.choices[0].message.content).