How to run Vizro-AI dashboard

This guide offers insights into different ways of running VizroAI.dashboard to generate a Vizro dashboards from natural language prompts.

Note: API key

Make sure you have followed the LLM setup guide and that your API key is set up in a .env file in the same folder as your Notebook file (.ipynb).

Run Vizro-AI dashboard

Generated dashboard

PromptResult

import vizro.plotly.express as px
from vizro_ai import VizroAI
from vizro import Vizro

df = px.data.tips()
user_question = """
Create a one-page dashboard layout with the following components:

1. Card:
   - Position: Left of the page
   - Size: Takes up 1/4 of the total page width
   - Content: Display the text "This is Tips dataset"

1. Table:
   - Position: Right of the card
   - Size: Takes up the remaining 3/4 of the page width
   - Content: Display the Tips dataset
"""
vizro_ai = VizroAI(model="gpt-4o-mini")
dashboard = vizro_ai.dashboard([df], user_question)
Vizro().build(dashboard).run()

VizroAIDashboardPage1

This triggers the dashboard building process. Once Vizro-AI finishes the dashboard generation process, you can now launch the dashboard.

Retrieve the Python code of the dashboard

To illustrate the process, lets use the example above.

Like the VizroAI.plot method, in order to produce more comprehensive output we need to set return_elements=True. return_elements is a boolean (by default False) which determines the return type of VizroAI.dashboard.

If set to False it produces a Vizro dashboard object.
If set to True, it returns a class (a Pydantic model) containing both the dashboard object and the code string used to generate it.

View dashboard code

PromptResulting code

import vizro.plotly.express as px
from vizro_ai import VizroAI
from vizro import Vizro

df = px.data.tips()
user_question = """
Create a one-page dashboard layout with the following components:

1. Card:
   - Position: Left of the page
   - Size: Takes up 1/4 of the total page width
   - Content: Display the text "This is Tips dataset"

1. Table:
   - Position: Right of the card
   - Size: Takes up the remaining 3/4 of the page width
   - Content: Display the Tips dataset
"""
vizro_ai = VizroAI(model="gpt-4o-mini")
result = vizro_ai.dashboard([df], user_question, return_elements=True)

print(result.code)

######## Module Imports ##########
from vizro import Vizro
from vizro.managers import data_manager
from vizro.models.types import capture
import vizro.models as vm
from vizro.tables import dash_ag_grid

########## Data Imports ##########
#####!!! UNCOMMENT BELOW !!!######
# data_manager["restaurant_bills"] = ===> Fill in here <===

###### Callable definitions ######


########## Object code ###########
dashboard = vm.Dashboard(
   pages=[
       vm.Page(
           id="Tips Data Visualization",
           components=[
               vm.Card(
                   id="tips_card_tips_data_visualization",
                   type="card",
                   text="This is Tips dataset",
                   href="",
               ),
               vm.AgGrid(
                   id="tips_table_tips_data_visualization",
                   figure=dash_ag_grid(data_frame="restaurant_bills"),
               ),
           ],
           title="Tips Data Visualization",
           layout=vm.Layout(grid=[[0, 1, 1, 1]]),
           controls=[],
       )
   ],
   title="Tips Dataset Overview",
)

To use the above code, you will still need to add three simple steps:

Import your data.

data = pd.read_csv('data.csv')  # Replace 'data.csv' with your filename or path to your data

After importing your data, register it in the data manager by uncommenting the data manager instance and assigning the imported data to it. See the Vizro guide on connecting dashboard to data.
```
data_manager["restaurant_bills"] = data
```
Launch the dashboard by adding the code below at the end of the file:
```
Vizro().build(dashboard).run()
```

Detailed guidance is provided in dashboard generation tutorial.

Available Vizro components

The following list is a table of the Vizro components currently supported by Vizro-AI. This list is not exhaustive, and we are actively working on adding more features to Vizro-AI.

Feature type	Feature	Availability
Components	Graph	✔
	AG Grid	✔
	Card	✔
	Button	✖
	Tabs	✖
	Containers	✖
Controls	Filter	✔
	Parameter	✖
Navigation	Default navigation	✔
	Custom navigation	✖
Layout	Layout	✔
Dashboard header	Dashboard title	✔
	Logo	✖
Actions	Pre-defined actions	✖
	Filter interaction between charts	✖
	Custom actions	✖

If a feature you need for your dashboard isn't currently supported by Vizro-AI you can retrieve the dashboard code and add it by hand before running the dashboard.