How can I fix the 'JSON needs to be valid' error in my AI Agent chart workflow?

Below is a few steps you can try to resolve the “JSON needs to be valid” error when generating the chart:

1. Validate the JSON Output:
   The error indicates that the agent’s response isn’t valid JSON. Often that happens when there are extra texts (for example, markdown code fences or additional messages) before/after your JSON structure. Make sure the agent returns only the JSON required by the QuickChart node. You can use an online JSON validator to test your output.

2. Strip Out Any Extra Characters:
   If your prompt or template uses triple backticks (```), ensure the agent isn’t including these in its response. The output should start and end with curly braces or square brackets only, with no extra annotations.

3. Review Your Workflow Code Node (if any):
   If you’re using a Code node to process or format the JSON, consider adding a check like this to confirm its validity:

   JAVASCRIPTCopied
   try {
       const parsed = JSON.parse(yourAgentOutput);
       return [{ json: parsed }];
   } catch (error) {
       throw new Error("Invalid JSON output from the agent: " + error.message);
   }

4. Compare Against the QuickChart Examples:
   The QuickChart node documentation shows what valid configuration JSON should look like. It might help to compare your generated JSON against a known working example. For instance, a valid JSON configuration for generating a simple bar chart might look like this:

   JSONCopied
   {
     "type": "bar",
     "data": {
       "labels": ["January", "February", "March"],
       "datasets": [{
         "label": "Sales",
         "data": [50, 60, 70]
       }]
     }
   }

   Make sure your agent is creating a similar valid structure.

5. Adjust the Agent Prompt:
   If the agent is generating the JSON dynamically (retrieving data from Airtable), consider modifying your prompt to instruct the agent to return only the JSON object without any commentary. For example, include in your prompt something like:

   “Please respond with only the valid JSON configuration (no markdown or extra text) required for the QuickChart node.”

Following these steps should help ensure that your workflow receives valid JSON, resolving the error and allowing the chart to generate correctly.

Below are some suggestions to help ensure that the chart generation returns valid JSON:

1. Instruct the Agent to Output JSON

When using JSON mode with the AI Agent or OpenAI node, you must explicitly instruct the model to produce valid JSON. For example, add a system or user message like:

JSONCopied
{
  "role": "system",
  "content": "Generate only valid JSON output that defines a chart (with no additional commentary). Use proper double quotes, no code blocks or markdown formatting, and ensure the JSON is parseable."
}

This tells the model to refrain from adding extra whitespace or non-JSON content that could break parsing.

2. Validate Your JSON Template

Make sure that the JSON you are providing (or expecting) in the body content is exactly valid. Check for:

• Proper syntax: Ensure no trailing commas, correct use of quotes, and matching brackets.
• Clean formatting: Remove any code fences or markdown formatting that may be added to the output.

3. Adjust Your Prompt

Revisit your prompt text in the OpenAI - Generate Chart node. Sometimes, even a minor tweak (for example, clarifying that only valid JSON is allowed) can help the model deliver output that the downstream nodes can process.

4. Test with a Minimal Example

Before integrating with Airtable or a more complex workflow, try testing the agent with a minimal prompt that just returns a simple, valid JSON chart definition. Once you have that working, you can adjust and expand to meet your full requirements.

---

Implementing these changes should help resolve the "JSON needs to be valid" error. If issues persist, consider using an HTTP Request node to call the OpenAI API so you can inspect a more detailed error response and further refine the prompt.