--- title: "WebMCP 2026: Prepara tu web para agentes de IA (3 capas, 2 APIs)" description: "Google y Microsoft cambiaron la web con WebMCP. Las 3 capas, 2 APIs y el unico objetivo: hacer tu web utilizable para agentes de IA, con ejemplos de codigo." author: "Matthias Meyer" published: 2026-02-27 updated: 2026-02-27 language: es tags: ["webmcp", "ai-ready", "agents-json", "w3c", "chrome-146", "agent-discovery", "a2a"] canonical: "https://studiomeyer.io/es/blog/webmcp-website-ai-agent-ready" markdown_versions: ["https://studiomeyer.io/de/blog/webmcp-website-ai-agent-ready.md", "https://studiomeyer.io/en/blog/webmcp-website-ai-agent-ready.md", "https://studiomeyer.io/es/blog/webmcp-website-ai-agent-ready.md"] publisher: "StudioMeyer, https://studiomeyer.io (llms.txt: https://studiomeyer.io/llms.txt)" --- # 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: | | 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: 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: ```html
``` 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: ```javascript 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: ```json { "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: ```json { "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) 4. **API Declarativa WebMCP** -- Atributos `data-mcp-tool` en sus formularios principales 5. **Verificar Datos Estructurados** -- JSON-LD (Schema.org) es la base de todo 6. **Verificar su Score AI-Ready** -- [studiomeyer.io/website-check](https://studiomeyer.io/website-check) ofrece una verificacion gratuita ### Este Mes 7. **API Imperativa WebMCP** -- Herramientas JavaScript para flujos complejos 8. **Optimizar descripciones de herramientas** -- Claras, precisas, con descripcion de valores de retorno 9. **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.* ## Seguir leyendo, WebMCP - [WebMCP en la Realidad: Dónde Está el Spec Realmente](https://studiomeyer.io/es/blog/webmcp-reality-check-may-2026.md) - [¿Qué es WebMCP? El nuevo lenguaje entre sitios web e IA](https://studiomeyer.io/es/blog/was-ist-webmcp.md) - [AI-Ready en 5 días: Instalación de WebMCP para su sitio web](https://studiomeyer.io/es/blog/webmcp-ai-ready-installation.md)