You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/tutorials/copilot.md
+40-35Lines changed: 40 additions & 35 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,12 +4,14 @@
4
4
In this tutorial, you'll learn how to use the HoloViz MCP server with GitHub Copilot in VS Code.
5
5
6
6
!!! tip "What you'll learn"
7
+
7
8
- How to use HoloViz MCP resources to enhance Copilot's responses
8
9
- How to add custom Copilot agents optimized for HoloViz MCP
9
10
- How to create a plot using Copilot + HoloViz MCP
10
11
- How to build a dashboard using Copilot + HoloViz MCP
11
12
12
13
!!! note "Prerequisites"
14
+
13
15
- VS Code installed
14
16
- GitHub Copilot subscription and extension installed
15
17
- HoloViz MCP server installed and configured ([Installation guide](../how-to/installation.md))
@@ -20,10 +22,10 @@ In this tutorial, you'll learn how to use the HoloViz MCP server with GitHub Cop
20
22
21
23
Start the Holoviz MCP Server:
22
24
23
-
1. In VS Code, open the Command Palette (`Ctrl+Shift+P` or `Cmd+Shift+P`)
24
-
2. Type "MCP: List Servers" and press Enter
25
-
3. Choose the "holoviz" server
26
-
4. Select "Start Server"
25
+
- In VS Code, open the Command Palette (`Ctrl+Shift+P` or `Cmd+Shift+P`)
26
+
- Type "MCP: List Servers" and press Enter
27
+
- Choose the "holoviz" server
28
+
- Select "Start Server"
27
29
28
30
Repeat 1.+2. and verify that the `holoviz` mcp server is now running.
29
31
@@ -35,84 +37,87 @@ Repeat 1.+2. and verify that the `holoviz` mcp server is now running.
35
37
36
38
[Custom agents](https://code.visualstudio.com/docs/copilot/customization/custom-agents) enable you to configure the AI to adopt different personas tailored to specific development roles and tasks. To install the `holoviz-mcp` agents:
37
39
38
-
1. Open a terminal in VS Code (`` Ctrl+` `` or `Terminal > New Terminal`).
39
-
2. Run the following command:
40
+
- Open a terminal in VS Code (`` Ctrl+` `` or `Terminal > New Terminal`).
41
+
- Run the following command:
40
42
41
43
```bash
42
-
uvx holoviz-mcp update copilot
44
+
uvx holoviz-mcp install copilot
43
45
```
44
46
45
-
You should see output confirming that agents were installed to `.github/agents/`.
46
-
3. Wait for the command to complete successfully.
47
+
- Wait for the command to complete successfully.
48
+
49
+
You should see output confirming that agents were installed to `.github/agents/`.
47
50
48
51
!!! note "What's happening"
49
-
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.
52
+
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.
50
53
51
54
!!! tip
52
-
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.
55
+
Run `holoviz-mcp install 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.
53
56
54
57
---
55
58
56
-
### Creating a Plan with the HoloViz Planner Agent
59
+
### Creating a Plan with the HoloViz App Planner Agent
57
60
58
61
Instead of diving straight into code, let's use the specialized agent to plan our application architecture.
59
62
60
-
1. In the Copilot Chat interface, click the **Set Agent** dropdown.
61
-
2. Select **`HoloViz Planner`** from the list.
62
-
3. Type the following prompt:
63
+
- In the Copilot Chat interface, click the **Set Agent** dropdown.
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.
79
+
The HoloViz App 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.
74
80
75
81
---
76
82
77
83
### Implementing the Dashboard
78
84
79
85
Now that you have a plan, let's ask Copilot to help implement it.
80
86
81
-
1. In the Copilot Chat, respond to the plan with:
87
+
- In the Copilot Chat, respond to the plan with:
82
88
83
89
```text
84
90
Implement the plan outlined above.
85
91
```
86
92
87
-
2. Copilot will generate the code for your dashboard. Review the suggestions.
88
-
89
-
!!! note "What you'll see"
90
-
A complete Python script that includes:
93
+
- Copilot will generate the code for your dashboard and test it.
91
94
92
-
- Imports for Panel, hvPlot, and data handling libraries
93
-
- Data loading logic (likely using pandas)
94
-
- Interactive widgets for user controls
95
-
- Plots created with hvPlot
96
-
- Panel layout to organize everything
95
+
To learn more check out the [Weather Dashboard Tutorial](weather-dashboard.md)!
97
96
98
97
---
99
98
100
99
## Using HoloViz Resources
101
100
102
101
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.
103
102
104
-
1. In the Copilot Chat Interface, click "Add Context" (`CTRL + '`)
105
-
2. Select "MCP Resources".
106
-
3. You'll see a list of available resources. Select **`holoviz_hvplot`**.
Copy file name to clipboardExpand all lines: docs/tutorials/stock-analysis.md
+28-31Lines changed: 28 additions & 31 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,58 +1,55 @@
1
1
# Tutorial: Building an Interactive Stock Analysis Report
2
2
3
-
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 report that displays financial data with professional charts and statistics.
3
+
In this tutorial, you will create a complete stock analysis report that visualizes price movements and trading patterns for multiple stocks.
4
4
5
-
<iframesrc="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"allowfullscreenstyle="display:block;height:300px;width:500px;margin-left:auto;margin-right:auto"></iframe>
5
+
By the end, you'll have built an interactive report that displays financial data with professional charts and statistics.
6
+
7
+
<!-- <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> -->
6
8
7
9
!!! tip "What you'll learn"
8
-
- How to use the HoloViz Planner agent to design data applications
9
-
- How to fetch and process financial data with Python
10
-
- How to create interactive charts using hvPlot
11
-
- How to build reports with Panel components
12
-
- How to use the `holoviz_display` tool to visualize your work
10
+
- How to use the *HoloViz Analysis Planner* agent to design data applications
11
+
- How to use the `holoviz_display` tool to quickly visualize and persist your work
13
12
14
13
!!! note "Prerequisites"
15
14
Before starting, ensure you have:
16
15
17
-
- HoloViz MCP installed and configured ([Getting Started Guide](getting-started.md))
18
16
- VS Code with GitHub Copilot or another MCP-compatible AI assistant
19
-
- Configured the `HoloViz Planner` agent. ([HoloViz Agents](copilot.md/#using-holoviz-agents))
17
+
- HoloViz MCP installed and configured ([Getting Started Guide](getting-started.md))
18
+
- Configured the `HoloViz Analysis Planner` agent. ([HoloViz Agents](copilot.md/#using-holoviz-agents))
20
19
- The HoloViz MCP server running ([How to start the server](getting-started.md/#start-the-server))
21
20
- `yfinance` installed in the virtual environment where you run `holoviz-mcp`: `pip install yfinance`
22
21
23
-
## Step 1: Plan Your Report with the HoloViz Planner
22
+
## Step 1: Plan Your Report with the HoloViz Analysis Planner
24
23
25
-
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.
24
+
First, let's use the HoloViz Analysis 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.
26
25
27
26
1. In VS Code, open the Copilot Chat interface
28
-
2. Click the **Set Agent** dropdown and select **HoloViz Planner**
27
+
2. Click the **Set Agent** dropdown and select **HoloViz Analysis Planner**
29
28
3. Ask the agent:
30
29
31
-
```text
32
-
Please plan how to analyze and create a report showing AAPL and META's hourly bar data history for the last 5 days and display the data as charts:
30
+
```text
31
+
Please plan how to analyze and create a report showing AAPL and META's hourly bar data history for the last 5 days and display the data as charts:
33
32
34
-
- Individual price charts for each stock
35
-
- Summary statistics table
36
-
- Normalized comparison overlay
37
-
- Trading volume visualization
38
-
- Professional styling and error handling
33
+
- Individual price charts for each stock
34
+
- Summary statistics table
35
+
- Normalized comparison overlay
36
+
- Trading volume visualization
37
+
- Professional styling and error handling
39
38
40
-
Display using the #holoviz_display tool. KISS - Keep it simple stupid.
41
-
```
39
+
Display using the #holoviz_display tool. KISS - Keep it simple stupid.
The planner will provide a detailed architecture plan including:
49
-
50
-
- Data sources and how to fetch stock data
51
-
- Chart types to use for price and volume visualization
52
-
- Panel components for layout and statistics
53
-
- Error handling strategies
46
+
!!! success "What you'll see"
47
+
The planner will provide a detailed architecture plan including:
54
48
55
-
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.
49
+
- Data sources and how to fetch stock data
50
+
- Chart types to use for price and volume visualization
51
+
- Panel components for layout and statistics
52
+
- Error handling strategies
56
53
57
54
## Step 2: Implement the Report
58
55
@@ -166,7 +163,7 @@ pip install yfinance
166
163
167
164
Congratulations! In this tutorial, you have:
168
165
169
-
- ✅ Used the HoloViz Planner agent to design a data report
166
+
- ✅ Used the HoloViz Analysis Planner agent to design a data report
170
167
- ✅ Implemented a complete stock analysis application
0 commit comments