vizro-mcp

{ "cells": [ { "cell_type": "markdown", "metadata": { "id": "npjw_Cstpr2I" }, "source": [ "[](https://colab.research.google.com/github/mckinsey/vizro/blob/main/vizro-ai/examples/dashboard_by_vizro_ai.ipynb)" ] }, { "cell_type": "code", "execution_count": 1, "metadata": { "cellView": "form", "colab": { "base_uri": "https://localhost:8080/", "height": 352 }, "id": "hcjXUEPjgbaC", "outputId": "740c492f-7ff5-41bd-8357-d720657a7ef9" }, "outputs": [ { "data": { "text/html": [ "<style>\n", " .cell-bg {\n", " background-color: #E6F3FF;\n", " padding: 10px;\n", " width: 100%;\n", " }\n", " .disclaimer {\n", " background-color: #ffffff;\n", " border: 1px solid #ddd;\n", " border-radius: 5px;\n", " padding: 15px;\n", " margin: 10px 0;\n", " font-family: Arial, sans-serif;\n", " color: #000000;\n", " }\n", " .disclaimer h3 {\n", " margin-top: 0;\n", " color: #000000; /* Explicitly set title color for light mode */\n", " }\n", " .disclaimer ol {\n", " padding-left: 20px;\n", " }\n", " .disclaimer li {\n", " margin-bottom: 10px;\n", " }\n", " .disclaimer p {\n", " font-weight: bold;\n", " margin-bottom: 0;\n", " }\n", " \n", " /* Dark mode styles */\n", " @media (prefers-color-scheme: dark) {\n", " .cell-bg {\n", " background-color: #1a1a1a;\n", " }\n", " .disclaimer {\n", " background-color: #2a2a2a;\n", " border-color: #444;\n", " color: #ffffff;\n", " }\n", " .disclaimer h3 {\n", " color: #ffffff; /* Explicitly set title color for dark mode */\n", " }\n", " }\n", "</style>\n", "\n", "<div class=\"cell-bg\">\n", " <div class=\"disclaimer\">\n", " <h3>Disclaimer: Using Google Colab</h3>\n", " <p>Please read carefully before proceeding:</p>\n", " <ol>\n", " <li><strong>Google's Servers:</strong> This notebook runs on Google's servers. Your code and data will be processed and temporarily stored on Google's infrastructure.</li>\n", " <li><strong>Data Privacy:</strong> Be mindful of the data you upload or process here. Avoid using sensitive, confidential, or personal information that shouldn't be shared with third parties.</li>\n", " <li><strong>Security Considerations:</strong> Colab is a shared environment. While Google implements security measures, treat it as a public environment and act accordingly.</li>\n", " <li><strong>Terms of Service:</strong> Ensure your usage complies with Google Colab's Terms of Service and Google Cloud's Terms of Service.</li>\n", " <li><strong>Data Persistence:</strong> Data in Colab notebooks is not permanently stored. Save important data and results to your local machine or a secure cloud storage.</li>\n", " <li><strong>Resource Limitations:</strong> Colab provides free resources, but these are subject to availability and usage limits.</li>\n", " </ol>\n", " <p>By using this Colab notebook, you acknowledge that you understand and accept these conditions. Please use Colab at your own discretion and responsibility.</p>\n", " </div>\n", "</div>\n" ], "text/plain": [ "<IPython.core.display.HTML object>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "# @title\n", "%%html\n", "<style>\n", " .cell-bg {\n", " background-color: #E6F3FF;\n", " padding: 10px;\n", " width: 100%;\n", " }\n", " .disclaimer {\n", " background-color: #ffffff;\n", " border: 1px solid #ddd;\n", " border-radius: 5px;\n", " padding: 15px;\n", " margin: 10px 0;\n", " font-family: Arial, sans-serif;\n", " color: #000000;\n", " }\n", " .disclaimer h3 {\n", " margin-top: 0;\n", " color: #000000;\n", " }\n", " .disclaimer ol {\n", " padding-left: 20px;\n", " }\n", " .disclaimer li {\n", " margin-bottom: 10px;\n", " }\n", " .disclaimer p {\n", " font-weight: bold;\n", " margin-bottom: 0;\n", " }\n", "\n", " /* Dark mode styles */\n", " @media (prefers-color-scheme: dark) {\n", " .cell-bg {\n", " background-color: #1a1a1a;\n", " }\n", " .disclaimer {\n", " background-color: #2a2a2a;\n", " border-color: #444;\n", " color: #ffffff;\n", " }\n", " .disclaimer h3 {\n", " color: #ffffff;\n", " }\n", " }\n", "</style>\n", "\n", "<div class=\"cell-bg\">\n", " <div class=\"disclaimer\">\n", " <h3>Disclaimer: Using Google Colab</h3>\n", " <p>Please read carefully before proceeding:</p>\n", " <ol>\n", " <li><strong>Google's Servers:</strong> This notebook runs on Google's servers. Your code and data will be processed and temporarily stored on Google's infrastructure.</li>\n", " <li><strong>Data Privacy:</strong> Be mindful of the data you upload or process here. Avoid using sensitive, confidential, or personal information that shouldn't be shared with third parties.</li>\n", " <li><strong>Security Considerations:</strong> Colab is a shared environment. While Google implements security measures, treat it as a public environment and act accordingly.</li>\n", " <li><strong>Terms of Service:</strong> Ensure your usage complies with Google Colab's Terms of Service and Google Cloud's Terms of Service.</li>\n", " <li><strong>Data Persistence:</strong> Data in Colab notebooks is not permanently stored. Save important data and results to your local machine or a secure cloud storage.</li>\n", " <li><strong>Resource Limitations:</strong> Colab provides free resources, but these are subject to availability and usage limits.</li>\n", " </ol>\n", " <p>By using this Colab notebook, you acknowledge that you understand and accept these conditions. Please use Colab at your own discretion and responsibility.</p>\n", " </div>\n", "</div>" ] }, { "cell_type": "markdown", "metadata": { "id": "5_JOq22biP6_" }, "source": [ "#### Setup the LLM API key" ] }, { "cell_type": "markdown", "metadata": { "id": "rqXeuFYPiRiH" }, "source": [ "Secure your LLM API key as environment variable\n", "- click the `Secrets` button on the left\n", "- click `Add new secret`\n", "- insert \"OPENAI_API_KEY\" under `Name`\n", "- insert the API key value under `Value` (use raw string without quote. e.g., `xyz` instead of `\"xyz\"`)\n", "- [optional] you might also need to insert \"OPENAI_BASE_URL\" and its value, based on the requirements from your API key provider (use raw string without quote. e.g., `xyz` instead of `\"xyz\"`)\n", "- click the `Notebook access` toggle to make it available for the notebook run" ] }, { "cell_type": "markdown", "metadata": { "id": "uUwB4eqgiBia" }, "source": [ "# Use Vizro-AI to generate Vizro dashboard\n", "# **At the top of this notebook, click `Runtime` -> `Run all`**" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "cellView": "form", "id": "-CvRRGmjiW8k" }, "outputs": [], "source": [ "import os\n", "\n", "from google.colab import userdata\n", "\n", "# @title ## Setup\n", "# @markdown #### 1. Install Vizro-AI\n", "print(\"Installing dependencies\")\n", "%pip install uv -q -q -q\n", "# %pip uninstall ipykernel -y -q -q -q\n", "# %pip install -U ipykernel -q -q -q\n", "!uv pip install --system vizro-ai --quiet\n", "print(\"✅ Installation finished\")\n", "\n", "# @markdown #### 2. Setup LLM API access\n", "\n", "\n", "def _safe_get_userdata(key):\n", " try:\n", " return userdata.get(key)\n", " except Exception as e:\n", " print(f\"Warning: Unable to access {key}. Reason: {e!s}\")\n", " return None\n", "\n", "\n", "# Always try to set the OPENAI_API_KEY\n", "api_key = _safe_get_userdata(\"OPENAI_API_KEY\")\n", "if api_key:\n", " os.environ[\"OPENAI_API_KEY\"] = api_key\n", "else:\n", " print(\"❌ OPENAI_API_KEY not set. Click `Secrets` icon on the left to setup.\")\n", "\n", "# Conditionally set OPENAI_BASE_URL if provided and accessible\n", "openai_base_url = _safe_get_userdata(\"OPENAI_BASE_URL\")\n", "if openai_base_url:\n", " os.environ[\"OPENAI_BASE_URL\"] = openai_base_url\n", "else:\n", " print(\"User defined OPENAI_BASE_URL not set. Using default URL.\")\n", "\n", "print(\"\\nCurrent environment variables:\")\n", "print(f\"OPENAI_API_KEY: {'✅ Set' if 'OPENAI_API_KEY' in os.environ else 'Not set'}\")\n", "print(f\"OPENAI_BASE_URL: {'✅ Set' if 'OPENAI_BASE_URL' in os.environ else 'Not set by user, use default'}\")" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "cellView": "form", "id": "ZghZCOMQjAvR" }, "outputs": [], "source": [ "# @markdown #### Data upload (multiple dataframes accepted)\n", "# @markdown - click `Choose Files` if you'd like to upload and use your own data\n", "# @markdown - or click `Cancel upload` and use the default example data (plotly gapminder) for initial exploration\n", "\n", "import pandas as pd\n", "from google.colab import files\n", "from plotly.express.data import gapminder\n", "\n", "uploaded = files.upload()\n", "\n", "dfs = []\n", "\n", "if not uploaded:\n", " print(\"No files uploaded. Use the plotly gapminder dataset as an example.\")\n", " df = gapminder()\n", " dfs.append(df)\n", "else:\n", " for fn in uploaded.keys():\n", " print(f'User uploaded file \"{fn}\"')\n", "\n", " df_uploaded = pd.read_csv(fn)\n", " dfs.append(df_uploaded)" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "cellView": "form", "id": "60H83HxUyc54" }, "outputs": [], "source": [ "from IPython.display import HTML, display\n", "from ipywidgets import Layout, Textarea\n", "\n", "# @title ## Input the LLM model choice and user prompt { run: \"auto\" }\n", "\n", "# @markdown #### 1. Choose the LLM model\n", "\n", "LLM = \"gpt-4o\" # @param [\"gpt-4o\", \"gpt-4-turbo\", \"gpt-4o-mini\"]\n", "\n", "\n", "# @markdown ---\n", "# @markdown #### 2. Input your dashboard question\n", "# @markdown e.g. \"Create a gdp dashboard with 1 page. use a bar chart to show gdp per continent and filter data by country\"\n", "\n", "default_user_input = \"\"\"\n", "Create a 2 page dashboard.\n", "\n", "<page 1> 1 bar chart, 1 filter\n", "use a bar chart to show the average GDP per continent. Add a filter to filter the bar chart by country.\n", "\n", "<page 2> 1 card, 1 table\n", "create a card with text \"This is the Gapminder dataset\"\n", "use a table to show the data details, showing features like GDP and life expectancy.\n", "\n", "page 2 layout: Image the page consists 6 grid units horizontally.\n", "The card takes 1 unit of the page space on the left and the table takes 5 units on the right.\n", "\"\"\"\n", "user_input = Textarea(\n", " value=default_user_input,\n", " placeholder=\"Input your requirements for the dashboard\",\n", " description=\"user_input:\",\n", " disabled=False,\n", " rows=10, # This sets the number of visible lines\n", " layout=Layout(width=\"auto\", height=\"auto\"), # This makes the width automatic\n", ")\n", "display(user_input)\n", "display(HTML(\"<br>\"))\n", "\n", "# @markdown ---\n", "\n", "\n", "print(f\"Selected LLM: {LLM}\")\n", "# print(f\"User input: {user_input.value}\")" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "cellView": "form", "id": "rEl8JajAxmMq" }, "outputs": [], "source": [ "# @title ## Build the dashboard using Vizro-AI\n", "\n", "import ipywidgets as widgets\n", "from IPython.display import display\n", "\n", "\n", "def _run_code(button):\n", " print(\"Running VizroAI...\")\n", " import dash._callback_context\n", " from vizro import Vizro\n", " from vizro_ai import VizroAI\n", "\n", " dash._callback_context.context_value.set({})\n", " Vizro._reset()\n", "\n", " vizro_ai = VizroAI(model=LLM)\n", " res = vizro_ai.dashboard(dfs, user_input.value, return_elements=True)\n", "\n", " vizro_dashboard = Vizro().build(res.dashboard)\n", "\n", " button1.result = vizro_dashboard\n", " print(\"✅ Dashboard generated. Check its code and live view below\")\n", " print(res.code)\n", "\n", "\n", "button1 = widgets.Button(\n", " description=\"Build Dashboard!\",\n", " button_style=\"info\",\n", " tooltip=\"Click to build the dashboard using Vizro-AI\",\n", ")\n", "display(button1)\n", "\n", "button1.on_click(_run_code)" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "cellView": "form", "id": "as5y9yI8x-s5" }, "outputs": [], "source": [ "# @title ## Render dashboard\n", "\n", "import ipywidgets as widgets\n", "from IPython.display import display\n", "\n", "\n", "def _run_dashboard(button):\n", " button1.result.run()\n", "\n", "\n", "button2 = widgets.Button(\n", " description=\"Run Dashboard!\",\n", " button_style=\"info\",\n", " tooltip=\"Click to render the Vizro dashboard\",\n", ")\n", "display(button2)\n", "\n", "button2.on_click(_run_dashboard)" ] } ], "metadata": { "colab": { "provenance": [], "toc_visible": true }, "kernelspec": { "display_name": "Python 3", "name": "python3" }, "language_info": { "name": "python" } }, "nbformat": 4, "nbformat_minor": 0 }