What's new in AG Studio 2.0: JavaScript embedded analytics

Most analytics tools aren't really embedded. They're iFrames. Separate sessions, separate styling, separate infrastructure. You get a dashboard that looks out of place because it is, and customising it means wrangling an inflexible API.

AG Studio is different. It's a JavaScript component that embeds in your application like anything else you've built. It uses your design system, sits inside your auth, and your data never leaves your infrastructure - even when using our AI assistant.

For your users, that means they can build the views they need and filter the data they care about without filing a ticket or waiting on a sprint.

Version 1 was built on all of the experience we gained building AG Grid and AG Charts. Version 2 adds more of what early customers asked for: custom and preconfigured widgets, time-aware filters, a theme builder, custom formats, access to our AI tools, and more.

Key features in AG Studio 2.0 embedded analytics

1. Calendars: Time-based analysis, including time bucketing and filtering.
2. Preconfigured Widgets: Build ready-to-use widgets for dashboards.
3. AI Extensibility: Direct access to AG Studio's built-in AI commands.
4. Theme Builder: A visual tool for building and customising themes.
5. Field Customisation: Edit field names, descriptions and formatting in the UI.
6. Group by Legend: Use a field as a chart legend to create grouped series.
7. Keyboard Shortcuts: Navigate and control Studio using the keyboard.

Calendars

Most data has a time dimension. Sales by quarter, signups by week, errors by hour - nearly every business question involves when, not just what.

With the new Calendars feature, users can now bucket data by any time period - hour, day, week, month, quarter, year - directly in the dashboard:

Developers will know how notoriously tricky working with dates and times is in JavaScript. This feature lets them hand this off to AG Studio instead.

To enable time bucketing, define a calendar in the studio properties object. Each calendar needs to provide the date range that it covers, and an array of fragments, which defines the time bucketing options available to the user:

const studioProperties = {
    data: {
        sources: [{ id: 'sales', data: [...], fields: [...] }],
        calendars: [
            {
                id: 'calendar',
                label: 'Calendar',
                range: { from: { literal: '2022-01-01' }, to: { literal: '2024-12-31' } },
                fragments: [
                    'year', 'quarter', 'month', 'week', 'day', 'monthOfYear', 'dayOfWeek'
                ],
            },
        ],
    },
};

The calendar then needs to be bound to any date columns that you want to enable time bucketing on:

const studioProperties = {
  data: {
    sources: [...],
    relationships: [
      {
        id: 'sales-calendar',
        source: { tableId: 'sales', fieldId: 'order_date' },
        // Bind calendar to this field
        target: { calendarId: 'calendar' },
      },
    ],
  },
};

→ Calendars docs

Preconfigured widgets

AG Studio ships with over 30 AG Grid and AG Charts components out of the box. In version 1.1 we introduced custom widgets that let you add any JavaScript component to AG Studio and integrate it with our data engine. The following example demonstrates AG Studio rendering and cross-filtering a 3D widget with globe.gl:

In version 2, we now also allow developers to pre-configure widgets. Once configured, users can select a widget that already contains the expected fields, aggregations, sorting, and formatting rather than configuring it from scratch:

Widgets can be pre-configured by overriding their default definitions:

