### Vizro-AI Setup for Examples

Source: https://github.com/mckinsey/vizro/blob/main/vizro-ai/docs/pages/user-guides/advanced-options.md

Sets up the necessary model and data for Vizro-AI examples. Assumes model setup is done separately. This code provides a typical setup.

```python
import plotly.express as px
from pydantic_ai.models.openai import OpenAIChatModel
from pydantic_ai.providers.openai import OpenAIProvider
from vizro_ai.agents import chart_agent

model = OpenAIChatModel(
    "gpt-5-nano-2025-08-07",
    provider=OpenAIProvider(api_key="your-api-key-here"),
)
df = px.data.gapminder()
result = chart_agent.run_sync(
    model=model,
    user_prompt="the trend of gdp over years in the US",
    deps=df,
)
```

--------------------------------

### Run Example Vizro App

Source: https://github.com/mckinsey/vizro/blob/main/vizro-e2e-flow/skills/dashboard-build/SKILL.md

Copy and run the example Vizro application to get started. This ensures fewer errors and provides a baseline for your dashboard.

```bash
uv run ./references/examples/example_app.py
```

--------------------------------

### Run Dashboard Setup and Execution

Source: https://github.com/mckinsey/vizro/blob/main/vizro-mcp/docs/pages/tutorials/vs-code-tutorial.md

Submit this prompt to automatically set up a virtual environment, install necessary packages (vizro, pandas), and run the app.py dashboard script.

```text
Use a single command to open a terminal and navigate to the lighting directory.
Activate a uv virtual environment, install vizro and pandas.
Run app.py.
```

--------------------------------

### Install Vizro-Experimental with Chat and Actions

Source: https://github.com/mckinsey/vizro/blob/main/vizro-experimental/README.md

Install the base vizro-experimental package to include the chat component and actions. This is the standard installation for core chat functionality.

```bash
pip install vizro-experimental              # Chat component + actions
```

--------------------------------

### Install vizro-dash-components

Source: https://github.com/mckinsey/vizro/blob/main/vizro-dash-components/README.md

Install the vizro-dash-components package using pip.

```bash
pip install vizro-dash-components
```

--------------------------------

### Run Example App with Hatch

Source: https://github.com/mckinsey/vizro/blob/main/vizro-dash-components/AGENTS.md

Launch the multi-page example application on port 8050. This is useful for testing components in a running application.

```bash
hatch run example
```

--------------------------------

### Install Vizro

Source: https://github.com/mckinsey/vizro/blob/main/vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md

Install the vizro library using pip. This is a prerequisite for using Vizro-AI features.

```bash
pip install vizro
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/tests/unit/vizro/integrations/kedro/kedro-0-19-9-project/README.md

Use this command to install all project dependencies declared in the requirements.txt file. Ensure you have pip installed.

```bash
pip install -r requirements.txt
```

--------------------------------

### Start Dashboard Design Phase

Source: https://github.com/mckinsey/vizro/blob/main/vizro-e2e-flow/README.md

Example prompt to initiate the dashboard design phase by describing data and desired tracking.

```markdown
> "I have a CSV called `monthly_sales_data.csv` in the `get-started-tutorial` folder, which contains monthly sales data with columns for region, product, revenue, and units sold. I want to build a dashboard to track sales performance."
```

--------------------------------

### Install Vizro E2E Flow Plugin

Source: https://github.com/mckinsey/vizro/blob/main/vizro-e2e-flow/README.md

Install the vizro-e2e-flow plugin from the marketplace.

```bash
/plugin install vizro-e2e-flow@vizro-marketplace
```

--------------------------------

### Install Vizro-AI using pip

Source: https://github.com/mckinsey/vizro/blob/main/vizro-ai/docs/pages/user-guides/install.md

Install the Vizro-AI package using pip. This command installs the core Vizro-AI library.

```bash
pip install vizro_ai
```

--------------------------------

### Configure Chat with Example Questions

Source: https://github.com/mckinsey/vizro/blob/main/vizro-experimental/docs/pages/chat/example-questions.md

This snippet demonstrates how to initialize a Vizro `Chat` component with a list of predefined example questions. These questions appear as clickable options in a menu next to the chat input.

```python
import vizro.models as vm
from vizro import Vizro
from vizro_experimental.chat import Chat, ChatAction, Message


