Modo desarrollo para agregar-tool/quitar-tool, eliminar define-mcp-tool
- agregar-tool y quitar-tool solo disponibles con --dev o WEBMCP_DEV=true - Eliminar built-in define-mcp-tool (sin utilidad en este fork) - Advertencia [DEV] en logs al iniciar en modo desarrollo - Documentar modo dev, parametros y flujos en README
This commit is contained in:
98
README.md
98
README.md
@@ -24,27 +24,67 @@ Este fork agrega **registro dinámico de herramientas desde el agente**, algo qu
|
||||
|
||||
**3 archivos modificados: `src/server.js`, `src/webmcp.js`, `src/websocket-server.js`**
|
||||
|
||||
#### 1. `agregar-tool` — Registro dinámico de herramientas (server.js, websocket-server.js, webmcp.js)
|
||||
- Tool built-in `_webmcp_agregar-tool` que permite al agente registrar herramientas nuevas en el navegador en tiempo real
|
||||
- El agente envía nombre, descripción, parámetros (JSON schema) y código JavaScript
|
||||
- El código se compila con `new Function('args', codigo)` en el navegador y se registra como tool
|
||||
- El flujo es: Agente -> MCP Server -> WebSocket Server -> Navegador (createTool) -> respuesta de vuelta
|
||||
- Después de registrar, se emite `sendToolListChanged()` para que el MCP client refresque su lista
|
||||
#### 1. `agregar-tool` — Registro dinámico de herramientas (solo modo dev)
|
||||
|
||||
#### 2. `quitar-tool` — Eliminación de herramientas (server.js, websocket-server.js, webmcp.js)
|
||||
- Tool built-in `_webmcp_quitar-tool` con tres modos:
|
||||
- `listar: true` — lista las herramientas activas registradas en el navegador
|
||||
- `nombre: "x"` — elimina una herramienta específica por nombre
|
||||
- `todas: true` — elimina todas las herramientas de una vez
|
||||
- Notifica al navegador para que sincronice su estado local
|
||||
Tool built-in `_webmcp_agregar-tool` que permite al agente registrar herramientas nuevas en el navegador en tiempo real. Solo disponible en modo desarrollo (`--dev`).
|
||||
|
||||
#### 3. Manejo de mensajes nuevos en el cliente web (webmcp.js)
|
||||
**Parámetros:**
|
||||
|
||||
| Param | Requerido | Tipo | Descripción |
|
||||
|---|---|---|---|
|
||||
| `nombre` | Sí | string | Nombre de la herramienta que Claude verá |
|
||||
| `descripcion` | Sí | string | Qué hace la herramienta (Claude lee esto para decidir cuándo usarla) |
|
||||
| `codigo` | Sí | string | Body de una función JS. Recibe `args` como parámetro. Debe retornar un string. |
|
||||
| `parametros` | No | string | JSON string con las properties del inputSchema |
|
||||
|
||||
**Flujo de ejecución:**
|
||||
|
||||
```
|
||||
Agente envía nombre + descripcion + codigo + parametros
|
||||
→ server.js valida y reenvía al WebSocket Server
|
||||
→ websocket-server.js busca el primer navegador conectado
|
||||
→ navegador recibe el mensaje 'createTool'
|
||||
→ webmcp.js ejecuta new Function('args', codigo) para compilar el código
|
||||
→ webmcp.js llama registerTool() para registrar la herramienta
|
||||
→ respuesta 'toolResponse' viaja de vuelta
|
||||
→ websocket-server.js enruta la respuesta al MCP server
|
||||
→ server.js llama sendToolListChanged()
|
||||
→ Claude ahora puede usar la nueva herramienta
|
||||
```
|
||||
|
||||
El código se ejecuta en el contexto del navegador, con acceso a `document`, `window`, `fetch()`, `localStorage`, `navigator`, y todas las APIs web. Solo tiene acceso al scope global (no a closures/variables locales de la página, salvo que estén en `window`).
|
||||
|
||||
#### 2. `quitar-tool` — Eliminación de herramientas (solo modo dev)
|
||||
|
||||
Tool built-in `_webmcp_quitar-tool` con tres modos de operación. Solo disponible en modo desarrollo (`--dev`).
|
||||
|
||||
**Parámetros (todos opcionales, pero debe usarse al menos uno):**
|
||||
|
||||
| Param | Tipo | Efecto |
|
||||
|---|---|---|
|
||||
| `listar` | boolean | Si `true`, lista las herramientas activas sin borrar nada |
|
||||
| `nombre` | string | Nombre de la herramienta específica a eliminar |
|
||||
| `todas` | boolean | Si `true`, elimina todas las herramientas de una vez |
|
||||
|
||||
**Comportamiento por modo:**
|
||||
|
||||
- **`listar: true`** — Se resuelve en websocket-server.js leyendo el `toolsRegistry`. No toca el navegador. Retorna `"Herramientas activas: tool1, tool2"`.
|
||||
- **`nombre: "x"`** — Busca en `toolsRegistry` por nombre, la borra, y envía `removeTool` al navegador correspondiente para que sincronice su estado local.
|
||||
- **`todas: true`** — Borra todo el `toolsRegistry`, envía `removeAllTools` a todos los navegadores conectados, y retorna `"N herramientas desregistradas"`.
|
||||
|
||||
En los tres casos, después de resolver se llama `sendToolListChanged()` para que Claude actualice su lista.
|
||||
|
||||
#### 3. Eliminación de `define-mcp-tool`
|
||||
|
||||
Se eliminó la built-in `_webmcp_define-mcp-tool` del upstream por no tener utilidad real en este fork.
|
||||
|
||||
#### 4. Manejo de mensajes nuevos en el cliente web (webmcp.js)
|
||||
- `createTool` — recibe la definición de herramienta del server, la compila y registra localmente
|
||||
- `removeTool` — elimina una herramienta específica del registro local
|
||||
- `removeAllTools` — limpia todas las herramientas del registro local
|
||||
- `clipboardCopy` — permite copiar texto al portapapeles del usuario (usado para tokens)
|
||||
|
||||
#### 4. Ruteo en WebSocket Server (websocket-server.js)
|
||||
#### 5. Ruteo en WebSocket Server (websocket-server.js)
|
||||
- `handleCreateTool()` — recibe la petición del MCP server, encuentra un navegador conectado y le reenvía la instrucción de crear la herramienta
|
||||
- `handleRemoveTool()` — maneja listar/eliminar herramientas, sincroniza entre el registry del server y los navegadores conectados
|
||||
|
||||
@@ -94,6 +134,34 @@ En `.claude/settings.json` o settings del proyecto:
|
||||
}
|
||||
```
|
||||
|
||||
### Modo desarrollo
|
||||
|
||||
Las tools `agregar-tool` y `quitar-tool` solo están disponibles en modo desarrollo. Para activarlo:
|
||||
|
||||
**Opción 1: Flag de línea de comandos**
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"webmcp": {
|
||||
"command": "node",
|
||||
"args": ["node_modules/@nucleoriofrio/webmcp/src/websocket-server.js", "--mcp", "--dev"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Opción 2: Variable de entorno**
|
||||
```bash
|
||||
WEBMCP_DEV=true node src/websocket-server.js --mcp
|
||||
```
|
||||
|
||||
Cuando el modo dev está activo, el servidor muestra una advertencia al iniciar:
|
||||
```
|
||||
[DEV] Modo desarrollo activo — agregar-tool y quitar-tool habilitados
|
||||
```
|
||||
|
||||
En producción (sin `--dev`), estas tools no aparecen en el listado de herramientas y si se intentan llamar directamente retornan un error.
|
||||
|
||||
### Flujo de conexión
|
||||
|
||||
1. El agente ejecuta `get-token` para generar un token de conexión
|
||||
@@ -101,7 +169,7 @@ En `.claude/settings.json` o settings del proyecto:
|
||||
3. La página se conecta al WebSocket server y registra sus herramientas
|
||||
4. El agente puede usar las herramientas de la página y crear nuevas dinámicamente con `agregar-tool`
|
||||
|
||||
### Crear herramientas dinámicas desde el agente
|
||||
### Crear herramientas dinámicas desde el agente (requiere --dev)
|
||||
|
||||
Con este fork, el agente puede crear herramientas sin modificar el HTML:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user