WebMCP 2026: Prepara tu web para agentes de IA (3 capas, 2 APIs)

En febrero de 2026, Google y Microsoft cambiaron silenciosamente la web. El nuevo estandar W3C WebMCP (Web Model Context Protocol) permite a los sitios web exponer sus funcionalidades como herramientas estructuradas para agentes de IA. Sin scraping, sin adivinar capturas de pantalla, sin automatizaciones fragiles del navegador. En su lugar: un menu claro que su sitio web ofrece a cada asistente de IA.

Este articulo explica que es WebMCP, como se diferencia del MCP de backend, y que debe hacer ahora para preparar su sitio web para la era de la web agentica.

Por Que Esto Importa#

Los agentes de IA son los nuevos visitantes. ChatGPT, Claude, Gemini, Perplexity y los asistentes del navegador ya estan rastreando sitios web -- pero hasta ahora, a ciegas. Toman capturas de pantalla, adivinan donde estan los botones y fallan cuando el diseno cambia.

WebMCP pone fin a las suposiciones. Su sitio web le dice directamente al agente: "Aqui estan mis funcionalidades. Llamalas asi."

Los Numeros#

• Chrome 146 tiene WebMCP desde febrero de 2026 en preview (estable en marzo 2026)
• Microsoft Edge lo sigue (Microsoft coautor del estandar)
• El 97,1% de todas las descripciones de herramientas MCP tienen al menos un problema de calidad segun un estudio reciente -- hacerlo bien marca la diferencia
• Menos del 1% de todos los sitios web han implementado agents.json -- ventaja masiva para los pioneros

WebMCP vs. MCP: Dos Estandares, Un Objetivo#

Los terminos suenan similares pero son diferentes:

Ambos son complementarios. Un sitio web AI-Ready implementa idealmente ambos:

1. Backend (MCP): agents.json + agent-card.json para descubrimiento de herramientas
2. Frontend (WebMCP): navigator.modelContext para interaccion nativa del navegador

Las Dos APIs de WebMCP#

1. API Declarativa (Atributos HTML)#

La forma mas sencilla de hacer formularios accesibles para agentes de IA. No requiere conocimientos de JavaScript:

<form data-mcp-tool="make_reservation"
      data-mcp-description="Reservar una mesa en nuestro restaurante">
  <input name="date" type="date" placeholder="Fecha" />
  <input name="guests" type="number" placeholder="Personas" />
  <input name="name" type="text" placeholder="Su nombre" />
  <button type="submit">Reservar</button>
</form>

El navegador reconoce automaticamente los campos del formulario y los expone como herramienta. Un agente de IA puede decir: "Reserva una mesa para 4 el viernes" -- y el formulario se completa de forma estructurada.

2. API Imperativa (JavaScript)#

Para herramientas mas complejas con validacion, llamadas API y comportamiento dinamico:

navigator.modelContext.registerTool({
  name: "search_properties",
  description: "Buscar propiedades disponibles por ubicacion, precio y tipo",
  inputSchema: {
    type: "object",
    properties: {
      location: { type: "string", description: "Ciudad o distrito" },
      maxPrice: { type: "number", description: "Precio maximo en EUR" },
      type: { type: "string", enum: ["apartment", "house", "commercial"] }
    }
  },
  annotations: {
    readOnlyHint: true,
    idempotentHint: true
  },
  handler: async (params) => {
    const res = await fetch(`/api/v1/listings?${new URLSearchParams(params)}`);
    return res.json();
  }
});

Annotations: Seguridad Integrada#

Las annotations le dicen al agente de IA como manejar cada herramienta:

• readOnlyHint: "Esta herramienta solo lee datos" -- el agente puede ejecutarla sin preguntar
• destructiveHint: "Esta herramienta elimina/modifica datos" -- el agente debe preguntar al usuario
• requiresConfirmation: "El usuario debe confirmar" -- para reservas, pedidos, formularios de contacto

Las 3 Capas de un Sitio Web AI-Ready#

Capa 1: Descubrimiento (agents.json)#

