Merge pull request #125 from MarcSkovMadsen/enhancements/fix-video

Review fixes

Author: MarcSkovMadsen

docs/assets/images/claude-code-holoviz-mcp.png

@@ -63,16 +63,16 @@ If Claude provides detailed, accurate responses with specific Panel component in
 
 HoloViz MCP provides specialized agents for Claude Code that can help with planning and implementation:
 
-**Project-level installation** (installs to `.claude/agents/`):
+**User-level installation (default)** (installs to `~/.claude/agents/`):
 
 ```bash
-holoviz-mcp install claude
+holoviz-mcp install claude --scope user
 ```
 
-**User-level installation** (installs to `~/.claude/agents/`):
+**Project-level installation** (installs to `.claude/agents/`):
 
 ```bash
-holoviz-mcp install claude --scope user
+holoviz-mcp install claude --scope project
 ```
 
 **With skills** (optional):

docs/assets/images/getting-started-claude-data-eplorer.png

@@ -5,9 +5,8 @@ This tutorial will guide you through installing and using HoloViz MCP with Claud
 !!! tip "What you'll learn"
     - How to install HoloViz MCP
     - How to configure it with Claude Code
-    - How to use it to get help building Panel applications
     - How to verify everything is working correctly
-    - How to build your first Panel dashboard
+    - How to create your first visualizations
 
 !!! note "Prerequisites"
     Before you begin, ensure you have:
@@ -66,28 +65,40 @@ This will update your `~/.claude.json` file with the HoloViz MCP server configur
 
 HoloViz MCP includes specialized agents for Claude Code that help with planning and implementing HoloViz applications.
 
-Navigate to your project directory and run:
+Install the agents for your user:
 
 ```bash
-holoviz-mcp install claude
+holoviz-mcp install claude --scope user
 ```
 
-This creates a `.claude/agents/` directory with:
+This creates a `~/.claude/agents/` directory with:
 
 - `holoviz-data-explorer.md` - Agent for quick data exploration and data visualization
 - `holoviz-app-architect.md` - Agent for architecting production Panel data applications
 
-!!! tip "Install User-Level Agents"
+!!! tip "Install Project-Level Agents"
 
-    To make agents available across all your projects:
+    To make agents available in your current project only:
 
     ```bash
-    holoviz-mcp install claude --scope user
+    holoviz-mcp install claude --scope project
     ```
 
-    This installs agents to `~/.claude/agents/`.
+    This installs agents to `.claude/agents/`.
 
-## Step 6: Verify Installation
+## Step 6: Install Panel and Dependencies (Optional)
+
+For Claude Code to create and run visualizations in your terminal, it needs access to Panel, hvPlot, and related libraries.
+
+Here's how to install them in a project-specific environment:
+
+```bash
+uv venv
+source .venv/bin/activate  # On Linux/macOS (use `.venv\Scripts\activate` on Windows)
+uv pip install panel watchfiles hvplot # Add your own favorite libraries
+```
+
+## Step 7: Verify Installation
 
 Let's verify that HoloViz MCP is working correctly!
 
@@ -127,7 +138,7 @@ What parameters does the Panel Button component accept?
 
 If Claude provides detailed, accurate answers with specific Panel component information, congratulations! HoloViz MCP is working correctly! 🎉
 
-## Step 7: Build Your First Dashboard
+## Step 8: Build Your First Dashboard
 
 Now that everything is set up, let's build a simple dashboard.
 
@@ -145,15 +156,11 @@ Save the code to `app.py` and run it:
 run it
 ```
 
-!!! tip "Panel is not installed"
-    If the command errors with "Panel is not installed" you will have to create a virtual
-    environment and install panel
-
 Your dashboard will open in your default web browser!
 
 ![Dashboard](../assets/images/getting-started-dashboard.png)
 
-## Step 8: Displaying Data Visualizations
+## Step 9: Displaying Data Visualizations
 
 HoloViz MCP includes a powerful display tool that can render visualizations directly. Ask Claude:
 

docs/how-to/configure-claude-code.md

@@ -20,23 +20,22 @@ By the end, you'll have built an interactive report that displays financial data
 First, let's ask Claude to help us plan our stock analysis report. Open claude and run:
 
 ```text
-I want to create a stock analysis report showing AAPL and META's hourly data for the last 5 days. The report should include:
+I want to quickly display a stock analysis report showing AAPL and META's hourly data for the last 60 days.
+
+The report should include:
 
 - Individual price charts for each stock
 - Summary statistics table
 - Normalized comparison overlay
 - Trading volume visualization
 - Professional styling
 
