Build a self-service dashboard in just 30 lines of code

Video authored by the channel shown, not by IANIA; all rights belong to the creator. Transcript and summary generated automatically; the original-language content is preserved.

Original language: English

Original video: Build a self-service dashboard in just 30 lines of code · Channel: AG Grid · 46:45 · Watch on YouTube

Topics: AI agents, Data, databases and embeddings, AI developer tools

Summary

The webinar demonstrates how developers can build an interactive dashboard with AG Grid and AG Charts, then shows how AG Studio lets analysts create and modify dashboards with under 30 lines of configuration. The example follows a construction company tracking purchasing spend, with date filters, charts, KPIs, grid interactions, and cross-filtering. An analyst then adds measures, visualizations, filters, saves changes, and uses an AI assistant to create a widget. The Q&A covers data engines, server-side data, theming, AI integrations, dashboard state, and data scale.

Key points

The example dashboard tracks purchase orders, suppliers, materials, and spending for a fictional construction company.
A hand-built dashboard can combine AG Grid, AG Charts, KPI cards, date filters, and cross-filtering, but new requirements create ongoing developer work.
AG Studio is presented as an embedded tool that lets analysts build and adjust dashboards without a full development cycle.
Studio’s data configuration can define multiple data sources and their relationships.
Users can create aggregate measures, such as the percentage of accepted units, and format the results.
Dashboard components can be dragged, resized, filtered, and cross-filtered; reports can be saved and restored through the state API.
The AI assistant can interpret prompts, inspect the page and data schema, and add configured widgets.
Studio’s default data engine runs in the browser; custom data engines can handle server-side queries, with more server-side and hybrid tooling described as planned for Q4.
The Studio Agent Framework supports different AI setups and lets developers customize agents, prompts, and tools.
The presenters say widget capacity depends on data shape and calculation complexity, and that widgets can handle hundreds of thousands of data points.

Chapters

Start	Chapter	Summary
00:02	Introductions and webinar setup	The presenters introduce themselves, explain the session format, and outline how to submit questions.
02:06	Dashboard requirements and use case	The team defines a purchasing-spend dashboard for a fictional construction company and describes the analyst-to-developer handoff.
04:40	Building the dashboard with AG Grid and AG Charts	James walks through the data, grid, charts, KPI cards, date filtering, grid filters, and chart-to-grid cross-filtering.
10:21	Changing requirements and the case for AG Studio	New requests expose the ongoing work of maintaining a custom dashboard, leading to AG Studio as an embedded self-service alternative.
13:29	Configuring AG Studio	The demo explains how to supply data sources and relationships, then introduces Studio’s canvas, panels, and dashboard state.
17:35	Analyst builds and updates the dashboard	Yin adds a calculated KPI measure, breaks down charts by material and supplier, adds a category filter, and saves the report.
25:36	AI assistant and webinar resources	The analyst uses a prompt to create a chart widget, after which the presenters share Studio Launch Week and product resources.
29:39	PDF export and server-side data	The Q&A discusses printable dashboards and explains Studio’s browser-based data engine, custom server-side engines, and planned hybrid support.
32:17	Data configuration and external sources	The presenters discuss field configuration, potential Power BI or Fabric integration, and support for user-defined data sources and joins.
36:57	Filtering and theming	The Q&A covers relative filters, theming through JavaScript and CSS, and the Figma design system introduced with version three.
39:01	Studio Agent Framework	Josh explains how the AI framework assesses widgets, connects to different LLM setups, and uses customizable agents to build dashboards.
43:40	Dashboard state, data scale, and closing	The final questions cover creating and saving dashboards through state APIs, data-volume considerations, and how to contact the team.

Quotes

That is dashboards in 30 lines of code. — 14:32

we can do that nice and easily in Studio by just using its state API. — 16:04

It’s gone ahead and added that widget. — 27:07

Coming in Q4, we are working on a lot more tools to help with server side data — 31:46

we can handle, you know, hundreds of thousands of data points within each widget. — 45:44

Concepts and entities

AG Grid, AG Charts, AG Studio, Studio Agent Framework, data engine, Web MCP, Acme Corp, James, Ian Kelly, Josh, Adam

Full transcript (original language)

00:02 Hello everyone. Good morning, good afternoon, good evening, depending on where you’re tuning in from. Thank you very much for joining us for this webinar today. Uh where we’ll be showing you self-service dashboards in around about 30 lines of code. So, just before we jump into the content, uh just a few introductions here just to introduce everyone that’s with us today. So, first off, my name is James from the blinds. I’m the Deborah lead here for AG Grids. I’ll be taking you through some slides, some code snippets, and some demos. And alongside me helping

