Merge pull request #91 from MarcSkovMadsen/enhancement/copilot3

copilot3

Author: MarcSkovMadsen

docs/assets/images/holoviz-mcp-vscode-resource-added.png

@@ -1,14 +1,13 @@
 
-# Using GitHub Copilot with HoloViz MCP
+# Using HoloViz MCP with Github Copilot
 
-
-In this tutorial, you'll learn how to use the HoloViz MCP server with GitHub Copilot in VS Code to build an interactive stock dashboard. By the end, you'll have a working Panel application and understand how to leverage AI assistance for HoloViz development.
+In this tutorial, you'll learn how to use the HoloViz MCP server with GitHub Copilot in VS Code.
 
 !!! tip "What you'll learn"
-    - How to integrate HoloViz MCP with GitHub Copilot
-    - How to use MCP resources to enhance Copilot's responses
-    - How to work with custom Copilot agents for HoloViz
-    - How to build a data visualization dashboard with AI assistance
+    - How to use HoloViz MCP resources to enhance Copilot's responses
+    - How to add custom Copilot agents optimized for HoloViz MCP
+    - How to create a plot using Copilot + HoloViz MCP
+    - How to build a dashboard using Copilot + HoloViz MCP
 
 !!! note "Prerequisites"
     - VS Code installed
@@ -17,20 +16,33 @@ In this tutorial, you'll learn how to use the HoloViz MCP server with GitHub Cop
 
 ---
 
+## Starting the MCP Server
 
-## Using HoloViz Resources
+Start the Holoviz MCP Server:
 
+1. In VS Code, open the Command Palette (`Ctrl+Shift+P` or `Cmd+Shift+P`)
+2. Type "MCP: List Servers" and press Enter
+3. Choose the "holoviz" server
+4. Select "Start Server"
 
-MCP resources contain curated knowledge that enhances Copilot's understanding of specific frameworks. Let's load the hvPlot best practice skills and use them to create a basic data visualization.
+Repeat 1.+2. and verify that the `holoviz` mcp server is now running.
 
+![HoloViz MCP Running](../assets/images/holoviz-mcp-vscode-running.png)
+
+## Using HoloViz Resources
+
+MCP resources contain curated knowledge that enhances Copilot's understanding of specific frameworks. Let's load the hvPlot best practice skills and use them to create a basic data visualization.
 
 1. In the Copilot Chat Interface, click "Add Context" (`CTRL + '`)
 2. Select "MCP Resources".
 3. You'll see a list of available resources. Select **`holoviz_hvplot`**.
    ![HoloViz MCP Resources](../assets/images/holoviz-mcp-resources.png)
