CAPÍTULO 1
Fundamentos de la Web agéntica
Del modelo mental a la primera tool registrada dentro de una página.
FORMACIÓN 2 · FASE 1
WebMCP Builder
Sal del diagnóstico y convierte un sitio en una superficie de herramientas estructuradas, visibles y controlables.
4
Capítulos Builder
4
Módulos disponibles
24
Temas publicados
2
Laboratorios
PROGRESO COMPARTIDO
Tu recorrido continúa entre los repositorios
El mismo identificador de la Formación 1 registra lo leído, las dudas y las notas. En GitHub Pages, el origen se comparte; JSON mantiene la alternativa portátil.
0 de 240%
Mapa de la formación Builder
La parte superior permite navegar por capítulos. Dentro de cada capítulo, los módulos siguen la numeración capítulo.módulo.
Disponible
CAPÍTULO 2
Diseño de herramientas
Transforma los recorridos humanos en contratos claros, pequeños y verificables.
- 2.1Del recorrido a la intención
- 2.2Schemas que orientan a los agentes
- 2.3Resultados, errores y recuperación
- 2.4Catálogos contextuales
CAPÍTULO 3
Integración con la aplicación
Conecta tools con la interfaz, el estado y el backend sin duplicar reglas.
- 3.1Estado de la UI y ejecución
- 3.2Backend, sesión y autorización
- 3.3Frameworks y ciclo de vida
- 3.4Fallback y compatibilidad
CAPÍTULO 4
Calidad de Builder
Prueba la selección, la ejecución, la seguridad y la experiencia antes de la entrega.
- 4.1Amenazas y límites de confianza
- 4.2Evals de selección y argumentos
- 4.3Observabilidad y gobernanza
- 4.4Proyecto final Builder
Capítulo 1 · módulos disponibles
Acciones encadenadas en la práctica
Busca, filtra y arma una lista de estudios con operaciones compartidas entre la interfaz y las herramientas. Mira las llamadas, los resultados y los límites de la medición.
Abrir laboratorio de acciones encadenadasLABORATORIO TRANSVERSAL
Validador de tools y schemas
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
🧭 WebMCP, MCP y la Web agéntica
Construye el modelo mental que distingue la automatización visual, las APIs, MCP y las herramientas expuestas directamente por la página.
0 de 60%
Qué es:
Una persona, una automatización visual o una tool estructurada pueden realizar la misma búsqueda.
Por qué aprender:
Comparar los tres caminos crea la imagen mental que sustenta el resto del curso.
Conceptos clave:
objetivo humano · pasos visuales · capacidad explícita · misma interfaz
Qué es:
La web semántica, la automatización del navegador, la API, MCP y WebMCP resuelven problemas diferentes.
Por qué aprender:
La distinción evita que nombres parecidos se conviertan en una única abstracción vaga.
Conceptos clave:
entender · operar · llamar · descubrir
Qué es:
La página registra; el navegador observa; el agente elige; JavaScript ejecuta; el resultado vuelve.
Por qué aprender:
Entender el ciclo completo revela dónde reside realmente cada responsabilidad.
Conceptos clave:
registro · descubrimiento · elección · ejecución
Qué es:
Una tool combina nombre, descripción, schema y una función execute.
Por qué aprender:
Cada campo influye en una decisión diferente del agente y de la aplicación.
Conceptos clave:
name identifica · description orienta · schema restringe · execute realiza
Qué es:
Las capacidades útiles cambian entre la página de inicio, el producto, el carrito y el área autenticada.
Por qué aprender:
Un catálogo contextual reduce el ruido y evita ofrecer acciones imposibles.
Conceptos clave:
home busca · producto elige · carrito modifica · sesión autoriza
Qué es:
El Builder debe prever alternativas, autorización, cancelación, evidencia y límites.
Por qué aprender:
El proyecto completa el modelo mental con una entrega que se puede demostrar y criticar.
Conceptos clave:
fallback · seguridad · evidencia · proyecto
1.23h
🧪 Entorno de desarrollo
Prepara un entorno seguro, observable y compatible con la naturaleza experimental de la especificación.
0 de 60%
Qué es:
La interfaz ModelContext se define para SecureContext; HTTPS y localhost son la base mínima del laboratorio.
Por qué aprender:
La prueba correcta distingue entre la ausencia de la API, la configuración experimental y un fallo real del código.
Conceptos clave:
HTTPS en producción · localhost en el laboratorio · la flag puede variar · el origen importa
Qué es:
Vite ofrece un servidor local y módulos ES; Node ejecuta la automatización del proyecto, no la API WebMCP del documento.
Por qué aprender:
La separación permite desarrollar el sitio en cualquier browser y activar WebMCP solo mediante progressive enhancement.
Conceptos clave:
Node para tooling · Vite sirve la página · la API vive en el Document · el build no decide el soporte
Qué es:
La detección de funcionalidades consulta la capacidad real en el momento de uso, sin confiar en el user-agent ni en una versión fija.
Por qué aprender:
Como el draft cambia, detectar la superficie disponible es más duradero que codificar una lista de navegadores.
Conceptos clave:
prueba la propiedad · fallback es funcional · mensaje es honesto · sin sniffing
Qué es:
DevTools, la consola y un inspector local ayudan a observar el registro, el cambio de catálogo, la entrada y el resultado.
Por qué aprender:
Sin evidencia, es fácil confundir una tool bien registrada con una tool realmente segura y utilizable.
Conceptos clave:
consola estructurada · toolchange observable · inputs de prueba · resultado capturado
Qué es:
Los tipos ayudan al editor y un polyfill puede simular la superficie para las pruebas, pero ninguno demuestra la compatibilidad nativa del agente en el navegador.
Por qué aprender:
Distinguir la simulación de la implementación evita falsos positivos en el informe de preparación.
Conceptos clave:
types no ejecutan · polyfill simula · nativo es diferente · registra el modo
Qué es:
La matriz registra navegador, canal, flag, contexto seguro, fecha y resultado de la prueba.
Por qué aprender:
Una API experimental exige trazabilidad; «funciona aquí» no basta para un equipo ni para producción.
Conceptos clave:
fecha de la prueba · versión y canal · flag documentada · fallback verificado
1.33h
🧾 API declarativa experimental
Transforma formularios semánticos en herramientas comprensibles para los agentes y que el usuario sigue controlando.
0 de 60%
Qué es:
Los atributos toolname y tooldescription declaran la intención del formulario sin eliminar su semántica HTML.
Por qué aprender:
Es el camino de menor esfuerzo para flujos que ya tienen campos, validación y botón de envío.
Conceptos clave:
form sigue siendo HTML · toolname identifica · la descripción orienta · progressive enhancement
Qué es:
El name del control se convierte en la propiedad; toolparamdescription explica al agente su significado y el formato esperado.
Por qué aprender:
Las etiquetas ayudan a las personas, mientras que las descripciones precisas reducen los llenados plausibles pero incorrectos.
Conceptos clave:
name es la clave · label sirve a las personas · la descripción sirve para elegir · los ejemplos aclaran
Qué es:
Los tipos de input, required, min, max y las opciones contribuyen al schema sintetizado por el navegador.
Por qué aprender:
Reutilizar restricciones semánticas mantiene alineadas la herramienta y la versión manual del formulario.
Conceptos clave:
required se convierte en requisito · select limita los valores · min/max restringen · el algoritmo aún evoluciona
Qué es:
Sin toolautosubmit, el agente rellena el formulario y la página devuelve el control al usuario para que lo revise; con el atributo, el envío puede realizarse automáticamente.
Por qué aprender:
La elección debe seguir el riesgo y el efecto de la acción, no solo la conveniencia del flujo.
Conceptos clave:
ausente pide revisión · booleano habilita el envío · riesgo orienta la decisión · UI muestra el llenado
Qué es:
En los envíos activados por un agente, agentInvoked permite identificar el origen y respondWith entrega una Promise con el resultado estructurado.
Por qué aprender:
El agente recibe un protocolo verificable sin depender de extraer datos de la página después del envío.
Conceptos clave:
preventDefault primero · prueba agentInvoked · Promise como respuesta · error estructurado
Qué es:
El draft describe la activación y cancelación de herramientas; el soporte y el destino de los eventos deben confirmarse en el navegador utilizado.
Por qué aprender:
La interfaz debe seguir siendo legible cuando el agente inicia, el usuario revisa o se cancela la llamada.
Conceptos clave:
estado visual explícito · la cancelación limpia la UI · el draft puede cambiar · el fallback no depende de esto
1.43h
⚙️ API imperativa
Registra herramientas JavaScript con schemas, ejecución asíncrona, cancelación y resultados estructurados.
0 de 60%
Qué es:
document.modelContext.registerTool recibe name, title opcional, description, inputSchema, execute y annotations opcionales. El nombre admite de 1 a 128 caracteres ASCII alfanuméricos, guion bajo, guion o punto.
Por qué aprender:
La forma imperativa sirve para recorridos que no caben en un formulario o dependen de una lógica y un estado complejos.
Conceptos clave:
nombre único · descripción no vacía · execute obligatorio · el registro es una Promise
Qué es:
inputSchema usa JSON Schema para declarar propiedades, tipos, enums, descripciones y campos obligatorios.
Por qué aprender:
El schema forma parte del razonamiento para elegir y generar argumentos; la validación real aún debe hacerse en el código.
Conceptos clave:
type object · propiedades enfocadas · required coherente · valida en execute
Qué es:
El callback execute puede devolver una Promise; el valor resuelto se entrega al agente.
Por qué aprender:
Los resultados pequeños, tipados por convención y acompañados de evidencia facilitan la verificación y el encadenamiento.
Conceptos clave:
Se acepta Promise · el resultado es serializable · la UI se actualiza · los errores son útiles
Qué es:
El signal de registerTool elimina la herramienta cuando se aborta; el signal recibido por execute cancela la llamada en curso.
Por qué aprender:
Este modelo evita las herramientas obsoletas y que el trabajo continúe después de que el agente pierda el interés.
Conceptos clave:
signal de registro elimina · signal de ejecución cancela · fetch acepta signal · cleanup es determinístico
Qué es:
getTools enumera las herramientas expuestas al documento y executeTool ejecuta una RegisteredTool con una entrada estructurada.
Por qué aprender:
Estas operaciones hacen posibles los agentes in-page y las pruebas controladas sin simular un agente externo.
Conceptos clave:
getTools es asíncrono · el origen puede filtrar · execute usa RegisteredTool · cancelación opcional
Qué es:
Buscar, consultar y verificar disponibilidad forman una secuencia con responsabilidades distintas y sin una tool genérica.
Por qué aprender:
Un catálogo conciso mejora la elección del agente y crea una base clara para la fase Integrator.
Conceptos clave:
buscar lista · consultar detalla · disponibilidad verifica · sin superposición
CONTINUIDAD DEL BUILDER
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; ninguno cambia el rol del alumno a Integrator, Agent o Expert.