00:34 out with some demos and slides as well is Ian Kelly. Ian, would you like to introduce yourself? >> Yeah. Uh thanks. My name is Ian and I’m a hybrid data viz designer and engineer with over 10 years experience building data viz applications. Um I primarily work on the charts product, but today I’ll be helping out with the studio demo. >> Awesome. Thanks, Ian. And Josh we have with us as well. Josh, would you like to give a quick intro? >> Uh yeah, of course. Um so, I’m a senior developer on the um studio product. Um I’ve been involved in the whole thing

01:05 from the ground from when we started. Um recently mostly focusing on the AI um the studio agent framework that we just released in version three. Uh we’ll talk about that a bit later if you’ve got any questions. >> Awesome. Thanks, Josh. Much appreciated. So, just before we kick off and get into the content, just a couple health keeping rules for some common questions. So, the session will be recorded. Uh it’s available on demand if you just go to the same link that you used today for the session, you’ll be able to watch the recording anytime you like. You can share that with anyone as well. If they

01:36 pop their email address in, they’ll get access to the on demand recording there as well. Um secondly, we are going to leave about 10 or 15 minutes for questions at the end. Um so, please feel free to pop any questions in that you might have. Not just about this session, but also in general. We’ll try our best to answer. There is a questions tab and a chat tab. Please try and keep the questions into the questions tab, so we can just keep track of that. Um so, yeah, that’s uh all of the housekeeping stuff out of the way. So, let’s get straight into today’s

02:06 content. So, today we’re kind of be talking about a fictional company in this sense uh in this instance Acme Corp. So, in this example, they’re a global construction company, and we’re really just using this to kind of illustrate a typical workflow or use case that we see occurring in a lot of our customers’ companies. You know, we typically start with a stakeholder who has a request or a need. So, it might be a C-level executive, for example. In this instance, they’ve decided that they need an overview of their operating costs.

02:36 For example, how many suppliers they have, how many materials they’ve purchased, and the overall spend uh for those things. And so, they get in touch with their analyst department, and they task them with delivering this. And the analyst at this point decides that they need a dashboard in order to meet these requirements, complete with things like grids and charts and filters and all of that good stuff. And then, of course, who do they ask to actually implement this? Well, it goes off to the development team, and they’re tasked with taking these requirements for the

03:06 dashboard and actually turning this into a usable report that people can actually interact with. And so, what we’re going to be focusing on today is this kind of analyst to developer a handoff. And for today’s session, I’m going to be talking more from the developer perspective, and then Yin will be talking more from the analyst perspective. So, just to give a little bit of context about what we’re going to be trying to achieve and build here, I’m just going to hand over to Yin to kind of talk us through the requirements for this dashboard in this particular example. >> Great. Thanks. So, as an analyst, I want

03:38 to introduce um our simple, hopefully familiar dashboard uh requirements. So, um I would like a dashboard that allows our leadership team, our stakeholders, to track and analyze our spend. Um it needs quick date uh filters, a chart showing spend across time, and a view that splits materials, um, suppliers, um, and spend. So, translating those two requirements, we need the ability to aggregate the data to show total purchases and spend. Uh, we need to group the data so I can see the spend by

04:10 month, supplier, and material. Um, filter filter the data by date. Um, and also cross-filtering, which allows, um, our stake stakeholders to quickly filter and explore the data further by simply clicking on a chart, as questions arise. >> Awesome. Thanks, Yin. So, you know, at this point, obviously, the sequence massively shortened, but, you know, we would gone through a back and forth with the analyst, we would have defined our tickets, uh, defined our sprint, and we may already have decided that, you know, we’re existing

04:40 AG Grid and AG Charts users, we’ve got familiar familiarity with these components, and so building a dashboard with these components seems like a natural fit for them. And so, we can just go ahead and start taking a look at what that actually looks like from, uh, integrating and wiring up AG Grid and AG Charts to try and build a dashboard. So, the next couple of slides, they do have quite a bit of code in them, but I’m not going to go into the detail of the code too much. I’m just trying to give you an idea of sort of the the the work that goes in to this cross-filtering and wiring between AG Grid and AG Charts.

05:12 So, I’ll move through them relatively quickly. So, the first thing that we need to look at here is the data. And so, in this example, we’ve purposely kept this really simple, it’s just a flat JSON array, it has about a thousand or so rows, and it’s basically purchase order information. What was purchased, who from, how much, how much did it cost, really simple stuff. And so, in order to access this data inside our application, we can just create simple little helper methods like this. So, for getting the data into the grid, we just return all the information, we’ll configure the grid in a moment in order to render that properly. For the charts, to Yin’s

05:43 point, we need to do a little bit of aggregation and grouping in order to get this into the month by month basis and into the shape that AG Charts accepts. And for the KPI cards we need to do some aggregation there as well. So we’re just summing some totals across all of the different orders. So nothing too complex or crazy in here at this point. So once we’ve got all of the data inside our application and into the shape that we need it, we need to actually do something with it and visualize it. So we’ll start with AG Grids, really straightforward. We just grab those rows using that helper method. We can define some column definitions, so a little bit