-4. Notice in the chat interface that the resource is now added to the context (you'll see a small `hvplot.md` indicator).
-   **What's happening:** You've just loaded hvPlot's best practices and conventions into Copilot's context. This means Copilot now "knows" how to write better hvPlot code following recommended patterns.
-5. Ask it to "Please create a basic hvplot visualization in script.py file."
+4. Notice in the chat interface that the resource is now added to the context.
+   ![HvPlot Resource Added](../assets/images/holoviz-mcp-vscode-resource-added.png)
+5. Ask the agent:
+   ```bash
+   Please create a basic hvplot visualization in a script.py file.
+   ```
 
 !!! tip
     You can add multiple resources to the context. Try browsing and adding `holoviz_panel` as well to get Panel-specific guidance.
@@ -49,12 +61,13 @@ MCP resources contain curated knowledge that enhances Copilot's understanding of
 1. Open a terminal in VS Code (`` Ctrl+` `` or `Terminal > New Terminal`).
 2. Run the following command:
    ```bash
-   holoviz-mcp update copilot
+   uvx holoviz-mcp update copilot
    ```
    You should see output confirming that agents were installed to `.github/agents/`.
 3. Wait for the command to complete successfully.
 
-**What's happening:** This command installs custom Copilot agents specifically designed for HoloViz development. These agents understand the holoviz-mcp server and can use it to understand the architecture patterns and best practices for Panel, hvPlot, and other HoloViz libraries.
+!!! note "What's happening"
+    This command installs custom Copilot agents specifically designed for HoloViz development. These agents understand the holoviz-mcp server and can use it to understand the architecture patterns and best practices for Panel, hvPlot, and other HoloViz libraries.
 
 !!! tip
     Run `holoviz-mcp update copilot --skills` to populate the `.github/skills` folder too. See [Use Agent Skills in VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills) for more info.
@@ -77,13 +90,16 @@ Instead of diving straight into code, let's use the specialized agent to plan ou
 ![HoloViz MCP Planner](../assets/images/holoviz-mcp-planner.png)
 4. Press Enter and wait for the agent to respond.
 
-**What you'll see:** The agent will provide a structured plan including:
-   - Component breakdown (widgets, plots, layouts)
-   - Data requirements
-   - Recommended HoloViz libraries to use
-   - Step-by-step implementation approach
+!!! note "What you'll see"
+    The agent will provide a structured plan including:
 
-**What's happening:** The HoloViz Planner agent analyzes your requirements and creates an architecture plan following HoloViz best practices. This ensures your application is well-structured before you write any code.
+    - Component breakdown (widgets, plots, layouts)
+    - Data requirements
+    - Recommended HoloViz libraries to use
+    - Step-by-step implementation approach
+
+!!! note "What's happening"
+    The HoloViz Planner agent analyzes your requirements and creates an architecture plan following HoloViz best practices. This ensures your application is well-structured before you write any code.
 
 ---
 
@@ -96,16 +112,18 @@ Now that you have a plan, let's ask Copilot to help implement it.
 
 1. In the Copilot Chat, respond to the plan with:
    ```
-   Please implement this plan in dashboard.py using Panel and hvPlot
+   Implement the plan outlined above.
    ```
 2. Copilot will generate the code for your dashboard. Review the suggestions.
 
-**What you'll see:** A complete Python script that includes:
-   - Imports for Panel, hvPlot, and data handling libraries
-   - Data loading logic (likely using pandas)
-   - Interactive widgets for user controls
-   - Plots created with hvPlot
-   - Panel layout to organize everything
+!!! note "What you'll see"
+    A complete Python script that includes:
+
+    - Imports for Panel, hvPlot, and data handling libraries
+    - Data loading logic (likely using pandas)
+    - Interactive widgets for user controls
+    - Plots created with hvPlot
+    - Panel layout to organize everything
 
 ---
 

docs/assets/images/holoviz-mcp-vscode-running.png

@@ -2,6 +2,8 @@
 
 This tutorial will guide you through installing and using HoloViz MCP for the first time. By the end, you'll have HoloViz MCP running and be able to ask your AI assistant questions about Panel components!
 
+<iframe src="https://www.youtube.com/embed/nB6cI26GNzM?si=XGyPwCMvBWYOrHop" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="display:block;height:300px;width:500px;margin-left:auto;margin-right:auto"></iframe>
+
 !!! tip "What you'll learn"
     - How to install HoloViz MCP
     - How to configure it with your AI assistant (VS Code, Claude Desktop, or Cursor)
@@ -40,6 +42,8 @@ Install [Chromium](https://playwright.dev/docs/browsers) to enable the holoviz-m
 uvx holoviz-mcp install chromium
 ```
 
+**📦 This downloads 300MB** as it downloads the Chromium and FFMPEG engines.
+
 ## Step 3: Create the Documentation Index
 
 HoloViz MCP needs to index the HoloViz documentation to provide intelligent answers. Run:

docs/tutorials/copilot.md

@@ -12,7 +12,7 @@ metadata:
 
 This document provides best practices for developing dashboards and data apps with HoloViz Panel in Python .py files.
 
-Please develop as an **Expert Python Developer** developing advanced data-driven, analytics and testable dashboards and applications would do. Keep the code short, concise, documented, testable and professional.
+Please develop as an **Expert Python and Panel Developer** developing advanced data-driven, analytics and testable dashboards and analytics apps would do. Keep the code short, concise, documented, testable and professional.
 
 ## Dependencies