WebMCP: Como preparar su sitio web para agentes de IA (Guia practica 2026)

Matthias Meyer

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:

	MCP (Anthropic)	WebMCP (W3C)
Donde	Servidores backend	Navegador (lado del cliente)
Como	JSON-RPC sobre HTTP/stdio	API `navigator.modelContext`
Quien lo usa	Claude, ChatGPT, Cursor, VS Code	IA del navegador, Gemini, asistentes integrados
Enfoque	Llamadas a herramientas en servidores	Funcionalidades del sitio web en el navegador

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

Backend (MCP): agents.json + agent-card.json para descubrimiento de herramientas
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": "0.3.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)

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

Esta Semana (Esfuerzo: medio dia)

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

Este Mes

API Imperativa WebMCP -- Herramientas JavaScript para flujos complejos
Optimizar descripciones de herramientas -- Claras, precisas, con descripcion de valores de retorno
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):

Check	Puntos
agents.json accesible + valido	5
agent-card.json con skills A2A	3
Atributos WebMCP Declarativos	2
Maximo	110/110

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.