06:14 of grouping here, firstly by material and then supplier. We can do some aggregations across all of the different spend, the cost and the quantity. We can then just supply the row data and those column definitions into AG Grid and it will take care of the rest for us. Again, really simple, really straightforward. It’s very similar for AG Charts. You access the data, pass it through to the component, define your series and again we get the chart available inside our application. And then of course we have a KPI card which is not provided by AG Grid, so we just have a few HTML elements in here

06:44 designed to show some labels on top of a nice little card layout. Um and so at this point we have a sort of a skeleton of a dashboard. It looks quite nice. We’ve got some KPIs, we’ve got a chart and we’ve got a grid, but it’s not very interactive. We can apply some filters onto the grid, but that will make it go out of sync with the rest of the components on this page. So the first thing that we can do is start applying some global filters. So in this case what we’re looking to do is add a date filter. So again, this is pretty straightforward. We can just use a state variable to capture the date range. We

07:17 can pass that through to those helper methods so that they can filter based on that date range and then we can just build a simple UI component or pull that from a library somewhere in order to handle the UI part of this and actually trigger these changes to the date range which will then trigger these different components to refresh. And obviously in order to do this we need to make some updates into our helper methods that actually access this data. So now then rather than just returning the data in the format that the components need, it also does a little bit of filtering and it checks that that data within is

07:47 within the given date range. So again, pretty straightforward and now at this point we have a new component in here that lets us select different date ranges and once those are applied, you can see all the different components filter in tandem or in sync with each other. So all pretty straightforward at this point. This next step is borderline more complex but still relatively straightforward as well. So we want to be able to apply the filters from the grid to the other components that exist on this dashboard. And the approach that we’ve taken here, of course there’s lots of different approaches to all of the

08:18 stuff we’re talking about here and this is a fairly simple approach, purposely so for the webinar. But what we’re doing here is we’re just hooking into the on filter changed event inside AG Grid. So anytime a filter is applied, we just take the filter model and pass that up to our parent component who can then take that filter model and pass it back down to these helper methods and trigger the filtering uh based on the grid’s filter model. And so of course we also need to update those helper methods so now they don’t only take into consideration the date range filter, but they also apply any

08:48 filters that were given from the grid to their data and then supply it to their relevant components. So at this point we’ve now wired up the grid so if we go in, we apply some filters into the grid, we can see them take effect on both the KPI cards and the chart just above. Can also go into the other columns here so we’ve got filtering across most of the columns that are available inside of the grid and everything updates nicely in real time for us. The last thing that we need to do at this point is implement the cross filtering from the charts into the grid

09:19 and into the KPIs. So it’s a very similar approach. We just need to handle a click event so we define a listener on our bar series. Whenever that’s clicked, we call this on month click callback which is passed down from our parent component. And then that can be passed uh likewise into the Um, sorry, I’m seeing someone mention that they have a loading screen. Is anyone else facing the same issue? If you are, please let us know so we can can fix that. Um, so yeah, at this point we can just

09:50 take those selected month variable and we can pass that down to our various different helper methods. And so at this point we can update them so that they also take into consideration the selected month alongside the grid filters and alongside the date filters. And at this point we have a pretty robust dashboard here. And so we can go in and we’ve got the grid filters pre-configured and we can go in and click on a chart element and then that cross filters our KPI cards and our grids as well. So at this point I think

10:21 it’s reasonably safe to say that we have achieved those initial requirements. And so I would say at this point the dashboard is pretty much ready to hand back to Yin and it wasn’t too hard for us to do that. So Yin, would you like to give us your thoughts, see what you made of that? >> Uh, yeah, thanks James. This is a great start and after playing with this, I’m realizing we need a bit more and our stakeholder stakeholders have provided some feedback as well. So Um, some

10:53 additions that we want to make is another KPI uh, showing total accepted orders as a percentage would be helpful. Um, we’d also want to see that uh, that a pie chart breaking down the total spend by supplier. It’s also helpful to see that trend chart split by material as well. Um, and we also want this experience to

11:26 be available to keyboard users and screen readers. Um, and lastly, uh stakeholders would want um to be able to export uh these dashboards into a PDF. >> Awesome. Thanks, Yen. So, I think at this point, you know, all of those requirements sound pretty reasonable and I think, you know, they could probably be achieved without too much effort. But, the point is at this stage, we have to go back to the drawing board. We have to go back to the IDE, and so we enter

11:56 into another stage of the SDLC, where we basically have to scope out all of this work, we have to plan it, and then we have to actually action that, and then push it into production. And I think what we’ve come to realize here is that uh from speaking to so many of our customers that what we showed you here at the start is this kind of nice neat handoff between each other. Actually ends up looking like something like this. Where it’s ends up becoming a loop of delivering different reports, needing to make slight tweaks to them, and other stakeholders involved, they want to see a slightly different view. And next

