@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 CHANGED
@@ -3,450 +3,427 @@
3
3
  [![npm version](https://img.shields.io/npm/v/@mcp-b/global?style=flat-square)](https://www.npmjs.com/package/@mcp-b/global)
4
4
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
5
5
 
6
- **Add AI superpowers to any website with just one script tag!**
6
+ **Empower your website with AI capabilities using a single script tag!**
7
7
 
8
- The `@mcp-b/global` package provides the simplest way to integrate MCP-B (Model Context Protocol for Browsers) into any website. No build tools, no complex setup - just add a script tag and start exposing AI tools.
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 Configuration** - Works immediately in any browser
13
- - 🏷️ **Script Tag Ready** - Perfect for CDN usage via unpkg
14
- - 🔧 **Global API** - Automatically creates `window.mcp` when loaded
15
- - 📦 **Multiple Formats** - Supports ESM, CommonJS, and UMD
16
- - 🎯 **TypeScript Support** - Full type definitions included
17
- - 🌐 **Framework Agnostic** - Works with vanilla JS, React, Vue, or any 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 (Recommended)
21
+ ### Option 1: Script Tag (Easiest)
22
22
 
23
- The easiest way to get started - just add this to your HTML:
23
+ Add this to your HTML for instant integration:
24
24
 
25
25
  ```html
26
26
  <!DOCTYPE html>
27
- <html>
28
- <head>
29
- <title>My AI-Powered Website</title>
30
- </head>
31
- <body>
32
- <h1>Hello World</h1>
33
-
34
- <!-- The magic script tag -->
35
- <script src="https://unpkg.com/@mcp-b/global@latest/dist/index.js"></script>
36
-
37
- <!-- Your app code -->
38
- <script>
39
- // Wait for MCP to initialize, then register tools
40
- function setupAI() {
41
- if (!window.mcp?.registerTool) {
42
- setTimeout(setupAI, 100);
43
- return;
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
- console.log('🎉 AI tools ready!');
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
- // Start setup when page loads
67
- document.addEventListener('DOMContentLoaded', setupAI);
68
- </script>
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: npm Install
78
+ ### Option 2: NPM Installation (For Advanced Control)
74
79
 
75
- For TypeScript projects or when you need more control:
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 '@mcp-b/global'; // For global type declarations
83
- import { z } from 'zod';
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 manually
90
+ // Initialize the global MCP instance
88
91
  initializeGlobalMCP();
89
92
 
90
- // Wait for initialization then register tools
91
- function setupMCP() {
93
+ // Wait for readiness and register tools
94
+ function initMCP() {
92
95
  if (!window.mcp?.registerTool) {
93
- setTimeout(setupMCP, 100);
94
- return;
96
+ return setTimeout(initMCP, 100);
95
97
  }
96
98
 
97
- window.mcp.registerTool('myTool', {
98
- title: 'My Custom Tool',
99
- description: 'Does something useful',
100
- inputSchema: {
101
- message: z.string().describe('Message to process')
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
- }, async ({ message }) => {
104
- return { content: [{ type: 'text', text: `Tool executed with: ${message}` }] };
105
- });
113
+ );
106
114
  }
107
115
 
108
- setupMCP();
116
+ initMCP();
109
117
  ```
110
118
 
111
119
  ## 🛠️ API Reference
112
120
 
113
- ### Global Object
121
+ ### Global Interface
114
122
 
115
- When loaded, the package automatically creates `window.mcp` with the following interface:
123
+ Loading the package attaches `mcp` to the window object:
116
124
 
117
125
  ```typescript
118
126
  interface Window {
119
- mcp: McpServer; // The global MCP server instance
127
+ mcp: McpServer; // MCP server instance for tool registration
120
128
  }
121
129
  ```
122
130
 
123
- ### Core Functions
131
+ ### Key Methods
124
132
 
125
- #### `window.mcp.registerTool(name, definition, handler)`
133
+ #### `window.mcp.registerTool(name, config, handler)`
126
134
 
127
- Register a new AI tool that can be called by AI assistants.
135
+ Registers an AI-callable tool.
128
136
 
129
- ```typescript
130
- import { z } from 'zod';
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
- window.mcp.registerTool('toolName', {
133
- title: 'Human-readable title',
134
- description: 'What this tool does',
135
- inputSchema: {
136
- param1: z.string().describe('Parameter description')
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
- }, async ({ param1 }) => {
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
- #### Manual Initialization (Optional)
159
+ #### `initializeGlobalMCP()` (Optional)
150
160
 
151
- ```typescript
152
- import { initializeGlobalMCP, cleanupGlobalMCP } from '@mcp-b/global';
161
+ Manually initializes the global MCP instance (automatic in script tag mode).
153
162
 
154
- // Initialize manually (automatic in script tag mode)
155
- initializeGlobalMCP();
163
+ #### `cleanupGlobalMCP()` (Optional)
156
164
 
157
- // Cleanup (useful for testing or hot reload)
158
- cleanupGlobalMCP();
159
- ```
165
+ Cleans up the global instance, useful for testing or single-page apps.
160
166
 
161
- ### TypeScript Support
167
+ ### TypeScript Integration
162
168
 
163
- The package includes full TypeScript definitions:
169
+ Import types for full autocompletion:
164
170
 
165
171
  ```typescript
166
- import '@mcp-b/global'; // Augments global Window interface
167
- import { z } from 'zod';
168
-
169
- declare global {
170
- interface Window {
171
- // Add your custom global tools
172
- myCustomFunction: () => void;
173
- }
174
- }
175
-
176
- // Use with full type safety
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
- }, async ({ value }) => {
184
- return { content: [{ type: 'text', text: `Typed result: ${value * 2}` }] };
185
- });
184
+ );
186
185
  ```
187
186
 
188
- ## 📖 Complete Example
187
+ ## 📖 Full Example: AI-Powered Todo App
189
188
 
190
- Here's a full working example that creates a simple todo app with AI tools:
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
- <meta charset="UTF-8">
197
- <title>AI Todo App</title>
198
- <style>
199
- body { font-family: system-ui; max-width: 600px; margin: 50px auto; padding: 20px; }
200
- .todo { padding: 10px; margin: 5px 0; background: #f0f0f0; border-radius: 5px; }
201
- .ai-action { background: #4CAF50; color: white; padding: 15px; border-radius: 10px; margin: 10px 0; }
202
- </style>
203
- </head>
204
- <body>
205
- <h1>🤖 AI Todo App</h1>
206
- <div id="status">Loading AI...</div>
207
- <div id="todos"></div>
208
-
209
- <!-- Load MCP-B Global -->
210
- <script src="https://unpkg.com/@mcp-b/global@latest/dist/index.js"></script>
211
- <!-- Load Zod for schema validation -->
212
- <script src="https://unpkg.com/zod@latest/lib/index.umd.js"></script>
213
-
214
- <script>
215
- // Access Zod from global
216
- const { z } = window.Zod;
217
-
218
- // Simple todo state
219
- const todos = ['Learn MCP-B', 'Build awesome AI tools'];
220
-
221
- // Show AI action feedback
222
- function showAIAction(message) {
223
- const div = document.createElement('div');
224
- div.className = 'ai-action';
225
- div.textContent = `🤖 ${message}`;
226
- document.body.insertBefore(div, document.getElementById('todos'));
227
- setTimeout(() => div.remove(), 3000);
228
- }
229
-
230
- // Render todos
231
- function renderTodos() {
232
- document.getElementById('todos').innerHTML = todos
233
- .map((todo, i) => `<div class="todo">${i + 1}. ${todo}</div>`)
234
- .join('');
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
- // Setup AI tools
238
- function setupAI() {
239
- if (!window.mcp?.registerTool) {
240
- setTimeout(setupAI, 100);
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
- // Add todo tool
245
- window.mcp.registerTool('addTodo', {
246
- title: 'Add Todo',
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
- // Get todos tool
259
- window.mcp.registerTool('getTodos', {
260
- title: 'Get All Todos',
261
- description: 'Get all current todo items'
262
- }, async () => {
263
- showAIAction('Getting all todos');
264
- return {
265
- content: [{
266
- type: 'text',
267
- text: `📋 Current todos: ${JSON.stringify(todos)}`
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
- // Delete todo tool
273
- window.mcp.registerTool('deleteTodo', {
274
- title: 'Delete Todo',
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
- // Update status
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
- ## 🎯 Try It Out
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
- 2. **Save the example above** as an HTML file and open it in Chrome
321
+ ## 🎯 Getting Started with the Extension
316
322
 
317
- 3. **Chat with AI**: Open the extension and try commands like:
318
- - *"Add a todo: Buy groceries"*
319
- - *"Show me all my todos"*
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
- 4. **Watch the magic**: See AI interact with your website directly!
327
+ The AI interacts directly with your site's tools!
323
328
 
324
- ## 🌟 When to Use This Package
329
+ ## 🌟 Use Cases
325
330
 
326
- **Perfect for:**
327
- - 🏃‍♂️ **Rapid Prototyping** - Get AI tools working in minutes
328
- - 🎯 **Landing Pages** - Add AI capabilities without build complexity
329
- - 🔄 **Legacy Sites** - Retrofit existing HTML with AI tools
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
- **For larger applications**, consider the [TypeScript transport package](https://www.npmjs.com/package/@mcp-b/transports) with full build tool integration.
336
+ For production apps, consider [@mcp-b/transports](https://www.npmjs.com/package/@mcp-b/transports) for deeper integration.
334
337
 
335
- ## 📦 Package Formats
338
+ ## 📦 Distribution Formats
336
339
 
337
- This package is distributed in multiple formats for maximum compatibility:
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
- - **UMD** (`dist/index.umd.js`) - For script tags and AMD loaders
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 via CDN -->
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 '@mcp-b/global';
362
- import { z } from 'zod';
354
+ import { initializeGlobalMCP } from "@mcp-b/global";
363
355
  ```
