@mcp-b/global 1.0.4 → 1.0.6
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 +429 -0
- package/package.json +1 -1
- package/README +0 -167
package/README.md
ADDED
|
@@ -0,0 +1,429 @@
|
|
|
1
|
+
# @mcp-b/global
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@mcp-b/global)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
|
|
6
|
+
**Empower your website with AI capabilities using a single script tag!**
|
|
7
|
+
|
|
8
|
+
The `@mcp-b/global` package offers the easiest way to integrate MCP-B (Model Context Protocol for Browsers) into any website. It requires no build tools or complex configuration—just add a script tag to expose AI tools that leverage your site's existing functionality.
|
|
9
|
+
|
|
10
|
+
## ✨ Features
|
|
11
|
+
|
|
12
|
+
- 🚀 **Zero-Config Setup**: Works instantly in any modern browser.
|
|
13
|
+
- 🏷️ **Script Tag Integration**: Ideal for CDN deployment via unpkg or similar services.
|
|
14
|
+
- 🔧 **Global API Exposure**: Automatically creates `window.mcp` upon loading.
|
|
15
|
+
- 📦 **Multi-Format Support**: Compatible with ESM, CommonJS, and UMD.
|
|
16
|
+
- 🎯 **TypeScript-Ready**: Includes comprehensive type definitions.
|
|
17
|
+
- 🌐 **Framework-Agnostic**: Seamlessly integrates with vanilla JS, React, Vue, Angular, or any other framework.
|
|
18
|
+
|
|
19
|
+
## 🚀 Quick Start
|
|
20
|
+
|
|
21
|
+
### Option 1: Script Tag (Easiest)
|
|
22
|
+
|
|
23
|
+
Add this to your HTML for instant integration:
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<!DOCTYPE html>
|
|
27
|
+
<html lang="en">
|
|
28
|
+
<head>
|
|
29
|
+
<title>My AI-Enabled Site</title>
|
|
30
|
+
</head>
|
|
31
|
+
<body>
|
|
32
|
+
<h1>Welcome</h1>
|
|
33
|
+
|
|
34
|
+
<!-- Load MCP-B via CDN -->
|
|
35
|
+
<script src="https://unpkg.com/@mcp-b/global@latest/dist/index.js"></script>
|
|
36
|
+
|
|
37
|
+
<!-- Your custom script -->
|
|
38
|
+
<script>
|
|
39
|
+
// Wait for MCP to initialize
|
|
40
|
+
function initMCP() {
|
|
41
|
+
if (!window.mcp?.registerTool) {
|
|
42
|
+
return setTimeout(initMCP, 100);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Register a simple tool
|
|
46
|
+
window.mcp.registerTool(
|
|
47
|
+
"getPageDetails",
|
|
48
|
+
{
|
|
49
|
+
title: "Retrieve Page Details",
|
|
50
|
+
description: "Fetches information about the current webpage",
|
|
51
|
+
},
|
|
52
|
+
async () => {
|
|
53
|
+
return {
|
|
54
|
+
content: [
|
|
55
|
+
{
|
|
56
|
+
type: "text",
|
|
57
|
+
text: JSON.stringify({
|
|
58
|
+
title: document.title,
|
|
59
|
+
url: window.location.href,
|
|
60
|
+
timestamp: new Date().toISOString(),
|
|
61
|
+
}),
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
|
|
68
|
+
console.log("AI tools initialized!");
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Run on page load
|
|
72
|
+
document.addEventListener("DOMContentLoaded", initMCP);
|
|
73
|
+
</script>
|
|
74
|
+
</body>
|
|
75
|
+
</html>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Option 2: NPM Installation (For Advanced Control)
|
|
79
|
+
|
|
80
|
+
For projects using module bundlers or TypeScript:
|
|
81
|
+
|
|
82
|
+
```bash
|
|
83
|
+
npm install @mcp-b/global zod
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
import { initializeGlobalMCP } from "@mcp-b/global";
|
|
88
|
+
import { z } from "zod";
|
|
89
|
+
|
|
90
|
+
// Initialize the global MCP instance
|
|
91
|
+
initializeGlobalMCP();
|
|
92
|
+
|
|
93
|
+
// Wait for readiness and register tools
|
|
94
|
+
function initMCP() {
|
|
95
|
+
if (!window.mcp?.registerTool) {
|
|
96
|
+
return setTimeout(initMCP, 100);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
window.mcp.registerTool(
|
|
100
|
+
"processMessage",
|
|
101
|
+
{
|
|
102
|
+
title: "Process User Message",
|
|
103
|
+
description: "Handles and responds to a message",
|
|
104
|
+
inputSchema: {
|
|
105
|
+
message: z.string().describe("The message to process"),
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
async ({ message }) => {
|
|
109
|
+
return {
|
|
110
|
+
content: [{ type: "text", text: `Processed: ${message}` }],
|
|
111
|
+
};
|
|
112
|
+
}
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
initMCP();
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## 🛠️ API Reference
|
|
120
|
+
|
|
121
|
+
### Global Interface
|
|
122
|
+
|
|
123
|
+
Loading the package attaches `mcp` to the window object:
|
|
124
|
+
|
|
125
|
+
```typescript
|
|
126
|
+
interface Window {
|
|
127
|
+
mcp: McpServer; // MCP server instance for tool registration
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Key Methods
|
|
132
|
+
|
|
133
|
+
#### `window.mcp.registerTool(name, config, handler)`
|
|
134
|
+
|
|
135
|
+
Registers an AI-callable tool.
|
|
136
|
+
|
|
137
|
+
- **name**: Unique tool identifier (string).
|
|
138
|
+
- **config**: Object with `title` (string), `description` (string), and optional `inputSchema` (Zod schema for inputs).
|
|
139
|
+
- **handler**: Async function that executes the tool logic and returns `{ content: [{ type: 'text', text: string }] }`.
|
|
140
|
+
|
|
141
|
+
Example:
|
|
142
|
+
|
|
143
|
+
```typescript
|
|
144
|
+
import { z } from "zod";
|
|
145
|
+
|
|
146
|
+
window.mcp.registerTool(
|
|
147
|
+
"echoInput",
|
|
148
|
+
{
|
|
149
|
+
title: "Echo Tool",
|
|
150
|
+
description: "Echoes the provided input",
|
|
151
|
+
inputSchema: { input: z.string() },
|
|
152
|
+
},
|
|
153
|
+
async ({ input }) => {
|
|
154
|
+
return { content: [{ type: "text", text: `Echo: ${input}` }] };
|
|
155
|
+
}
|
|
156
|
+
);
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
#### `initializeGlobalMCP()` (Optional)
|
|
160
|
+
|
|
161
|
+
Manually initializes the global MCP instance (automatic in script tag mode).
|
|
162
|
+
|
|
163
|
+
#### `cleanupGlobalMCP()` (Optional)
|
|
164
|
+
|
|
165
|
+
Cleans up the global instance, useful for testing or single-page apps.
|
|
166
|
+
|
|
167
|
+
### TypeScript Integration
|
|
168
|
+
|
|
169
|
+
Import types for full autocompletion:
|
|
170
|
+
|
|
171
|
+
```typescript
|
|
172
|
+
import "@mcp-b/global"; // Augments Window interface
|
|
173
|
+
|
|
174
|
+
window.mcp.registerTool(
|
|
175
|
+
"mathOperation",
|
|
176
|
+
{
|
|
177
|
+
title: "Perform Math",
|
|
178
|
+
description: "Basic arithmetic",
|
|
179
|
+
inputSchema: { num1: z.number(), num2: z.number() },
|
|
180
|
+
},
|
|
181
|
+
async ({ num1, num2 }) => {
|
|
182
|
+
return { content: [{ type: "text", text: `${num1 + num2}` }] };
|
|
183
|
+
}
|
|
184
|
+
);
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
## 📖 Full Example: AI-Powered Todo App
|
|
188
|
+
|
|
189
|
+
This complete HTML file creates a todo list with AI tools for adding, viewing, and deleting items:
|
|
190
|
+
|
|
191
|
+
```html
|
|
192
|
+
<!DOCTYPE html>
|
|
193
|
+
<html lang="en">
|
|
194
|
+
<head>
|
|
195
|
+
<meta charset="UTF-8" />
|
|
196
|
+
<title>AI Todo List</title>
|
|
197
|
+
<style>
|
|
198
|
+
body {
|
|
199
|
+
font-family: sans-serif;
|
|
200
|
+
max-width: 600px;
|
|
201
|
+
margin: 2rem auto;
|
|
202
|
+
padding: 1rem;
|
|
203
|
+
}
|
|
204
|
+
.todo {
|
|
205
|
+
padding: 0.5rem;
|
|
206
|
+
margin: 0.25rem 0;
|
|
207
|
+
background: #f8f9fa;
|
|
208
|
+
border-radius: 0.25rem;
|
|
209
|
+
}
|
|
210
|
+
.ai-feedback {
|
|
211
|
+
background: #d4edda;
|
|
212
|
+
color: #155724;
|
|
213
|
+
padding: 0.75rem;
|
|
214
|
+
border-radius: 0.5rem;
|
|
215
|
+
margin: 0.5rem 0;
|
|
216
|
+
}
|
|
217
|
+
</style>
|
|
218
|
+
</head>
|
|
219
|
+
<body>
|
|
220
|
+
<h1>AI-Enabled Todo List</h1>
|
|
221
|
+
<div id="status">Initializing AI...</div>
|
|
222
|
+
<div id="todos"></div>
|
|
223
|
+
|
|
224
|
+
<!-- MCP-B Script -->
|
|
225
|
+
<script src="https://unpkg.com/@mcp-b/global@latest/dist/index.js"></script>
|
|
226
|
+
<!-- Zod for Schemas -->
|
|
227
|
+
<script src="https://unpkg.com/zod@latest/lib/index.umd.js"></script>
|
|
228
|
+
|
|
229
|
+
<script>
|
|
230
|
+
const { z } = window.Zod;
|
|
231
|
+
const todos = ["Demo Todo 1", "Demo Todo 2"];
|
|
232
|
+
|
|
233
|
+
function showFeedback(message) {
|
|
234
|
+
const feedback = document.createElement("div");
|
|
235
|
+
feedback.className = "ai-feedback";
|
|
236
|
+
feedback.textContent = `AI Action: ${message}`;
|
|
237
|
+
document.body.insertBefore(feedback, document.getElementById("todos"));
|
|
238
|
+
setTimeout(() => feedback.remove(), 3000);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
function updateTodos() {
|
|
242
|
+
document.getElementById("todos").innerHTML = todos
|
|
243
|
+
.map((todo, index) => `<div class="todo">${index + 1}. ${todo}</div>`)
|
|
244
|
+
.join("");
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
function initMCP() {
|
|
248
|
+
if (!window.mcp?.registerTool) {
|
|
249
|
+
return setTimeout(initMCP, 100);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
window.mcp.registerTool(
|
|
253
|
+
"addTodoItem",
|
|
254
|
+
{
|
|
255
|
+
title: "Add Todo",
|
|
256
|
+
description: "Adds a new todo item",
|
|
257
|
+
inputSchema: { text: z.string().describe("Todo text") },
|
|
258
|
+
},
|
|
259
|
+
async ({ text }) => {
|
|
260
|
+
todos.push(text);
|
|
261
|
+
showFeedback(`Added "${text}"`);
|
|
262
|
+
updateTodos();
|
|
263
|
+
return { content: [{ type: "text", text: `Added: ${text}` }] };
|
|
264
|
+
}
|
|
265
|
+
);
|
|
266
|
+
|
|
267
|
+
window.mcp.registerTool(
|
|
268
|
+
"listTodos",
|
|
269
|
+
{
|
|
270
|
+
title: "List Todos",
|
|
271
|
+
description: "Retrieves all todos",
|
|
272
|
+
},
|
|
273
|
+
async () => {
|
|
274
|
+
showFeedback("Listing todos");
|
|
275
|
+
return { content: [{ type: "text", text: JSON.stringify(todos) }] };
|
|
276
|
+
}
|
|
277
|
+
);
|
|
278
|
+
|
|
279
|
+
window.mcp.registerTool(
|
|
280
|
+
"removeTodo",
|
|
281
|
+
{
|
|
282
|
+
title: "Remove Todo",
|
|
283
|
+
description: "Deletes a todo by index (1-based)",
|
|
284
|
+
inputSchema: { index: z.number().describe("Todo index") },
|
|
285
|
+
},
|
|
286
|
+
async ({ index }) => {
|
|
287
|
+
const i = index - 1;
|
|
288
|
+
if (i >= 0 && i < todos.length) {
|
|
289
|
+
const removed = todos.splice(i, 1)[0];
|
|
290
|
+
showFeedback(`Removed "${removed}"`);
|
|
291
|
+
updateTodos();
|
|
292
|
+
return {
|
|
293
|
+
content: [{ type: "text", text: `Removed: ${removed}` }],
|
|
294
|
+
};
|
|
295
|
+
}
|
|
296
|
+
return {
|
|
297
|
+
content: [{ type: "text", text: `Invalid index: ${index}` }],
|
|
298
|
+
};
|
|
299
|
+
}
|
|
300
|
+
);
|
|
301
|
+
|
|
302
|
+
document.getElementById("status").textContent =
|
|
303
|
+
"AI Ready! Tools available.";
|
|
304
|
+
document.getElementById("status").style.background = "#d4edda";
|
|
305
|
+
document.getElementById("status").style.color = "#155724";
|
|
306
|
+
document.getElementById("status").style.padding = "0.5rem";
|
|
307
|
+
document.getElementById("status").style.borderRadius = "0.25rem";
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
311
|
+
updateTodos();
|
|
312
|
+
initMCP();
|
|
313
|
+
});
|
|
314
|
+
</script>
|
|
315
|
+
</body>
|
|
316
|
+
</html>
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
Save as `index.html` and open in a browser with the MCP-B extension installed.
|
|
320
|
+
|
|
321
|
+
## 🎯 Getting Started with the Extension
|
|
322
|
+
|
|
323
|
+
1. Install the [MCP-B Extension](https://chromewebstore.google.com/detail/mcp-b/daohopfhkdelnpemnhlekblhnikhdhfa) from the Chrome Web Store.
|
|
324
|
+
2. Open your HTML file or site.
|
|
325
|
+
3. Use the extension's chat: Try "Add a todo: Buy milk" or "List all todos".
|
|
326
|
+
|
|
327
|
+
The AI interacts directly with your site's tools!
|
|
328
|
+
|
|
329
|
+
## 🌟 Use Cases
|
|
330
|
+
|
|
331
|
+
- **Quick Prototypes**: Add AI to static sites or landing pages.
|
|
332
|
+
- **Legacy Upgrades**: Enhance old HTML with AI without refactoring.
|
|
333
|
+
- **MVPs**: Rapidly build AI features for demos.
|
|
334
|
+
- **Learning MCP-B**: Experiment with concepts in a simple environment.
|
|
335
|
+
|
|
336
|
+
For production apps, consider [@mcp-b/transports](https://www.npmjs.com/package/@mcp-b/transports) for deeper integration.
|
|
337
|
+
|
|
338
|
+
## 📦 Distribution Formats
|
|
339
|
+
|
|
340
|
+
- **UMD**: `dist/index.umd.js` – For script tags/AMDs.
|
|
341
|
+
- **ESM**: `dist/index.js` – Modern modules.
|
|
342
|
+
- **CommonJS**: `dist/index.cjs` – Node.js compatibility.
|
|
343
|
+
- **Types**: `dist/index.d.ts` – TypeScript support.
|
|
344
|
+
|
|
345
|
+
Examples:
|
|
346
|
+
|
|
347
|
+
```html
|
|
348
|
+
<!-- UMD CDN -->
|
|
349
|
+
<script src="https://unpkg.com/@mcp-b/global@latest/dist/index.js"></script>
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
```javascript
|
|
353
|
+
// ESM
|
|
354
|
+
import { initializeGlobalMCP } from "@mcp-b/global";
|
|
355
|
+
```
|
|
356
|
+
|
|
357
|
+
## 🔧 Advanced Features
|
|
358
|
+
|
|
359
|
+
### Error Management
|
|
360
|
+
|
|
361
|
+
Handle failures gracefully:
|
|
362
|
+
|
|
363
|
+
```javascript
|
|
364
|
+
window.mcp.registerTool(
|
|
365
|
+
"riskyTask",
|
|
366
|
+
{
|
|
367
|
+
title: "Risky Task",
|
|
368
|
+
description: "May fail",
|
|
369
|
+
},
|
|
370
|
+
async () => {
|
|
371
|
+
try {
|
|
372
|
+
// Logic here
|
|
373
|
+
return { content: [{ type: "text", text: "Success!" }] };
|
|
374
|
+
} catch (err) {
|
|
375
|
+
return {
|
|
376
|
+
content: [{ type: "text", text: `Failed: ${err.message}` }],
|
|
377
|
+
isError: true,
|
|
378
|
+
};
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
);
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
### User-Specific Tools
|
|
385
|
+
|
|
386
|
+
Register tools dynamically:
|
|
387
|
+
|
|
388
|
+
```javascript
|
|
389
|
+
function addUserTools(user) {
|
|
390
|
+
if (user.isAdmin) {
|
|
391
|
+
window.mcp.registerTool(
|
|
392
|
+
"adminTool",
|
|
393
|
+
{
|
|
394
|
+
title: "Admin Tool",
|
|
395
|
+
description: "Admin-only",
|
|
396
|
+
},
|
|
397
|
+
async () => {
|
|
398
|
+
/* ... */
|
|
399
|
+
}
|
|
400
|
+
);
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
```
|
|
404
|
+
|
|
405
|
+
## 🚨 Key Considerations
|
|
406
|
+
|
|
407
|
+
- **Browser-Only**: Designed exclusively for web environments.
|
|
408
|
+
- **Extension Needed**: Users require the MCP-B extension for AI interactions.
|
|
409
|
+
- **Security**: Tools inherit your site's permissions—expose only safe operations.
|
|
410
|
+
- **Readiness Check**: Always verify `window.mcp` before use.
|
|
411
|
+
|
|
412
|
+
## 🔗 Related Resources
|
|
413
|
+
|
|
414
|
+
- [@mcp-b/transports](https://www.npmjs.com/package/@mcp-b/transports): Advanced transport layer.
|
|
415
|
+
- [@modelcontextprotocol/sdk](https://www.npmjs.com/package/@modelcontextprotocol/sdk): Core MCP SDK.
|
|
416
|
+
- [MCP-B Extension](https://chromewebstore.google.com/detail/mcp-b/daohopfhkdelnpemnhlekblhnikhdhfa): Browser extension for tool interaction.
|
|
417
|
+
- [Documentation](https://mcp-b.ai): Full guides and specs.
|
|
418
|
+
|
|
419
|
+
## 📄 License
|
|
420
|
+
|
|
421
|
+
MIT – See [LICENSE](https://github.com/MiguelsPizza/WebMCP/blob/main/LICENSE).
|
|
422
|
+
|
|
423
|
+
## 🤝 Contributing
|
|
424
|
+
|
|
425
|
+
Welcome! Check the [main repo](https://github.com/MiguelsPizza/WebMCP) for guidelines.
|
|
426
|
+
|
|
427
|
+
---
|
|
428
|
+
|
|
429
|
+
**Unlock AI for your site today—start with a script tag!** 🚀
|
package/package.json
CHANGED
package/README
DELETED
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
# @mcp-b/global
|
|
2
|
-
|
|
3
|
-
Global bundle for MCP-B (Model Context Protocol - Browser) that provides a polyfill exposing `window.mcp` for easy script tag or CDN usage in browser environments.
|
|
4
|
-
|
|
5
|
-
This package creates a global MCP server instance, allowing seamless integration of Model Context Protocol capabilities directly in the browser. It's designed for scenarios where you want a drop-in polyfill without module bundlers, while also supporting modern ESM/CJS imports.
|
|
6
|
-
|
|
7
|
-
## Features
|
|
8
|
-
|
|
9
|
-
- Auto-initializes on script load in browsers.
|
|
10
|
-
- Exposes `window.mcp` as an instance of `McpServer` from `@modelcontextprotocol/sdk`.
|
|
11
|
-
- Registers a default tool: `get_current_website_title` to retrieve the document title.
|
|
12
|
-
- Supports cleanup for testing or dynamic reloading.
|
|
13
|
-
- Built with security in mind (e.g., configurable allowed origins for transport).
|
|
14
|
-
- Lightweight and treeshaken for browser efficiency.
|
|
15
|
-
|
|
16
|
-
## Installation
|
|
17
|
-
|
|
18
|
-
### Via NPM (for module-based projects)
|
|
19
|
-
|
|
20
|
-
```bash
|
|
21
|
-
npm install @mcp-b/global
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
or
|
|
25
|
-
|
|
26
|
-
```bash
|
|
27
|
-
yarn add @mcp-b/global
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
or
|
|
31
|
-
|
|
32
|
-
```bash
|
|
33
|
-
pnpm add @mcp-b/global
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
### Via CDN (for script tag usage)
|
|
37
|
-
|
|
38
|
-
Use a CDN like unpkg or jsDelivr for direct browser inclusion:
|
|
39
|
-
|
|
40
|
-
```html
|
|
41
|
-
<script src="https://unpkg.com/@mcp-b/global@1.0.1/dist/index.umd.js"></script>
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
This will auto-initialize `window.mcp` upon loading.
|
|
45
|
-
|
|
46
|
-
## Usage
|
|
47
|
-
|
|
48
|
-
### Script Tag (Polyfill Mode)
|
|
49
|
-
|
|
50
|
-
Simply include the script in your HTML. The library will auto-initialize and expose `window.mcp`.
|
|
51
|
-
|
|
52
|
-
```html
|
|
53
|
-
<!DOCTYPE html>
|
|
54
|
-
<html lang="en">
|
|
55
|
-
<head>
|
|
56
|
-
<meta charset="UTF-8" />
|
|
57
|
-
<title>MCP-B Global Example</title>
|
|
58
|
-
<script src="https://unpkg.com/@mcp-b/global@1.0.1/dist/index.umd.js"></script>
|
|
59
|
-
</head>
|
|
60
|
-
<body>
|
|
61
|
-
<script>
|
|
62
|
-
// Wait for DOMContentLoaded if needed, but auto-init handles it
|
|
63
|
-
document.addEventListener("DOMContentLoaded", () => {
|
|
64
|
-
console.log(window.mcp); // McpServer instance
|
|
65
|
-
// Use window.mcp.registerTool(...) or other methods
|
|
66
|
-
});
|
|
67
|
-
</script>
|
|
68
|
-
</body>
|
|
69
|
-
</html>
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
### Module Import (ESM/CJS)
|
|
73
|
-
|
|
74
|
-
For modern JavaScript projects:
|
|
75
|
-
|
|
76
|
-
```javascript
|
|
77
|
-
// ESM
|
|
78
|
-
import { initializeGlobalMCP } from "@mcp-b/global";
|
|
79
|
-
|
|
80
|
-
// or CJS
|
|
81
|
-
const { initializeGlobalMCP } = require("@mcp-b/global");
|
|
82
|
-
|
|
83
|
-
// Initialize manually
|
|
84
|
-
initializeGlobalMCP();
|
|
85
|
-
|
|
86
|
-
// Now window.mcp is available
|
|
87
|
-
console.log(window.mcp);
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
#### Cleanup
|
|
91
|
-
|
|
92
|
-
If you need to reset the instance (e.g., in tests or hot module replacement):
|
|
93
|
-
|
|
94
|
-
```javascript
|
|
95
|
-
import { cleanupGlobalMCP } from "@mcp-b/global";
|
|
96
|
-
|
|
97
|
-
cleanupGlobalMCP(); // Closes the server and removes window.mcp
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
## API
|
|
101
|
-
|
|
102
|
-
### `initializeGlobalMCP(): void`
|
|
103
|
-
|
|
104
|
-
- Initializes the global MCP server if not already done.
|
|
105
|
-
- Safe to call multiple times (idempotent).
|
|
106
|
-
- Throws an error if initialization fails.
|
|
107
|
-
- In browser environments only; skips in non-browser contexts.
|
|
108
|
-
|
|
109
|
-
### `cleanupGlobalMCP(): void`
|
|
110
|
-
|
|
111
|
-
- Closes the MCP server connection.
|
|
112
|
-
- Removes `window.mcp`.
|
|
113
|
-
- Resets internal state for re-initialization.
|
|
114
|
-
|
|
115
|
-
### Global Exposure
|
|
116
|
-
|
|
117
|
-
After initialization:
|
|
118
|
-
|
|
119
|
-
- `window.mcp`: An instance of `McpServer` with:
|
|
120
|
-
- Server info: `{ name: hostname, version: '1.0.0' }`
|
|
121
|
-
- Capabilities: Supports tool list changes and debounced notifications.
|
|
122
|
-
- Default tool: `get_current_website_title` – Returns the current document title as `{ content: [{ type: 'text', text: title }] }`.
|
|
123
|
-
|
|
124
|
-
You can extend it by calling `window.mcp.registerTool(...)` or other MCP SDK methods.
|
|
125
|
-
|
|
126
|
-
## Configuration and Best Practices
|
|
127
|
-
|
|
128
|
-
- **Security**: The transport uses `allowedOrigins: ['*']` by default for broad compatibility. In production, restrict this to trusted origins (e.g., your domain) to prevent cross-origin issues. Modify the source or fork if needed.
|
|
129
|
-
- **Error Handling**: Tools and initialization include try-catch blocks for robustness.
|
|
130
|
-
- **Browser Compatibility**: Targets ES2018; works in modern browsers (Chrome 61+, Firefox 55+, Safari 11+, Edge 16+).
|
|
131
|
-
- **TypeScript**: Includes full type declarations for `window.mcp`.
|
|
132
|
-
|
|
133
|
-
## Dependencies
|
|
134
|
-
|
|
135
|
-
- `@mcp-b/transports`: For browser transport handling.
|
|
136
|
-
- `@modelcontextprotocol/sdk`: Core MCP SDK.
|
|
137
|
-
- `zod`: For schema validation (if used internally).
|
|
138
|
-
|
|
139
|
-
## Development
|
|
140
|
-
|
|
141
|
-
### Building
|
|
142
|
-
|
|
143
|
-
```bash
|
|
144
|
-
pnpm install
|
|
145
|
-
pnpm build
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
### Scripts
|
|
149
|
-
|
|
150
|
-
- `build`: Builds the library using tsup (ESM, CJS, UMD formats).
|
|
151
|
-
- `typecheck`: Runs TypeScript checks.
|
|
152
|
-
- `lint` / `format` / `check`: Uses Biome for code quality.
|
|
153
|
-
- `clean`: Removes build artifacts.
|
|
154
|
-
|
|
155
|
-
## License
|
|
156
|
-
|
|
157
|
-
MIT License. See [LICENSE](LICENSE) for details.
|
|
158
|
-
|
|
159
|
-
## Contributing
|
|
160
|
-
|
|
161
|
-
Contributions welcome! Fork the repo, create a branch, and submit a PR. Report issues at [GitHub Issues](https://github.com/MiguelsPizza/WebMCP/issues).
|
|
162
|
-
|
|
163
|
-
## Links
|
|
164
|
-
|
|
165
|
-
- [Repository](https://github.com/MiguelsPizza/WebMCP/tree/main/packages/global)
|
|
166
|
-
- [NPM Package](https://www.npmjs.com/package/@mcp-b/global)
|
|
167
|
-
- [Homepage](https://github.com/MiguelsPizza/WebMCP#readme)
|