@mcp-web/tools 0.1.0 → 0.1.2
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 +114 -0
- package/package.json +7 -2
package/README.md
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
# MCP Web Tools
|
|
2
|
+
|
|
3
|
+
A collection of reusable, pre-built tools for MCP-Web. Includes screenshot capture, DOM querying, and in-browser Python execution.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
This package provides ready-to-use tool classes that can be registered directly with `MCPWeb.addTool()`.
|
|
8
|
+
|
|
9
|
+
## Quick Start
|
|
10
|
+
|
|
11
|
+
### Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @mcp-web/tools
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
### Screenshot Tool
|
|
18
|
+
|
|
19
|
+
Capture screenshots of the page or specific elements. Returns a data URL that the bridge automatically converts into an MCP image content block.
|
|
20
|
+
|
|
21
|
+
```typescript
|
|
22
|
+
import { ScreenshotTool } from '@mcp-web/tools/screenshot';
|
|
23
|
+
|
|
24
|
+
// Dynamic: AI chooses which element to capture
|
|
25
|
+
mcp.addTool(new ScreenshotTool({
|
|
26
|
+
name: 'screenshot',
|
|
27
|
+
description: 'Take a screenshot of any element',
|
|
28
|
+
}));
|
|
29
|
+
|
|
30
|
+
// Static: always captures a specific element
|
|
31
|
+
mcp.addTool(new ScreenshotTool({
|
|
32
|
+
name: 'screenshot-chart',
|
|
33
|
+
description: 'Take a screenshot of the chart',
|
|
34
|
+
elementSelector: '#chart-container',
|
|
35
|
+
format: 'jpeg',
|
|
36
|
+
}));
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### DOM Query Tool
|
|
40
|
+
|
|
41
|
+
Query and inspect DOM elements by CSS selector. Returns tag name, id, class, text content, and attributes for each match.
|
|
42
|
+
|
|
43
|
+
```typescript
|
|
44
|
+
import { DOMQueryTool } from '@mcp-web/tools/dom';
|
|
45
|
+
|
|
46
|
+
mcp.addTool(new DOMQueryTool());
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Python Tool
|
|
50
|
+
|
|
51
|
+
Execute Python code in the browser using Pyodide. Runs in a Web Worker with a 30-second timeout. Packages are loaded automatically from imports.
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
import { PythonTool } from '@mcp-web/tools/python';
|
|
55
|
+
|
|
56
|
+
const pythonTool = new PythonTool(
|
|
57
|
+
// Provide datasets available to the Python script
|
|
58
|
+
() => ({ data: getAppData() }),
|
|
59
|
+
{
|
|
60
|
+
name: 'analyze-data',
|
|
61
|
+
description: 'Analyze application data with Python',
|
|
62
|
+
defaultPackages: ['numpy', 'pandas'],
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
mcp.addTool(pythonTool);
|
|
67
|
+
|
|
68
|
+
// Clean up when done
|
|
69
|
+
pythonTool.destroy();
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Creating Custom Tools
|
|
73
|
+
|
|
74
|
+
Extend `BaseTool` to create your own reusable tools:
|
|
75
|
+
|
|
76
|
+
```typescript
|
|
77
|
+
import { BaseTool } from '@mcp-web/tools';
|
|
78
|
+
import { z } from 'zod';
|
|
79
|
+
|
|
80
|
+
const InputSchema = z.object({
|
|
81
|
+
query: z.string().describe('Search query'),
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
const OutputSchema = z.object({
|
|
85
|
+
results: z.array(z.string()),
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
class SearchTool extends BaseTool<typeof InputSchema, typeof OutputSchema> {
|
|
89
|
+
get name() { return 'search'; }
|
|
90
|
+
get description() { return 'Search for items'; }
|
|
91
|
+
get inputSchema() { return InputSchema; }
|
|
92
|
+
get outputSchema() { return OutputSchema; }
|
|
93
|
+
get handler() {
|
|
94
|
+
return ({ query }: z.infer<typeof InputSchema>) => ({
|
|
95
|
+
results: performSearch(query),
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
mcp.addTool(new SearchTool());
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Exports
|
|
104
|
+
|
|
105
|
+
| Import Path | Export | Description |
|
|
106
|
+
|-------------|--------|-------------|
|
|
107
|
+
| `@mcp-web/tools` | `BaseTool` | Abstract base class for creating custom tools |
|
|
108
|
+
| `@mcp-web/tools/screenshot` | `ScreenshotTool` | Capture page or element screenshots (png, jpeg, webp) |
|
|
109
|
+
| `@mcp-web/tools/dom` | `DOMQueryTool` | Query and inspect DOM elements by CSS selector |
|
|
110
|
+
| `@mcp-web/tools/python` | `PythonTool` | Run Python code in-browser via Pyodide Web Worker |
|
|
111
|
+
|
|
112
|
+
## Learn More
|
|
113
|
+
|
|
114
|
+
For full documentation, guides, and examples, visit [mcp-web.dev](https://mcp-web.dev).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mcp-web/tools",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "MCP Web tools collection",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -27,12 +27,17 @@
|
|
|
27
27
|
"html-to-image": "^1.11.13",
|
|
28
28
|
"uuid": "^11.0.7",
|
|
29
29
|
"zod": "~4.1.12",
|
|
30
|
-
"@mcp-web/types": "0.1.
|
|
30
|
+
"@mcp-web/types": "0.1.2"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@types/uuid": "^10.0.0",
|
|
34
34
|
"typescript": "~5.9.3"
|
|
35
35
|
},
|
|
36
|
+
"repository": {
|
|
37
|
+
"type": "git",
|
|
38
|
+
"url": "https://github.com/flekschas/mcp-web",
|
|
39
|
+
"directory": "packages/tools"
|
|
40
|
+
},
|
|
36
41
|
"scripts": {
|
|
37
42
|
"build": "tsc",
|
|
38
43
|
"clean": "rm -rf dist"
|