12:27 thing you know, you’ve ended up owning an entire dashboard building framework when really all you started out to do was just build a quite simple report. And so, rather than going ahead and, you know, implementing all this functionality, perhaps refactoring the application so it’s a bit more easily scalable for different filter and different component types, instead, we think this is where AG Studio slots nicely in. And it allows your users to build dashboards themselves uh through a component that is embedded directly into your application. So, much like AG Grid and

12:58 AG Charts, AG Studio slots straight in. And the idea is that the developer just needs to configure Studio once, hand this off to the analyst, and then they can work with their stakeholders in order to make all these tweaks and changes to the reports and build these reports on the fly without needing to involve the developer and without needing to go through a full build cycle in order to make what can often be quite simple little changes. And so, let’s actually take a look at what configuring AG Studio looks like

13:29 and try and contrast that into some of the uh grid and charts code that we’ve just seen. So, what we have here is just a single data object, and that contains two arrays, a sources array and a relationships array. In the sources array, the first object there is our purchase orders data, and that’s all of the data that was just contained in our initial demo, that flat array. But, in order to meet these additional requirements, we need a little bit more information, so we need to know more about the suppliers, and we need to know more about the materials that exist within purchase orders. >> [snorts] >> So, if we wanted to achieve this in the

14:00 previous demo, we’d probably have to go back and rethink our data model and how we start handling multiple data sources rather than just a single one, and then it starts becoming more complex. But, in AG Studio, this is really easy to do, and we can just define relationships between these different sources. So, in this case, much like we would in a relational database, we’re just doing a many-to-one join between the PO and suppliers tables, and a one-to-many join between the materials and the PO tables. We can then just take that data object, pass that to AG Studio through the data prop, and that is essentially it. That

14:32 is dashboards in 30 lines of code. So, if we were to run the application at this point, we would get something that looks a little bit like this. So, on the left-hand side, the majority of the screen there is taken up by the drag-and-drop canvas, so this is where all the different widgets within AG Studio will live, and this is where the report is built. We have the filters panel that allows users to apply these various different filters, the components panel, which lets them pick visualizations that they need, and if the visualization they need isn’t there, we also offer the ability to integrate

15:02 custom components, so you can extend this as far as you’d like. And then finally, we have the data panel that contains all of that data that we’ve just fed into AG Studio. And so, if we play the video here, we can kind of see this core use case, where we select the component that we want to build a visualization for, we select the data that we want to visualize, so in this case, the month of the order date, and then we’ll visualize on the Y axis the total spend. The user can come in, manipulate that widget, resize it, move it around. They can also apply these

15:33 filters to their heart’s content based on any of the fields that are available within AG Studio. And as soon as those filters are applied, the widgets respond in turn. And so, really, we could just leave it at this point, and we could go back to our analyst, Tiyen, and we could say, you know, here is the Here is the application. Please go ahead and just, you know, build the report that you were looking for. We’ve supplied you everything you need. But wouldn’t it be nice as well if we could kind of pre-build a report in there so that Tiyen’s not having to start from scratch? We’ve already done a bit of work to figure out how that dashboard

16:04 should look and where the different things should be placed. And so, we can do that nice and easily in Studio by just using its state API. So, [snorts] we can go into AG Studio, configure a report using the UI, and then we can just capture that state object that’s outputted from Studio, put that into our application, and use that as our initial state. And by doing so, we’re able to provide Tiyen with a dashboard that looks a little bit more like this, which is quite similar to the dashboard that we created in the grid and charts example. What’s more is that we can also add a

16:34 few additional features on top of this as well. So, being able to persist and restore reports very similar to the approach we’ve just taken around the initial state. It’s just capturing that state, storing it somewhere, and then restoring it. In this example, we’re just pushing it to local storage. And then we can also add guardrails as well. So, obviously, we know that when people are building these dashboards, certain people will need to build them, and certain people will just need to interact with them. And so, by default, we support that through these view and edit modes, which kind of just are these default configurations. You can take

17:04 that as far as you want. You can restrict what data users might have access to, what panels are currently shown, what components they can use within their reports, and so on and so forth. It’s really be to slit slot into your existing role-based permissioning systems. >> [snorts] >> And so at this point, we have a pretty well-built dashboard with a bunch of functionality that matches our output pretty closely from that hand-rolled grid and charts demo, but rather than a couple of hundred lines of code of custom logic, it’s just under 30 lines

17:35 of configuration code. And so at this point, I think and I’m certainly more confident that this will be the final handover from the developer over to the analyst. So Yin, would you like to take it from here? >> So Great, thank you. Can everyone see my screen? >> I can. >> All right, great. Um so this is a great uh place to pick the dashboard up because um I can start adding uh those features that I’ve requested

18:06 um before. So one of those requests was adding a new KPI. So I’m going to edit uh the canvas here, uh make enough space to add a new KPI widget. So in the compose panel, I can scroll down, look for that KPI, and drag it. So um and the KPI that I wanted, which was percent uh units units accepted, that is

