CAPÍTULO 1
Núcleo de integración
Cuatro módulos para diseñar, recuperar, migrar e integrar.
FORMACIÓN 3 · FASE 2
WebMCP Integrator
Convierte recorridos y sitios existentes en integraciones WebMCP coherentes, recuperables y listas para evolucionar.
4
Capítulos Integrator
4
Módulos disponibles
24
Temas publicados
1
Laboratorio
PROGRESO COMPARTIDO
Tu recorrido continúa entre los repositorios
El mismo identificador de la Formación 1 registra elementos leídos, dudas y notas. En GitHub Pages, el origen es compartido; JSON mantiene el fallback portátil.
0 de 240%
Mapa de la formación Integrator
La parte superior navega por capítulos. Dentro de cada capítulo, los módulos siguen la numeración capítulo.módulo.
Disponible
CAPÍTULO 2
Migración a escala
Inventario multipágina, priorización de portafolio y rollout por lotes.
- 2.1Crawler de recorridos
- 2.2Catálogo corporativo
- 2.3Migración por etapas
- 2.4Gobernanza de cambios
CAPÍTULO 3
Ecosistemas
Design systems, CMS, comercio electrónico y aplicaciones compuestas.
- 3.1CMS y contenido
- 3.2Comercio y checkout
- 3.3Microfrontends
- 3.4Aplicaciones integradas
CAPÍTULO 4
Entrega del Integrator
Calidad, documentación, handoff y proyecto aplicado.
- 4.1Contrato de integración
- 4.2Matriz de compatibilidad
- 4.3Traspaso operativo
- 4.4Proyecto final Integrator
Capítulo 1 · módulos disponibles
LABORATORIO TRANSVERSAL
Estudio de migración WebMCP
Pega un catálogo auditable en JSON y recibe un diagnóstico del contrato, la claridad, el schema, el ciclo de vida, el riesgo y un ejemplo de salida. El laboratorio no registra ni ejecuta herramientas.
Contenido detallado
1.13h
🧭 Diseño de herramientas
Convierte recorridos humanos en herramientas pequeñas, distintas y fáciles de elegir.
0 de 60%
Qué es:
Una tool nace de un objetivo real del usuario, no de cada botón o función que ya existe en el código.
Por qué aprender:
Mapear el inicio, la decisión, el efecto y la evidencia evita que la integración copie la interfaz sin comprender la intención.
Conceptos clave:
objetivo observable · estado inicial · efecto esperado · evidencia final
Qué es:
Las herramientas pequeñas llevan a cabo una intención completa y no compiten por la misma llamada.
Por qué aprender:
Cuando dos descripciones parecen responder a la misma solicitud, la LLM tiene que adivinar y la tasa de selección correcta disminuye.
Conceptos clave:
sin superposición · verbo preciso · límite claro · salida propia
Qué es:
La entrada debe pedir solo los datos necesarios y representar las alternativas cerradas con enums cuando sea posible.
Por qué aprender:
Los schemas enfocados reducen los argumentos inventados, pero la validación real sigue siendo obligatoria en execute y en el backend.
Conceptos clave:
campos mínimos · enum útil · descripción concreta · validación real
Qué es:
El agente puede conocer el nombre que menciona el usuario antes de conocer el identificador interno del sistema.
Por qué aprender:
Separar la búsqueda, la resolución y la acción evita exigir IDs opacos demasiado pronto o aceptar nombres ambiguos demasiado tarde.
Conceptos clave:
el nombre permite descubrir · el ID identifica · resolución explícita · ambigüedad resuelta
Qué es:
El catálogo debe reflejar la ruta, la selección, la autenticación y la etapa actual del recorrido.
Por qué aprender:
Menos herramientas disponibles significan menos contexto y menos llamadas imposibles.
Conceptos clave:
catálogo contextual · registro dinámico · sesión visible · cleanup
Qué es:
Los nombres genéricos y superpuestos deben convertirse en una secuencia que revele la intención y el efecto.
Por qué aprender:
La entrega demuestra que el catálogo orienta al agente y también explica el flujo a producto, seguridad y QA.
Conceptos clave:
inventario · refactorización · prueba de elección · documentación
1.23h
🔄 Estado, errores y recuperación
Modela dependencias, stale state, idempotencia, timeout, cancelación y recuperación.
0 de 60%
Qué es:
Cada etapa declara qué ya ocurrió, qué acciones están disponibles y qué transición es válida.
Por qué aprender:
Sin un modelo de estado, el agente puede confirmar antes de iniciar o repetir un efecto ya completado.
Conceptos clave:
estado explícito · transición válida · precondición · efecto
Qué es:
Los errores recuperables indican una próxima acción; los errores definitivos cierran el intento con un motivo verificable.
Por qué aprender:
La clasificación evita ciclos a ciegas y permite que el agente explique alternativas reales al usuario.
Conceptos clave:
código estable · mensaje accionable · siguiente acción · cierre honesto
Qué es:
El estado usado para decidir puede cambiar antes de la ejecución, especialmente en vacantes, precios y permisos.
Por qué aprender:
Volver a validar en el momento del efecto impide que una tool use una fotografía antigua como autorización vigente.
Conceptos clave:
revalidación · versión del estado · conflicto · nueva lectura
Qué es:
Una clave de idempotencia permite repetir una solicitud sin duplicar una suscripción, un cobro o un envío.
Por qué aprender:
Los agentes, las redes y los usuarios pueden repetir llamadas; la operación debe distinguir entre un reintento y un nuevo efecto.
Conceptos clave:
idempotency key · retry seguro · resultado anterior · efecto único
Qué es:
AbortSignal y el timeout terminan el trabajo que dejó de ser relevante o superó la ventana operativa.
Por qué aprender:
Cancelar de verdad preserva los recursos y evita que la interfaz muestre un éxito después de que la persona desistió.
Conceptos clave:
AbortSignal · timeout · limpieza visual · resultado cancelado
Qué es:
La integración debe demostrar el camino feliz, el orden inválido, el reintento, la cancelación y el cambio concurrente.
Por qué aprender:
Una matriz de fallos convierte la resiliencia en un comportamiento verificable, no en una intención de arquitectura.
Conceptos clave:
escenarios · evidencia · reproducción · regresión
1.33h
🏗️ Migración de sitios existentes
Audita los recorridos, reutiliza la lógica existente e introduce WebMCP como mejora progresiva.
0 de 60%
Qué es:
Mapea formularios, handlers, servicios, endpoints y estados antes de proponer tools.
Por qué aprender:
La auditoría revela dónde ya existe la regla y dónde la interfaz contiene lógica que debe separarse.
Conceptos clave:
formularios · funciones JS · APIs · estado
Qué es:
No todas las funcionalidades merecen migrarse primero; combina frecuencia, valor, estabilidad y reversibilidad.
Por qué aprender:
El recorte correcto permite aprender pronto sin empezar con una acción crítica o poco comprendida.
Conceptos clave:
valor · frecuencia · riesgo · estabilidad
Qué es:
La misma función de dominio debe servir tanto para el clic humano como para la ejecución de WebMCP.
Por qué aprender:
Compartir la lógica evita divergencias entre el flujo visual y el camino del agente.
Conceptos clave:
servicio común · UI adaptadora · herramienta adaptadora · regla única
Qué es:
La tool traduce los argumentos, llama al servicio existente, actualiza la UI y devuelve una respuesta estructurada.
Por qué aprender:
Los wrappers pequeños son más fáciles de revisar y no recrean la aplicación dentro del registro WebMCP.
Conceptos clave:
traducción · servicio existente · UI sincronizada · retorno
Qué es:
El recorrido humano sigue funcionando cuando WebMCP no existe o está desactivado.
Por qué aprender:
Una tecnología experimental se incorpora como capacidad adicional, con observación y rollback.
Conceptos clave:
detección de funciones · fallback · rollout · rollback
Qué es:
El dossier conecta el inventario, el catálogo, los riesgos, la implementación, las pruebas y el plan de publicación.
Por qué aprender:
La migración se vuelve revisable por producto, desarrollo, seguridad y operaciones.
Conceptos clave:
mapa · riesgo · prueba funcional · rollout
1.43h
⚛️ Frameworks modernos
Integra WebMCP en SPA, React, Angular y Next.js con registro y cleanup predecibles.
0 de 60%
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.
Conceptos clave:
función pura · registro explícito · AbortController · baseline
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.
Conceptos clave:
useEffect · dependencias · cleanup · Strict Mode
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.
Conceptos clave:
servicio · DI · OnDestroy · capacidad de prueba
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.
Conceptos clave:
use client · hydration · SSR · API route
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.
Conceptos clave:
router · unmount · catálogo actual · transición
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.
Conceptos clave:
mismo contrato · mismas pruebas · cleanup comprobado · compatibilidad
CONTINUIDAD DEL INTEGRATOR
Siguiente: diseño de herramientas
Después de los fundamentos, la misma formación continúa en los capítulos 2, 3 y 4. Cada capítulo tendrá módulos propios; el alumno mantiene el papel de Integrator mientras amplía la escala y la gobernanza.