Transcript
00:00:00Our AI agents can build our entire backend in minutes.
00:00:04Then we ask it for one waterfall chart,
00:00:07and it hands you 100 lines of Vega light that renders a blank page.
00:00:11We blame the model.
00:00:12Microsoft Research just published a bet that everyone's wrong.
00:00:16It's not a model problem, it's a language problem.
00:00:18This is Flint.
00:00:20And it fixes a pattern you're about to see everywhere in AI tooling.
00:00:24So stick around, even if you've never charted anything,
00:00:26because this might just change how models and languages work together.
00:00:34The project is called Flint.
00:00:37And the idea clicks once you see the chart generation is secretly two jobs.
00:00:41Job one is meaning this column is month,
00:00:45that one's revenue, and that one's a percentage change.
00:00:48LLMs nail that.
00:00:50Job two is geometry.
00:00:52Axis, step sizes, scale domains, label spacing, color ramps.
00:00:56LLMs are bad sometimes at geometry,
00:00:59and that's exactly where your generated charts kind of die off.
00:01:03The Flint team hits this wall themselves,
00:01:05building their own analytics agent that measured roughly 80% success on good-looking charts.
00:01:10Sounds decent until real users are on the other end,
00:01:13and one in five charts is broken.
00:01:15So Flint splits the jobs into two.
00:01:17The model writes about 10 lines of JSON that only describe meaning,
00:01:21using semantic types, quarter, price, rank, percentage change, over 70 of them.
00:01:26Then a deterministic compiler takes over,
00:01:29makes every geometric decision,
00:01:31and emits a real Vega-Lite, eCharts, or Chart.js spec.
00:01:35The model does meaning, the compiler does math.
00:01:38That's the whole trick.
00:01:39If you enjoy coding tools to speed up your workflow,
00:01:42be sure to subscribe.
00:01:43We have videos coming out all the time.
00:01:45Now, watch how fast this gets.
00:01:47Setup is one line, Claude MCP add Flint.
00:01:51It's pure TypeScript on Node 18.
00:01:53There's nothing weird on Apple Silicon.
00:01:55I paste in a CSV of monthly signups,
00:01:57and ask for new users by month, per game, as a heatmap.
00:02:02Claude writes a 10-line Flint spec, calls Render Chart,
00:02:05and the finished PNG drops into the chat in seconds.
00:02:09Rendered locally so my data never left my computer,
00:02:12but here's the part I didn't expect.
00:02:14There's a tool called Create Chart View,
00:02:17that opens an interactive panel.
00:02:19I didn't have to reprompt,
00:02:20and I didn't spend any tokens on that.
00:02:22The model finished its job,
00:02:24and the chart is still editable.
00:02:26So here's what's actually happening now.
00:02:28Everything hangs on those semantic types.
00:02:30Watch this.
00:02:31I change one word.
00:02:33The column tagged Quantity becomes Percentage Change,
00:02:36and the compiler flips the entire color scheme
00:02:38to a diverging palette,
00:02:41rewrites the number formatting,
00:02:42and rescales the axis.
00:02:44One word in, a dozen correct decisions out.
00:02:47Now, think of it like this.
00:02:48You tell Flint what the data is,
00:02:51never where the pixels go.
00:02:52And because the output is genuinely Vega Light,
00:02:55or eCharts, or ChartJS spec,
00:02:58that means same input, pick your backend,
00:03:00there's no Microsoft rendering island here.
00:03:03The compiled spec is yours to hand to.
00:03:06It's an intermediate language that gets you 95% of the way.
00:03:10It's not a replacement for anything.
00:03:11Now, the question someone in data science,
00:03:14or you, are already asking,
00:03:16don't we already have Vega Light for this?
00:03:18Here's the thing.
00:03:19Flint isn't fighting Vega Light.
00:03:21It compiles to it.
00:03:23Vega Light feels high level right up
00:03:25until you want the chart looking good.
00:03:27And then a waterfall chart balloons past
00:03:29a hundred lines of coupled parameters.
00:03:31The same waterfall in Flint, about 10 lines,
00:03:34because the compiler owns all the weird parts.
00:03:37Then we have Mermaid, but that's for flowcharts.
00:03:41Hacker News said the quiet part out loud.
00:03:43You don't ship Mermaid charts to customers.
00:03:46And those chart MCP servers with 26 separate tools
00:03:49that render your data on someone else's server.
00:03:52Flint is five tools, one schema, all local.
00:03:55Now, the caveat with all this.
00:03:57First, this is a research project.
00:04:00It's not a product.
00:04:01It's about two months old, version 0.2, eight contributors.
00:04:05They were still catching bugs this month
00:04:08where the same spec rendered differently
00:04:10in Vega Light and in E-charts.
00:04:12Then that viral sounding claim of 100,000 tokens
00:04:15down to 200 per chart, there is a cut.
00:04:18The author's own number, zero benchmarks.
00:04:21The paper is still coming soon.
00:04:23Then yes, the sharpest objection here
00:04:25was Frontier Models' already one-shot simple charts.
00:04:28It's just fine.
00:04:29If you're a power user with a big model,
00:04:32Flint solves a problem you don't have.
00:04:34The case for this is a bit more narrow.
00:04:36Small or cheap models.
00:04:38Composite charts like waterfalls and sunbursts.
00:04:41And any product where an end user sees the chart
00:04:44in 80% isn't good enough.
00:04:46Also, there's no maps in here.
00:04:48There's no 3D, no network graphs, no layering.
00:04:51Accessibility is literally an empty GitHub issue.
00:04:53In Python devs, there is no package yet,
00:04:56so don't go looking for it.
00:04:58The adoption says something over 5,000 NPM downloads a week
00:05:01for a two-month-old research drop,
00:05:03and it's already Power's data formulator,
00:05:06Microsoft's own analytics tool,
00:05:08which means Flint has a customer inside the building
00:05:11keeping it alive.
00:05:12The most agreed-on take here wasn't about charts at all.
00:05:16It was that all agentic systems are converging
00:05:18on exactly this shape.
00:05:20The LLM emits a tiny validatable intermediate representation,
00:05:25and a deterministic layer does everything else.
00:05:27You can validate 10 lines of JSON before it even renders.
00:05:30You can't validate 100 lines of generated D3.
00:05:34If you enjoy coding tips and tricks like this,
00:05:35be sure to subscribe to the BetterStack channel.
00:05:37We'll see you in another video.
00:05:39We'll see you in another video.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video