feat: embedded visualizations in chat #8122

djbarnwal · 2025-10-12T23:42:50Z

Adds tool create_chart for embedding charts into AI chat.

Further -

Moves "go to explore" button and associated logic to features/explores
Add title and go to explore button capability for ChartContainer
More narrow types for chart fields for different chart types

TODO

Disable create_chart for external MCP clients

Checklist:

Covered by tests
Ran it and it works as intended
Reviewed the diff before requesting a review
Checked for unhandled edge cases
Linked the issues it closes
Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
Intend to cherry-pick into the release branch
I'm proud of this work!

web-common/src/features/components/charts/explore-transformer.ts

ericpgreen2 · 2025-10-15T05:35:38Z

web-common/src/features/components/charts/explore-transformer.ts

+    }
+
+    // Check if this property is a field config object
+    if (isFieldConfig(value)) {


E.g., maybe here's an opportunity for a guard clause

isFieldConfig has a type guard clause built in

web-common/src/features/chat/core/messages/ToolMessage.svelte

ericpgreen2 · 2025-10-15T05:43:49Z

web-common/src/features/chat/core/messages/ChartBlock.svelte

+        timeZone: chartSpec.time_range.time_zone || "UTC",
+      }
+    : {
+        start: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(), // Default to last 30 days


Nit: comment says 30 days but the code says 7

ericpgreen2 · 2025-10-15T05:46:28Z

web-common/src/features/components/charts/types.ts

+      spec: CartesianChartSpec & TimeRange;
+    }
+  | { chart_type: "donut_chart"; spec: CircularChartSpec & TimeRange }
+  | { chart_type: "pie_chart"; spec: CircularChartSpec & TimeRange }


Nit: I don't see pie_chart in the backend prompts. Should it be?

donut_chart and pie_chart are the same. We moved from pie_chart keyword in favor of donut. We still keep pie_chart for backward compatibility.

ericpgreen2 · 2025-10-15T06:13:01Z

web-common/src/features/chat/core/messages/ToolMessage.svelte

+          toolResult &&
+          !toolResult.isError &&
+          block.toolCall.name === "create_chart" &&


Maybe bake these checks into isChartToolResult? Else this conditional is a bit hard-to-read.

ericpgreen2 · 2025-10-15T06:22:50Z

web-common/src/features/chat/core/messages/ToolMessage.svelte