364
356
 
365
- ## 🔧 Advanced Usage
357
+ ## 🔧 Advanced Features
366
358
 
367
- ### Custom Initialization
359
+ ### Error Management
368
360
 
369
- ```typescript
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('riskyOperation', {
384
- title: 'Risky Operation',
385
- description: 'An operation that might fail',
386
- inputSchema: {
387
- data: z.string().describe('Data to process')
388
- }
389
- }, async ({ data }) => {
390
- try {
391
- const result = await doSomethingRisky(data);
392
- return { content: [{ type: 'text', text: `Success: ${result}` }] };
393
- } catch (error) {
394
- return { content: [{ type: 'text', text: `Error: ${error.message}` }] };
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
- ### Dynamic Tool Registration
384
+ ### User-Specific Tools
385
+
386
+ Register tools dynamically:
400
387
 
401
388
  ```javascript
402
- function registerUserSpecificTools(user) {
389
+ function addUserTools(user) {
403
390
  if (user.isAdmin) {
404
- window.mcp.registerTool('adminAction', {
405
- title: 'Admin Action',
406
- description: 'Administrative function',
407
- inputSchema: {
408
- action: z.string().describe('Admin action to perform')
409
- }
410
- }, async ({ action }) => {
411
- return { content: [{ type: 'text', text: `Admin action executed: ${action}` }] };
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
- }, async ({ feature }) => {
423
- return { content: [{ type: 'text', text: `Premium feature activated: ${feature}` }] };
424
- });
400
+ );
425
401
  }
426
402
  }
