vizro-mcp

{ "cells": [ { "cell_type": "code", "execution_count": null, "id": "53e857ce-22bc-49de-9adc-9a2e7c9829cf", "metadata": {}, "outputs": [], "source": [ "from dotenv import load_dotenv\n", "\n", "load_dotenv()" ] }, { "cell_type": "code", "execution_count": null, "id": "2a25acdd-20c3-4762-b97f-254de1586aeb", "metadata": {}, "outputs": [], "source": [ "import vizro.plotly.express as px\n", "from vizro import Vizro\n", "from vizro_ai import VizroAI\n", "\n", "# vizro_ai = VizroAI(model=\"gpt-4-turbo\")\n", "# vizro_ai = VizroAI(model=\"gpt-4o-mini\")\n", "# vizro_ai = VizroAI(model=\"gpt-4o\")\n", "vizro_ai = VizroAI()" ] }, { "cell_type": "code", "execution_count": null, "id": "b5e24f1b-e698-40e5-be00-c3a59c53ec65", "metadata": {}, "outputs": [], "source": [ "df1 = px.data.gapminder()" ] }, { "cell_type": "code", "execution_count": null, "id": "449da2ee-c754-420a-ba2e-c9b0ef62d934", "metadata": {}, "outputs": [], "source": [ "df2 = px.data.stocks()" ] }, { "cell_type": "code", "execution_count": null, "id": "94885b88-eb85-4060-bbcb-5fa07100892c", "metadata": {}, "outputs": [], "source": [ "df3 = px.data.tips()" ] }, { "cell_type": "markdown", "id": "ec46d4d1-d20b-4351-831d-d3d8ddc5cb70", "metadata": {}, "source": [ "# Example: Simple dashboard request" ] }, { "cell_type": "code", "execution_count": null, "id": "119ea726-e426-47a6-b5ce-e209ac32c9b9", "metadata": {}, "outputs": [], "source": [ "user_question_2_data = \"\"\"\n", "I need a page with 1 table.\n", "The table shows the tech companies stock data.\n", "\n", "I need a second page showing 2 cards and one chart.\n", "The first card says 'The Gapminder dataset provides historical data on countries' development indicators.'\n", "The chart is a scatter plot showing life expectancy vs. GDP per capita by country.\n", "Life expectancy on the y axis, GDP per capita on the x axis, and colored by continent.\n", "The second card says 'Data spans from 1952 to 2007 across various countries'\n", "The layout uses a grid of 3 columns and 2 rows.\n", "\n", "Row 1: The first row has three columns:\n", "The first column is occupied by the first card.\n", "The second and third columns are spanned by the chart.\n", "\n", "Row 2: The second row mirrors the layout of the first row with respect to chart,\n", "but the first column is occupied by the second card.\n", "\n", "Add a filter to filter the scatter plot by continent.\n", "Add a second filter to filter the chart by year.\n", "\"\"\"" ] }, { "cell_type": "code", "execution_count": null, "id": "eb83882c-148a-460c-983a-56554ef5fc3b", "metadata": {}, "outputs": [], "source": [ "result = vizro_ai.dashboard([df1, df2], user_question_2_data, return_elements=True)" ] }, { "cell_type": "code", "execution_count": null, "id": "fa592f43-5966-4832-a4d7-4e0bb5593fcb", "metadata": { "scrolled": true }, "outputs": [], "source": [ "print(result.code) # noqa: T201" ] }, { "cell_type": "code", "execution_count": null, "id": "7ad22c55-22a6-4c3e-902d-54adba1084f8", "metadata": {}, "outputs": [], "source": [ "Vizro().build(result.dashboard).run()" ] }, { "cell_type": "markdown", "id": "747964b9-fd05-4c5a-a73a-79dae82320b3", "metadata": {}, "source": [ "# Example: 4-page dashboard request\n", "\n", "In most cases, using more advanced models produces more stable and accurate output." ] }, { "cell_type": "code", "execution_count": null, "id": "46f13f78-665b-4729-a415-8d4ff5b8e6f1", "metadata": {}, "outputs": [], "source": [ "user_question_3_data = \"\"\"\n", "<Page 1>\n", "I need a page with 1 table and 1 line chart.\n", "The chart shows the stock price trends of GOOG and AAPL.\n", "The table shows the stock prices data details.\n", "\n", "<Page 2>\n", "I need a second page showing 1 card and 1 chart.\n", "The card says 'The Gapminder dataset provides historical data on countries' development indicators.'\n", "The chart is a scatter plot showing GDP per capita vs. life expectancy.\n", "GDP per capita on the x axis, life expectancy on the y axis, and colored by continent.\n", "Layout the card on the left and the chart on the right. The card takes 1/3 of the whole space on the left.\n", "The chart takes 2/3 of the whole space and is on the right.\n", "Add a filter to filter the scatter plot by continent.\n", "Add a second filter to filter the chart by year.\n", "\n", "<Page 3>\n", "This page displays the tips dataset. use two different charts to show data\n", "distributions. one chart should be a bar chart and the other should be a scatter plot.\n", "first chart is on the left and the second chart is on the right.\n", "Add a filter to filter data in the scatter plot by smoker.\n", "\n", "<Page 4>\n", "Create 3 cards on this page:\n", "1. The first card on top says \"This page combines data from various sources\n", " including tips, stock prices, and global indicators.\"\n", "2. The second card says \"Insights from Gapminder dataset.\"\n", "3. The third card says \"Stock price trends over time.\"\n", "\n", "Layout these 3 cards in this way:\n", "create a grid with 3 columns and 2 rows.\n", "Row 1: The first row has three columns:\n", "- The first column is empty.\n", "- The second and third columns span the area for card 1.\n", "\n", "Row 2: The second row also has three columns:\n", "- The first column is empty.\n", "- The second column is occupied by the area for card 2.\n", "- The third column is occupied by the area for card 3.\n", "\"\"\"" ] }, { "cell_type": "code", "execution_count": null, "id": "867f8e68-ab78-401c-a6df-c1a0101fb131", "metadata": {}, "outputs": [], "source": [ "Vizro._reset()\n", "result = vizro_ai.dashboard([df1, df2, df3], user_question_3_data, return_elements=True)" ] }, { "cell_type": "code", "execution_count": null, "id": "85fc6189-a2ba-435d-b499-79855ffc1833", "metadata": { "scrolled": true }, "outputs": [], "source": [ "print(result.code) # noqa: T201" ] }, { "cell_type": "code", "execution_count": null, "id": "a9125393-9971-4d3d-86cf-89f574eaca0f", "metadata": {}, "outputs": [], "source": [ "Vizro().build(result.dashboard).run()" ] }, { "cell_type": "markdown", "id": "bbf5c920-0432-4415-996f-1acb9d7b6b8a", "metadata": {}, "source": [ "# Example: Request with unsupported features\n", "\n", "You may encounter warnings in the logs indicating that some features requested are currently unsupported by Vizro-AI. Additionally, validation errors might appear in the logs if the specifications are not supported." ] }, { "cell_type": "code", "execution_count": null, "id": "b6f2d50d-5044-49bd-8db9-9c611ac8ed9c", "metadata": {}, "outputs": [], "source": [ "user_question_2_data = \"\"\"\n", "<Page 1>\n", "I need a page showing 2 cards, one chart, and 1 button.\n", "The first card says 'The Tips dataset provides insights into customer tipping behavior.'\n", "The chart is a bar chart showing the total bill amount by day.\n", "Day on the x axis, total bill amount on the y axis, and colored by time of day.\n", "The second card says 'Data collected from various days and times.'\n", "Layout the two cards on the left and the chart on the right. Two cards take 1/3 of the whole space on the left in total.\n", "The first card is on top of the second card vertically.\n", "The chart takes 2/3 of the whole space and is on the right.\n", "The button would trigger a download action to download the Tips dataset.\n", "Add a filter to filter the bar chart by `size`.\n", "Make another tab on this page,\n", "In this tab, create a card saying \"Tipping patterns and trends.\"\n", "Group all the above content into the first NavLink.\n", "\n", "<Second NavLink>\n", "Create two pages:\n", "1. The first page has a card saying \"Analyzing global development trends.\"\n", "2. The second page has a scatter plot showing GDP per capita vs. life expectancy.\n", "GDP per capita on the x axis, life expectancy on the y axis, and colored by continent.\n", "Add a parameter to control the title of the scatter plot,\n", "with title options \"Economic Growth vs. Health\" and \"Development Indicators.\"\n", "Also create a button and a spinning circle on the right-hand side of the page.\n", "\n", "<Third NavLink>\n", "Create one page:\n", "1. The first page has a card saying \"Stock price trends over time.\"\n", "Create a button and a spinning circle on the right-hand side of the page.\n", "\n", "For hosting the dashboard on AWS, which service should I use?\n", "\"\"\"" ] }, { "cell_type": "code", "execution_count": null, "id": "99de2df2-b239-4a6d-b2cf-7131f2ba1559", "metadata": {}, "outputs": [], "source": [ "Vizro._reset()\n", "dashboard = vizro_ai.dashboard([df3, df2, df1], user_question_2_data)" ] }, { "cell_type": "code", "execution_count": null, "id": "84f2683c-cf7f-4547-82b3-a702a98cc7bd", "metadata": {}, "outputs": [], "source": [ "Vizro().build(dashboard).run()" ] } ], "metadata": { "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.12.4" } }, "nbformat": 4, "nbformat_minor": 5 }