18:39 not one of the raw fields coming from our data model, so I am going to um add that as a new uh measure. So I’ll just take a moment to explain that there’s two ways to add a field. Um there’s a new calculated column and a new measure. So a new calculated column is performed at the row level, and a new measure um is um an aggregate. So with this KPI um in particular, I want this at the aggregated level, so I’m going to go ahead and select uh the new measure.

19:12 You’ll see that this panel has changed and I can then supply it a title or name. So, let’s just say percent units accepted. Here, I want to give it an expression. So, in this case, it’s just a simple division of the total um accepted quantity over the total uh overall quantity. So, that’s just a divide. So, as I’m typing, there are um

19:44 some functions that come up and these mirror what uh Excel have, so they should be familiar to you and analyst. So, I want to divide the sum of the accepted quantity by the sum of the overall quantity. There we go. So, I think we’re happy with that. Now, I know I want this uh to be format at formatted as a

20:17 percentage, so I can click on that percentage format. I also want to display this with two decimal places, so I’ll go ahead and um type in two and the preview here um yeah, just gives me that preview of what to expect. So, I will go ahead and save that. Um so, now this is available to use um in my widget. So, I can click back onto my KPI widget and drag that field or measure um onto that value.

20:50 Um I’ll just go ahead and add a title to that widget, so percent units accepted. Great. So, that is um the new KPI that I wanted to add. Next is this trend chart. So, previously I wanted to update this to split the spend by material subcategory. So, I’m going to

21:21 go ahead and do that by selecting the subcategory fields over here under my materials table and drag that over to the legend. And you can see that the chart updates accordingly. And this this seems to look as I expected. So, I’m just going to resize this as I am I also want to add one more chart which is that pie or donut that I

21:52 mentioned previously. So, I want to split the spend by supplier. So, to do that I want to give the angle the total spend amount field. I also want to give the supplier name to the label to give me that split. So, I’m going to just going to format this donut further. It looks pretty good, but I want to give it the total

22:22 label. So, under the format tab there is a lots of options that you can enable. So, one of them being the total label. So, I’ll enable that. I’m going to make this a little bit bigger cuz it looks a bit small. I also want to show data labels. So, I will enable that as well. And then lastly I’m going to give this a title. So, total spend by supplier.

22:53 Great. So, I’m happy with that. Next I want to add a filter widget. So, the filter the date filter is great, so I can use that to filter by time period, but because my organized my organization is split um by category, I want to allow the stakeholders to quickly uh filter this view by the material

23:27 material category. So, under my composed panel, there is a filter widget over here. Um there’s a couple options, but I want the list filter, um which gives me um a a select view. So, um as I said before, I want the material category. So, I’m going to drag that value, give it to that as give the

23:59 filter um that field. Just going to make this bigger as it’s cut off. Um I also want to set this as a single selection, not multiple. Um and so, and it’s ready to start um ready for action. So, as I’m clicking on it, you can see the other widgets um respond. Now, I’m just going to after adding some new widgets, I’m just going to tidy up

24:32 um the layout. So, as you can see, it’s quite easy uh to drag and resize. So, I’m just going to make this title span the full width. Um so, yeah, so I’m quite happy with this. Um so, James has mentioned this earlier, but he that but he’s configured in this application code that we can save. So if I click on save, it saves my work and if I refresh, you

25:04 can see that my changes are still there, which is great. The last thing that Oh, before I talk about what I wanted to talk about, I wanted to just quickly demonstrate the cross filtering. So out of the box, AG Studio allows you to quick filter so or cross filter. So by just clicking any elements on the chart, um it applies the filter across the other widgets. So the filter panel here

25:36 um tells you what filters are being applied. So we’ve got a mix of filters coming from this widget and also with the cross filter by interacting on the chart. Great. So lastly, I want to talk about the new feature, which is the AI assistant. Um now, so far I’ve been making changes on this dashboard

26:07 via the UI, the drag and drop method. Um you can also create or add widgets using the AI assistant. So just like any AI chat interface, you can give it a prompt. In this case, I I’m just going to make something up, something quite simple. So um show me which countries orders are coming from and split this by material subcategory. So I’m just going to go ahead and send

26:37 that prompt. So you can see that there’s already feedback coming uh coming back in this panel. There’s agents doing different things. It’s reading the data scheming schema. It’s looking at the page itself, what’s existing. And you can see the canvas changing live. So, this widget wasn’t there before. Um

27:07 the Um it’s gone ahead and added that widget. It’s also populated that widget um with some fields. It’s chosen um a chart type. And and then lastly, once it’s done, it gives feedback and summary on what it’s done. So, that is uh yeah, one way that you can create a

27:38 dashboard using the AI assistant feature. >> Awesome. Thank you very much, Jen. Much appreciate it. And that pretty much brings us to the end here of the webinar. So, of course, we’re going to leave some time for questions in just a moment. The AI piece is a nice piece to end on. As Josh mentioned, he is kind of the brains behind that feature. So, you couldn’t have anyone better on the call to sort of pick his brain around that. So, please feel free to start throwing your questions into the questions panel.

