vizro-mcp

{ "cells": [ { "cell_type": "markdown", "id": "b72a43eb-2991-45da-844a-a88c1b9b6f1e", "metadata": { "id": "b72a43eb-2991-45da-844a-a88c1b9b6f1e" }, "source": [ "[](https://colab.research.google.com/github/mckinsey/vizro/blob/main/vizro-ai/examples/chart_by_vizro_ai.ipynb)" ] }, { "cell_type": "code", "execution_count": 1, "id": "I6KPM-CnY_ag", "metadata": { "cellView": "form", "colab": { "base_uri": "https://localhost:8080/", "height": 352 }, "id": "I6KPM-CnY_ag", "outputId": "38d703c3-1a42-4619-cf6a-2ba35714c02d" }, "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; /* 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>" ] }, { "cell_type": "markdown", "id": "6Och8D7u0ovX", "metadata": { "id": "6Och8D7u0ovX" }, "source": [ "#### Setup the LLM API key" ] }, { "cell_type": "markdown", "id": "FlndiROX0bmX", "metadata": { "id": "FlndiROX0bmX" }, "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\n" ] }, { "cell_type": "markdown", "id": "fbc65f78", "metadata": { "id": "fbc65f78" }, "source": [ "# Use Vizro-AI to generate Vizro charts\n", "# **At the top of this notebook, click `Runtime` -> `Run all`**" ] }, { "cell_type": "code", "execution_count": null, "id": "rdnxbyKfNZkT", "metadata": { "cellView": "form", "id": "rdnxbyKfNZkT" }, "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", "!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, "id": "c6ac1b7d-5830-495b-94be-1ad7bf3022d3", "metadata": { "cellView": "form", "id": "c6ac1b7d-5830-495b-94be-1ad7bf3022d3" }, "outputs": [], "source": [ "# @title ## Data upload\n", "\n", "# @markdown #### Upload your CSV data (only 1 dataframe accepted per chart)\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 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", "if not uploaded:\n", " print(\"No files uploaded. Use the plotly gapminder dataset as an example.\")\n", " df = gapminder()\n", "else:\n", " for fn in uploaded.keys():\n", " print(f'User uploaded file \"{fn}\"')\n", "\n", " df = pd.read_csv(fn)\n", "print(f\"Dataframe used for plotting: \\n{df.head()}\")" ] }, { "cell_type": "code", "execution_count": null, "id": "_yeVqs9nUgYH", "metadata": { "cellView": "form", "id": "_yeVqs9nUgYH" }, "outputs": [], "source": [ "# @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", "print(f\"Selected LLM: {LLM}\")\n", "\n", "# @markdown ---\n", "# @markdown #### 2. Input your chart question\n", "\n", "# @markdown #### Instructions:\n", "user_input = \"Describe the composition of gdp in continent.\" # @param {type:\"string\", placeholder:\"Enter the requirements for the chart\"}\n", "\n", "print(f\"User input: {user_input}\")" ] }, { "cell_type": "code", "execution_count": null, "id": "O-LSNhSA7j3r", "metadata": { "cellView": "form", "id": "O-LSNhSA7j3r" }, "outputs": [], "source": [ "from vizro_ai import VizroAI\n", "\n", "# @title ## Create the chart using Vizro-AI\n", "# @markdown Note: to iterate with different data, model, and prompt, please edit in cells above and click the corresponding `Run cell` buttons.\n", "\n", "print(\"Running VizroAI...\")\n", "print(f\"Selected LLM: {LLM}\")\n", "print(f\"User input: {user_input}\")\n", "\n", "vizro_ai = VizroAI()\n", "result = vizro_ai.plot(df, user_input, return_elements=True)\n", "\n", "print(\"✅ VizroAI finished\")\n", "print(\"\\n-----\\nCode:\\n-----\\n\")\n", "print(result.code)\n", "print(\"\\n-------\\nFigure:\\n-------\\n\")\n", "result.get_fig_object(df).show()" ] } ], "metadata": { "colab": { "provenance": [] }, "kernelspec": { "display_name": "Python 3 (ipykernel)", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.9.7" } }, "nbformat": 4, "nbformat_minor": 5 }