Un archivo JSON en /.well-known/agents.json que describe lo que su sitio web puede hacer:

{
  "schema_version": "1.0",
  "name": "Mi Restaurante",
  "tools": [
    {
      "name": "get_menu",
      "description": "Ver el menu con categorias y precios",
      "endpoint": "/api/v1/menu",
      "method": "GET"
    },
    {
      "name": "make_reservation",
      "description": "Reservar una mesa",
      "endpoint": "/api/v1/reservation",
      "method": "POST"
    }
  ]
}

Agentes de IA como ChatGPT y Claude verifican este archivo automaticamente. Cuando un usuario pregunta "Encuentra un restaurante con opciones veganas y reserva para el sabado", el agente puede encontrar su sitio web Y actuar directamente.

Capa 2: Agente-a-Agente (agent-card.json)#

El protocolo A2A (Agent-to-Agent) permite la comunicacion entre agentes de IA:

{
  "name": "Mi Restaurante",
  "protocolVersion": "1.0",
  "skills": [
    {
      "id": "reservation",
      "name": "Reserva de Mesa",
      "description": "Reservar una mesa para cenar",
      "tags": ["reserva", "restaurante", "booking"]
    }
  ]
}

Capa 3: Herramientas Nativas del Navegador (WebMCP)#

La API navigator.modelContext registra herramientas directamente en el navegador. Funciona con asistentes del navegador, Google Gemini y futuras funciones de IA integradas.

Que Hacer Ahora#

Inmediatamente (Esfuerzo: 1-2 horas)#

1. Crear agents.json -- Describa 3-5 acciones principales de su sitio web
2. Crear agent-card.json -- Skills A2A para las funciones mas importantes
3. Desplegar ambos bajo /.well-known/ con cabeceras CORS (Access-Control-Allow-Origin: *)

Esta Semana (Esfuerzo: medio dia)#

1. API Declarativa WebMCP -- Atributos data-mcp-tool en sus formularios principales
2. Verificar Datos Estructurados -- JSON-LD (Schema.org) es la base de todo
3. Verificar su Score AI-Ready -- studiomeyer.io/website-check ofrece una verificacion gratuita

Este Mes#

1. API Imperativa WebMCP -- Herramientas JavaScript para flujos complejos
2. Optimizar descripciones de herramientas -- Claras, precisas, con descripcion de valores de retorno
3. Agregar analytics -- Rastrear que herramientas usan los agentes

Ejemplos por Industria#

Restaurante#

• get_menu (carta con alergenos)
• check_availability (verificar disponibilidad de mesas)
• make_reservation (reservar una mesa)

Inmobiliaria#

• search_listings (filtrar propiedades por precio, ubicacion, tamano)
• get_property_details (listing con fotos y plano)
• request_viewing (agendar una visita)

Oficios y Servicios#

• get_services (servicios y precios)
• request_quote (solicitar presupuesto)
• check_availability (proxima cita disponible)

El Score AI-Ready#

Hemos ampliado el AI-Ready Score. Ademas de los checks clasicos de SEO y rendimiento, ahora hay un Bonus de Agent Discovery (hasta 10 puntos extra):

Los sitios web con integracion completa de agentes de IA reciben la calificacion A++ -- menos del 1% de todos los sitios web alcanzan este nivel.

Verificacion gratuita: Pruebe su sitio web en studiomeyer.io con nuestra herramienta AI-Ready.

Conclusion#

WebMCP es para los agentes de IA lo que el diseno responsive fue para los dispositivos moviles: Primero opcional, luego esperado, luego obligatorio. Los sitios web que construyan sus interfaces de herramientas ahora seran los que los agentes de IA prefieran usar.

La buena noticia: Empezar es sencillo. Un agents.json, unos pocos atributos HTML, y su sitio web habla el idioma de la IA.

StudioMeyer ayuda a empresas a preparar sus sitios web para la IA. Desde agents.json hasta la integracion completa de WebMCP -- como parte de nuestros paquetes de sitios web premium o como una actualizacion AI-Ready unica para sitios web existentes.