28:09 Um just while we wait for that, I do want to call out, in case you weren’t already aware, that it’s currently Studio Launch Week. So, this entire week we’ve been running a ton we’ve published a ton of blogs, there’s some podcasts, webinars, a whole bunch of stuff, and then some big announcements that I can’t share at the moment. And this is going to be running all week. So, you can scan the QR code, it will take you over to the landing page for Launch Week. You can check out all the content and stuff that we’ve been putting out. And you can keep up to date as we go through the last couple of

28:39 days here of Launch Week as well. So, really do encourage you to check that out. Of course, if you do want to stay up to date outside of Launch Week, Uh we have a bunch of handy links here for AG Studio. You can check out our road map, our change log, our what’s new documentation. But if you are only going to scan one of these, I’d highly recommend you sign up to our newsletter. We share lots of useful information every time we put out a release. Uh we’ll share some highlights from those releases with some handy links to the docs. It’s a really easy way to see if there’s new features that might be of

29:09 value to you. Last but not least, of course, if you do want to speak to us a little bit more, um if this sparked your interest, we’d be more than happy to run a sort of custom demo for you, give you a little bit more information around Studio’s pricing, or help you get started with your integrations. If you’ve got any questions for us, we’re more than happy to help. So, at this point, I’m going to jump straight over into our Q&A for the last 15 minutes or so. So, I’m just going to go on a first-come, first-serve basis.

29:39 Hopefully, we have the time to get through all of these questions. So, the first one’s around PDF exporting. Is [snorts] there a difference between the interactive dashboard and the printable dashboards? >> Sure. Um yeah, that’s a good question. Um in general, we’re aiming for them to be exactly the same. Um however, there are obviously going to be some uh tricky differences. For example, if you have a grid that can scroll, um you know, we have to make adaptations for how that will look. Um however, the goal is to be one-to-one with what you see in

30:11 your report. Um some of that is configurable, um but we’re interested to hear which, you know, direction people want to go and what options uh we might be able to add there. >> Awesome. Thanks, Josh. Comprehensive answer. So, a question here around server-side data. So, can AG Studio handle server-side filtering like AG Grid and AG Charts? >> Yeah, so I’ll take that one again. Um I’ll answer this So, looking through the questions, there’s a few more that talk about server-side data in general. Um so, hopefully, I can answer all of these

30:42 at once. Um, right now uh Studio runs off what we call a data engine. Um, this is essentially something that accepts a query from Studio. Um, our data engine runs entirely in the browser. So that means that all the aggregations, all the filtering, all the work done happens within the browser. Now, we’ve actually found that this handles so many use cases, way more than we actually expected. You know, millions of rows, you you can do a lot of work purely in the browser.

31:14 However, obviously some of you will have, you know, data that needs to be filtered first, data that needs to have be served up from the server side, same as with Grid. Currently, the way to do that is to implement your own data engine interface, but you would accept a query from Studio in the browser. You would hand that off through over, you know, um, an async request to your server, and you would work out the logic to implement the the answer to that query. We do browser side caching, we do some other features to avoid it, you know,

31:46 absolutely hammering your back end. Um, but right now that’s all. Coming in Q4, we are working on um, a lot more tools to help with server side data, um, and also a hybrid engine that will allow you to um, do both layers at the same time. So you could, you know, have your server side data run, and also allow your user to drag in an Excel spreadsheet, for example. The goal is to give you that flexibility, um, and give you the full

32:17 range of options while still giving you the performance that server side data that provides. >> Amazing. Couldn’t have asked for a better answer. Thank you, Josh. Um, so moving on, slightly related to around data configuration. So does AG Studio require the data to be configured, it, does it create those fields dynamically based on the data that is supplied to it? >> Yeah, so in general, we suggest that you define your fields, and we do a lot

32:48 There’s a lot more relative to grid with how a field operates that is very hard for us to infer. However, if you don’t provide that config, we do a best guess. You know, if we see a number field, we expect it to be a number. Um you know, we’ll configure it that way. We’ll, you know, name the columns for you, etc. But, it’s generally not too many options per field to just actually get it looking right. For example, if it’s a number, well, maybe it should be shown as a as a percentage. So, you know, they’re They’re relatively simple. They’re all configurations that just

33:19 make the dashboard experience itself a lot better. >> Perfect. Thank you. Um so, in this next question here, uh yeah, I It’s also related to data. So, can this dashboard connect to Power BI {slash} Fabric data models as a source? >> So, I actually think Adam and you might have had experience uh discussing this already. Um it’s a question of what they expose. Um any source can technically be