class EchoAction(ChatAction):
    def generate_response(self, messages: list[Message]) -> str:
        return f"You said: {messages[-1]['content']}"


page = vm.Page(
    title="Chat with examples",
    components=[
        Chat(
            actions=EchoAction(),
            placeholder="Ask me anything or pick an example…",
            example_questions=[
                "What is the capital of France?",
                "Explain quantum computing in simple terms.",
                "Write a haiku about programming.",
                "What are the benefits of TypeScript over JavaScript?",
            ],
        )
    ],
)

Vizro().build(vm.Dashboard(pages=[page])).run()
```

--------------------------------

### Minimal Vizro App Setup

Source: https://github.com/mckinsey/vizro/blob/main/vizro-e2e-flow/skills/writing-vizro-yaml/references/yaml-reference.md

This Python script demonstrates the minimal setup for a Vizro application. It loads data, registers it with the data manager, loads a dashboard from a YAML file, and runs the Vizro app.

```python
from pathlib import Path
import pandas as pd
import yaml
from vizro import Vizro
from vizro.managers import data_manager
from vizro.models import Dashboard

raw = pd.read_csv("data.csv")
kpi_df = raw.groupby("region", as_index=False)["revenue"].sum()

data_manager["raw"] = raw
data_manager["kpi_data"] = kpi_df

dashboard = yaml.safe_load(Path("dashboard.yaml").read_text(encoding="utf-8"))
dashboard = Dashboard(**dashboard)

if __name__ == "__main__":
    Vizro().build(dashboard).run(port=8052)
```

--------------------------------

### Install Vizro with Kedro Support

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/user-guides/kedro-data-catalog.md

Install Vizro with Kedro dependencies. Ensure you have a compatible Kedro version installed.

```bash
pip install vizro[kedro]
```

--------------------------------

### Full Vizro Dashboard Example

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/tutorials/explore-components.md

A comprehensive example demonstrating the creation of a Vizro dashboard with multiple pages, components, and controls. Includes data loading, figure generation, and dashboard configuration.

```python
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.tables import dash_ag_grid
from vizro.models.types import capture
from vizro.figures import kpi_card
import vizro.actions as va

tips = px.data.tips()


@capture("graph")
def bar_mean(data_frame, x, y):
    df_agg = data_frame.groupby(x).agg({y: "mean"}).reset_index()
    fig = px.bar(df_agg, x=x, y=y, labels={"tip": "Average Tip ($)"})
    fig.update_traces(width=0.6)
    return fig


first_page = vm.Page(
    title="Data",
    components=[
        vm.AgGrid(
            figure=dash_ag_grid(tips),
            footer="""**Data Source:** Bryant, P. G. and Smith, M (1995)
            Practical Data Analysis: Case Studies in Business Statistics.
            Homewood, IL: Richard D. Irwin Publishing.""",
        ),
        vm.Button(text="Export Data", actions=va.export_data()),
    ],
)

second_page = vm.Page(
    title="Summary",
    layout=vm.Grid(grid=[[0, 1, -1, -1], [2, 2, 2, 2], [2, 2, 2, 2], [2, 2, 2, 2]]),
    components=[
        vm.Figure(
            figure=kpi_card(
                data_frame=tips,
                value_column="total_bill",
                agg_func="mean",
                value_format="${value:.2f}",
                title="Average Bill",
            )
        ),
        vm.Figure(
            figure=kpi_card(
                data_frame=tips,
                value_column="tip",
                agg_func="mean",
                value_format="${value:.2f}",
                title="Average Tips"
            )
        ),
        vm.Tabs(
            tabs=[
                vm.Container(
                    title="Total Bill ($)",
                    components=[
                        vm.Graph(figure=px.histogram(tips, x="total_bill")),
                    ],
                ),
                vm.Container(
                    title="Total Tips ($)",
                    components=[
                        vm.Graph(figure=px.histogram(tips, x="tip")),
                    ],
                ),
            ],
        )
    ],
    controls=[vm.Filter(column="day"), vm.Filter(column="time", selector=vm.Checklist()), vm.Filter(column="size")]
)

