Today, I'm diving into how I got AI-powered data visualization to work in an incredibly flexible way inside shellA. Stick around because I'll show you how I avoided the messy stuff like dealing with iframes and external rendering hacks, and instead ended up with a 30-line PR.
Users wanted to visualize workflow results directly in shellA—without exporting data or opening another tool. The challenge: make it feel native, instant, and safe, with zero config or copy-paste.
My first instinct was to reach for a charting library and wire up a bunch of options. But that would have meant a heavy dependency, a lot of boilerplate, and a brittle integration. Even worse, most libraries want you to pass in raw JavaScript or JSON configs—dangerous in a product that runs untrusted code.
Instead, I realized I could leverage the same Markdown renderer we already use for output. If a workflow returns a Markdown code block with a chart tag, shellA intercepts it and renders a chart component in place. No iframes, no sandboxing headaches, no risk of arbitrary code execution.
How It Works
- Workflow returns Markdown with a
chartcode block, e.g.: - shellA detects the
chartblock and parses the YAML inside. - The chart component renders instantly, using a lightweight in-house renderer (no external JS, no network calls).
chart
type: bar
data:
- label: Apples
value: 10
- label: Oranges
value: 7
The entire implementation is about 30 lines: a Markdown extension, a YAML parser, and a simple chart renderer. No dependencies, no config, and no risk. If you want to see the code, here's the PR.
Why This Matters
This approach means anyone can generate charts from any workflow, just by returning a Markdown snippet. It’s safe, composable, and future-proof. If we want to support new chart types or options, it’s a one-line change.
Most importantly, it keeps shellA fast and focused. No bloat, no magic, just instant insight—right where you need it.