33:50 implemented, you know, if you do the query translation. Um Adam, do you have any extra uh bits to add to that? >> Yeah, so actually we’re working on the road map for next year, and the key part we want to improve is how this integrate with other data sources that might come in different shapes and form. So, currently we are working on something called um hybrid engine, so which means that it’s somewhere in between the custom engine and the uh default data engine uh from Studio. Um with part of that, we will hopefully uh hopefully

34:20 provide a bit of toolkit to, you know, adapt um our engine to the external engines. But, then again, the connection between application and your own engine that’s with the application. Uh we will have useful tool kits come up in the future that make that journey a bit smoother. >> Perfect. Thank you. Um I guess this is somewhat related and I’m going to slightly rephrase the question to try and get to the essence of it. So, this person has uh users or customers who

34:51 have their own data sets and Studio would sit on top of this. So, how much work do they need to do to be able to support those user-defined sources of information and be able to join those different sources up. So, of course that’s kind of like an application layer question, but perhaps we could shine some light on that. >> So, as far as the Studio uh reporting layer is concerned, it’s very easy for, you know, you to encode, create UI, define how those fields um

35:25 change, and build that all into your application layer itself. Um Studio itself doesn’t care. You know, it can you can configure that however you like. Um I do think we might have something on the road map, so I’ll hand back over to Adam uh for what we might be doing in this area ourselves. >> Sorry, my my internet is super laggy here. Can you repeat that question? >> Uh yes, so we’re looking at um how much work and effort it would take

35:57 for, you know, a user to a user how much development work it would take for to allow a user to configure their data sets. Um and my question to you was are we what’s the you know, what’s on the road map for this going forward? >> Oh yeah, so um in terms of configuring data set, um for the front for the front for the end user, people who are actually interacting with a UI, um so we have data modeling UI coming up. So, which means that it will allow the end users

36:27 to basically create joints from the UI on the front end instead of you know what James has showed you and configuring from the data configuration. As part of that we will streamline a lot of the experience around the area as well. So potentially some more data editing functionality and more visualized data structure and maybe perhaps more data source data tables. Um It’s more correctly. >> Thank you Adam. So watch this.

36:57 >> Again. >> Not sure if that’s just me, but looks like Adam’s dropped. I think we got most of what we needed there. We’ll see if he’s able to join back. So question here. Does it support related filters? I believe this probably means relative filters and I believe the answer is yes to that question. So we can probably move swiftly on. Um to what extent is theming being

37:28 supported and how is it done? Is it done through CSS or through a theming object? >> Yeah, so it’s an interesting question. Theming we generally do add through a theming object. That is because starting uses canvas API. So we need to know your theming options, you know, in JavaScript when we’re using the canvas. Obviously for anything that’s non-canvas we are using CSS to do theming. We provide a theming builder on our

38:00 website. You can go through and see what it is that you actually need to create quite quickly. And all of that is very adjustable. And again, if there’s any particular bits that you want access to, just let us know. >> Awesome. Thank you very much and welcome back Adam. Was there anything else you wanted to add there? Or >> Hopefully you can hear me now. So we actually also pushed out a Figma design system as part of version three. If you haven’t checked that out, go to our Figma community. So, what it means that as a designer, you can now configure

38:30 theming inside of Figma without having to, you know, actually build it to see what it looks like. It also generates a very helpful output you can directly import into AG Studio. So, what you build is actually what you have designed. Check it out. We also have a blog post as well. >> We do indeed. Good catch, Adam. Thank you very much. Um so, I think we’ve got one or two questions here about AI, Josh. So, maybe if you just want to spend a small amount of time kind of just covering all of the bases here and we can kind of point people in the right direction for more

39:01 information. But, the first question here is just around how can users Sorry, can users get an AI description of the dashboard or the widget as well as being able to actually build those dashboards. >> [snorts] >> Um but, yeah, like I said, I think it might be worthwhile just kind of giving a a little overview given your expertise. >> Yes. Um so, to answer the that question first, the answer is yes, it can get a view of the the widget or the whole page. Um since we’re not since

39:31 the Studio Agent framework plugs into your LLM, we try and avoid sending you images or pictures. And in fact, we can’t actually get a screenshot of the page. It’s just a limitation of the browser. Though, I use a tool called health checks. So, it will infer it will talk to the widget and the widget will tell it information about how well configured it is. Maybe it’s missing a title. Maybe, you know, it’s a bar chart, but it’s only got one very large bar. You know, something that’s been poorly configured. And it can feed that back to the user or it can fix it up

40:02 itself. Um so, to talk a little bit about what’s gone into the Studio Agent framework, the piece of work while both it is both simple and complicated. >> [snorts] >> AI is moving so quickly that it’s very hard for people to know what they want and what they need and everybody has a different setup. The goal of the Studio Agent Framework is to accept all of those. So, out of the box, you can point a studio that you just, you know, run

