We’ve all been there: months spent meticulously crafting the perfect UI, only to watch an AI do something similar in seconds, and suddenly, you’re questioning everything.
At Decipad, we experienced that moment with charts. Before generative AI, it took our team two months to build several different chart types, carefully defining how data should be ingested and creating an extensive list of options for labels, colors, and layouts.
But when I saw ChatGPT enabling anyone to create charts with a simple request, I knew it was time to take a radically different approach.
As we rewrote the app for the AI era, we faced a tough decision: should we support all our legacy charts and their endless options, or should we try something completely new?
We chose the second option, and the result was mind-blowing! 🤯
<h3>Overview</h3>
In this article, I’ll share our journey of setting AI free to handle all our data visualizations. I’ll walk you through our architecture and the technical decisions that made it possible.
You’ll see the benefits of giving more power to AI and learn how you can apply these principles in your own applications.
<h3>Key Concepts</h3>
We started by considering a createChart tool for the AI using our old chats, but it quickly became clear it wouldn’t scale. AI can easily get confused by tools with dozens of parameters, often mixing up options. I could also imagine users asking for things the tool simply couldn’t handle, like chart annotations.
But the main reason was to stay competitive; instead of trying to code every chart type imaginable, we decided to lean into the model’s vast knowledge and give it a blank canvas to express itself.
Here’s how it works at a high level:
<ol>
<li>The user asks a question. The AI uses tools like getTables and runQuery to fetch the right data from our data lake.</li>
<li>The AI thinks. Before creating a chart, it uses a think tool to brainstorm the best way to present the data, considering things like highlighting outliers, showing trends, or finding anomalies.</li>
<li>The AI visualizes. A generic visualizeData tool is called. It doesn’t know how to draw a chart; it just packages the user’s request, the data query, and a desired aspect ratio.</li>
<li>A specialized AI Agent gets to work. The visualizeData tool hands off the package to a dedicated “Chart Agent” whose only job is to generate the code for a beautiful, production-ready chart.</li>
</ol>
Our multi-agent approach uses the great Vercel AI SDK on both the frontend and backend, with AWS Lambdas handling streaming behind the scenes. This setup lets each part of the system focus on what it does best.
<h3>How to create a blank canvas for AI</h3>
Giving an AI a blank canvas to write and execute code sounds risky, and it is. You can’t just eval() whatever it sends back. Our solution required a secure sandbox, a feedback loop to recover from errors, and a method to store the results.
1. Creating a Bulletproof Sandbox with Sandpack
First, we needed a safe place for the AI’s code to run. This is where <a href="https://sandpack.codesandbox.io/" target="_blank" rel="noopener nofollow">Sandpack</a>, the magic behind <a href="https://codesandbox.io/" target="_blank" rel="noopener nofollow">CodeSandbox</a>, became the cornerstone of our feature.
Instead of running the AI-generated eCharts code directly in our app, we load it inside a &lt;SandpackProvider&gt;. This was a game-changer for several reasons:
<ul>
<li>Total Isolation: The chart code runs in a completely separate environment. It can’t access our application’s window object, interfere with our components, or break our app’s styling.</li>
<li>Dependency Management: The AI uses libraries like eCharts and lodash without us needing to install them as direct dependencies in our frontend. Sandpack handles fetching them on the fly.</li>
<li>Security: It provides a critical security layer, preventing the AI from executing malicious code in the user’s browser.</li>
</ul>
By using Sandpack, I gave the AI the freedom to be creative within a secure, walled garden.
2. The Self-Healing Chart: When AI Fixes Its Own Bugs
What happens when the AI generates buggy code? In a traditional setup, the user sees a broken component. In our app, the AI gets a bug report and fixes it automatically.
This is our self-healing mechanism, orchestrated within the ChatChart.tsx component:
<ul>
<li>Error Detection: I wrapped Sandpack preview in a custom &lt;ErrorLogger&gt; component. Using Sandpack’s useSandpackConsole hook, it listens for any runtime errors inside the sandbox.</li>
<li>The Feedback Loop: If an error is caught (e.g., TypeError: Cannot read properties of undefined), the logger doesn’t just crash. Instead, it triggers the fetchData function again.</li>
<li>AI as Debugger: This time, the request sent back to our AI backend is enhanced. It includes the original request, the exact error message, and the block of code that caused it. The prompt essentially becomes: “You tried to generate a chart, but it failed with this error. Here is the faulty code. Please fix it and try again.”</li>
<li>Automatic Recovery: The Chart Agent, now armed with full debugging context, generates a corrected version of the code. The ChatChart component receives the new code, and the chart renders successfully, often without the user even noticing there was an issue.</li>
</ul>
<img src="https://media.licdn.com/dms/image/v2/D5612AQFHG_nBvoWezA/article-inline_image-shrink_1000_1488/B56ZgJTxJMHcAc-/0/1752502835488?e=1758153600&amp;v=beta&amp;t=uwPfgrb-Hq3S2g-Tkphi9TR6W0789SQn2cgCFJFz5Ik" alt="Article content">
A sequence diagram illustrating the self-healing mechanism for chart generation
3. Never Forgetting: Persisting Code in the Chat History
The final piece was making sure these generated charts were not ephemeral. If a user reloads the page, the chart should reappear instantly without calling the AI again.
We achieved this by cleverly using the Vercel AI SDK’s message structure:
<ol>
<li>A Successful Generation: When our backend sends valid chart code and data, the ChatChart component calls: addToolResult({ toolCallId, result: { code, data } }).</li>
<li>Mutating the Past: This addToolResult function (passed down from our main chat component) finds the original visualizeData tool call in the messages array. It then attaches the { code, data } object to that tool call as its result.</li>
<li>Saving State: The entire messages array, now including the tool call with its result as if AI got it right at the first try, is saved.</li>
</ol>
When the user returns, the application loads the messages from storage. The ChatChart component sees that the visualizeData tool call already has a result. It skips the fetching process entirely and immediately renders the chart using the saved code and data. It’s stateful and fast.
<h2>Consistency and look and feel</h2>
The Chart Agent isn’t just a simple prompt; it’s a manually crafted set of instructions, guardrails, and examples to generate consistent visuals.
1. The System Prompt
The Chart Agent has a detailed prompt that acts as its rulebook. It includes strict instructions that are critical for production use:
<ul>
<li>Visual consistency: We provide our app’s color palette as a default theme, instruct it to use small font sizes (10-12px), and to remove axis borders. This makes the AI-generated charts look and feel like they belong in our app.</li>
<li>Data formatting: “Always format date labels to be human readable” and “round numeric values to 2 decimal places.” These small details make a huge difference in usability.</li>
</ul>
<img src="https://media.licdn.com/dms/image/v2/D4D12AQGAFsGDVjjLBA/article-inline_image-shrink_1000_1488/B4DZgJhrlsGgAQ-/0/1752506481987?e=1758153600&amp;v=beta&amp;t=WfdNCu3y7smlcjnBKJnCdjiAjsmY20cmGSZe4prlXFM" alt="Article content">
Example of a
2. Context is King
The agent is given everything it needs to succeed. We pass it the user’s original request summary (“show me a breakdown of sales by region”), the SQL query used to get the data, and a preview of the data itself. This context allows it to choose the best chart type—a bar chart for comparisons, a line chart for trends, or even a treemap for hierarchical data.
3. From Raw Data to Rich Chart
Let’s say our query returns this data:
<pre><code>var data = {
 region: [&#x27;North&#x27;, &#x27;South&#x27;, &#x27;East&#x27;],
 sales: [4500, 3200, 5100]
};
</code></pre>
The Chart Agent takes this, along with the user’s request, and generates a complete eCharts options object, handling the title, tooltip, axes, and series automatically.
<pre><code>const option = {
 title: {
 text: &#x27;Sales by Region&#x27;,
 left: &#x27;center&#x27;,
 textStyle: { fontSize: 12 },
 },
 tooltip: {
 trigger: &#x27;axis&#x27;,
 axisPointer: { type: &#x27;shadow&#x27; },
 formatter: (params) =&gt;
 params.map(p =&gt; `${p.name}: €${p.value.toFixed(2)}`).join(&#x27;&lt;br&gt;&#x27;),
 },
 grid: { left: 8, right: 8, top: 24, bottom: 16, containLabel: true },
 xAxis: {
 type: &#x27;category&#x27;,
 data: data.region,
 axisLine: { show: false },
 axisTick: { show: false },
 axisLabel: { fontSize: 10 },
 },
 yAxis: {
 type: &#x27;value&#x27;,
 axisLine: { show: false },
 axisTick: { show: false },
 splitLine: { lineStyle: { type: &#x27;dashed&#x27;, color: &#x27;#eee&#x27; } },
 axisLabel: {
 fontSize: 10,
 formatter: val =&gt; `€${val.toFixed(2)}`,
 },
 },
 series: [
 {
 type: &#x27;bar&#x27;,
 data: data.sales.map(v =&gt; +v.toFixed(2)),
 barWidth: &#x27;40%&#x27;,
 itemStyle: { borderRadius: 2 },
 },
 ],
};
</code></pre>
The <a href="https://echarts.apache.org/examples/en/index.html" target="_blank" rel="noopener nofollow">ECharts</a> library was a great choice because it offers a wide range of chart types and a fully customizable options object, which together help reduce the AI’s error surface.
For single-value results, its prompt instructs it to use a gauge chart, providing a specific code example to follow, ensuring we never show a lonely bar in a big empty chart.
<h3>What I Have Learned?</h3>
<ul>
<li>Embrace the Unexpected. Letting go of control and allowing the AI to surprise us can lead to ideas we’d never reach on our own. When we trust the model’s creativity, we open doors to entirely new ways of thinking and designing. It’s not abo</li>
</ul>

The official daily.dev AI community. Led by thought leaders and AI experts. Stay tuned for insights, news and discussions. 

A development team at Decipad replaced their traditional chart-building approach with an AI-powered system that generates data visualizations dynamically. The solution uses a multi-agent architecture where one AI fetches and analyzes data while a specialized Chart Agent generates secure, production-ready chart code. Key technical components include Sandpack for secure code execution, automatic error recovery mechanisms, and persistent chart storage. The system allows AI to create custom visualizations using libraries like eCharts without predefined constraints, resulting in more flexible and creative data presentations than traditional fixed chart options.

I Let AI Be Free, and It Blew My Mind 🤯

Great insight. Are you kind to share the prompts ?