Skip to content

Commit 1cb118e

Browse files
MarcSkovMadsenMarcSkovMadsen
committed
review
1 parent 0a2a449 commit 1cb118e

7 files changed

Lines changed: 72 additions & 82 deletions

‎docs/assets/images/copilot-dashboard-plan.png‎

101 KB
Loading

‎docs/assets/images/getting-started-build-dashboard-copilot-chat.png‎

55.1 KB
Loading

‎docs/assets/images/getting-started-build-dashboard.png‎

19.6 KB
Loading

‎docs/tutorials/copilot.md‎

Lines changed: 38 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -29,40 +29,19 @@ Repeat 1.+2. and verify that the `holoviz` mcp server is now running.
2929

3030
![HoloViz MCP Running](../assets/images/holoviz-mcp-vscode-running.png)
3131

32-
## Using HoloViz Resources
33-
34-
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.
35-
36-
1. In the Copilot Chat Interface, click "Add Context" (`CTRL + '`)
37-
2. Select "MCP Resources".
38-
3. You'll see a list of available resources. Select **`holoviz_hvplot`**.
39-
![HoloViz MCP Resources](../assets/images/holoviz-mcp-resources.png)
40-
4. Notice in the chat interface that the resource is now added to the context.
41-
![HvPlot Resource Added](../assets/images/holoviz-mcp-vscode-resource-added.png)
42-
5. Ask the agent:
43-
```bash
44-
Please create a basic hvplot visualization in a script.py file.
45-
```
46-
47-
!!! tip
48-
You can add multiple resources to the context. Try browsing and adding `holoviz_panel` as well to get Panel-specific guidance.
49-
50-
---
51-
52-
5332
## Using HoloViz Agents
5433

55-
5634
### Installing the Agents
5735