+  }
+
  // Group tool calls with their results within this message
  function groupToolCallsWithResults(content: any[]) {


Since this function is now more complex, it's further motivation to move this data processing into the Conversation class. I suppose it doesn't need to happen in this PR, but calling it out. For this PR, could you try to reduce the layers of nesting? Any efforts to make this function a bit easier to follow would be appreciated.

ericpgreen2

Approving with comments. Great to see this come together!

ericpgreen2 · 2025-10-20T20:59:08Z

runtime/metricsview/charts_json_schema.go

For now, I think this would better be placed in the runtime/metricsview directory. Here's Claude's thoughts:

ericpgreen2 · 2025-10-20T21:24:56Z

runtime/server/mcp_server.go

Here's some Claude feedback on the chart tool prompt:

ericpgreen2 · 2025-10-20T21:34:06Z

web-common/src/features/chat/core/messages/ChartBlock.svelte

+  $: timeAndFilterStore = readable({
+    timeRange: timeRange,
+    comparisonTimeRange: undefined,
+    showTimeComparison: false,
+    where: chartSpec.where || {
+      cond: {
+        op: "OPERATION_AND",
+        exprs: [],
+      },
+    },
+    timeGrain: chartSpec.time_grain || "TIME_GRAIN_DAY",
+    timeRangeState: undefined,
+    comparisonTimeRangeState: undefined,
+    hasTimeSeries: true,
+  });


Can you add a comment to explain this?

This looks like it's tailored for time series charts. What about charts without a time series?

The timeAndFilterStore is a object representation of our time picker and filter bar UI.

It is required for all charts as well as all other components that we offer. The component make their own queries. As such, they need a time range and filter expression for filtering down the data.

There are some properties which are only relevant to time series which is timeGrain. Otherwise, most of it is used across components.

Okay, I was thrown by hasTimeSeries: true. Does that need to be a derivative of the chart spec?

* Adds `chat_charts` feature flag for the `create_chart` tool * Propagate feature flags to the prompts * Fix test * Fix test * QA * add feature flag to base system prompt --------- Co-authored-by: Dhiraj Kumar <[email protected]>

* refac: pull out metric view selectors from canvas spec * lint fix * separate out chart component from canvas * move chart utils, methods, config to feature/component * move chart specs and builder * move canvas chart components * move timeAndFilter * ChartSpec name refactor * update conflict var names * remove dev route * remove comments * add tool to AI chat * add go to explore button, update prompt * viz improvements * improve prompt * add chart schema * update prompt * add where and time_grain to gen * move to basic schema validation * remove temp file * remove old validation code * lint fix * review * Disable the `create_chart` tool in external MCP connections (#8143) * review comments * Adds `chat_charts` feature flag for the `create_chart` tool (#8159) * Adds `chat_charts` feature flag for the `create_chart` tool * Propagate feature flags to the prompts * Fix test * Fix test * QA * add feature flag to base system prompt --------- Co-authored-by: Dhiraj Kumar <[email protected]> --------- Co-authored-by: Benjamin Egelund-Müller <[email protected]>

- Update AI chat documentation to reflect new chart visualization capabilities - Document chatCharts feature flag in project configuration - Add details about automatic chart type selection and when charts are generated - Include examples of enabling chat with visualizations - List all available chart types (line, area, bar, stacked bar, donut, combo, heatmap) Related to PR #8122 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

* refac: pull out metric view selectors from canvas spec * lint fix * separate out chart component from canvas * move chart utils, methods, config to feature/component * move chart specs and builder * move canvas chart components * move timeAndFilter * ChartSpec name refactor * update conflict var names * remove dev route * remove comments * add tool to AI chat * add go to explore button, update prompt * viz improvements * improve prompt * add chart schema * update prompt * add where and time_grain to gen * move to basic schema validation * remove temp file * remove old validation code * lint fix * review * Disable the `create_chart` tool in external MCP connections (#8143) * review comments * Adds `chat_charts` feature flag for the `create_chart` tool (#8159) * Adds `chat_charts` feature flag for the `create_chart` tool * Propagate feature flags to the prompts * Fix test * Fix test * QA * add feature flag to base system prompt --------- Co-authored-by: Dhiraj Kumar <[email protected]> --------- Co-authored-by: Benjamin Egelund-Müller <[email protected]>

djbarnwal added 23 commits October 1, 2025 17:27

refac: pull out metric view selectors from canvas spec

ca2195e

lint fix

e349455

separate out chart component from canvas

a283d28

move chart utils, methods, config to feature/component

75dcd42

move chart specs and builder

e530671

move canvas chart components

9a22ce8

move timeAndFilter

38c0c82

ChartSpec name refactor

a57c67f

update conflict var names

624b380

remove dev route

6740559

remove comments

c6a73c0

Merge branch 'main' into refac/pure-charts

8c2aa6c

add tool to AI chat

b3eabc1

merge main

b3fb19a

add go to explore button, update prompt

8a75e97

merge main

fa528b1

viz improvements

1a8dc67

improve prompt

e23e425

add chart schema

fc46ebd

update prompt

443cc63

add where and time_grain to gen

1d35623

move to basic schema validation

84f807d

remove temp file

b262359

djbarnwal marked this pull request as ready for review October 14, 2025 23:06

djbarnwal added 2 commits October 15, 2025 04:42

remove old validation code

dfd1c97

lint fix

4b37a71

djbarnwal self-assigned this Oct 14, 2025

ericpgreen2 reviewed Oct 15, 2025

View reviewed changes

review

4e0b177

djbarnwal requested a review from ericpgreen2 October 15, 2025 22:53

Disable the create_chart tool in external MCP connections (#8143)

ff7c564

ericpgreen2 approved these changes Oct 20, 2025

View reviewed changes

djbarnwal and others added 3 commits October 22, 2025 20:21

review comments

bfdc913

Merge branch 'main' into feat/viz-in-chat

0b70a70

djbarnwal merged commit 8a3b7ea into main Oct 24, 2025
12 checks passed

djbarnwal deleted the feat/viz-in-chat branch October 24, 2025 10:42

royendo mentioned this pull request Oct 30, 2025

docs: Document embedded chart visualizations in AI chat (for PR #8122) #8203

Open

feat: embedded visualizations in chat #8122

feat: embedded visualizations in chat #8122

Uh oh!

Conversation

djbarnwal commented Oct 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

djbarnwal Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ericpgreen2 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

djbarnwal commented Oct 12, 2025 •

edited

Loading

djbarnwal Oct 15, 2025 •

edited

Loading