stock analysis tutorial

docs/tutorials/stock-analysis.md

@@ -0,0 +1,188 @@
+# Tutorial: Building an Interactive Stock Analysis Report
+
+In this tutorial, you will create a complete stock analysis report that visualizes price movements and trading patterns for multiple stocks. By the end, you'll have built an interactive web application that displays financial data with professional charts and statistics.
+
+<iframe src="https://www.youtube.com/embed/placeholder" title="Tutorial: Building a Stock Analysis Report with HoloViz MCP" 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 use the HoloViz Planner agent to design data applications
+    - How to fetch and process financial data with Python
+    - How to create interactive charts using hvPlot
+    - How to build reports with Panel components
+    - How to use the `holoviz_display` tool to visualize your work
+
+!!! note "Prerequisites"
+    Before starting, ensure you have:
+
+    - HoloViz MCP installed and configured ([Getting Started Guide](getting-started.md))
+    - VS Code with GitHub Copilot or another MCP-compatible AI assistant
+    - Configured the `HoloViz Planner` agent. ([HoloViz Agents](copilot.md/#using-holoviz-agents))
+    - The HoloViz MCP server running ([How to start the server](getting-started.md/#start-the-server))
+    - Python 3.11 or later
+    - `yfinance` installed in your virtual environment: `pip install yfinance`
+
+!!! info "What you'll build"
+    You'll create a stock analysis report that compares AAPL (Apple) and META (Meta) stock prices over the last 5 days with:
+
+    - Individual price charts for each stock
+    - Summary statistics table
+    - Normalized comparison overlay
+    - Trading volume visualization
+    - Professional styling and error handling
+
+## Step 1: Plan Your Report with the HoloViz Planner
+
+First, let's use the HoloViz Planner agent to design our application architecture. This agent understands best practices for organizing Panel reports and will help us create a solid plan before writing code.
+
+1. In VS Code, open the Copilot Chat interface
+2. Click the **Set Agent** dropdown and select **HoloViz Planner**
+3. Ask the agent:
+
+```text
+Please plan how to show me AAPL and META's hourly bar data history for the last 5 days and display the data as charts:
+
+- Individual price charts for each stock
+- Summary statistics table
+- Normalized comparison overlay
+- Trading volume visualization
+- Professional styling and error handling
+
+Display using the #holoviz_display tool.
+```
+
+![HoloViz Planner](../assets/images/stock-analysis-holoviz-planner.png)
+
+4. Press Enter and wait for the agent to respond
+
+!!! success "What you'll see"
+    The planner will provide a detailed architecture plan including:
+
+    - Data sources and how to fetch stock data
+    - Chart types to use for price and volume visualization
+    - Panel components for layout and statistics
+    - Error handling strategies
+
+You should see a structured plan that breaks down the report into logical components. This planning step helps ensure we build a well-organized application.
+
+## Step 2: Implement the Report
+
+Now that we have a plan, let's bring it to life! We'll ask the agent to implement the architecture it just designed.
+
+1. In the same Copilot Chat conversation, click the **Implement Plan** button:
+
+```text
+Implement the plan outlined above.
+```
+
+2. Wait for the agent to generate the complete code
+
+!!! tip "What's happening"
+    The agent will use the `holoviz_display` tool to create and show your report. This tool executes Python code and provides a URL where you can view the results.
+
+You should see a response like:
+
+```
+✓ Visualization created successfully!
+View at: http://localhost:5005/view?id={snippet_id}
+```
+
+## Step 3: View Your Report
+
+Click the URL provided by the agent. Your browser will open and display your stock analysis report!
+
+You should see something like:
+
+![Stock Analysis Report](../assets/images/stock-analysis-report.png)
+
+!!! success "Checkpoint"
+    If you see something like the above, congratulations! You've successfully created an interactive stock analysis report. Try hovering over the charts - they're interactive!
+
+## Step 4: Experiment with Different Stocks
+
+Now that you understand how the report works, let's modify it to analyze different stocks.
+
+1. In Copilot Chat, ask:
+
+```
+Modify the report to show GOOGL and MSFT instead of AAPL and META
+```
+
+2. Wait for the agent to generate updated code with the new stocks
+3. Click the new URL to view your modified report
+
+You should see the same report structure, but now displaying Google and Microsoft stock data!
+
+![Google and Microsoft](../assets/images/stock-analysis-googl-msft.png)
+
+## Step 5: Add More Features
+
+Let's enhance the report by adding a moving average to the price charts.
+
+1. In Copilot Chat, ask the agent:
+
+```text
+Add a 20-period moving average line to each stock's price chart
+```
+
+2. Wait for the agent to generate the updated code
+3. Click the new URL to view your enhanced report with moving average trend lines
+
+![Moving Average](../assets/images/stock-analysis-moving-average.png)
+
+!!! success "What you've learned"
+    You can iterate on your report by asking for modifications in natural language. The agent understands the existing code structure and makes appropriate changes.
+
+## Step 6: Save Your Work
+
+The report you created is stored by the Display Server. To save it as a permanent file:
+
+1. Navigate to the Display Server feed at `http://localhost:5005/feed`
+2. Find your stock analysis report
+3. Click the **Copy Code** button
+
+![Copy Code Button](../assets/images/stock-analysis-copy-code.png)
+
+4. Create a new file called `stock_report.py` in your project
+5. Paste the code and save
+
+Now you have a standalone Python file that you can continue working on or run anytime.
+
+## Common Issues and Solutions
+
+### Module Not Found Error
+
+**What you see**: `ModuleNotFoundError: No module named 'yfinance'`
+
+**Why it happens**: The required package isn't installed in your Python environment
+
+**Solution**: Install the missing package:
+```bash
+pip install yfinance
+```
+
+### Charts Not Displaying
+
+**What you see**: Empty page or error when clicking the view URL
+
+**Why it happens**: The Display Server might not be running or there's a code error
+
+**Solution**:
+
+1. Check that the HoloViz MCP server is running
+2. Look at the error message in the report for specific issues
+3. Ask the agent to fix any code errors
+
+## What You've Accomplished
+
+Congratulations! In this tutorial, you have:
+
+- ✅ Used the HoloViz Planner agent to design a data report
+- ✅ Implemented a complete stock analysis application
+- ✅ Created interactive charts with hvPlot
+- ✅ Built a multi-component report with Panel
+- ✅ Explored interactive visualization features
+- ✅ Modified the report to analyze different stocks
+- ✅ Added new features through natural language requests
+- ✅ Saved your work as a standalone Python application
+
+---

mkdocs.yml

@@ -96,6 +96,7 @@ nav:
         - Use with Copilot: tutorials/copilot.md
         - Use the Display Server: tutorials/display-server.md
         - Use the Display Tool: tutorials/display-tool.md
+        - Stock Analysis: tutorials/stock-analysis.md
     - How-To Guides:
         - Install: how-to/installation.md
         - Configure your IDE: how-to/ide-configuration.md

src/holoviz_mcp/config/resources/agents/holoviz-mcp-planner.agent.md

@@ -54,4 +54,5 @@ If the Holoviz MCP Server is available, use its tools to search for relevant inf
 
 - Always use `holoviz_get_skill` tool to lookup the skills for the libraries (hvplot, holoviews, panel, panel-material-ui, ....) you will be using. Please adhere to these skills in your plan.
 - Use the `holoviz_search` tool to find relevant code examples and documentation for the libraries you will be using.
+- Use the `holoviz_display` tool to display/ show/ manually test visualizations. Prefer the `panel` over `jupyter` `method` argument.
 - Use the read/readFile and web/fetch tools to gather any additional information you may need.

tests/display_mcp/test_utils.py

@@ -92,18 +92,18 @@ def test_extract_last_expression_syntax_error(self):
         with pytest.raises(ValueError, match="Syntax error"):
             extract_last_expression(code)
 
-        def test_validate_code_valid(self):
-            """Test validate_code with valid Python code."""
-            from holoviz_mcp.display_mcp.utils import validate_code
+    def test_validate_code_valid(self):
+        """Test validate_code with valid Python code."""
+        from holoviz_mcp.display_mcp.utils import validate_code
 
-            code = "x = 1\ny = 2\nz = x + y"
-            result = validate_code(code)
-            assert result == ""
+        code = "x = 1\ny = 2\nz = x + y"
+        result = validate_code(code)
+        assert result == ""
 
-        def test_validate_code_invalid(self):
-            """Test validate_code with invalid Python code."""
-            from holoviz_mcp.display_mcp.utils import validate_code
+    def test_validate_code_invalid(self):
+        """Test validate_code with invalid Python code."""
+        from holoviz_mcp.display_mcp.utils import validate_code
 
-            code = "x = 1\ny = 2\nz = x + undefined_var"
-            result = validate_code(code)
-            assert "NameError" in result
+        code = "x = 1\ny = 2\nz = x + undefined_var"
+        result = validate_code(code)
+        assert "NameError" in result