40:32 install and boot it up a quick demo app, you can point that directly at chat at GPT or Anthropic or whatever it is and you can have it running in about 5 minutes. You know, our demos will demonstrate exactly how to do that. The downside of that is obviously that the AI is uh you often have to put your AI key into the browser, so it’s not great for production. From there, there are many levels you can then go through. You can um simply create a proxy for OpenAI and keep roughly the same setup. You might

41:03 use AI SDK um which do does the sort of the client-side, server-side piece for you and manages all your conversation state. You might use an AGUI um ser- uh server which is a new protocol that’s emerging for how to talk between um the client and server. Or it might be that you’ve already got a full application that you’ve already built with its own UI, its own back end and you just want the tools. Um or in fact, the tools you could use for WebNCP which is a technology that’s

41:35 emerging at the moment. All of that is supported by the Studio Agent Framework. Once you’ve got up your So, you can take your application, your setup that you need and you will be able to fit in with what works. From there, we provide a set of agents, so essentially a set of prompts and a set of tools that work together to build a dashboard. So, you saw there, it would hand off to the page agent, the page agent would set the filters for the page um then it would come back and then the widget agent would, you know, configure

42:06 that widget and check that it was showing correctly, you know, maybe revisit it if some filter changed the values that we’re showing. Those are the um prompts and agents that we ship with Studio. However, you can, you know, start from scratch, you can customize those. They are from our uh testing, they’re pretty solid. However, if you have domain expertise, it’s going to be hard to for us to match that, right? If you know that this certain field should never be used in this certain way, or you prefer certain chart types over others,

42:38 that is all available for you to customize and control. And the final piece uh which I am currently in the process of getting a demo online for, um there is a small one in our docs, but a better one, is uh Web MCP. Um so, this is a new technology. It’s really, really powerful. It allows you to essentially hand off all the agent owners, all the agent work for the person who is using your the browser with your application. So, you know, if I’m logged into ChatGPT desktop, I can point it to the website.

43:10 It can go there, and it can see what tools it can create, you know, it can interrogate the data, it can um build dashboards, filter, you know, everything it can do that you saw in that demo, it can do with a Web MCP. Whole range of things. There’s a blog post about the what we’ve um released. Lots of information. We’re very happy if you’ve got questions or um you just want to email us, uh please let us know. >> Amazing. Thanks, Josh. Super comprehensive, and just from a personal

43:40 point of view, I’ve really enjoyed learning about the framework, the approach we’re taking, you know, like you said, it’s moving so quickly, and it’s such a novel thing. It’s been really interesting to learn about and see the approach that we’ve taken, which seems really cool. So, I’ve certainly enjoyed that. Um [snorts] few more questions here around server-side data and aggregation on the back end. So, hopefully those have already been answered by our earlier questions. Um we do have a couple of questions here around state? So, the first one is can an end user copy and

44:10 configure a second dashboard using Studio? The answer is yes, you know, it’s just another object in that page is array inside the state of AG Studio. And there your application can just append an empty object into that array and you’ll be able to build from a blank report, so to speak. And then similarly, the question here around can we save dashboards based on a logged in user? Of course you can. It would just be up to your application to determine who’s logged in and how you want to handle that persistence and restoring of that state into AG Studio.

44:41 So, all of it is essentially just hanging off the back of the state APIs in AG Studio. It’s up to your application, you know, how, when, and where that data is saved. Um so, I think well, that is a question here around data limitation. So, we did touch on this earlier, Josh, you did around how much data Studio can handle in the client side, but more specifically, are there row limitations to the number of points in a line chart, for example? >> Yes, so since we’re using um AG Charts

45:13 underneath, we have way like huge ceilings for the amount of data we can actually display. It tends to come down to a complex mathematical expression because it’s not just the number of rows cuz if you have multiple tables and complex aggregations across those tables, that’s the calculations that will take longer. Um we’re still experimenting with the best way to sort of expose those numbers. But in general, you know, anything you would normally deal with in a spreadsheet it’s going to be fine. When you’re looking at

45:44 millions and you know, gigabytes of data in a database, then it’s probably not. And it’s you know, finding your use case is going to be the bigger question. You know, we have some people who want, you know, just a thousand rows, but you know, 4,000 columns for some reason. It’s it’s all about your data setup. Um but, you know, under the hood, we can handle, you know, hundreds of thousands of data points within each widget. >> Awesome. Thank you. Um that does bring

46:14 us to, well, just 1 minute over our time, actually. And so, I think we will bring things to a close there. So, just before we say goodbye, uh of course, we do have the option to come and speak to us if you would like to learn a little bit more, pick any of our brains, see a demo, talk a little bit about pricing. Obviously, we’re more than happy to support you in any way that you need to, so you can get in touch with us through this QR code. Uh and don’t forget to check out Studio Launch Week as well for a whole bunch more content and information, uh should you be interested. Um but, that’s everything

46:45 from us. So, Josh, Yin, Adam, thank you all very much for your time today. Much appreciated. Hope you all got uh some value out of this session, and uh yeah, looking forward to seeing you on the next one. Thanks, everyone.