WebMCP en Estrategia Digital: implementación técnica, CTAs y mantenimiento del catálogo

Esta es la documentación técnica viva de cómo está implementado WebMCP en estrategiadigital.marketing. Sirve como referencia interna y como ejemplo público de una integración WebMCP en producción sobre React 18 + Vite + SSG. Cubre: requisitos del agente, arquitectura de archivos, las 7 tools registradas, los CTAs declarativos disponibles y el protocolo para mantener actualizado el catálogo cuando se publican nuevos servicios o posts. Si buscas la teoría general, consulta primero la guía completa de WebMCP 2026.

Requisitos del agente

Para invocar las tools imperativas de esta web, el agente debe cumplir uno de estos perfiles:

• Navegador con navigator.modelContext: Chrome 146+, Edge 149+ (en flag experimental) o cualquier runtime embedido que exponga la API draft del W3C. La detección se hace en isWebMCPSupported() dentro de src/lib/webmcp.ts.
• Agentes con lector de DOM accesible: Gemini Agent, ChatGPT Operator, Copilot Actions y Perplexity Comet leen los atributos data-webmcp-toolname, data-webmcp-tooldescription y data-webmcp-toolparamdescription sin necesidad de la API imperativa.
• Compatibilidad alternativa: si el navegador expone navigator.agent en lugar de navigator.modelContext (algunos forks experimentales), también se detecta automáticamente.

Cuando no se cumple ninguno, registerWebMCPTool devuelve un noop silencioso. La página nunca rompe ni muestra warnings al usuario final.

Arquitectura: archivos clave

Las 7 tools imperativas registradas

1. requestGeoAudit — Solicita auditoría GEO gratuita (48h). Inputs: nombre, email, dominio, sector.
2. contactSales — Pre-rellena el formulario de contacto para venta consultiva.
3. getServiceInfo — Devuelve metadata de un servicio por slug o lista completa por categoría (infraestructura, autoridad, captación, pilar).
4. searchBlogPosts — Busca posts por keyword en title + excerpt. Devuelve top 5 con slug, título y path.
5. getPricingInfo — Expone PRICING_INFO con los planes desde y enlace a /precios.
6. getBlogCategories — Agrupa el catálogo por categoría con count y posts ordenados por fecha desc. Punto de entrada para flujos guiados.
7. readBlogPost — Extrae H1, H2 y párrafos del DOM del post cuando ya está cargado. Si falta el slug, devuelve un nextStep hint sugiriendo invocar antes getBlogCategories.

Ejemplos de CTAs declarativos

Los CTAs declarativos viven en src/components/WebMCPTools.tsx como elementos invisibles (aria-hidden, hidden) que sólo aportan metadata al DOM. Patrón usado en producción:

<button
  hidden
  aria-hidden="true"
  data-webmcp-toolname="solicitar_auditoria_geo"
  data-webmcp-tooldescription="Inicia el flujo de auditoría GEO gratuita en 48h para análisis de visibilidad en ChatGPT, Gemini y AI Overviews"
  data-webmcp-toolparamdescription="dominio: URL de tu web | sector: vertical de tu negocio | email: contacto para enviar el informe"
/>

<button
  hidden
  aria-hidden="true"
  data-webmcp-toolname="solicitar_auditoria_tecnica"
  data-webmcp-tooldescription="Solicita una auditoría SEO técnica completa con diagnóstico priorizado"
  data-webmcp-toolparamdescription="dominio: URL de la web a auditar | email: contacto"
/>

<button
  hidden
  aria-hidden="true"
  data-webmcp-toolname="contactar_consultor_especializado"
  data-webmcp-tooldescription="Contacta con un consultor experto en el sector indicado (legal, salud, B2B, ecommerce)"
  data-webmcp-toolparamdescription="sector: vertical del cliente | email: contacto | mensaje: contexto opcional"
/>

Estos CTAs son complementarios a las tools imperativas: cubren a los agentes que aún no implementan navigator.modelContext pero sí escanean el DOM accesible.

Cómo mantener el catálogo cuando se publican rutas nuevas

El catálogo agentico no se actualiza solo. Cuando se publica un servicio o un post nuevo, hay que tocar tres puntos en este orden:

