AI-Powered Visualizer: Data Retrieval, Chart Generation, and WordPress Upload - n8n Workflow

Content Creators needing dynamic, data-driven charts for blog posts.
Marketers automating the creation of reports and visual summaries.
Developers looking for a comprehensive example of an AI Agent pipeline within an n8n workflow.
Users seeking powerful n8n templates for integrating AI services with traditional CMS platforms.

Generating accurate, visually appealing charts from raw data is a time-consuming task. This specialized n8n workflow solves this by chaining several AI agents and services together. It starts with a simple text prompt, uses the powerful GPT-4o model integrated within an n8n node to perform real-time web searching and data structuring. This structured data is then fed to a second AI agent, which is specifically trained to output a valid QuickChart (Chart.js) configuration. Finally, the n8n workflow renders the chart and uses the WordPress API to instantly upload the generated image. This end-to-end automation transforms minutes of manual effort into seconds of automated execution, making this one of the most effective n8n templates for visual content generation.

This powerful n8n workflow starts with an input prompt, initiated either manually via the n8n trigger or programmatically via the 'When Executed by Another Workflow' n8n trigger.

1. Data Aggregation: The prompt is sent to the ‘Message a model’ n8n node (GPT-4o with search). This agent searches the web, aggregates the data, and returns it as a clean markdown table.


2. Chart Configuration Generation: The markdown table output is passed to the ‘Generate Chart AI agent’ n8n node. This agent, leveraging the OpenAI Chat Model and a strict QuickChart Object Schema output parser, converts the tabular data into a valid Chart.js JSON structure needed by QuickChart.


3. Chart Rendering: The Create QuickChart HTTP Request n8n node sends this JSON configuration to the QuickChart service, which returns the rendered chart image in binary format.


4. WordPress Upload: The binary image data is immediately passed to the Upload image2 n8n node, configured to use WordPress API credentials. It uploads the chart image, dynamically naming it based on the slug generated by the AI agent.


5. Result Compilation: The final Code n8n node gathers key information—the raw research, the graph configuration, and the final WordPress image URL—providing a comprehensive summary of the n8n workflow execution.

To deploy this advanced n8n workflow, follow these steps:

1. Import: Copy the provided JSON data and paste it directly into your n8n instance to create a new n8n workflow.


2. OpenAI Credentials: You must update the OpenAI credentials used in the 'Message a model' and 'OpenAI Chat Model' n8n nodes. Ensure your API key has access to the GPT-4o models used in this n8n template.


3. WordPress Credentials: Set up your WordPress API credentials on the 'Upload image2' n8n node. This requires an application password for successful file uploads.


4. WordPress URL: Update the URL in the 'Upload image2' n8n node to point to your specific WordPress site’s REST API endpoint (e.g., https://your.wordpress.com/wp-json/wp/v2/media).


5. Execution: Use the manual n8n trigger to test the n8n workflow, providing a data visualization prompt (e.g., "Generate a graph of apple's market share in the mobile phone market in q1 2025").

This n8n workflow utilizes several key n8n nodes and LangChain components:

When clicking ‘Execute workflow’ / When Executed by Another Workflow (n8n trigger): Defines the entry points for the n8n workflow, allowing for both manual testing and API-based execution.
Message a model (OpenAI n8n node): Uses gpt-4o-search-preview as a data agent. Function: Fetches real-time, structured data (markdown table) based on the input prompt.
Generate Chart AI agent (LangChain Agent n8n node): Function: Converts the markdown data table output into a structured Chart.js JSON object, acting as the core visualization logic.
OpenAI Chat Model (LangChain n8n node): Provides the LLM backend (gpt-4o-mini) to the 'Generate Chart AI agent'.
QuickChart Object Schema (LangChain Output Parser n8n node): Enforces a strict JSON format for the chart output, ensuring compatibility with the QuickChart API. This is crucial for a reliable n8n workflow.
Create QuickChart (HTTP Request n8n node): Function: Calls the QuickChart API, sending the generated Chart.js configuration and receiving the binary PNG image data.
Upload image2 (HTTP Request n8n node): Function: Uploads the binary chart image to the specified WordPress media library using Basic Authentication (predefined credential type).
Code (n8n node): Function: Consolidates the outputs from the entire n8n workflow execution, providing a clean summary including the public URL of the uploaded image.