⚡ Open source · MIT · Node 18+

Convierte cualquier web en herramientas para agentes de IA

Un archivo .webmcp.css mapea selectores a acciones como addToCart o login. Sin permisos del sitio, sin visión por computadora, con auto-reparación cuando el sitio se rediseña.

📦 Instalar desde npm 📖 Guías por agente

$ npm install -g webmcpcss

45agentes soportados

8formatos de exportación

204tests automatizados

0dependencias de pago

Flujo de trabajo

De cero a agente operando, en tres comandos

CSS estándar con propiedades webmcp-*. Los selectores que ya usas para dar estilo ahora también declaran qué puede hacer un agente.

Declara — o deja que se genere

tienda.webmcp.css

/* webmcpcss generate https://tienda.com --auto */
[data-product] .btn-add {
  webmcp-tool: "addToCart";
  webmcp-param-quantity: value(#qty);
  webmcp-confirmation: ".cart-badge";
}

También desde tu código fuente React/Vue/Svelte con --from-source, sin navegador.

Sirve por MCP o REST

zsh

# stdio para Claude, Cursor, Goose…
webmcpcss mcp --serve \
  --css tienda.webmcp.css \
  --url https://tienda.com
[webmcpcss] MCP stdio listo · 2 herramientas

El agente lista las herramientas y las ejecuta de verdad con navegador headless.

El sitio cambió: se auto-repara

zsh

webmcpcss repair https://tienda.com \
  tienda.webmcp.css
✔ .btn-add → [data-cy="add"]
✔ archivo actualizado (1 reparación)

Modo visión: reencuentra el elemento por huella (texto, atributos, tag) y reescribe el selector.

Capacidades

Todo incluido, cero fricción

TypeScript estricto, arquitectura modular y una CLI que cubre el ciclo completo: generar → validar → reparar → exportar → servir.

⚡

Generación automática

generate --auto escanea la página sin grabar nada: formularios, botones, campos. Detecta el framework (React, Vue, Svelte, Angular, Tailwind…) y elige selectores estables.

🧩

Desde el código fuente

generate --from-source analiza componentes JSX/Vue/Svelte sin navegador ni deploy, y avisa qué elementos necesitan data-tool. Úsalo como linter en CI.

🔌

Servidor MCP real

stdio JSON-RPC para Claude Desktop/Code, Cursor, Goose, Windsurf… y modo REST (/api/tools, /api/call) con ejecución real vía navegador.

📤

8 exportadores

Plugin Claude Code, Cursor, CrewAI, AutoGen, LangGraph, JSON Schema, browser-inject (window.__WEBMCP_GRAPH__) y config MCP universal.

🩹

Auto-reparación

Selectores rotos tras un rediseño se reencuentran por fingerprint y el archivo se actualiza solo. Con análisis de fragilidad: hashes CSS-Modules, Vue scoped, styled-components…

🕸️

Grafo + Obsidian

Tu tool map como grafo de conocimiento navegable, dashboard Cytoscape interactivo y bóveda Obsidian con backlinks para humanos y agentes de documentación.

Ecosistema

45 agentes, 4 dialectos universales

Si habla MCP, function calling, HTTP o controla un navegador — ya está soportado. Tabla completa y guías paso a paso →

Integración	Agentes	Comando
🔌 Servidor MCP	Claude DesktopClaude CodeCursorWindsurfGooseClineContinueCopilotGemini CLICodex CLI+8	`mcp --serve`
🐍 Módulos Python	CrewAIAutoGen / AG2LangGraphLangChain	`export --format crewai`
🌐 Navegador	ChatGPT AtlasOperatorProject MarinerCometSkyvernBrowser Use+2	`export --format browser-inject`
🧠 JSON Schema / REST	LlamaIndexSemantic KernelOpenAIGeminiMistraln8nDifyManus+4	`export --format json-schema`

Demo interactiva

Así ve un agente tu sitio

El grafo de examples/shopping-cart renderizado con Cytoscape.js — arrastra los nodos. Es el mismo motor de webmcpcss graph --dashboard.

página herramienta parámetro selector contexto

Comunidad

Estilos listos para sitios populares

Definiciones verificadas en vivo, mantenidas por la comunidad. Publica la tuya con webmcpcss publish --domain tusitio.com — el fork y el PR se abren solos.

➕ Contribuir mi estilo 📋 Guía de contribución

Cargando índice…

Los agentes descubren todo con una sola petición HTTP: community-styles/index.json