1. src/lib/webmcp.ts — añadir el entry en SERVICE_CATALOG o BLOG_CATALOG con todos los campos obligatorios (slug, title, description/excerpt, path, category y publishedDate en blog). Es la fuente única de verdad para los handlers.
2. src/ssg-paths.ts — añadir la ruta para que se pre-renderice en build. Sin esto, el agente recibe el shell de React vacío al hacer readBlogPost.
3. src/pages/Blog.tsx (sólo blog) — añadir el post a staticBlogPosts para que aparezca en el listado público con su imagen.

Si la nueva ruta requiere un CTA específico (por ejemplo "solicitar caso de éxito"), añadir también el bloque declarativo correspondiente en WebMCPTools.tsx y, si necesita lógica, registrar la tool imperativa en WebMCPProvider.tsx.

Checklist de publicación con WebMCP

1. ✅ Entry añadido en SERVICE_CATALOG o BLOG_CATALOG.
2. ✅ Ruta añadida en src/ssg-paths.ts y verificada con view-source: tras deploy.
3. ✅ Si es post: staticBlogPosts de Blog.tsx actualizado e imagen /blog/*.webp subida.
4. ✅ CTA declarativo añadido en WebMCPTools.tsx si procede.
5. ✅ Tool imperativa registrada en WebMCPProvider.tsx si requiere lógica.
6. ✅ WEBMCP.md y este post sincronizados con cualquier cambio estructural.
7. ✅ Prueba manual: invocar searchBlogPosts con una keyword del nuevo entry y verificar que aparece en los resultados.

Recursos relacionados

• Guía completa de WebMCP 2026 — teoría, arquitectura general y benchmark de adopción.
• 4 pilares SEO + IA en 2026 — encaje de WebMCP dentro de la estrategia integral.
• Servicio GEO 2026 — implementación profesional de la capa de visibilidad agentica.
• Solicitar auditoría de infraestructura agentica — diagnóstico para tu propio proyecto.

Preguntas frecuentes

¿Qué agentes pueden invocar las tools WebMCP de esta web?

Cualquier agente que implemente la API navigator.modelContext (Chrome 146+, Edge 149+, Gemini Agent, ChatGPT Operator, Copilot Actions, Perplexity Comet) o que sepa leer atributos data-webmcp-* en el DOM accesible. La implementación usa feature detection segura: si el navegador no soporta WebMCP, registerWebMCPTool devuelve un noop y la página funciona con normalidad.

¿Dónde se registran las tools imperativas del proyecto?

En src/components/WebMCPProvider.tsx, montado globalmente desde App.tsx. Define 7 tools: requestGeoAudit, contactSales, getServiceInfo, searchBlogPosts, getPricingInfo, getBlogCategories y readBlogPost. Cada una se registra dentro de useEffect tras la hidratación y se libera en el cleanup.

¿Cómo añado una nueva tool al catálogo?

Tres pasos: (1) si la tool depende de datos estáticos, añade el nuevo entry en src/lib/webmcp.ts (SERVICE_CATALOG o BLOG_CATALOG); (2) registra la tool en WebMCPProvider.tsx con su JSON Schema y handler; (3) si es una CTA visible, añade los atributos data-webmcp-* en el componente correspondiente o en WebMCPTools.tsx.

¿Cómo mantengo sincronizado el catálogo de servicios y blog?

SERVICE_CATALOG y BLOG_CATALOG en src/lib/webmcp.ts son la fuente única de verdad para los agentes. Cuando publiques un servicio o post nuevo: añade su entry (slug, title, excerpt, path, category, publishedDate) y verifica que la ruta exista también en src/ssg-paths.ts para que el agente pueda navegarla con HTML pre-renderizado.

¿Las tools envían formularios automáticamente?

No. Aplicamos el principio de intención sobre acción: los handlers devuelven datos estructurados o pre-rellenan campos, pero el envío final lo confirma el usuario humano. Esto evita prompt injection, cumple RGPD y mantiene al usuario en el loop incluso cuando el agente actúa por él.

¿Cómo evito errores de StrictMode en desarrollo?

registerWebMCPTool en src/lib/webmcp.ts mantiene un Map que detecta registros duplicados y libera el anterior automáticamente. Esto neutraliza el doble-mount de React 18 StrictMode y los reloads de HMR sin lanzar 'Tool already registered'.

¿WebMCP rompe el SSG o el build de Netlify?

No. Toda la API se ejecuta dentro de useEffect con feature detection (typeof navigator === 'undefined' || !('modelContext' in navigator)). Durante el prerender estático no se invoca nada relacionado con navigator, así que el HTML generado es idéntico al de cualquier página React normal.