Skip to content

Commit 5545e07

Browse files
DemonkratiyDemonkratiy
authored
v7.1.0 - Merge pull request #568 from v-aidaba/improvments - "MCP"
Implemented MCP features.
2 parents 5ebdb09 + 2c053d7 commit 5545e07

16 files changed

Lines changed: 4369 additions & 1102 deletions

File tree

‎Changelog.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
This page contains information about changes to the PowerBI Visual Tools (pbiviz).
44

5+
## 7.1.0
6+
* Added MCP (Model Context Protocol) server support via `pbiviz mcp` command, providing AI-powered tools for visual development.
7+
* Added MCP tools: available APIs, best practices, certification guidance, visual info, and vulnerabilities detection.
8+
* Added MCP configuration template for new visuals (`.vscode/mcp.json`).
9+
* Added unit tests for MCP tools.
10+
* Updated packages.
11+
512
## 7.0.4
613
* Treated renderingEvents issue as an error when certification-audit and certification-fix are used.
714
* Switched to a new webpack plugin.

‎MCP.md‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
# Power BI Visuals Tools - MCP Server
2+
3+
This document describes the MCP (Model Context Protocol) server integration for Power BI Custom Visual Tools, inspired by the Angular 21 MCP implementation.
4+
5+
## What is MCP?
6+
7+
Model Context Protocol (MCP) is an open protocol that allows AI assistants (like GitHub Copilot, Cursor, Claude) to interact with development tools directly. The MCP server exposes "tools" that AI can call to get context-aware information about your project.
8+
9+
## Quick Start
10+
11+
### Option 1: Using VS Code with Copilot
12+
13+
1. Add this to your VS Code settings or create `.vscode/mcp.json`:
14+
15+
```json
16+
{
17+
"servers": {
18+
"pbiviz": {
19+
"command": "npx",
20+
"args": ["-y", "powerbi-visuals-tools", "mcp"]
21+
}
22+
}
23+
}
24+
```
25+
26+
2. Restart VS Code
27+
3. In Copilot Chat, you can now ask questions like:
28+
- "Check my visual for certification readiness"
29+
- "What are the best practices for Power BI visuals?"
30+
- "Show me available Power BI Visual APIs"
31+
32+
### Option 2: Using Cursor
33+
34+
Add to Cursor settings (`~/.cursor/mcp.json`):
35+
36+
```json
37+
{
38+
"mcpServers": {
39+
"pbiviz": {
40+
"command": "npx",
41+
"args": ["-y", "powerbi-visuals-tools", "mcp"]
42+
}
43+
}
44+
}
45+
```
46+
47+
### Option 3: Run Manually (for testing)
48+
49+
```bash
50+
cd /path/to/your/visual-project
51+
pbiviz mcp
52+
```
53+
54+
The server runs on STDIO, so you won't see output, but it will respond to MCP requests.
55+
56+
## Available Tools
57+
58+
| Tool | Description | Local | Read-only |
59+
|------|-------------|-------|-----------|
60+
| `get_best_practices` | Returns best practice guidelines for Power BI visual development | ✅ | ✅ |
61+
| `check_vulnerabilities` | Scans project for security vulnerabilities in dependencies and code | ✅ | ✅ |
62+
| `prepare_certification` | Audits visual for Power BI certification readiness | ✅ | ✅ |
63+
| `list_visual_info` | Returns info about current visual (name, GUID, API version, capabilities) | ✅ | ✅ |
64+
| `get_available_apis` | Lists available Power BI Visual APIs with examples | ✅ | ✅ |
65+
66+
### Tool Details
67+
68+
#### `get_best_practices`
69+
70+
Returns comprehensive guidelines including:
71+
- API version management
72+
- Performance optimization tips
73+
- Security guidelines
74+
- Accessibility requirements
75+
- Project structure recommendations
76+
- Testing best practices
77+
78+
#### `check_vulnerabilities`
79+
80+
Analyzes:
81+
- `package.json` dependencies for known vulnerable packages
82+
- Source code for dangerous patterns (`eval()`, `innerHTML`, external fetch calls)
83+
- Returns severity-categorized results (critical/high/medium/low/info)
84+
85+
#### `prepare_certification`
86+
87+
Checks:
88+
- Required files (pbiviz.json, capabilities.json, package.json)
89+
- Visual configuration (name, GUID, version format, API version)
90+
- Capabilities (data roles, accessibility support)
91+
- Assets (icon.png)
92+
93+
#### `list_visual_info`
94+
95+
Extracts from project files:
96+
- Visual name, display name, GUID
97+
- Version and API version
98+
- Author information
99+
- Defined data roles and format objects
100+
- Supported features (highlight, keyboard focus, etc.)
101+
- Dependencies list
102+
103+
#### `get_available_apis`
104+
105+
Provides documentation for:
106+
- **Data APIs**: fetchMoreData, persistProperties
107+
- **Formatting APIs**: colorPalette, getFormattingModel, high contrast
108+
- **Interaction APIs**: selectionManager, tooltipService, contextMenu, drilldown
109+
- **Utility APIs**: localization, storage, events, modal dialog
110+
111+
Accepts optional `category` parameter: `data`, `formatting`, `interaction`, `utility`, or `all`.
112+
113+
## Example Interactions
114+
115+
### With GitHub Copilot (Agent Mode)
116+
117+
**You:** "Is my visual ready for certification?"
118+
119+
**Copilot:** *calls `prepare_certification` tool*
120+
121+
> Based on the certification check, your visual has:
122+
> - ✅ 12 passed checks
123+
> - ⚠️ 2 warnings: Missing keyboard focus support, no README.md
124+
> - ❌ 1 failed: API version 2.6.0 is outdated
125+
>
126+
> Recommendation: Update to API version 5.x and add `"supportsKeyboardFocus": true` to capabilities.json.
127+
128+
---
129+
130+
**You:** "What APIs can I use for tooltips and selection?"
131+
132+
**Copilot:** *calls `get_available_apis` with category="interaction"*
133+
134+
> For tooltips, use `host.tooltipService.show()`:
135+
> ```typescript
136+
> host.tooltipService.show({
137+
> dataItems: tooltipData,
138+
> coordinates: [x, y]
139+
> });
140+
> ```
141+
> For selection, use `selectionManager`:
142+
> ```typescript
143+
> const selectionManager = host.createSelectionManager();
144+
> selectionManager.select(selectionId);
145+
> ```
146+
147+
## How It Works
148+
149+
```
150+
┌─────────────────┐ STDIO ┌─────────────────┐
151+
│ VS Code / │ ◄───────────► │ pbiviz mcp │
152+
│ Copilot │ (MCP) │ (MCP Server) │
153+
└─────────────────┘ └─────────────────┘
154+
│
155+
▼
156+
┌─────────────────┐
157+
│ Visual Project │
158+
│ - pbiviz.json │
159+
│ - capabilities │
160+
│ - package.json │
161+
│ - src/ │
162+
└─────────────────┘
163+
```
164+
165+
1. VS Code starts `pbiviz mcp` as a subprocess
166+
2. Copilot sends `ListTools` request → pbiviz returns available tools
167+
3. When you ask a question, Copilot may call a tool
168+
4. pbiviz executes the tool (reads project files, runs checks)
169+
5. Results are returned to Copilot as structured text
170+
6. Copilot presents the information in a helpful way
171+
172+
## Development
173+
174+
### Building from Source
175+
176+
```bash
177+
git clone https://github.com/Microsoft/PowerBI-visuals-tools.git
178+
cd PowerBI-visuals-tools
179+
npm install
180+
npm run build
181+
```
182+
183+
### Testing MCP Server Locally
184+
185+
```bash
186+
# In your visual project directory:
187+
node /path/to/PowerBI-visuals-tools/bin/pbiviz.js mcp
188+
```
189+
190+
### Adding New Tools
191+
192+
1. Create a new file in `src/mcp/tools/`
193+
2. Export a function that returns a string result
194+
3. Register the tool in `src/mcp/McpServer.ts`
195+
196+
Example:
197+
```typescript
198+
// src/mcp/tools/myTool.ts
199+
export function myTool(rootPath: string): string {
200+
// Read files, perform checks, return markdown result
201+
return "# My Tool Result\n...";
202+
}
203+
204+
// In McpServer.ts
205+
this.server.tool(
206+
"my_tool",
207+
"Description for AI",
208+
{},
209+
async () => ({
210+
content: [{ type: "text", text: myTool(this.rootPath) }]
211+
})
212+
);
213+
```
214+
215+
## Comparison with Angular 21 MCP
216+
217+
| Feature | Angular CLI | pbiviz (this implementation) |
218+
|---------|-------------|------------------------------|
219+
| Best practices | `get_best_practices` | `get_best_practices` |
220+
| Project info | `list_projects` | `list_visual_info` |
221+
| Code examples | `find_examples` | `get_available_apis` |
222+
| Documentation search | `search_documentation` (online) | ❌ (offline only) |
223+
| Migration tools | `onpush_zoneless_migration` | `prepare_certification` |
224+
| Build/Run | `build`, `serve` | Use regular CLI commands |
225+
226+
## Requirements
227+
228+
- Node.js >= 18.0.0
229+
- VS Code with GitHub Copilot (for Chat integration)
230+
- Or Cursor / other MCP-compatible AI assistant
231+
232+
## License
233+
234+
MIT - Microsoft Corporation

‎bin/pbiviz.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,4 +111,16 @@ pbiviz
111111
CommandManager.package(options, rootPath);
112112
});
113113

114+
pbiviz
115+
.command('mcp')
116+
.description('Start MCP (Model Context Protocol) server for AI assistant integration')
117+
.option('--init', 'Initialize MCP configuration in current project (.vscode/mcp.json)')
118+
.action((options) => {
119+
if (options.init) {
120+
CommandManager.mcpInit(rootPath);
121+
} else {
122+
CommandManager.mcp(rootPath);
123+
}
124+
});
125+
114126
program.parse(process.argv);

0 commit comments

Comments
 (0)