{"id":1190353,"date":"2026-10-22T09:00:00","date_gmt":"2026-10-22T16:00:00","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/research\/?p=1190353"},"modified":"2026-10-22T06:49:11","modified_gmt":"2026-10-22T13:49:11","slug":"flint-interactive-a-language-for-creating-interactive-data-visualizations","status":"publish","type":"post","link":"https:\/\/www.microsoft.com\/en-us\/research\/blog\/flint-interactive-a-language-for-creating-interactive-data-visualizations\/","title":{"rendered":"Flint-interactive: A language for creating interactive data visualizations"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"788\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1.jpg\" alt=\"Flint Interactive flowchart | purple gradient background\" class=\"wp-image-1190357\" srcset=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1.jpg 1400w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-300x169.jpg 300w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-1024x576.jpg 1024w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-768x432.jpg 768w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-1066x600.jpg 1066w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-655x368.jpg 655w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-240x135.jpg 240w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-640x360.jpg 640w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-960x540.jpg 960w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-1280x720.jpg 1280w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/figure>\n\n\n\n<div style=\"padding-bottom:0;padding-top:0\" class=\"wp-block-msr-immersive-section alignfull row\">\n\t\n\t<div class=\"container\">\n\t\t<div class=\"wp-block-msr-immersive-section__inner wp-block-msr-immersive-section__inner--narrow\">\n\t\t\t<div class=\"wp-block-columns mb-10 pb-1 pr-1 is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\" style=\"box-shadow:var(--wp--preset--shadow--outlined)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 id=\"at-a-glance\" class=\"wp-block-heading h3\">At a glance<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Brings rich interactivity to AI-generated charts: Flint-interactive enables agents to create data visualizations that users can explore directly through clicking, filtering, zooming, highlighting, and cross-chart interactions.<\/li>\n\n\n\n<li>Makes complex interactions easier to build: Instead of requiring low-level visualization code, Flint-interactive lets users and agents define behaviors using high-level semantic events and update operators.<\/li>\n\n\n\n<li>Improves reliability and reduces development effort: By using Flint&#8217;s compiler to handle interaction logic and visual dependencies, the system helps avoid many of the layout, rendering, and debugging challenges common in custom interactive visualizations.<\/li>\n\n\n\n<li>Connects charts, text, tables, and applications: Flint-interactive supports interactive data stories, dashboards, and connected experiences where actions in one view can update charts, documents, widgets, or application state in another.<\/li>\n<\/ul>\n<\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n\n\t<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">AI agents make it easy to analyze data and generate reports with data visualizations. They help users examine patterns more efficiently than by reading verbose text. However, when we&#8217;re feeling exploratory, we want to go beyond static visualizations.<s>:<\/s> We want to interact with charts to zoom in on details, compare data across charts, or even highlight related text in the document from a chart selection, and vice versa. This requires agents to be able to create interactive data visualizations that communicate information while letting readers explore beyond the author&#8217;s chosen view, ideally with the quality of interactive stories in sophisticated data journalism. This leaves us wondering:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>(As a user) Can I interact with charts directly in chat to explore the data and ask follow-up questions based on what I select?<\/li>\n\n\n\n<li>(As a developer) Can I enable the AI agents I build for my customers to generate interactive visualizations that help them explore and understand their data?<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Yes, it&#8217;s possible, but there is a significant practical gap. Even with capable frontier models, we still face:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>High generation cost. Agents rarely produce a fully satisfactory interactive visualization in one turn. Repeated rounds of reasoning, coding, and debugging consume tokens and time.<\/li>\n\n\n\n<li>Reliability. Interactive visualizations are challenging enough that expressive interactive charts introduce poor layouts or broken interactions easily, and we risk introducing new problems when trying to fix them.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These challenges help explain why consistently generating high-quality interactive visualizations remain difficult in real-world use. Meanwhile, built-in interactions in some visualization libraries are not expressive enough on their own to create bespoke interactive charts. And these challenges are results of the lack of an expressive yet high-level language to specify visual interactions.<\/p>\n\n\n\n\t<div class=\"border-bottom border-top border-gray-300 mt-5 mb-5 msr-promo text-center text-md-left alignwide\" data-bi-aN=\"promo\" data-bi-id=\"999693\">\n\t\t\n\n\t\t<p class=\"msr-promo__label text-gray-800 text-center text-uppercase\">\n\t\t<span class=\"px-4 bg-white display-inline-block font-weight-semibold small\">Spotlight: Event Series<\/span>\n\t<\/p>\n\t\n\t<div class=\"row pt-3 pb-4 align-items-center\">\n\t\t\t\t\t\t<div class=\"msr-promo__media col-12 col-md-5\">\n\t\t\t\t<a class=\"bg-gray-300 display-block\" href=\"https:\/\/www.microsoft.com\/en-us\/research\/event\/microsoft-research-forum\/past-episodes\/?OCID=msr_researchforum_MCR_Blog_Promo\" aria-label=\"Microsoft Research Forum\" data-bi-cn=\"Microsoft Research Forum\" target=\"_blank\">\n\t\t\t\t\t<img decoding=\"async\" class=\"w-100 display-block\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2025\/05\/Research-Forum-hero_1400x788.jpg\" alt=\"Research Forum | abstract background with colorful hexagons\" \/>\n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"msr-promo__content p-3 px-5 col-12 col-md\">\n\n\t\t\t\t\t\t\t\t\t<h2 class=\"h4\">Microsoft Research Forum<\/h2>\n\t\t\t\t\n\t\t\t\t\t\t\t\t<p id=\"microsoft-research-forum\" class=\"large\">Join us for a continuous exchange of ideas about research in the era of general AI. Watch the latest episodes on demand.<\/p>\n\t\t\t\t\n\t\t\t\t\t\t\t\t<div class=\"wp-block-buttons justify-content-center justify-content-md-start\">\n\t\t\t\t\t<div class=\"wp-block-button\">\n\t\t\t\t\t\t<a href=\"https:\/\/www.microsoft.com\/en-us\/research\/event\/microsoft-research-forum\/past-episodes\/?OCID=msr_researchforum_MCR_Blog_Promo\" aria-describedby=\"microsoft-research-forum\" class=\"btn btn-brand glyph-append glyph-append-chevron-right\" data-bi-cn=\"Microsoft Research Forum\" target=\"_blank\">\n\t\t\t\t\t\t\tWatch on-demand\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div><!--\/.msr-promo__content-->\n\t<\/div><!--\/.msr-promo__inner-wrap-->\n\t<\/div><!--\/.msr-promo-->\n\t\n\n\n<h2 id=\"flint-interactive\" class=\"wp-block-heading\">Flint-interactive<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"https:\/\/microsoft.github.io\/flint-chart\/\" target=\"_blank\" rel=\"noopener noreferrer\">Flint-interactive<span class=\"sr-only\"> (opens in new tab)<\/span><\/a> is a language for creating interactive data visualizations on top of Flint. It allows users to create dashboards, data stories, and interactive artifacts more easily. The power of Flint-interactive comes from Flint&#8217;s compiler, which translates user interactions into semantic events that capture the meaning behind what users select. It then uses high-level operators to update visualizations in response to those events, making sophisticated interactions far easier to create and maintain. This shifts the heavy burden of resolving complex dependencies between interaction and visual logic to the compiler, so the user (or the agent) can easily describe expressive interactions with high-level specifications.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2176\" height=\"1070\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-1.png\" alt=\"Interactive Gapminder visualization showing linked brushing across two scatterplots of countries in 1952 and 2007. Each plot charts GDP per capita on the horizontal axis and life expectancy on the vertical axis, with countries colored by continent. A blue rectangular selection highlights a group of countries in the 1952 chart, and the same countries are simultaneously highlighted in the 2007 chart, demonstrating linked selection across years. A control panel on the right provides interaction options including rectangular selection, lasso selection, and x- or y-axis brushing. The figure illustrates how selecting data points in one view highlights corresponding points in another view for comparative analysis over time.\" class=\"wp-image-1190489\" srcset=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-1.png 2176w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-1-300x148.png 300w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-1-1024x504.png 1024w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-1-768x378.png 768w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-1-1536x755.png 1536w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-1-2048x1007.png 2048w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-1-240x118.png 240w\" sizes=\"auto, (max-width: 2176px) 100vw, 2176px\" \/><figcaption class=\"wp-element-caption\">Example 1: We can enable the user to brush one visual view, and the chart highlights all groups of country selected by the user with a simple preset interaction linked-brush.<\/figcaption><\/figure>\n\n\n\n<h2 id=\"how-to-use\" class=\"wp-block-heading\">How to use<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"1-use-flint-in-your-chat\"><strong>1. Use Flint in your chat<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use Flint Interactive directly in your chat or canvas environment through Flint-MCP and MCP Apps, following the MCP setup guide. With the latest release, tell your agent what to chart and which interactions you want; it can generate an interaction_spec alongside the Flint chart spec and render the interactive chart in your conversation.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1706\" height=\"1458\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/NEW_Flint-Figure.png\" alt=\"graphical user interface, chart\" class=\"wp-image-1190794\" srcset=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/NEW_Flint-Figure.png 1706w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/NEW_Flint-Figure-300x256.png 300w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/NEW_Flint-Figure-768x656.png 768w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/NEW_Flint-Figure-1024x875.png 1024w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/NEW_Flint-Figure-842x720.png 842w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/NEW_Flint-Figure-702x600-1.png 702w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/NEW_Flint-Figure-643x550.png 643w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/NEW_Flint-Figure-1536x1313.png 1536w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/NEW_Flint-Figure-430x367.png 430w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/NEW_Flint-Figure-327x279.png 327w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/NEW_Flint-Figure-70x60.png 70w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/NEW_Flint-Figure-444x379.png 444w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/NEW_Flint-Figure-211x180.png 211w\" sizes=\"auto, (max-width: 1706px) 100vw, 1706px\" \/><figcaption class=\"wp-element-caption\">Example 2: Using Flint-interactive in the chat environment, allowing the agent to produce interactive charts more reliably with simple Flint specifications. It also enables the user to select and pass context to the follow-up turns.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Build an interactive app with Flint<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Build interactive charts in a dashboard, data story, or other application with Flint Interactive Canvas. Your app can use event handlers to process semantic events emitted by Flint Canvas, for example to filter a table, update another chart, or change application state. To let your app&#8217;s widgets control how the chart updates, send update operators to Flint Canvas.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2144\" height=\"1128\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-2.png\" alt=\"Interactive Gapminder dashboard for 2007 showing a table of countries alongside a bubble chart comparing GDP per capita and life expectancy. In the table, the row for the United States is selected and highlighted, displaying GDP per person of $42,952 and life expectancy of 78.2 years. The corresponding bubble on the scatterplot is emphasized and labeled with a callout showing the same values. Countries are colored by continent, bubble size represents population, GDP per capita is shown on a logarithmic horizontal axis, and life expectancy is plotted on the vertical axis. The figure demonstrates external selection, where choosing a country in a table highlights and annotates the matching data point in the visualization.\" class=\"wp-image-1190499\" srcset=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-2.png 2144w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-2-300x158.png 300w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-2-1024x539.png 1024w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-2-768x404.png 768w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-2-1536x808.png 1536w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-2-2048x1077.png 2048w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-2-240x126.png 240w\" sizes=\"auto, (max-width: 2144px) 100vw, 2144px\" \/><figcaption class=\"wp-element-caption\">Example 2: Flint-interactive allows developers to define interactions between charts and external elements (e.g., table, paragraph). Here, the user can click the table to highlight points in the chart and verse versa.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Create bespoke interactions<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To create bespoke interactions beyond Flint&#8217;s presets, define a trigger and a custom handle function with the programming API that maps semantic events to custom chart update sequences. For example, a handler can highlight a clicked country and label it by name. It combines set-style and set-annotation without manipulating renderer-specific marks.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2120\" height=\"1226\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-4.png\" alt=\"Interactive climate visualization showing a seasonal phase portrait for five U.S. cities, with temperature (\u00b0C) on the horizontal axis and precipitation (mm\/day) on the vertical axis. Seattle is selected, and its annual weather cycle is displayed as a connected path labeled by month from January through December. The path shows cool, wet conditions in winter, peaking near 6 mm\/day of precipitation, and warmer, drier conditions in summer, with precipitation dropping below 1 mm\/day. Colored points represent Chicago, Houston, Los Angeles, New York, and Seattle. A details panel on the right displays the selected month, January, with a temperature of 4.2\u00b0C and precipitation of 5.7 mm\/day. The figure demonstrates temporal dragging and animation, where moving a city\u2019s position along its seasonal path updates all cities to the corresponding time of year.\" class=\"wp-image-1190502\" srcset=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-4.png 2120w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-4-300x173.png 300w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-4-1024x592.png 1024w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-4-768x444.png 768w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-4-1536x888.png 1536w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-4-2048x1184.png 2048w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/flint-blog-fig-4-240x139.png 240w\" sizes=\"auto, (max-width: 2120px) 100vw, 2120px\" \/><figcaption class=\"wp-element-caption\">Example 4: The agent can create bespoke interactive visualizations with Flint\u2019s programming API. In this DimpVis example, the user can drag the point along the time path to visualize how all cities\u2019 temperature and precipitation changes.<\/figcaption><\/figure>\n\n\n\n<h2 id=\"how-it-works\" class=\"wp-block-heading\">How it works<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Flint Canvas is a state machine that tracks user interactions on the canvas and manages visual rendering state. Flint makes interaction specification easy by separating visual logic, managed by the compiler, from interaction logic, specified by the user at the semantic level:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visual logic: The compiler automatically resolves raw triggers, such as clicks, drags, and key presses, into semantic events that identify chart elements and data. It also translates update operators into rendered canvas changes, handling hit testing, and low-level visual updates.<\/li>\n\n\n\n<li>Interaction logic: The user specifies interactions by mapping semantic interaction events to chart update operators, such as set style to highlight data, set annotation to label a point, or set viewport to pan or zoom. The user can also use those semantic events to update external tables, widgets, or application states.&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"999\" height=\"556\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-flowchart-figure.png\" alt=\"Figure: Flint interactive allows the agent to describe interaction logic by mapping \u201cwhat semantic event is the user interacting with\u201d to \u201cwhat updates they want for the canvas surface\u201d. The compiler takes the heavy lifting of resolving visual updates and manages the runtime, which makes interaction authoring more reliable and cost effective.\" class=\"wp-image-1190358\" srcset=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-flowchart-figure.png 999w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-flowchart-figure-300x167.png 300w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-flowchart-figure-768x427.png 768w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-flowchart-figure-240x134.png 240w\" sizes=\"auto, (max-width: 999px) 100vw, 999px\" \/><figcaption class=\"wp-element-caption\">Figure 1:  Flint interactive allows the agent to describe interaction logic by mapping \u201cwhat semantic event is the user interacting with\u201d to \u201cwhat updates they want for the canvas surface\u201d. The compiler takes the heavy lifting of resolving visual updates and manages the runtime, which makes interaction authoring more reliable <s>c<\/s>and cost effective.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This separation means users do not need to reverse-engineer rendering logic or manipulate renderer-specific marks, making interactions easier to specify and maintain. Furthermore, because event generation and visual updates are compositional, the same model also connects Flint with tables, text, other charts, and widgets to build interactive stories and dashboards.<\/p>\n\n\n\n<h2 id=\"try-it-now\" class=\"wp-block-heading\">Try it now!<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"yt-consent-placeholder\" data-video-id=\"JAJy7ToczMs\" data-poster=\"https:\/\/i.ytimg.com\/vi\/JAJy7ToczMs\/hqdefault.jpg\" style=\"background-image:url(https:\/\/i.ytimg.com\/vi\/JAJy7ToczMs\/hqdefault.jpg)\"><iframe aria-hidden=\"true\" tabindex=\"-1\" title=\"Flint-interactive demo\" width=\"500\" height=\"281\" data-src=\"https:\/\/www.youtube-nocookie.com\/embed\/JAJy7ToczMs?feature=oembed&rel=0&enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><div class=\"yt-consent-placeholder__loading\" aria-hidden=\"true\"><svg viewBox=\"0 0 48 48\" focusable=\"false\"><circle cx=\"24\" cy=\"24\" r=\"19\"><\/circle><\/svg><\/div><div class=\"yt-consent-placeholder__overlay\" hidden><button class=\"yt-consent-placeholder__play\"><svg width=\"42\" height=\"42\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><g fill=\"none\" fill-rule=\"evenodd\"><circle fill=\"#000\" opacity=\".556\" cx=\"21\" cy=\"21\" r=\"21\"\/><path stroke=\"#FFF\" d=\"M29 21l-12 8.5v-17z\"\/><\/g><\/svg><span class=\"yt-consent-placeholder__label\">Video playback requires cookie consent<\/span><\/button><\/div><\/div>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Chart users: <a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"https:\/\/microsoft.github.io\/flint-chart\/#\/documentation\/setup-flint-mcp\" target=\"_blank\" rel=\"noopener noreferrer\">Set up Flint in your chat<span class=\"sr-only\"> (opens in new tab)<\/span><\/a> and ask your agent to create an interactive chart. Find inspiration in the interaction gallery.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">App builders: Build interactive dashboards, data stories, and connected views with the <a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"https:\/\/microsoft.github.io\/flint-chart\/#\/documentation\/interaction-api\" target=\"_blank\" rel=\"noopener noreferrer\">programming API<span class=\"sr-only\"> (opens in new tab)<\/span><\/a>. Share the interaction-author skill with your coding agent to add presets to your app.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Interaction designers: Explore the <a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"https:\/\/microsoft.github.io\/flint-chart\/#\/interactions\/bespoke\" target=\"_blank\" rel=\"noopener noreferrer\">bespoke examples<span class=\"sr-only\"> (opens in new tab)<\/span><\/a>, design a new interaction, and turn it into a reusable preset. Propose a preset on GitHub and share your prototype or implementation to help expand Flint&#8217;s interaction vocabulary.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flint-interactive gives AI agents a language for creating interactive visualizations. Click a chart, filter data, highlight related content, and explore beyond the view the author originally chose.<\/p>\n","protected":false},"author":43868,"featured_media":1190357,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"msr-url-field":"","msr-podcast-episode":"","msrModifiedDate":"","msrModifiedDateEnabled":false,"ep_exclude_from_search":false,"_classifai_error":"","msr-author-ordering":[{"type":"user_nicename","value":"Chenglong Wang","user_id":"41251"},{"type":"guest","value":"yuwei-xiao","user_id":"1190526"},{"type":"guest","value":"alper-sarikaya","user_id":"1177220"},{"type":"user_nicename","value":"Michel Galley","user_id":"32887"},{"type":"user_nicename","value":"Chris Quirk","user_id":"31430"},{"type":"user_nicename","value":"Jianfeng Gao","user_id":"32246"}],"msr_hide_image_in_river":0,"footnotes":""},"categories":[1],"tags":[],"research-area":[13556],"msr-region":[],"msr-event-type":[],"msr-locale":[268875],"msr-post-option":[243984],"msr-impact-theme":[],"msr-promo-type":[],"msr-podcast-series":[],"class_list":["post-1190353","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-research-blog","msr-research-area-artificial-intelligence","msr-locale-en_us","msr-post-option-blog-homepage-featured"],"msr_event_details":{"start":"","end":"","location":""},"podcast_url":"","podcast_episode":"","msr_research_lab":[199565],"msr_impact_theme":[],"related-publications":[],"related-downloads":[],"related-videos":[],"related-academic-programs":[],"related-groups":[144931],"related-projects":[],"related-events":[],"related-researchers":[{"type":"user_nicename","value":"Chenglong Wang","user_id":41251,"display_name":"Chenglong Wang","author_link":"<a href=\"https:\/\/www.microsoft.com\/en-us\/research\/people\/chenwang\/\" aria-label=\"Visit the profile page for Chenglong Wang\">Chenglong Wang<\/a>","is_active":false,"last_first":"Wang, Chenglong","people_section":0,"alias":"chenwang"},{"type":"guest","value":"yuwei-xiao","user_id":1190526,"display_name":"Yuwei  Xiao","author_link":"<a href=\"https:\/\/xavier-shaw.github.io\/\" aria-label=\"Visit the profile page for Yuwei  Xiao\">Yuwei  Xiao<\/a>","is_active":true,"last_first":" Xiao, Yuwei","people_section":0,"alias":"yuwei-xiao"},{"type":"guest","value":"alper-sarikaya","user_id":1177220,"display_name":"Alper Sarikaya","author_link":"<a href=\"https:\/\/alper.datav.is\/\" aria-label=\"Visit the profile page for Alper Sarikaya\">Alper Sarikaya<\/a>","is_active":true,"last_first":"Sarikaya, Alper","people_section":0,"alias":"alper-sarikaya"},{"type":"user_nicename","value":"Michel Galley","user_id":32887,"display_name":"Michel Galley","author_link":"<a href=\"https:\/\/www.microsoft.com\/en-us\/research\/people\/mgalley\/\" aria-label=\"Visit the profile page for Michel Galley\">Michel Galley<\/a>","is_active":false,"last_first":"Galley, Michel","people_section":0,"alias":"mgalley"},{"type":"user_nicename","value":"Chris Quirk","user_id":31430,"display_name":"Chris Quirk","author_link":"<a href=\"https:\/\/www.microsoft.com\/en-us\/research\/people\/chrisq\/\" aria-label=\"Visit the profile page for Chris Quirk\">Chris Quirk<\/a>","is_active":false,"last_first":"Quirk, Chris","people_section":0,"alias":"chrisq"},{"type":"user_nicename","value":"Jianfeng Gao","user_id":32246,"display_name":"Jianfeng Gao","author_link":"<a href=\"https:\/\/www.microsoft.com\/en-us\/research\/people\/jfgao\/\" aria-label=\"Visit the profile page for Jianfeng Gao\">Jianfeng Gao<\/a>","is_active":false,"last_first":"Gao, Jianfeng","people_section":0,"alias":"jfgao"}],"msr_type":"Post","featured_image_thumbnail":"<img width=\"960\" height=\"540\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-960x540.jpg\" class=\"img-object-cover\" alt=\"Flint Interactive flowchart | purple gradient background\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-960x540.jpg 960w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-300x169.jpg 300w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-1024x576.jpg 1024w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-768x432.jpg 768w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-1066x600.jpg 1066w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-655x368.jpg 655w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-240x135.jpg 240w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-640x360.jpg 640w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1-1280x720.jpg 1280w, https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2026\/10\/FlintInteractive-BlogHeroFeature-1400x788-1.jpg 1400w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/>","byline":"","formattedDate":"October 22, 2026","formattedExcerpt":"Flint-interactive gives AI agents a language for creating interactive visualizations. Click a chart, filter data, highlight related content, and explore beyond the view the author originally chose.","locale":{"slug":"en_us","name":"English","native":"","english":"English"},"_links":{"self":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/posts\/1190353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/users\/43868"}],"replies":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/comments?post=1190353"}],"version-history":[{"count":24,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/posts\/1190353\/revisions"}],"predecessor-version":[{"id":1190795,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/posts\/1190353\/revisions\/1190795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/media\/1190357"}],"wp:attachment":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/media?parent=1190353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/categories?post=1190353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/tags?post=1190353"},{"taxonomy":"msr-research-area","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/research-area?post=1190353"},{"taxonomy":"msr-region","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-region?post=1190353"},{"taxonomy":"msr-event-type","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-event-type?post=1190353"},{"taxonomy":"msr-locale","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-locale?post=1190353"},{"taxonomy":"msr-post-option","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-post-option?post=1190353"},{"taxonomy":"msr-impact-theme","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-impact-theme?post=1190353"},{"taxonomy":"msr-promo-type","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-promo-type?post=1190353"},{"taxonomy":"msr-podcast-series","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-podcast-series?post=1190353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}