third_page = vm.Page(
    title="Analysis",
    layout=vm.Grid(grid=[[0, 1], [2, 2]]),
    components=[
        vm.Graph(
            id="bar",
            title="Where do we get more tips?",
            figure=bar_mean(tips, y="tip", x="day"),
        ),
        vm.Graph(
            id="violin",
            title="Is the average driven by a few outliers?",
            figure=px.violin(tips, y="tip", x="day", color="day", box=True),
        ),
        vm.Graph(
            id="heatmap",
            title="Which group size is more profitable?",
            figure=px.density_heatmap(tips, x="day", y="size", z="tip", histfunc="avg", text_auto=".2f"),
        ),
    ],
    controls=[
        vm.Parameter(
            targets=["violin.x", "violin.color", "heatmap.x", "bar.x"],
            selector=vm.RadioItems(
                options=["day", "time", "sex", "smoker", "size"], value="day", title="Change x-axis inside charts:"
            ),
        ),
    ],
)

dashboard = vm.Dashboard(pages=[first_page, second_page, third_page], title="Tips Analysis Dashboard")
Vizro().build(dashboard).run()
```

--------------------------------

### Install OpenAI SDK

Source: https://github.com/mckinsey/vizro/blob/main/vizro-experimental/docs/pages/chat/streaming-chat.md

Install the OpenAI Python SDK to enable communication with OpenAI models.

```bash
pip install openai
```

--------------------------------

### Install Vizro-Experimental with Agent Features

Source: https://github.com/mckinsey/vizro/blob/main/vizro-experimental/README.md

Install vizro-experimental with the 'agent' extra to enable the floating chat popup with auto-agent capabilities. Use this for enhanced agent interactions.

```bash
pip install "vizro-experimental[agent]"     # + floating chat popup with auto-agent
```

--------------------------------

### Run Example Dashboard with Hatch

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/explanation/contributing.md

Execute an example dashboard for development and testing. Dash dev tools are enabled for hot reloading, and logging is set to DEBUG.

```bash
hatch run example
```

```bash
hatch run example dev
```

--------------------------------

### Full Example: Cross-highlight from Graph

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/user-guides/graph-table-actions.md

This comprehensive example demonstrates setting up cross-highlighting from a graph to a bump chart. It includes data preparation, custom chart definition with conditional styling, and the full Vizro app structure.

```python
import vizro.plotly.express as px
import vizro.models as vm
import vizro.actions as va
from vizro.models.types import capture
from vizro import Vizro

selected_countries = [
    "Singapore",
    "Malaysia",
    "Thailand",
    "Indonesia",
    "Philippines",
    "Vietnam",
    "Cambodia",
    "Myanmar",
]

gapminder = px.data.gapminder().query("country.isin(@selected_countries)")

@capture("graph")
def bump_chart_with_highlight(data_frame, highlight_country=None):
    rank = data_frame.groupby("year")["lifeExp"].rank(method="dense", ascending=False)

    fig = px.line(data_frame, x="year", y=rank, color="country", markers=True)
    fig.update_yaxes(title="Rank (1 = Highest lifeExp)", autorange="reversed", dtick=1)
    fig.update_traces(opacity=0.3, line_width=2)

    if highlight_country is not None:
        fig.update_traces(selector={"name": highlight_country}, opacity=1, line_width=3)

    return fig