427
403
  ```
428
404
 
429
- ## 🚨 Important Notes
405
+ ## 🚨 Key Considerations
430
406
 
431
- - **Browser Only**: This package is designed for browser environments only
432
- - **Extension Required**: Users need the MCP-B browser extension to interact with your tools
433
- - **Security**: Tools run in your website's context with the same permissions as your JavaScript
434
- - **Initialization**: Always wait for `window.mcp` to be available before registering tools
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 Packages
412
+ ## 🔗 Related Resources
437
413
 
438
- - **[@mcp-b/transports](https://www.npmjs.com/package/@mcp-b/transports)** - Core transport layer for advanced usage
439
- - **[@modelcontextprotocol/sdk](https://www.npmjs.com/package/@modelcontextprotocol/sdk)** - Official MCP SDK
440
- - **[MCP-B Extension](https://chromewebstore.google.com/detail/mcp-b/daohopfhkdelnpemnhlekblhnikhdhfa)** - Browser extension for interacting with tools
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 - see [LICENSE](https://github.com/MiguelsPizza/WebMCP/blob/main/LICENSE)
421
+ MIT See [LICENSE](https://github.com/MiguelsPizza/WebMCP/blob/main/LICENSE).
445
422
 
446
423
  ## 🤝 Contributing
447
424
 
448
- Contributions welcome! See the [main repository](https://github.com/MiguelsPizza/WebMCP) for guidelines.
425
+ Welcome! Check the [main repo](https://github.com/MiguelsPizza/WebMCP) for guidelines.
449
426
 
450
427
  ---
451
428
 
452
- **Ready to give your website AI superpowers?** Just add the script tag and start building! 🚀
429
+ **Unlock AI for your site today—start with a script tag!** 🚀