-Please plan the architecture for this report. What components should I use from Panel and hvPlot?
+Please design and plan this report. Keep it simple and as a single script.
 ```
 
-Claude will provide a detailed architecture plan including:
+Claude will use `holoviz-data-explorer` to develop a detailed architecture plan:
 
-- Data sources and how to fetch stock data with yfinance
-- Chart types to use for price and volume visualization
-- Panel components for layout and statistics
-- Best practices for organizing the report
+![Claude Data Explorer](../assets/images/getting-started-claude-data-eplorer.png)
 
 !!! success "What you'll see"
     Claude will outline a clear plan for building your report, including the key libraries and components needed.
@@ -46,7 +45,7 @@ Claude will provide a detailed architecture plan including:
 Now let's ask Claude to implement the report and use the display tool to show it:
 
 ```text
-Implement it. Display it using the holoviz_display tool.
+Please implement the report. Then display it using the holoviz_display tool.
 ```
 
 Claude will:
@@ -81,7 +80,7 @@ Open the URL in your browser. You should see your stock analysis report with:
 Now that you understand how the report works, let's modify it to analyze different stocks:
 
 ```text
-Modify the report to show GOOGL and MSFT instead of AAPL and META
+Display GOOGL and MSFT instead of AAPL and META
 ```
 
 Claude will generate updated code with the new stocks and provide a new URL to view the modified report.
@@ -93,7 +92,7 @@ Claude will generate updated code with the new stocks and provide a new URL to v
 Let's enhance the report by adding a moving average to the price charts:
 
 ```text
-Add a 20-period moving average line to each stock's price chart
+Display a 20-period moving average line in each stock's price chart
 ```
 
 Claude will update the code to include moving average trend lines and provide a new URL to view the enhanced report.

docs/tutorials/getting-started-claude-code.md

@@ -28,16 +28,20 @@ Take a moment to review Claude's summary. This will guide our dashboard design!
 Now let's ask Claude to help us plan the dashboard architecture:
 
 ```text
-I want to create an awesome dashboard for exploring the Seattle Weather dataset. The dashboard should:
+I want to create a modern, professional looking dashboard for exploring the Seattle Weather dataset. The dashboard should:
 
 - Enable filtering by multiple years (default: 2015)
 - Include plots for temperature and wind grouped by year
 - Include a plot by weather type
 - Include a table with the raw data
-- Use ECharts with smooth transitions
-- Use consistent and modern styling
-
-Please plan the architecture for this dashboard. What components should I use from Panel? How should the code be organized?
+- Use panel-material-ui for a modern look and feel
+- Use ECharts with smooth transitions for an awesome look and feel. Not hvplot
+- Use consistent, modern and appealing styling
+- Use the vega-datasets package for providing the Seattle weather data
+
+Please plan the architecture for this dashboard. What components should I use from Panel? How should I organize them?
+Keep it as a single script weather_dashboard.py file for simplicity
+Add the tests in test_weather_dashboard.py file and make sure the tests pass
 ```
 
 Claude will provide a detailed architecture including:
@@ -49,22 +53,14 @@ Claude will provide a detailed architecture including:
 - Color palette suggestions
 
 !!! success "What you'll see"
-    Take time to read through Claude's plan - it's the blueprint for your application!
+    Take time to review and refine Claude's plan - it's the blueprint for your application!
 
 ## Step 3: Implement the Dashboard
 
 With a solid plan, let's create the dashboard. We'll create it as a project file:
 
 ```text
-Based on the plan above, create a weather_dashboard.py file that implements the Seattle Weather dashboard. Include:
-
-- Data loading and filtering
-- ECharts visualizations for temperature, wind, and weather types
-- Panel components for interactivity
-- Clean, well-organized code with docstrings
-- The vega_datasets package provides the Seattle weather data
-
-Keep it as a single file for simplicity.
+Based on the plan implement the Seattle Weather dashboard in a single weather_dashboard.py file. Make sure all tests pass.
 ```
 
 Claude will create the `weather_dashboard.py` file in your current directory.

docs/tutorials/stock-analysis-claude-code.md

@@ -113,7 +113,7 @@ def install_copilot(agents: bool = True, skills: bool = False) -> None:
 def install_claude(
     agents: bool = True,
     skills: bool = False,
-    scope: Annotated[str, typer.Option("--scope", help="Installation scope: 'project' for .claude/agents/, 'user' for ~/.claude/agents/")] = "project",
+    scope: Annotated[str, typer.Option("--scope", help="Installation scope: 'project' for .claude/agents/, 'user' for ~/.claude/agents/")] = "user",
 ) -> None:
     """Install HoloViz MCP resources for Claude Code.
 

docs/tutorials/weather-dashboard-claude-code.md

@@ -583,6 +583,7 @@ def create_plot(self) -> go.Figure:
 
 ### ECharts
 
+DO prefer ECharts dict configuration over of pyecharts
 **CRITICAL**: ECharts configurations must be JSON-serializable. Panel uses Bokeh's serialization mechanism which cannot serialize Python functions.
 
 ❌ **NEVER use Python functions or lambdas** in ECharts configuration: