@kineviz/graphxr-mcp 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +72 -15
- package/dist/index.js +19 -13
- package/package.json +10 -3
package/README.md
CHANGED
|
@@ -24,7 +24,7 @@ MCP (Model Context Protocol) server for [GraphXR](https://graphxr.kineviz.com) -
|
|
|
24
24
|
|
|
25
25
|
### 1. Get Your API Key
|
|
26
26
|
|
|
27
|
-
1. Log in to
|
|
27
|
+
1. Log in to GraphXR
|
|
28
28
|
2. Click your profile icon in the top right
|
|
29
29
|
3. Select "API Key" from the dropdown
|
|
30
30
|
4. Copy your API key
|
|
@@ -48,7 +48,7 @@ Create or edit `.cursor/mcp.json` in your project or home directory:
|
|
|
48
48
|
"mcpServers": {
|
|
49
49
|
"graphxr": {
|
|
50
50
|
"command": "npx",
|
|
51
|
-
"args": ["-y", "@kineviz/graphxr-mcp"],
|
|
51
|
+
"args": ["-y", "@kineviz/graphxr-mcp", "graphxr-mcp"],
|
|
52
52
|
"env": {
|
|
53
53
|
"GRAPHXR_API_KEY": "your-api-key-here",
|
|
54
54
|
"GRAPHXR_URL": "https://graphxr.kineviz.com"
|
|
@@ -60,14 +60,14 @@ Create or edit `.cursor/mcp.json` in your project or home directory:
|
|
|
60
60
|
|
|
61
61
|
#### Claude Desktop
|
|
62
62
|
|
|
63
|
-
Add to your Claude Desktop configuration:
|
|
63
|
+
Add to your Claude Desktop configuration (macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`):
|
|
64
64
|
|
|
65
65
|
```json
|
|
66
66
|
{
|
|
67
67
|
"mcpServers": {
|
|
68
68
|
"graphxr": {
|
|
69
69
|
"command": "npx",
|
|
70
|
-
"args": ["-y", "@kineviz/graphxr-mcp"],
|
|
70
|
+
"args": ["-y", "@kineviz/graphxr-mcp", "graphxr-mcp"],
|
|
71
71
|
"env": {
|
|
72
72
|
"GRAPHXR_API_KEY": "your-api-key-here",
|
|
73
73
|
"GRAPHXR_URL": "https://graphxr.kineviz.com"
|
|
@@ -82,9 +82,9 @@ Add to your Claude Desktop configuration:
|
|
|
82
82
|
| Variable | Required | Default | Description |
|
|
83
83
|
|----------|----------|---------|-------------|
|
|
84
84
|
| `GRAPHXR_API_KEY` | Yes | - | Your GraphXR API key |
|
|
85
|
-
| `GRAPHXR_URL` | No | `
|
|
86
|
-
| `
|
|
87
|
-
| `DEBUG` | No | `false` | Enable debug logging |
|
|
85
|
+
| `GRAPHXR_URL` | No | `http://localhost:9000` | GraphXR server URL |
|
|
86
|
+
| `GRAPHXR_HEADLESS` | No | `true` | Run browser in headless mode (set to `false` to see the browser) |
|
|
87
|
+
| `DEBUG` or `GRAPHXR_DEBUG` | No | `false` | Enable debug logging |
|
|
88
88
|
|
|
89
89
|
## Available Tools
|
|
90
90
|
|
|
@@ -95,9 +95,8 @@ Once configured, you can ask Claude/Cursor to:
|
|
|
95
95
|
- **open_project** - Open a project in the browser session
|
|
96
96
|
- **run_javascript** - Execute JavaScript code using the `gxr` API
|
|
97
97
|
- **screenshot** - Take a screenshot of the current graph
|
|
98
|
-
- **export_graph** - Export graph data as JSON
|
|
99
|
-
- **
|
|
100
|
-
- **close_browser** - Close the browser session
|
|
98
|
+
- **export_graph** - Export graph data as JSON, GraphXR, or CSV
|
|
99
|
+
- **close_project** - Close the browser session
|
|
101
100
|
|
|
102
101
|
## Example Usage
|
|
103
102
|
|
|
@@ -134,11 +133,13 @@ Enable debug logging to see detailed output:
|
|
|
134
133
|
```json
|
|
135
134
|
{
|
|
136
135
|
"env": {
|
|
137
|
-
"
|
|
136
|
+
"GRAPHXR_DEBUG": "true"
|
|
138
137
|
}
|
|
139
138
|
}
|
|
140
139
|
```
|
|
141
140
|
|
|
141
|
+
You can also use `DEBUG=true` which works the same way.
|
|
142
|
+
|
|
142
143
|
## GraphXR API Reference
|
|
143
144
|
|
|
144
145
|
The `run_javascript` tool executes code with access to the `gxr` global object. Here are common operations:
|
|
@@ -351,6 +352,38 @@ const projectName = gxr.getProjectName();
|
|
|
351
352
|
|
|
352
353
|
For full API documentation, see the [GraphXR API Reference](https://graphxr.kineviz.com/docs).
|
|
353
354
|
|
|
355
|
+
## Development
|
|
356
|
+
|
|
357
|
+
### Setup
|
|
358
|
+
|
|
359
|
+
```bash
|
|
360
|
+
# Install dependencies
|
|
361
|
+
yarn install
|
|
362
|
+
|
|
363
|
+
# Build for development (with sourcemaps)
|
|
364
|
+
yarn build:dev
|
|
365
|
+
|
|
366
|
+
# Build for npm package
|
|
367
|
+
yarn build
|
|
368
|
+
```
|
|
369
|
+
|
|
370
|
+
### Project Structure
|
|
371
|
+
|
|
372
|
+
```
|
|
373
|
+
graphxr-mcp/
|
|
374
|
+
├── src/
|
|
375
|
+
│ ├── index.ts # Main MCP server
|
|
376
|
+
│ ├── browser-session.ts # Playwright browser manager
|
|
377
|
+
│ └── graphxr-client.ts # REST API client
|
|
378
|
+
├── scripts/
|
|
379
|
+
│ ├── build.ts # Dev build script
|
|
380
|
+
│ └── build-package.js # npm package build
|
|
381
|
+
├── dist/ # Build output
|
|
382
|
+
├── package.json
|
|
383
|
+
├── tsconfig.json
|
|
384
|
+
└── README.md
|
|
385
|
+
```
|
|
386
|
+
|
|
354
387
|
## Publishing (for maintainers)
|
|
355
388
|
|
|
356
389
|
### Prerequisites
|
|
@@ -360,19 +393,43 @@ For full API documentation, see the [GraphXR API Reference](https://graphxr.kine
|
|
|
360
393
|
|
|
361
394
|
### First-time Setup
|
|
362
395
|
|
|
363
|
-
|
|
396
|
+
1. **Create an npm account** (if you don't have one): https://www.npmjs.com/signup
|
|
397
|
+
|
|
398
|
+
2. **Request access** to the `@kineviz` scope from a team administrator
|
|
399
|
+
|
|
400
|
+
3. **Log in to npm** with the @kineviz scope:
|
|
364
401
|
|
|
365
402
|
```bash
|
|
366
403
|
npm login --scope=@kineviz
|
|
367
404
|
```
|
|
368
405
|
|
|
369
|
-
|
|
406
|
+
This will prompt you for your npm username, password, and email. If you have 2FA enabled, you'll also need to enter a one-time password.
|
|
370
407
|
|
|
371
|
-
|
|
408
|
+
4. **Verify you're logged in**:
|
|
372
409
|
|
|
373
410
|
```bash
|
|
374
|
-
|
|
411
|
+
npm whoami
|
|
412
|
+
```
|
|
413
|
+
|
|
414
|
+
This should display your npm username.
|
|
415
|
+
|
|
416
|
+
### Before Each Release
|
|
417
|
+
|
|
418
|
+
Verify your npm session is still active:
|
|
419
|
+
|
|
420
|
+
```bash
|
|
421
|
+
npm whoami
|
|
422
|
+
```
|
|
423
|
+
|
|
424
|
+
If you get an error, log in again:
|
|
375
425
|
|
|
426
|
+
```bash
|
|
427
|
+
npm login --scope=@kineviz
|
|
428
|
+
```
|
|
429
|
+
|
|
430
|
+
### Release Process
|
|
431
|
+
|
|
432
|
+
```bash
|
|
376
433
|
# Bump version and publish in one command
|
|
377
434
|
npm version patch && yarn release # 0.1.0 → 0.1.1 (bug fixes)
|
|
378
435
|
npm version minor && yarn release # 0.1.0 → 0.2.0 (new features)
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
+
"use strict";
|
|
2
3
|
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -27,17 +28,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
27
28
|
));
|
|
28
29
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
30
|
|
|
30
|
-
// index.ts
|
|
31
|
-
var
|
|
32
|
-
__export(
|
|
31
|
+
// src/index.ts
|
|
32
|
+
var src_exports = {};
|
|
33
|
+
__export(src_exports, {
|
|
33
34
|
GraphXRMCPServer: () => GraphXRMCPServer
|
|
34
35
|
});
|
|
35
|
-
module.exports = __toCommonJS(
|
|
36
|
+
module.exports = __toCommonJS(src_exports);
|
|
36
37
|
var import_server = require("@modelcontextprotocol/sdk/server/index.js");
|
|
37
38
|
var import_stdio = require("@modelcontextprotocol/sdk/server/stdio.js");
|
|
38
39
|
var import_types = require("@modelcontextprotocol/sdk/types.js");
|
|
39
40
|
|
|
40
|
-
// graphxr-client.ts
|
|
41
|
+
// src/graphxr-client.ts
|
|
41
42
|
var import_node_fetch = __toESM(require("node-fetch"));
|
|
42
43
|
var DEBUG = process.env.DEBUG === "true" || process.env.GRAPHXR_DEBUG === "true";
|
|
43
44
|
function debug(...args) {
|
|
@@ -46,6 +47,8 @@ function debug(...args) {
|
|
|
46
47
|
}
|
|
47
48
|
}
|
|
48
49
|
var GraphXRClient = class {
|
|
50
|
+
baseUrl;
|
|
51
|
+
apiKey;
|
|
49
52
|
constructor(config) {
|
|
50
53
|
this.baseUrl = config.baseUrl.replace(/\/$/, "");
|
|
51
54
|
this.apiKey = config.apiKey;
|
|
@@ -180,7 +183,7 @@ var GraphXRClient = class {
|
|
|
180
183
|
}
|
|
181
184
|
};
|
|
182
185
|
|
|
183
|
-
// browser-session.ts
|
|
186
|
+
// src/browser-session.ts
|
|
184
187
|
var import_playwright = require("playwright");
|
|
185
188
|
var DEBUG2 = process.env.DEBUG === "true" || process.env.GRAPHXR_DEBUG === "true";
|
|
186
189
|
function debug2(...args) {
|
|
@@ -189,11 +192,13 @@ function debug2(...args) {
|
|
|
189
192
|
}
|
|
190
193
|
}
|
|
191
194
|
var BrowserSession = class {
|
|
195
|
+
client;
|
|
196
|
+
config;
|
|
197
|
+
browser = null;
|
|
198
|
+
context = null;
|
|
199
|
+
page = null;
|
|
200
|
+
currentProject = null;
|
|
192
201
|
constructor(client, config = {}) {
|
|
193
|
-
this.browser = null;
|
|
194
|
-
this.context = null;
|
|
195
|
-
this.page = null;
|
|
196
|
-
this.currentProject = null;
|
|
197
202
|
this.client = client;
|
|
198
203
|
this.config = {
|
|
199
204
|
headless: config.headless ?? true,
|
|
@@ -449,7 +454,7 @@ var BrowserSession = class {
|
|
|
449
454
|
}
|
|
450
455
|
};
|
|
451
456
|
|
|
452
|
-
// index.ts
|
|
457
|
+
// src/index.ts
|
|
453
458
|
var GRAPHXR_API_KEY = process.env.GRAPHXR_API_KEY || "";
|
|
454
459
|
var GRAPHXR_URL = process.env.GRAPHXR_URL || "http://localhost:9000";
|
|
455
460
|
var HEADLESS = process.env.GRAPHXR_HEADLESS !== "false";
|
|
@@ -572,9 +577,10 @@ The code should return a value that can be serialized to JSON.`,
|
|
|
572
577
|
}
|
|
573
578
|
];
|
|
574
579
|
var GraphXRMCPServer = class {
|
|
580
|
+
server;
|
|
581
|
+
client = null;
|
|
582
|
+
browserSession = null;
|
|
575
583
|
constructor() {
|
|
576
|
-
this.client = null;
|
|
577
|
-
this.browserSession = null;
|
|
578
584
|
this.server = new import_server.Server(
|
|
579
585
|
{
|
|
580
586
|
name: "graphxr-mcp-server",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kineviz/graphxr-mcp",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "MCP server for GraphXR - enables Claude/Cursor to create graph visualizations",
|
|
5
5
|
"bin": {
|
|
6
6
|
"graphxr-mcp": "./dist/index.js"
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
"README.md"
|
|
11
11
|
],
|
|
12
12
|
"scripts": {
|
|
13
|
-
"build": "node build-package.js",
|
|
13
|
+
"build": "node scripts/build-package.js",
|
|
14
|
+
"build:dev": "tsx scripts/build.ts",
|
|
14
15
|
"prepublishOnly": "yarn build",
|
|
15
16
|
"release": "yarn build && npm publish --access public"
|
|
16
17
|
},
|
|
@@ -19,6 +20,12 @@
|
|
|
19
20
|
"playwright": "^1.53.1",
|
|
20
21
|
"node-fetch": "^2.7.0"
|
|
21
22
|
},
|
|
23
|
+
"devDependencies": {
|
|
24
|
+
"@types/node": "^20.0.0",
|
|
25
|
+
"esbuild": "^0.20.0",
|
|
26
|
+
"tsx": "^4.7.0",
|
|
27
|
+
"typescript": "^5.3.0"
|
|
28
|
+
},
|
|
22
29
|
"engines": {
|
|
23
30
|
"node": ">=18.0.0"
|
|
24
31
|
},
|
|
@@ -27,7 +34,7 @@
|
|
|
27
34
|
},
|
|
28
35
|
"repository": {
|
|
29
36
|
"type": "git",
|
|
30
|
-
"url": "git+https://github.com/kineviz/graphxr.git"
|
|
37
|
+
"url": "git+https://github.com/kineviz/graphxr-mcp.git"
|
|
31
38
|
},
|
|
32
39
|
"keywords": [
|
|
33
40
|
"mcp",
|