Usa JavaScript puro como referencia
Qué es: Una implementación sin framework explicita el registro, las dependencias y el cleanup.
Por qué aprender: La referencia reduce la magia y ayuda a diagnosticar problemas ocultos por hooks o inyección de dependencias.
Antes de modelar
Escribe la solicitud de la persona, el estado actual y la evidencia que probará la finalización.
Error de inicio
Empezar por el nombre de una función o por un botón produce una tool sin un objetivo humano claro.
Anticípate antes de abrir el código
¿Qué información cambia la decisión? ¿Qué efecto debe aparecer en la interfaz? Responde antes de implementar.
const lifecycle = new AbortController();
registerTools(modelContext, services, lifecycle.signal);Profundiza: evidencia que vale la pena guardar
Registra la entrada, el estado anterior, la decisión tomada, el resultado y el cambio visible en la página.
Incluye también un fallo provocado y el comportamiento observado sin soporte de WebMCP.
Conceptos clave
función pura
registro explícito
AbortController
línea base
Modela un hook de React idempotente
Qué es: El efecto registra tools para el estado actual y la limpieza aborta los registros anteriores.
Por qué aprender: Strict Mode, los rerenders y los cambios de dependencias no pueden duplicar nombres en el catálogo.
| Pregunta | Contrato sólido | Contrato débil |
|---|---|---|
| ¿Cuándo usarlo? | La descripción expresa la intención y el contexto. | “Hace cosas” o “gestiona”. |
| ¿Qué recibes? | Solo los datos necesarios. | Objeto genérico e ilimitado. |
| ¿Qué devuelve? | Estado y próxima acción verificables. | Texto sin protocolo. |
| ¿Cómo falla? | Código, motivo y recuperación. | Excepción opaca. |
Haz
- ✓ Usa verbos específicos.
- ✓ Delimita las entradas.
- ✓ Declara la evidencia.
Evita
- ✗ Mezclar intenciones.
- ✗ Aceptar cualquier objeto.
- ✗ Ocultar efectos.
useEffect(() => {
const controller = new AbortController();
registerTools({ courseId, signal: controller.signal });
return () => controller.abort();
}, [courseId]);Profundiza: evidencia que vale la pena guardar
Registra la entrada, el estado anterior, la decisión tomada, el resultado y el cambio visible en la página.
Incluye también un fallo provocado y el comportamiento observado sin soporte de WebMCP.
Conceptos clave
useEffect
dependencias
cleanup
Strict Mode
Encapsula en un servicio Angular
Qué es: Un servicio recibe dependencias, registra las tools y expone cleanup al componente o a la ruta.
Por qué aprender: La inyección de dependencias mantiene las reglas comprobables y separadas del ciclo visual.
Observa
Captura el estado, la entrada y el contexto antes de la acción.
Decide
Valida las precondiciones y elige la transición permitida.
Ejecuta
Aplica la regla compartida y respeta la cancelación.
Demuestra
Actualiza la interfaz y devuelve un resultado estructurado.
Punto de control
Si el paso 2 no se aprueba, la tool no intenta «arreglárselas»: devuelve una recuperación explícita.
ngOnDestroy() {
this.webMcpRegistration.abort();
}Profundiza: evidencia que vale la pena guardar
Registra la entrada, el estado anterior, la decisión tomada, el resultado y el cambio visible en la página.
Incluye también un fallo provocado y el comportamiento observado sin soporte de WebMCP.
Conceptos clave
servicio
DI
OnDestroy
capacidad de prueba
Respeta al cliente y al servidor en Next.js
Qué es: document.modelContext solo existe en el cliente y después de que el documento está activo.
Por qué aprender: Separar el componente cliente, la carga y la API del servidor evita el acceso a Document durante SSR.
CÓDIGO DE REFERENCIA
"use client";
useEffect(() => registerPageTools(), []);Es pequeña, está descrita y se puede validar.
Reutiliza la regla real de la aplicación.
Permite verificar el efecto y continuar.
Lee el código como contrato
Subraya dónde se valida la entrada, dónde ocurre el efecto, dónde llega la cancelación y dónde se actualiza la UI.
Profundiza: evidencia que vale la pena guardar
Registra la entrada, el estado anterior, la decisión tomada, el resultado y el cambio visible en la página.
Incluye también un fallo provocado y el comportamiento observado sin soporte de WebMCP.
Conceptos clave
use client
hydration
SSR
Ruta de API
Actualiza las tools al cambiar de ruta
Qué es: Las SPAs deben retirar las herramientas de la ruta anterior y registrar solo las capacidades de la nueva pantalla.
Por qué aprender: Un catálogo obsoleto es stale UI: el agente ve una acción que la persona ya no puede ejecutar.
Fallo provocado
Ejecuta el escenario con estado ausente, entrada no válida o capacidad no disponible.
Recuperación esperada
La respuesta informa qué falló, qué sigue siendo seguro y qué acción puede continuar.
Matriz mínima de pruebas
✓ camino feliz reproducible
✓ entrada inválida accionable
✓ la cancelación termina el trabajo
✓ el fallback preserva el recorrido
✓ la interfaz refleja el estado
✓ el backend mantiene la autorización
routeController.abort("route changed");
routeController = new AbortController();Profundiza: evidencia que vale la pena guardar
Registra la entrada, el estado anterior, la decisión tomada, el resultado y el cambio visible en la página.
Incluye también un fallo provocado y el comportamiento observado sin soporte de WebMCP.
Conceptos clave
router
unmount
catálogo actual
transición
Compara implementaciones con la misma prueba
Qué es: Los distintos frameworks deben cumplir el mismo contrato observable de registro, ejecución, UI y cleanup.
Por qué aprender: Una matriz común separa las diferencias de ergonomía de las diferencias reales de comportamiento.
Ejercicio de síntesis
- 1. Explica el problema sin usar el nombre de la tecnología.
- 2. Diseña el estado anterior y el posterior.
- 3. Implementa la prueba funcional más pequeña.
- 4. Provoca un fallo y registra la recuperación.
- 5. Entrega código, evidencia y una limitación conocida.
Desafío del módulo
Implementa el mismo catálogo en JavaScript puro y en un framework, y demuestra el montaje, la actualización y el desmontaje.
Criterio del Integrator responsable
La entrega debe funcionar, explicar sus límites y preservar la opción humana cuando la capacidad experimental no esté disponible.
| Implementação | registra 1x | atualiza UI | aborta | fallback |
| Vanilla | sim | sim | sim | sim |
| React | sim | sim | sim | sim |Profundiza: evidencia que vale la pena guardar
Registra la entrada, el estado anterior, la decisión tomada, el resultado y el cambio visible en la página.
Incluye también un fallo provocado y el comportamiento observado sin soporte de WebMCP.
Conceptos clave
mismo contrato
mismas pruebas
cleanup comprobado
compatibilidad
📦 Entrega del módulo
Implementa el mismo catálogo en JavaScript puro y en un framework, y demuestra el montaje, la actualización y el desmontaje.
Criterio de aceptación
La entrega funciona con soporte de WebMCP y mantiene la opción manual cuando la API no existe.
Evidencia
Incluye código, escenario probado, resultado observado y una limitación conocida.
Fuentes técnicas
- Draft y repositorio oficial de WebMCP
- Especificación renderizada
- Snapshot oficial: 26/08/2026 · commit 41d12f0. La API declarativa sigue siendo experimental; valida el draft antes de producción.