Catálogo IA-First · v1.3.0

Componentes que hablan con agentes, listos para tu librería.

Cada componente trae su HTML, su .webmcp.css (el contrato que describe qué puede hacer un agente) y metadatos para Tailwind, Bootstrap, Material UI, shadcn/ui o CSS puro. Previsualiza, edita en vivo, copia e importa con un comando.

Explorar el catálogo Empezar en 2 minutos

58componentes

5librerías

6categorías

82herramientas declaradas

Categorías

Botones20 componentes Tarjetas10 componentes Formularios10 componentes Layout10 componentes Animaciones4 componentes Inteligentes4 componentes

Librerías

Core (sin librería)18 componentes Tailwind CSS10 componentes Bootstrap10 componentes Material UI10 componentes shadcn/ui10 componentes

Destacados

BotonesTailwind CSS

Button Primary

Botón primario IA-First: ejecuta la acción principal del bloque (enviar, guardar, continuar) y la declara como herramienta clickButton.

clickButton

InteligentesCore (sin librería)

Checkout Form

Formulario de pago IA-First: dirección, envío y cupón con API declarativa, permisos full, autenticación requerida, límite de uso y confirmación obligatoria; expone total y artículos como contexto.

placeOrderapplyCoupon

Tarjetasshadcn/ui

Product Card

Tarjeta de producto IA-First: imagen, nombre, precio y acciones addToCart / viewDetails; expone nombre y precio como contexto para agentes.

addToCartviewDetails

InteligentesCore (sin librería)

Hero Section (parallax)

Sección hero inteligente IA-First: fondo parallax por capas, entrada animada del título y CTAs declaradas como herramientas; combina el estándar de animaciones con el contrato de agentes.

exploreCatalogcontactSales

FormulariosBootstrap

Login Form

Formulario de acceso IA-First (email + contraseña) con API declarativa WebMCP (toolname/tooldescription), confirmación requerida y permisos restringidos.

login

InteligentesCore (sin librería)

Parallax Scene (2.5D)

Escena 2.5D isométrica IA-First con Three.js (webmcp-animation-type: three-scene): capas de color con parallax al ratón, botón para reproducirla y contexto con el estado; todo declarado en CSS.

replayScene

Cómo funciona

Elige un componente y ajústalo en el editor en vivo (color, radio, animación).
```
npx webmcpcss components list --library tailwind
```
Impórtalo: se copian el HTML, el .webmcp.css y component.json a tu proyecto y se registra la versión.
```
npx webmcpcss components import tailwind-button-primary --output ./src/components
```
Sírvelo a los agentes: el contrato se expone por MCP, por document.modelContext o por la API declarativa de WebMCP.
```
npx webmcpcss mcp --serve --css ./src/components/tailwind-button-primary/button-primary.webmcp.css --hub
```

Mantenlo al día y comparte los tuyos.

npx webmcpcss components update
npx webmcpcss components publish ./mi-boton.webmcp.css --name "Mi botón" --category buttons

Para agentes

Este sitio declara <meta name="webmcp-hub">, JSON-LD y un índice legible por máquinas. Un agente MCP puede descubrir e importar componentes con las herramientas list_components, get_component e import_component del servidor webmcpcss mcp --serve --hub, o leer directamente:

https://cochinoraptor.github.io/WebMCPcss/api/components.json