@mcp-b/global 1.0.5 → 1.0.7
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 +305 -328
- package/dist/index.umd.js +11 -0
- package/dist/index.umd.js.map +1 -0
- package/package.json +1 -1
- package/README +0 -167
- package/dist/index.umd +0 -11
package/README.md
CHANGED
|
@@ -3,450 +3,427 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/@mcp-b/global)
|
|
4
4
|
[](https://opensource.org/licenses/MIT)
|
|
5
5
|
|
|
6
|
-
**
|
|
6
|
+
**Empower your website with AI capabilities using a single script tag!**
|
|
7
7
|
|
|
8
|
-
The `@mcp-b/global` package
|
|
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
9
|
|
|
10
10
|
## ✨ Features
|
|
11
11
|
|
|
12
|
-
- 🚀 **Zero
|
|
13
|
-
- 🏷️ **Script Tag
|
|
14
|
-
- 🔧 **Global API
|
|
15
|
-
- 📦 **
|
|
16
|
-
- 🎯 **TypeScript
|
|
17
|
-
- 🌐 **Framework
|
|
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
18
|
|
|
19
19
|
## 🚀 Quick Start
|
|
20
20
|
|
|
21
|
-
### Option 1: Script Tag (
|
|
21
|
+
### Option 1: Script Tag (Easiest)
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
Add this to your HTML for instant integration:
|
|
24
24
|
|
|
25
25
|
```html
|
|
26
26
|
<!DOCTYPE html>
|
|
27
|
-
<html>
|
|
28
|
-
<head>
|
|
29
|
-
|
|
30
|
-
</head>
|
|
31
|
-
<body>
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
// Register your first AI tool
|
|
47
|
-
window.mcp.registerTool('getPageInfo', {
|
|
48
|
-
title: 'Get Page Information',
|
|
49
|
-
description: 'Get information about the current page'
|
|
50
|
-
}, async () => {
|
|
51
|
-
return {
|
|
52
|
-
content: [{
|
|
53
|
-
type: 'text',
|
|
54
|
-
text: JSON.stringify({
|
|
55
|
-
title: document.title,
|
|
56
|
-
url: window.location.href,
|
|
57
|
-
timestamp: new Date().toISOString()
|
|
58
|
-
})
|
|
59
|
-
}]
|
|
60
|
-
};
|
|
61
|
-
});
|
|
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
|
+
}
|
|
62
44
|
|
|
63
|
-
|
|
64
|
-
|
|
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
|
+
}
|
|
65
70
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
</body>
|
|
71
|
+
// Run on page load
|
|
72
|
+
document.addEventListener("DOMContentLoaded", initMCP);
|
|
73
|
+
</script>
|
|
74
|
+
</body>
|
|
70
75
|
</html>
|
|
71
76
|
```
|
|
72
77
|
|
|
73
|
-
### Option 2:
|
|
78
|
+
### Option 2: NPM Installation (For Advanced Control)
|
|
74
79
|
|
|
75
|
-
For
|
|
80
|
+
For projects using module bundlers or TypeScript:
|
|
76
81
|
|
|
77
82
|
```bash
|
|
78
|
-
npm install @mcp-b/global
|
|
83
|
+
npm install @mcp-b/global zod
|
|
79
84
|
```
|
|
80
85
|
|
|
81
86
|
```typescript
|
|
82
|
-
import
|
|
83
|
-
import { z } from
|
|
84
|
-
// or
|
|
85
|
-
import { initializeGlobalMCP } from '@mcp-b/global';
|
|
87
|
+
import { initializeGlobalMCP } from "@mcp-b/global";
|
|
88
|
+
import { z } from "zod";
|
|
86
89
|
|
|
87
|
-
// Initialize MCP
|
|
90
|
+
// Initialize the global MCP instance
|
|
88
91
|
initializeGlobalMCP();
|
|
89
92
|
|
|
90
|
-
// Wait for
|
|
91
|
-
function
|
|
93
|
+
// Wait for readiness and register tools
|
|
94
|
+
function initMCP() {
|
|
92
95
|
if (!window.mcp?.registerTool) {
|
|
93
|
-
setTimeout(
|
|
94
|
-
return;
|
|
96
|
+
return setTimeout(initMCP, 100);
|
|
95
97
|
}
|
|
96
98
|
|
|
97
|
-
window.mcp.registerTool(
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
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
|
+
};
|
|
102
112
|
}
|
|
103
|
-
|
|
104
|
-
return { content: [{ type: 'text', text: `Tool executed with: ${message}` }] };
|
|
105
|
-
});
|
|
113
|
+
);
|
|
106
114
|
}
|
|
107
115
|
|
|
108
|
-
|
|
116
|
+
initMCP();
|
|
109
117
|
```
|
|
110
118
|
|
|
111
119
|
## 🛠️ API Reference
|
|
112
120
|
|
|
113
|
-
### Global
|
|
121
|
+
### Global Interface
|
|
114
122
|
|
|
115
|
-
|
|
123
|
+
Loading the package attaches `mcp` to the window object:
|
|
116
124
|
|
|
117
125
|
```typescript
|
|
118
126
|
interface Window {
|
|
119
|
-
mcp: McpServer; //
|
|
127
|
+
mcp: McpServer; // MCP server instance for tool registration
|
|
120
128
|
}
|
|
121
129
|
```
|
|
122
130
|
|
|
123
|
-
###
|
|
131
|
+
### Key Methods
|
|
124
132
|
|
|
125
|
-
#### `window.mcp.registerTool(name,
|
|
133
|
+
#### `window.mcp.registerTool(name, config, handler)`
|
|
126
134
|
|
|
127
|
-
|
|
135
|
+
Registers an AI-callable tool.
|
|
128
136
|
|
|
129
|
-
|
|
130
|
-
|
|
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:
|
|
131
142
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
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}` }] };
|
|
137
155
|
}
|
|
138
|
-
|
|
139
|
-
// Your tool logic here
|
|
140
|
-
return {
|
|
141
|
-
content: [{
|
|
142
|
-
type: 'text',
|
|
143
|
-
text: `Tool result with ${param1}`
|
|
144
|
-
}]
|
|
145
|
-
};
|
|
146
|
-
});
|
|
156
|
+
);
|
|
147
157
|
```
|
|
148
158
|
|
|
149
|
-
####
|
|
159
|
+
#### `initializeGlobalMCP()` (Optional)
|
|
150
160
|
|
|
151
|
-
|
|
152
|
-
import { initializeGlobalMCP, cleanupGlobalMCP } from '@mcp-b/global';
|
|
161
|
+
Manually initializes the global MCP instance (automatic in script tag mode).
|
|
153
162
|
|
|
154
|
-
|
|
155
|
-
initializeGlobalMCP();
|
|
163
|
+
#### `cleanupGlobalMCP()` (Optional)
|
|
156
164
|
|
|
157
|
-
|
|
158
|
-
cleanupGlobalMCP();
|
|
159
|
-
```
|
|
165
|
+
Cleans up the global instance, useful for testing or single-page apps.
|
|
160
166
|
|
|
161
|
-
### TypeScript
|
|
167
|
+
### TypeScript Integration
|
|
162
168
|
|
|
163
|
-
|
|
169
|
+
Import types for full autocompletion:
|
|
164
170
|
|
|
165
171
|
```typescript
|
|
166
|
-
import
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
window.mcp.registerTool('typedTool', {
|
|
178
|
-
title: 'Typed Tool',
|
|
179
|
-
description: 'A tool with proper typing',
|
|
180
|
-
inputSchema: {
|
|
181
|
-
value: z.number().describe('A numeric value to process')
|
|
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}` }] };
|
|
182
183
|
}
|
|
183
|
-
|
|
184
|
-
return { content: [{ type: 'text', text: `Typed result: ${value * 2}` }] };
|
|
185
|
-
});
|
|
184
|
+
);
|
|
186
185
|
```
|
|
187
186
|
|
|
188
|
-
## 📖
|
|
187
|
+
## 📖 Full Example: AI-Powered Todo App
|
|
189
188
|
|
|
190
|
-
|
|
189
|
+
This complete HTML file creates a todo list with AI tools for adding, viewing, and deleting items:
|
|
191
190
|
|
|
192
191
|
```html
|
|
193
192
|
<!DOCTYPE html>
|
|
194
193
|
<html lang="en">
|
|
195
|
-
<head>
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
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
|
+
}
|
|
236
240
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
return;
|
|
241
|
+
function updateTodos() {
|
|
242
|
+
document.getElementById("todos").innerHTML = todos
|
|
243
|
+
.map((todo, index) => `<div class="todo">${index + 1}. ${todo}</div>`)
|
|
244
|
+
.join("");
|
|
242
245
|
}
|
|
243
246
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
description: 'Add a new todo item',
|
|
248
|
-
inputSchema: {
|
|
249
|
-
text: z.string().describe('Todo text to add')
|
|
247
|
+
function initMCP() {
|
|
248
|
+
if (!window.mcp?.registerTool) {
|
|
249
|
+
return setTimeout(initMCP, 100);
|
|
250
250
|
}
|
|
251
|
-
}, async ({ text }) => {
|
|
252
|
-
showAIAction(`Adding todo: "${text}"`);
|
|
253
|
-
todos.push(text);
|
|
254
|
-
renderTodos();
|
|
255
|
-
return { content: [{ type: 'text', text: `✅ Added: "${text}"` }] };
|
|
256
|
-
});
|
|
257
251
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
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
|
+
}
|
|
271
309
|
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
description: 'Delete a todo by its number (1-based index)',
|
|
276
|
-
inputSchema: {
|
|
277
|
-
index: z.number().describe('Todo number to delete (1, 2, 3...)')
|
|
278
|
-
}
|
|
279
|
-
}, async ({ index }) => {
|
|
280
|
-
const i = index - 1; // Convert to 0-based
|
|
281
|
-
if (i >= 0 && i < todos.length) {
|
|
282
|
-
const deleted = todos.splice(i, 1)[0];
|
|
283
|
-
showAIAction(`Deleted todo: "${deleted}"`);
|
|
284
|
-
renderTodos();
|
|
285
|
-
return { content: [{ type: 'text', text: `🗑️ Deleted: "${deleted}"` }] };
|
|
286
|
-
} else {
|
|
287
|
-
return { content: [{ type: 'text', text: `❌ Todo ${index} not found` }] };
|
|
288
|
-
}
|
|
310
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
311
|
+
updateTodos();
|
|
312
|
+
initMCP();
|
|
289
313
|
});
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
document.getElementById('status').innerHTML = '✅ AI Ready! 3 tools available';
|
|
293
|
-
document.getElementById('status').style.background = '#d4edda';
|
|
294
|
-
document.getElementById('status').style.color = '#155724';
|
|
295
|
-
document.getElementById('status').style.padding = '10px';
|
|
296
|
-
document.getElementById('status').style.borderRadius = '5px';
|
|
297
|
-
|
|
298
|
-
console.log('🎉 AI tools registered successfully!');
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
// Initialize
|
|
302
|
-
document.addEventListener('DOMContentLoaded', () => {
|
|
303
|
-
renderTodos();
|
|
304
|
-
setupAI();
|
|
305
|
-
});
|
|
306
|
-
</script>
|
|
307
|
-
</body>
|
|
314
|
+
</script>
|
|
315
|
+
</body>
|
|
308
316
|
</html>
|
|
309
317
|
```
|
|
310
318
|
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
1. **Install the MCP-B Extension**: Get it from the [Chrome Web Store](https://chromewebstore.google.com/detail/mcp-b/daohopfhkdelnpemnhlekblhnikhdhfa)
|
|
319
|
+
Save as `index.html` and open in a browser with the MCP-B extension installed.
|
|
314
320
|
|
|
315
|
-
|
|
321
|
+
## 🎯 Getting Started with the Extension
|
|
316
322
|
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
- *"Delete todo number 2"*
|
|
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".
|
|
321
326
|
|
|
322
|
-
|
|
327
|
+
The AI interacts directly with your site's tools!
|
|
323
328
|
|
|
324
|
-
## 🌟
|
|
329
|
+
## 🌟 Use Cases
|
|
325
330
|
|
|
326
|
-
**
|
|
327
|
-
-
|
|
328
|
-
-
|
|
329
|
-
-
|
|
330
|
-
- 📚 **Learning** - Understand MCP-B concepts quickly
|
|
331
|
-
- 🚀 **MVP Development** - Ship AI features fast
|
|
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.
|
|
332
335
|
|
|
333
|
-
|
|
336
|
+
For production apps, consider [@mcp-b/transports](https://www.npmjs.com/package/@mcp-b/transports) for deeper integration.
|
|
334
337
|
|
|
335
|
-
## 📦
|
|
338
|
+
## 📦 Distribution Formats
|
|
336
339
|
|
|
337
|
-
|
|
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.
|
|
338
344
|
|
|
339
|
-
|
|
340
|
-
- **ESM** (`dist/index.js`) - For modern ES modules
|
|
341
|
-
- **CommonJS** (`dist/index.cjs`) - For Node.js and older bundlers
|
|
342
|
-
- **TypeScript** (`dist/index.d.ts`) - Full type definitions
|
|
345
|
+
Examples:
|
|
343
346
|
|
|
344
347
|
```html
|
|
345
|
-
<!-- UMD
|
|
348
|
+
<!-- UMD CDN -->
|
|
346
349
|
<script src="https://unpkg.com/@mcp-b/global@latest/dist/index.js"></script>
|
|
347
|
-
|
|
348
|
-
<!-- ESM via CDN -->
|
|
349
|
-
<script type="module">
|
|
350
|
-
import '@mcp-b/global';
|
|
351
|
-
// window.mcp is now available
|
|
352
|
-
</script>
|
|
353
350
|
```
|
|
354
351
|
|
|
355
352
|
```javascript
|
|
356
|
-
// CommonJS
|
|
357
|
-
const { initializeGlobalMCP } = require('@mcp-b/global');
|
|
358
|
-
const { z } = require('zod');
|
|
359
|
-
|
|
360
353
|
// ESM
|
|
361
|
-
import { initializeGlobalMCP } from
|
|
362
|
-
import { z } from 'zod';
|
|
354
|
+
import { initializeGlobalMCP } from "@mcp-b/global";
|
|
363
355
|
```
|
|
364
356
|
|
|
365
|
-
## 🔧 Advanced
|
|
357
|
+
## 🔧 Advanced Features
|
|
366
358
|
|
|
367
|
-
###
|
|
359
|
+
### Error Management
|
|
368
360
|
|
|
369
|
-
|
|
370
|
-
import { initializeGlobalMCP, cleanupGlobalMCP } from '@mcp-b/global';
|
|
371
|
-
import { z } from 'zod';
|
|
372
|
-
|
|
373
|
-
// Initialize with custom configuration
|
|
374
|
-
initializeGlobalMCP();
|
|
375
|
-
|
|
376
|
-
// Later, cleanup if needed (useful for SPA route changes)
|
|
377
|
-
cleanupGlobalMCP();
|
|
378
|
-
```
|
|
379
|
-
|
|
380
|
-
### Error Handling
|
|
361
|
+
Handle failures gracefully:
|
|
381
362
|
|
|
382
363
|
```javascript
|
|
383
|
-
window.mcp.registerTool(
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
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
|
+
}
|
|
395
380
|
}
|
|
396
|
-
|
|
381
|
+
);
|
|
397
382
|
```
|
|
398
383
|
|
|
399
|
-
###
|
|
384
|
+
### User-Specific Tools
|
|
385
|
+
|
|
386
|
+
Register tools dynamically:
|
|
400
387
|
|
|
401
388
|
```javascript
|
|
402
|
-
function
|
|
389
|
+
function addUserTools(user) {
|
|
403
390
|
if (user.isAdmin) {
|
|
404
|
-
window.mcp.registerTool(
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
});
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
if (user.isPremium) {
|
|
416
|
-
window.mcp.registerTool('premiumFeature', {
|
|
417
|
-
title: 'Premium Feature',
|
|
418
|
-
description: 'Premium user functionality',
|
|
419
|
-
inputSchema: {
|
|
420
|
-
feature: z.string().describe('Premium feature to activate')
|
|
391
|
+
window.mcp.registerTool(
|
|
392
|
+
"adminTool",
|
|
393
|
+
{
|
|
394
|
+
title: "Admin Tool",
|
|
395
|
+
description: "Admin-only",
|
|
396
|
+
},
|
|
397
|
+
async () => {
|
|
398
|
+
/* ... */
|
|
421
399
|
}
|
|
422
|
-
|
|
423
|
-
return { content: [{ type: 'text', text: `Premium feature activated: ${feature}` }] };
|
|
424
|
-
});
|
|
400
|
+
);
|
|
425
401
|
}
|
|
426
402
|
}
|
|
427
403
|
```
|
|
428
404
|
|
|
429
|
-
## 🚨
|
|
405
|
+
## 🚨 Key Considerations
|
|
430
406
|
|
|
431
|
-
- **Browser
|
|
432
|
-
- **Extension
|
|
433
|
-
- **Security**: Tools
|
|
434
|
-
- **
|
|
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.
|
|
435
411
|
|
|
436
|
-
## 🔗 Related
|
|
412
|
+
## 🔗 Related Resources
|
|
437
413
|
|
|
438
|
-
-
|
|
439
|
-
-
|
|
440
|
-
-
|
|
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.
|
|
441
418
|
|
|
442
419
|
## 📄 License
|
|
443
420
|
|
|
444
|
-
MIT
|
|
421
|
+
MIT – See [LICENSE](https://github.com/MiguelsPizza/WebMCP/blob/main/LICENSE).
|
|
445
422
|
|
|
446
423
|
## 🤝 Contributing
|
|
447
424
|
|
|
448
|
-
|
|
425
|
+
Welcome! Check the [main repo](https://github.com/MiguelsPizza/WebMCP) for guidelines.
|
|
449
426
|
|
|
450
427
|
---
|
|
451
428
|
|
|
452
|
-
**
|
|
429
|
+
**Unlock AI for your site today—start with a script tag!** 🚀
|