const existingColumnChartDef = 
  config.widgets.find(({ id }) => id === "column-chart-grouped";

const preConfiguredColumnChart = {
  ...existingColumnChartDef,
  id: "pre-configured-column-chart",
  label: "Gold Chart",
  // Configure default state
  defaultState: {
    dataMapping: {
      // Fields, aggregations, filters...
    },
    sort: [
      // Column, asc, desc...
    ],
    format: {
      // Title, subtitle, caption...
    },
  },
  extends: "column-chart-grouped",
};

and then passing the widget to the createWidgets function, with a relevant menu item:

const studioProperties = {
  widgets: createWidgets({
    menu: [
      {
        label: "Pre-Configured",
        widgetIds: [
          "pre-configured-column-chart",
        ],
      },
    ],
    additionalTypes: [preConfiguredColumnChart],
  })
  
  // other studio properties ...
}

→ Preconfigured widgets docs

AI extensibility

AG Studio ships with a built-in AI assistant that can place and configure widgets for you, using a multi-agent, client-side tool architecture:

We know our users often work with sensitive data and are rightfully careful about where that data goes and who has access to it, which is why all of our AI features are entirely LLM-agnostic and run client-side; we provide the tools, you control the infrastructure.

AG Studio 2.0 takes this one step further by exposing all its built-in AI commands as standalone, framework-agnostic units that you can plug into your own LLM harness. These commands allow LLMs to reliably perform tasks such as querying data, filtering widgets, and moving them around the canvas.

Each command contains a JSON Schema describing its inputs and an apply() function that: validates input, mutates state (or runs a query), and returns a success/failure result. To retrieve a built-in command, pass the relevant AgBuiltInAiCommandRef to api.defineAiCommand:

const command = api.defineAiCommand({ type: 'AgExecuteQueryCommand' });

// hand to your harness as a tool definition
const schema = command.toJSONSchema();   

// { success: true, value } | { success: false, error }
const result = await command.apply(args); 

→ AI Toolkit docs

Theme builder

One of the key benefits of embedded analytics is customisability. Almost every aspect of AG Studio can be styled to fit your design, and we've now made this even easier with the new theme builder. Our interactive UI allows you to customise every variable in AG Studio - colours, typography, spacing, borders - and export the theme directly into your application:

→ Try the theme builder

Field customisation

AG Studio works with your data model, but the names and formats that make sense in a database rarely translate well to a dashboard. A field called contract_value_normalized may be clear in a schema but meaningless when shown out of context in a dashboard.

Field customisation lets you edit field names, descriptions, and formatting directly in the AG Studio UI, without changing the underlying data, so you can tailor fields to match the language your users actually use. Rename schema keys into readable values. Add descriptions that appear as tooltips when a user hovers over an unfamiliar field. Set the default number format so that a revenue figure displays as currency rather than a raw integer.

These changes live in AG Studio's configuration, not in your database. That means your data team and your analytics experience can evolve independently.

→ Field customisation docs

Group by legend

Legends are available on most chart types in AG Studio; create a bar chart to visualise net vs. gross sales by region, and you'll get green bars for net sales, and blue bars for gross sales. But what if you wanted to drill into the cities within those regions?

With AG Studio 2.0, you can now provide a breakdown field to the legend to extract more granularity from your data. Continuing the previous example, you can add the city field to the legend, and the chart will automatically assign a colour to each distinct value, allowing you to analyse your data with greater detail:

→ Group by legend docs

Keyboard shortcuts

Keyboard shortcuts are now supported within AG Studio, allowing users to interact with AG Studio via keystrokes - tab to move between widgets, enter to focus on them, delete to remove them - a crucial building block towards making AG Studio fully accessible, much like AG Grid and AG Charts:

→ Keyboard shortcut docs

Summary

AG Studio 2.0 adds the features early customers asked for most. Calendars and grouping by legend provide more ways for users to slice and break down their data. Preconfigured widgets and AI extensibility take the tedious work out of report building, letting users get straight to analysis. Field customisation and the theme builder give your users a seamless experience from data to UI.

Together, these changes give developers more control over the experience they ship and give their users more power to explore data without having to raise a ticket.

See the Release Notes for details or the Changelog for a full list of changes.

What's next

The AG Studio team are continuing to expand its capabilities, focusing on deeper AI integration, richer widget types, and broader accessibility. If there's a specific capability you need, we want to hear about it.

Enterprise customers can reach out directly via Zendesk; everyone else can use the contact form or open a discussion on GitHub.

Get started

AG Studio is available now. Visit the AG Studio documentation to get started, or request a demo to see it in action with your data.