58-
5936
[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:
6037

6138
1. Open a terminal in VS Code (`` Ctrl+` `` or `Terminal > New Terminal`).
6239
2. Run the following command:
63-
```bash
64-
uvx holoviz-mcp update copilot
65-
```
40+
41+
```bash
42+
uvx holoviz-mcp update copilot
43+
```
44+
6645
You should see output confirming that agents were installed to `.github/agents/`.
6746
3. Wait for the command to complete successfully.
6847

@@ -74,46 +53,37 @@ MCP resources contain curated knowledge that enhances Copilot's understanding of
7453

7554
---
7655

77-
7856
### Creating a Plan with the HoloViz Planner Agent
7957

80-
8158
Instead of diving straight into code, let's use the specialized agent to plan our application architecture.
8259
83-
8460
1. In the Copilot Chat interface, click the **Set Agent** dropdown.
8561
2. Select **`HoloViz Planner`** from the list.
8662
3. Type the following prompt:
87-
```
88-
Create a plan for a stock dashboard that displays historical prices and trading volume
89-
```
90-
![HoloViz MCP Planner](../assets/images/holoviz-mcp-planner.png)
91-
4. Press Enter and wait for the agent to respond.
9263
93-
!!! note "What you'll see"
94-
The agent will provide a structured plan including:
64+
```text
65+
Create a plan for a stock dashboard that displays historical prices and trading volume
66+
```
67+
68+
4. Press Enter and wait for the agent to respond.
9569
96-
- Component breakdown (widgets, plots, layouts)
97-
- Data requirements
98-
- Recommended HoloViz libraries to use
99-
- Step-by-step implementation approach
70+
![Copilot Dashboard Plan](../assets/images/copilot-dashboard-plan.png)
10071
10172
!!! note "What's happening"
10273
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.
10374
10475
---
10576
106-
10777
### Implementing the Dashboard
10878
109-
11079
Now that you have a plan, let's ask Copilot to help implement it.
11180
112-
11381
1. In the Copilot Chat, respond to the plan with:
114-
```
115-
Implement the plan outlined above.
116-
```
82+
83+
```text
84+
Implement the plan outlined above.
85+
```
86+
11787
2. Copilot will generate the code for your dashboard. Review the suggestions.
11888
11989
!!! note "What you'll see"
@@ -127,14 +97,33 @@ Now that you have a plan, let's ask Copilot to help implement it.
12797
12898
---
12999
100+
## Using HoloViz Resources
101+
102+
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.
130103
131-
## What You've Learned
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`**.
107+
![HoloViz MCP Resources](../assets/images/holoviz-mcp-resources.png)
108+
4. Notice in the chat interface that the resource is now added to the context.
109+
![HvPlot Resource Added](../assets/images/holoviz-mcp-vscode-resource-added.png)
110+
5. Ask the agent:
132111
112+
```bash
113+
Please create a basic hvplot visualization in a script.py file.
114+
```
133115
134-
In this tutorial, you've learned how to:
116+
!!! tip
117+
You can add multiple resources to the context. Try browsing and adding `holoviz_panel` as well to get Panel-specific guidance.
135118
136-
✅ **Use specialized resources** – You loaded HoloViz best practice skills into Copilot's context using MCP resources.
119+
---
120+
121+
## What You've Learned
122+
123+
In this tutorial, you've learned how to:
137124
138125
✅ **Use specialized agents** – You used the HoloViz Planner agent to design your application architecture.
139126
127+
✅ **Use specialized resources** – You loaded HoloViz best practice skills into Copilot's context using MCP resources.
128+
140129
---

‎docs/tutorials/display-server.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,14 @@ uvx --from holoviz-mcp display-server
4444

4545
You should see output like this:
4646

47-
```
47+
```bash
4848
Starting Display Server...
4949
Display Server running at:
5050

51-
- Add: [http://localhost:5005/add](http://localhost:5005/add)
52-
- Feed: [http://localhost:5005/feed](http://localhost:5005/feed)
53-
- Admin: [http://localhost:5005/admin](http://localhost:5005/admin)
54-
- API: [http://localhost:5005/api](http://localhost:5005/api)
51+
- Add: http://localhost:5005/add
52+
- Feed: http://localhost:5005/feed
53+
- Admin: http://localhost:5005/admin
54+
- API: http://localhost:5005/api
5555
```
5656

5757
Great! Your server is now running. Keep this terminal window open while you work through the tutorial.

‎docs/tutorials/display-tool.md‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@
33
In this tutorial, we will create visualizations using the `holoviz_display` tool through an AI assistant. By the end, you will have created several interactive visualizations and learned how to view them.
44

55
!!! info "What you'll accomplish"
6-
- Set up the `holoviz_display` tool
7-
- Create your first bar chart through your AI assistant
8-
- Build an interactive scatter plot
9-
- View your visualizations
6+
- Use the `holoviz_display` tool
7+
- Create and display a bar chart through your AI assistant
8+
- Build and display an interactive scatter plot
109
- Learn to troubleshoot common issues
1110

1211
!!! warning
@@ -39,11 +38,11 @@ Right-click [penguins.csv](../assets/data/penguins.csv) and save it to your work
3938

4039
Now let's explore the penguins dataset. Open your AI assistant and ask:
4140

42-
> "My dataset is penguins.csv. What is the distribution of the 'species' column? Use the #holoviz_display tool"
41+
> My dataset is penguins.csv. What is the distribution of the 'species' column? Use the #holoviz_display tool
4342
4443
Your AI assistant will use the `holoviz_display` tool and respond with something like:
4544

46-
```
45+
```bash
4746
✓ Visualization created successfully!
4847
View at: http://localhost:5005/view?id={snippet_id}
4948
```
@@ -64,7 +63,7 @@ Click the URL. You should see:
6463

6564
Let's explore the relationship between penguin measurements. Ask your AI assistant:
6665

67-
> "Show me a scatter plot of 'flipper_length_mm' vs 'body_mass_g'."
66+
> Show me a scatter plot of 'flipper_length_mm' vs 'body_mass_g'
6867
6968
The AI will create a new visualization. Click the new URL to see:
7069

@@ -81,7 +80,7 @@ The AI will create a new visualization. Click the new URL to see:
8180

8281
You can ask the AI to perform several steps in one message. This helps you build complex analyses without multiple back-and-forths. Try:
8382

84-
> "Filter the dataset for species 'Chinstrap' and calculate the median 'body_mass_g'. Then display and discuss the result."
83+
> Filter the dataset for species 'Chinstrap' and calculate the median 'body_mass_g'. Then display and discuss the result.
8584
8685
The AI will:
8786

@@ -98,7 +97,7 @@ This demonstrates how `holoviz_display` can handle multi-step analytical workflo
9897

9998
Now let's see all your visualizations together. In your browser, navigate to:
10099

101-
```
100+
```bash
102101
http://localhost:5005/feed
103102
```
104103

@@ -126,15 +125,15 @@ The AI will iterate on your existing work based on your feedback, creating new v
126125

127126
You can create visualizations that combine multiple plots for comprehensive analysis. Ask your AI:
128127

129-
> "Create a histogram of 'bill_length_mm' and a box plot of 'flipper_length_mm' side by side."
128+
> Create a histogram of 'bill_length_mm' and a box plot of 'flipper_length_mm' side by side.
130129
131130
The AI will create a layout with both plots displayed together, making it easy to compare different aspects of the data at a glance. When you view it in the Feed page, you'll see a descriptive title and the combined visualization.
132131

133132
## Step 6: Build Interactive Dashboards
134133

135134
For more advanced use cases, you can create interactive dashboards with widgets. Ask your AI:
136135

137-
> "Create an interactive dashboard for the penguins dataset with dropdown filters for species and island."
136+
> Create an interactive dashboard for the penguins dataset with dropdown filters for species and island.
138137
139138
The visualization will include:
140139

‎docs/tutorials/getting-started.md‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -141,37 +141,39 @@ In VS Code, you can monitor the MCP server:
141141
2. Type "MCP: List Servers" and press Enter
142142
3. Choose the "holoviz" server
143143
4. Select "Show Output"
144-
3. You should see log messages indicating the server is running
144+
5. You should see log messages indicating the server is running
145145

146146
### Test with Your AI Assistant
147147

148148
Open a chat with your AI assistant and try these questions:
149149

150-
1. **Component Discovery**:
151-
```
152-
What Panel components are available for user input?
153-
```
150+
**Component Discovery**:
154151

155-
Note: In VS Code, you can prefix your prompt with `#holoviz` to explicitly request that the AI use the `holoviz-mcp` server tools for your query.
152+
What Panel components are available for user input?
156153

157-
2. **Component Details**:
158-
```
159-
What parameters does the Panel Button component accept?
160-
```
154+
!!! tip "Force MCP Usage"
155+
156+
In VS Code, you can include `#holoviz` in your prompt to explicitly request that the AI use the `holoviz-mcp` server tools for your query.
157+
158+
**Component Details**:
159+
160+
What parameters does the Panel Button component accept?
161161

162162
If your AI assistant provides detailed, accurate answers with specific Panel component information, congratulations! HoloViz MCP is working correctly! 🎉
163163

164164
## Step 6: Build Your First Dashboard
165165

166-
Now that everything is set up, let's build a simple dashboard:
166+
Now that everything is set up, let's build a simple dashboard.
167+
168+
**Ask your AI "Agent":**
169+
170+
Create a Panel dashboard in the file app.py that displays a slider and shows the square of the slider's value. Use panel skills.
171+
172+
Your AI "Agent" will provide code using HoloViz MCP's knowledge of Panel components!
167173

168-
1. Create a new file called `app.py`
169-
2. Ask your AI "Agent":
170-
```
171-
Create a Panel dashboard in the file app.py that displays a slider and shows the square of the slider's value. Use 'panel' skills.
172-
```
174+
![Copilot Chat](../assets/images/getting-started-build-dashboard-copilot-chat.png)
173175

174-
3. Your AI "Agent" will provide code using HoloViz MCP's knowledge of Panel components!
176+
![Dashboard](../assets/images/getting-started-build-dashboard.png)
175177

176178
## What's Next?
177179

0 commit comments

Comments
 (0)