Hi team, hope you are doing well we need your help on rendering visualizations returned by the GoodData AI API. Background: - We built a frontend and backend integration around the GoodData AI API. - For many prompts, the AI response includes both text and a visualization. - These visualizations appear to be chat-local / ephemeral rather than normal persisted GoodData entities. What we are trying to do: - Show the AI-generated visualization inside our own application, ideally in an iframe or similar embedded view. What we observed: 1. The visualization returned directly from AI chat does not appear to be a normal persisted insight, so we cannot reliably iframe it as-is. 2. We then tried persisting the chat-generated visualization as a

visualizationObject

/ insight on the backend. 3. Even after saving it, we still are not sure what the recommended frontend rendering approach is. 4. From the documentation, it looks like we may need to use GoodData Web Components or the React SDK rather than a simple iframe approach. Our questions: 1. Is there any supported way to render / embed AI-chat-generated ephemeral visualizations before saving them? 2. If not, is the recommended flow: - generate visualization via AI chat - save it as an insight / visualizationObject - render it in the frontend using GoodData UI SDK / Web Components? 3. If a saved visualization should be embeddable, what is the recommended frontend approach? - iframe - Web Components - React SDK 4. Are there any examples or best practices for displaying AI-generated visualizations in a custom chat UI? Our goal: - We want to display GoodData AI-generated visualizations inside our own chat experience with the least complex supported approach. Any guidance or examples would be very helpful. Thanks. PS: an example of chat response

"visualization_refs": [
              {
                "dashboard_id": null,
                "dashboard_title": null,
                "deep_link": "https://*.cloud.gooddata.com/analyze/#/child_1_71/900c86cd-90cf-46d3-aa97-74a26913c080/edit",
                "id": "monthly_percentage_change_in_posting_rate_over_last_3_months",
                "saved_visualization_id": "900c86cd-90cf-46d3-aa97-74a26913c080",
                "title": "Monthly Percentage Change in Posting Rate Over Last 3 Months",
                "type": "visualization",
                "visualization_type": "LINE",
                "workspace_id": "child_1_71"
              }
            ],

New message text here

Hi Odina. I can see that the answer from our GD AI has somehow been deleted. It was correct, so I will copy it here: ## 1. Can You Render Unsaved (Ephemeral) Visualizations? Short answer: No. There is no supported way to embed or render a visualization that hasn't been saved to the workspace yet. --- ## 2. The Recommended Flow: Generate → Save → Render The proper approach is to save first, then embed. Once a visualization is saved, it becomes a standard insight object that can be embedded like any other. To save a visualization from the AI Assistant: > Hover over the visualization and click the save icon in its upper-right corner. After naming it, the chart is saved to the workspace and is ready for further edits in Analytical Designer or for placement on a dashboard. If you're working via the API and already have a

saved_visualization_id

in your response (e.g.,

900c86cd-90cf-46d3-aa97-74a26913c080

), the visualization has already been persisted — you can skip to embedding immediately. --- ## 3. How to Embed a Saved Visualization Since you want to embed individual visualizations (not full dashboards), iframes are not an option — they only support dashboards and Analytical Designer. You have two good alternatives: ### Option A — Web Components (simplest, works with any framework)

html
<gd-insight
  workspace="your_workspace_id"
  insight="900c86cd-90cf-46d3-aa97-74a26913c080">
</gd-insight>

### Option B — React SDK with

InsightView

(recommended for React apps)

jsx
import '@gooddata/sdk-ui-ext/styles/css/main.css';
import { InsightView } from '@gooddata/sdk-ui-ext';

<InsightView insight="900c86cd-90cf-46d3-aa97-74a26913c080" />

--- ## Summary & Recommendation Given a setup with a custom chat UI and AI API integration, here's the recommended path: 1. Save the AI-generated visualization (you likely already have the

saved_visualization_id

). 2. Render it using

InsightView

(React) or

<gd-insight>

(Web Components), passing in the

saved_visualization_id

. Let us know if you need any further help.