page = vm.Page(
    title="Cross-highlight from graph",
    components=[
        vm.Graph(
            figure=px.bar(
                gapminder.query("year == 2007"),
                y="country",
                x="lifeExp",
                labels={"lifeExp": "lifeExp in 2007"},
            ),

```

--------------------------------

### Install Jupyter Notebook

Source: https://github.com/mckinsey/vizro/blob/main/vizro-ai/docs/pages/tutorials/quickstart.md

Install the Jupyter package if you haven't already. This is necessary for running Vizro-AI in a notebook environment.

```bash
pip install jupyter
```

--------------------------------

### Install Vizro-AI

Source: https://github.com/mckinsey/vizro/blob/main/vizro-experimental/docs/pages/chat/combine-features.md

Install the vizro-ai package using pip. Ensure your OpenAI API key is set as an environment variable.

```bash
pip install vizro-ai
```

--------------------------------

### Install Vizro-AI with Vizro integration

Source: https://github.com/mckinsey/vizro/blob/main/vizro-ai/docs/pages/user-guides/install.md

Install Vizro-AI with the `vizro` optional dependency to use Vizro-AI charts in Vizro dashboards and apply the Vizro theme.

```bash
pip install "vizro_ai[vizro]"
```

--------------------------------

### Verify Vizro-AI installation and version

Source: https://github.com/mckinsey/vizro/blob/main/vizro-ai/docs/pages/user-guides/install.md

Confirm Vizro-AI installation by importing the library and printing its version. This should output a version number like 'x.y.z'.

```python
import vizro_ai

print(vizro_ai.__version__)
```

--------------------------------

### Gunicorn Start Command

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/user-guides/run-deploy.md

Use this command to start your Vizro application when deploying with Gunicorn. Adjust the number of workers as needed.

```bash
gunicorn app:app --workers 4
```

--------------------------------

### Install Vizro-AI with multiple LLM vendors

Source: https://github.com/mckinsey/vizro/blob/main/vizro-ai/docs/pages/user-guides/install.md

Install Vizro-AI with optional dependencies for multiple LLM providers like OpenAI and Anthropic. This allows using different models.

```bash
pip install "vizro_ai[openai,anthropic]"
```

--------------------------------

### Install Multiple Model Provider Dependencies

Source: https://github.com/mckinsey/vizro/blob/main/vizro-ai/docs/pages/user-guides/customize-vizro-ai.md

Install optional dependencies for common Pydantic AI model providers (Google, Anthropic, Mistral, OpenAI) to use with Vizro-AI.

```bash
pip install vizro_ai[google,anthropic,mistral,openai]
```

--------------------------------

### Get Overview of Vizro Models

Source: https://github.com/mckinsey/vizro/blob/main/vizro-e2e-flow/skills/dashboard-build/SKILL.md

Execute this script to get a list of all available Vizro models with brief descriptions. This helps in identifying the models you need to fetch schemas for.

```bash
uv run ./scripts/get_overview_vizro_models.py
```

--------------------------------

### Full example of a custom Rating component and app

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/user-guides/custom-components.md

This example demonstrates the complete implementation of a custom 'Rating' component, including Pydantic fields, the build method, type registration, and its usage within a Vizro dashboard.

```python
from typing import Literal

from dash import html
import dash_mantine_components as dmc
import vizro.models as vm
from vizro import Vizro


class Rating(vm.VizroBaseModel):
    type: Literal["rating"] = "rating"
    title: str # (1)!
    color: str = "#00b4ff" # (2)!

    def build(self):
        return html.Div( # (3)!
            [
                html.Legend(id=f"{self.id}_title", children=self.title, className="form-label"),
                dmc.Rating(id=self.id, color=self.color),
            ]
        )


vm.Page.add_type("components", Rating)  # (4)!

page = vm.Page(
    title="New rating component",
    layout=vm.Flex(),
    components=[
        Rating(title="Rate the last movie you watched"),  # (5)!
    ],
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()


```

--------------------------------

### Manual Dashboard Execution (Bash)

Source: https://github.com/mckinsey/vizro/blob/main/vizro-mcp/docs/pages/tutorials/vs-code-tutorial.md

Alternatively, run these bash commands manually in the terminal to set up a virtual environment, install dependencies, and start the Vizro dashboard.

```bash
cd lighting
uv venv training
source training/bin/activate
uv pip install vizro pandas
python app.py
```

--------------------------------

### Validate Plugin Installation

Source: https://github.com/mckinsey/vizro/blob/main/vizro-e2e-flow/README.md

Validate the installation by listing all installed plugins.

```bash
/plugins
```

--------------------------------

### Serve Documentation with Hatch

Source: https://github.com/mckinsey/vizro/blob/main/CLAUDE.md

Build and serve the project documentation locally using Hatch. This command typically enables hot-reloading for live updates during development.

```bash
hatch run docs:serve
```

--------------------------------

### Install JupyterLab for Kedro

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/tests/unit/vizro/integrations/kedro/kedro-0-19-9-project/README.md

Install JupyterLab to use its interface within your Kedro project. This command should be run after installing project dependencies.

```bash
pip install jupyterlab
```

--------------------------------

### Basic Flex Layout Example in YAML

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/user-guides/layouts.md

Shows the equivalent YAML configuration for a basic Flex layout. Note that a Python file is still required to manage data.

```yaml
# Still requires a .py to add data to the data manager and parse YAML configuration
# See yaml_version example
pages:
  - components:
      - figure:
          _target_: violin
          x: day
          y: tip
          color: day
          data_frame: tips
        type: graph
      - figure:
          _target_: violin
          x: day
          y: tip
          color: day
          data_frame: tips
        type: graph
      - figure:
          _target_: violin
          x: day
          y: tip
          color: day
          data_frame: tips
        type: graph
      - figure:
          _target_: violin
          x: day
          y: tip
          color: day
          data_frame: tips
        type: graph
      - figure:
          _target_: violin
          x: day
          y: tip
          color: day
          data_frame: tips
        type: graph
    layout:
      type: flex
    title: Flex - basic example
```

--------------------------------

### Verify Vizro Installation

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/user-guides/install.md

Run this Python code to check if Vizro is installed correctly and to display its version number. This requires Vizro to be installed in your environment.

```python
import vizro

print(vizro.__version__)
```

--------------------------------

### Create a Vizro Dashboard

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/CLAUDE.md

Use this example to build a dashboard with multiple pages, graphs, and interactive filters. Ensure Vizro models are derived from VizroBaseModel.

```python
import vizro.plotly.express as px
from vizro import Vizro
import vizro.models as vm

df = px.data.iris()

page = vm.Page(
    title="My first dashboard",
    components=[
        vm.Graph(figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")),
        vm.Graph(figure=px.histogram(df, x="sepal_width", color="species")),
    ],
    controls=[
        vm.Filter(column="species"),
    ],
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()
```

--------------------------------

### Install Vizro using uv

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/user-guides/install.md

Use this command to install Vizro with uv, a fast Python package installer. Ensure you are using Python 3.10 or later and a virtual environment.

```bash
uv pip install vizro
```

--------------------------------

### Complete Vizro Dashboard Setup

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/tutorials/explore-components.md

Initializes a Vizro dashboard with three pages: 'Data', 'Summary', and 'Analysis'. The 'Data' page includes an AgGrid table and an export button. The 'Summary' page features KPI cards and histograms within tabs, along with filters. The 'Analysis' page (partially shown) adds charts.

```python
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.tables import dash_ag_grid
from vizro.models.types import capture
from vizro.figures import kpi_card
import vizro.actions as va

tips = px.data.tips()

first_page = vm.Page(
    title="Data",
    components=[
        vm.AgGrid(
            figure=dash_ag_grid(tips),
            footer="""**Data Source:** Bryant, P. G. and Smith, M. (1995)
            Practical Data Analysis: Case Studies in Business Statistics.
            Homewood, IL: Richard D. Irwin Publishing.""",
        ),
        vm.Button(text="Export Data", actions=va.export_data()),
    ],
)

second_page = vm.Page(
    title="Summary",
    layout=vm.Grid(grid=[[0, 1, -1, -1], [2, 2, 2, 2], [2, 2, 2, 2], [2, 2, 2, 2]]),
    components=[
        vm.Figure(
            figure=kpi_card(
                data_frame=tips,
                value_column="total_bill",
                agg_func="mean",
                value_format="${value:.2f}",
                title="Average Bill",
            )
        ),
        vm.Figure(
            figure=kpi_card(
                data_frame=tips,
                value_column="tip",
                agg_func="mean",
                value_format="${value:.2f}",
                title="Average Tips",
            )
        ),
        vm.Tabs(
            tabs=[
                vm.Container(
                    title="Total Bill ($)",
                    components=[
                        vm.Graph(figure=px.histogram(tips, x="total_bill")),
                    ],
                ),
                vm.Container(
                    title="Total Tips ($)",
                    components=[
                        vm.Graph(figure=px.histogram(tips, x="tip")),
                    ],
                ),
            ],
        ),
    ],
    controls=[
        vm.Filter(column="day"),
        vm.Filter(column="time", selector=vm.Checklist()),
        vm.Filter(column="size"),
    ],
)

third_page = vm.Page(
    title="Analysis",
    components=[
        vm.Graph(
            title="Where do we get more tips?",
            figure=px.bar(tips, y="tip", x="day"),
        ),
        vm.Graph(
            title="Is the average driven by a few outliers?",
            figure=px.violin(tips, y="tip", x="day", color="day", box=True),
        ),
        vm.Graph(
            title="Which group size is more profitable?",
            figure=px.density_heatmap(tips, x="day", y="size", z="tip", histfunc="avg", text_auto=".2f"),
        ),
    ],
)

dashboard = vm.Dashboard(pages=[first_page, second_page, third_page])
```

--------------------------------

### Start Claude Code

Source: https://github.com/mckinsey/vizro/blob/main/vizro-e2e-flow/README.md

Open your terminal and start Claude Code to manage plugins.

```bash
claude
```

--------------------------------

### Import Kedro Data Catalog from Configuration File

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/user-guides/kedro-data-catalog.md

This example shows how to load a Kedro Data Catalog from a configuration file (`catalog.yaml`) using `OmegaConfigLoader` and then register its datasets with Vizro. It's suitable for scenarios where you manage your catalog configuration separately from a full Kedro project.

```python
from kedro.config import OmegaConfigLoader
from kedro.io import DataCatalog  # (1)!

from vizro.integrations import kedro as kedro_integration
from vizro.managers import data_manager

conf_loader = OmegaConfigLoader(conf_source=".")  # (2)!
catalog = DataCatalog.from_config(conf_loader["catalog"])  # (3)!

for dataset_name, dataset_loader in kedro_integration.datasets_from_catalog(catalog).items():
    data_manager[dataset_name] = dataset_loader
```

--------------------------------

### Install Anthropic SDK

Source: https://github.com/mckinsey/vizro/blob/main/vizro-experimental/docs/pages/chat/use-llm.md

Install the Anthropic Python SDK using pip. Ensure ANTHROPIC_API_KEY is set.

```bash
pip install anthropic
```

--------------------------------

### Create a Card Component with Vizro

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/components_compendium/index.html

Shows how to create a simple card component with header, footer, and text content. Requires importing Vizro and vizro.models.

```python
from vizro import Vizro
import vizro.models as vm

page = vm.Page(
    title="Vizro Card example",
    components=[
        vm.Card(
            text="""Lorem ipsum dolor sit amet,
                 consectetur adipiscing elit, sed do
                 eiusmod tempor incididunt ut labore
                 et dolore magna aliqua.""",
            header="Card header",
            footer="Card footer",
        )
    ]
)

Vizro().build(vm.Dashboard(pages=[page])).run()
```

--------------------------------

### Full Dashboard Implementation with Two Pages

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/tutorials/explore-components.md

This code demonstrates a complete Vizro dashboard setup including two pages: 'Data' and 'Summary'. The 'Data' page features an AgGrid table and an export button, while the 'Summary' page includes two histogram charts. It initializes Vizro and runs the dashboard.

```python
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.tables import dash_ag_grid
from vizro.models.types import capture
from vizro.figures import kpi_card
import vizro.actions as va

tips = px.data.tips()

first_page = vm.Page(
    title="Data",
    components=[
        vm.AgGrid(
            figure=dash_ag_grid(tips),
            footer="""**Data Source:** Bryant, P. G. and Smith, M. (1995).
            Practical Data Analysis: Case Studies in Business Statistics.
            Homewood, IL: Richard D. Irwin Publishing.""",
        ),
        vm.Button(text="Export Data", actions=va.export_data()),
    ],
)

second_page = vm.Page(
    title="Summary",
    components=[
        vm.Graph(figure=px.histogram(tips, x="total_bill")),
        vm.Graph(figure=px.histogram(tips, x="tip")),
    ],
)

dashboard = vm.Dashboard(pages=[first_page, second_page])
Vizro().build(dashboard).run()
```

--------------------------------

### Install OpenAI Dependency for Vizro-AI

Source: https://github.com/mckinsey/vizro/blob/main/vizro-ai/docs/pages/user-guides/customize-vizro-ai.md

Install the necessary optional dependency for using OpenAI models with Vizro-AI.

```bash
pip install "vizro_ai[openai]"
```

--------------------------------

### Sales Dashboard KPI Example

Source: https://github.com/mckinsey/vizro/blob/main/vizro-e2e-flow/skills/dashboard-design/references/information_architecture.md

Provides a concrete example of primary, supporting, and detail KPIs for a sales dashboard.

```text
Primary KPIs:
- Total Revenue (vs target)
- Conversion Rate
- Average Order Value
- Customer Acquisition Cost

Supporting:
- Revenue by Region
- Top Products
- Sales Pipeline

Detail (drill-down):
- Individual transactions
- Customer details
```

--------------------------------

### Configure Production-Ready Caches

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/user-guides/data.md

Demonstrates how to configure production-ready cache backends. Use FileSystemCache to store data in a specified directory or RedisCache to use a Redis server.

```python
# Store cached data in CACHE_DIR
data_manager.cache = Cache(config={"CACHE_TYPE": "FileSystemCache", "CACHE_DIR": "cache"})
```

```python
# Use Redis key-value store
data_manager.cache = Cache(config={"CACHE_TYPE": "RedisCache", "CACHE_REDIS_HOST": "localhost", "CACHE_REDIS_PORT": 6379})
```

--------------------------------

### Create a Vizro-AI project directory

Source: https://github.com/mckinsey/vizro/blob/main/vizro-ai/docs/pages/user-guides/install.md

Use these commands to create a new directory for your Vizro-AI project and navigate into it.

```bash
mkdir vizroai-project
cd vizroai-project
```

--------------------------------

### Install Pydantic AI A2A Extra

Source: https://github.com/mckinsey/vizro/blob/main/vizro-ai/docs/pages/user-guides/advanced-options.md

Install the necessary package for Pydantic AI's Agent2Agent (A2A) protocol.

```bash
pip install "pydantic-ai-slim[a2a]"
```

--------------------------------

### Vizro Card with Markdown Examples (YAML)

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/user-guides/card.md

Configures Vizro Card components using YAML, demonstrating Markdown features for headers, paragraphs, block quotes, lists, and emphasis. This requires a Python file for data management.

```yaml
# Still requires a .py to add data to the data manager and parse YAML configuration
# See yaml_version example
pages:
  - components:
      - text: |
          # Header level 1 <h1>

          ## Header level 2 <h2>

          ### Header level 3 <h3>

          #### Header level 4 <h4>
        type: card
      - text: |
          Commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit.

          Fugiat iusto fuga praesentium option, eaque rerum! Provident similique accusantium nemo autem.

          Obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid.

          Culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas.
        title: Paragraphs
        type: card
      - text: |
          > 
          > A block quote is a long quotation, indented to create a separate block of text.
          > 
        title: Block Quotes
        type: card
      - text: |
          * Item A
            * Sub Item 1
            * Sub Item 2
          * Item B
        title: Lists
        type: card
      - text: |
          This word will be *italic*

          This word will be **bold**

          This word will be _**bold and italic**_
        title: Emphasis
        type: card
```

--------------------------------

### Grid Layout - Basic Example

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/user-guides/layouts.md

Demonstrates a basic Grid layout arrangement where components are placed in a 2x2 grid structure. This is useful for simple, fixed arrangements.

```python
import vizro.models as vm
from vizro import Vizro

page = vm.Page(
    title="one_left_two_right",
    layout=vm.Grid(grid=[[0, 1],
                         [0, 2]]),
    components=[
        vm.Card(text="""# Component 0""", id="0"),
        vm.Card(text="""# Component 1""", id="1"),
        vm.Card(text="""# Component 2""", id="2"),
    ],
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()
```

```yaml
# Still requires a .py to add data to the data manager and parse YAML configuration
# See yaml_version example
pages:
  - components:
      - text: |
          # Component 0
        type: card
      - text: |
          # Component 1
        type: card
      - text: |
          # Component 2
        type: card
    layout:
      grid: [[0, 1], [0, 2]]
      type: grid
    title: one_left_two_right
```

--------------------------------

### Start Jupyter Notebook Server

Source: https://github.com/mckinsey/vizro/blob/main/vizro-ai/docs/pages/tutorials/quickstart.md

Start a Jupyter Notebook server from your terminal. This command will open a new tab in your browser.

```bash
jupyter notebook
```

--------------------------------

### Install Pydantic AI Web Extra

Source: https://github.com/mckinsey/vizro/blob/main/vizro-ai/docs/pages/user-guides/advanced-options.md

Install the necessary package for Pydantic AI's Web Chat UI functionality.

```bash
pip install 'pydantic-ai-slim[web]'
```

--------------------------------

### Basic Grid Configuration Example

Source: https://github.com/mckinsey/vizro/blob/main/vizro-core/docs/pages/user-guides/layouts.md

Illustrates a basic configuration for a grid layout using a list of lists to define rows and columns. Integers represent component indices.

```python
grid = [[0, 1], [0, 2]]
```

--------------------------------

### Install Specific Pydantic AI Provider (Bedrock)

Source: https://github.com/mckinsey/vizro/blob/main/vizro-ai/docs/pages/user-guides/customize-vizro-ai.md

Install a specific Pydantic AI provider, such as Bedrock, using the `pydantic-ai-slim` package.

```bash
pip install pydantic-ai-slim[bedrock]
```