Tuli Builder

Servidor MCP de WordPress integrado en Tuli Builder: los agentes de IA crean páginas, plantillas, bucles de consulta y tipos de contenido personalizados.

Ver en tulibuilder.com

Documentación

1. Requisitos

  • WordPress 6.0 o superior
  • PHP 7.4 o superior
  • Una licencia activa de Tuli Builder (compra única, consulta precios)
  • Opcional: una clave API de OpenRouter para el asistente de IA integrado
  • Opcional: un agente de IA compatible con MCP (Claude Code, Codex CLI, Gemini CLI, Cursor, Windsurf, VS Code, OpenCode, Antigravity, Claude Desktop)

Las copias locales y de prueba de un sitio no cuentan para el límite de sitios de tu licencia.

2. Instalar y activar Tuli Builder

  1. Compra una licencia en la página de precios. Recibirás tu clave de licencia por correo electrónico y en el Portal del Cliente.
  2. En el Portal del Cliente, abre Descargas y descarga el archivo zip del tema Tuli.
  3. En WordPress, ve a Apariencia → Temas → Añadir nuevo → Subir tema, elige el archivo zip, luego haz clic en Instalar ahora y Activar.
  4. Ve a Tuli → Licencia, pega tu clave de licencia y actívala.

Tuli es un tema y un constructor de páginas en uno, por lo que no necesitas un plugin de constructor separado.

3. Crea tu primera página

  1. Crea una página en Páginas → Añadir nueva, o abre una existente.
  2. Haz clic en Editar con Tuli. Aparece en la pantalla de edición, en las acciones de fila de la lista de páginas y en la barra de administración.
  3. Arrastra elementos desde la biblioteca de elementos (más de 60 elementos, incluyendo secciones, contenedores, encabezados, botones, imágenes, deslizadores, pestañas, acordeones, formularios y menús), o pide al asistente de IA que construya la página.
  4. Selecciona cualquier elemento para editarlo en el panel de estilos, o escribe CSS directamente. El panel y el CSS se mantienen sincronizados en ambos sentidos.
  5. Usa los conmutadores de dispositivo para establecer estilos de tableta y móvil. Se escriben como consultas de medios CSS reales.
  6. Haz clic en Guardar.

Por defecto, el constructor está habilitado para Páginas y Plantillas. Puedes activarlo para otros tipos de contenido en Tuli → Ajustes → General.

4. Convertir HTML a WordPress

Pega HTML, CSS y JavaScript en el constructor, y Tuli asigna cada etiqueta al panel de Estructura como un elemento editable. Esto funciona para páginas codificadas a mano, plantillas que hayas comprado y sitios generados con ChatGPT, Claude, Lovable u otras herramientas de IA. Los selectores, abreviaturas, comentarios y consultas de medios se conservan tal cual. Las reglas de clase van al CSS global para que puedas reutilizarlas en otras páginas.

Guía paso a paso: Cómo convertir HTML a WordPress y De ChatGPT a WordPress.

5. Configurar el asistente de IA

  1. Crea una clave API en openrouter.ai. Una clave te da acceso a modelos de Anthropic (Claude), OpenAI (GPT), Google (Gemini), xAI, DeepSeek, Qwen y otros. OpenRouter te factura por modelo.
  2. En WordPress, ve a Tuli → Ajustes → OpenRouter, pega la clave y elige un modelo predeterminado.
  3. Abre cualquier página con Editar con Tuli y describe lo que quieres en el panel del Asistente de IA. Por ejemplo: "Créame un sitio web de portafolio para un fotógrafo". Escribe @ para adjuntar una página o plantilla como contexto.
  4. El asistente escribe HTML, CSS y JavaScript en vivo sobre el lienzo. Revisa la vista previa y luego haz clic en Guardar para conservar los cambios.

Tu clave API se almacena en tu servidor y nunca se envía al navegador.

6. Conectar un agente de IA con el servidor MCP

Tuli Builder incluye un servidor MCP de WordPress (Model Context Protocol, HTTP Streamable). Una vez que un agente de IA está conectado, puede gestionar el sitio por ti: páginas, entradas, diseños de Tuli, plantillas, bucles de consulta, tipos de contenido personalizados, taxonomías, medios, plugins y CSS/JS global.

Activarlo

  1. Ve a Tuli → Ajustes → Servidor MCP y marca Habilitar el servidor MCP para este sitio. Guarda.
  2. En Contraseñas de aplicación, crea una contraseña. Ponle un nombre, elige qué usuario representa, marca las acciones que puede realizar (o elige acceso completo) y añade instrucciones opcionales para el agente.
  3. Copia los datos de conexión de inmediato, porque la contraseña solo se muestra una vez. Tuli te ofrece un mensaje listo para el agente, además de fragmentos de configuración para cada cliente.

Puedes revocar cualquier contraseña de aplicación en cualquier momento. Los agentes nunca pueden cambiar ni cambiar tu tema. El servidor MCP requiere una licencia activa.

Datos de conexión

  • Endpoint: https://your-site.com/wp-json/tuli/v1/mcp
  • Transporte: HTTP (Streamable HTTP)
  • Cabecera: Authorization: Bearer YOUR_APPLICATION_PASSWORD

Claude Code

claude mcp add --transport http my-site https://your-site.com/wp-json/tuli/v1/mcp --header "Authorization: Bearer YOUR_APPLICATION_PASSWORD"

OpenAI Codex CLI

codex mcp add my-site -- npx -y mcp-remote https://your-site.com/wp-json/tuli/v1/mcp --header "Authorization: Bearer YOUR_APPLICATION_PASSWORD"

Gemini CLI

gemini mcp add --transport http my-site https://your-site.com/wp-json/tuli/v1/mcp --header "Authorization: Bearer YOUR_APPLICATION_PASSWORD"

Cursor, Windsurf, VS Code y otros clientes configurados con JSON

{
  "mcpServers": {
    "my-site": {
      "type": "http",
      "url": "https://your-site.com/wp-json/tuli/v1/mcp",
      "headers": { "Authorization": "Bearer YOUR_APPLICATION_PASSWORD" }
    }
  }
}

Dónde va el archivo: Cursor usa ~/.cursor/mcp.json o .cursor/mcp.json. Windsurf usa ~/.codeium/windsurf/mcp_config.json (con serverUrl en lugar de url). VS Code usa .vscode/mcp.json. OpenCode usa opencode.json. La pantalla de ajustes de Tuli muestra el fragmento exacto para cada cliente.

Claude Desktop y otros clientes solo stdio

{
  "mcpServers": {
    "my-site": {
      "command": "npx",
      "args": ["mcp-remote", "https://your-site.com/wp-json/tuli/v1/mcp", "--header", "Authorization: Bearer YOUR_APPLICATION_PASSWORD"]
    }
  }
}

Esto usa el puente mcp-remote, que requiere Node.js. Reinicia el cliente después de guardar.

Qué pedir al agente

  • "Crea una página de aterrizaje para nuestras rebajas de primavera con un héroe, tres tarjetas de características y un CTA de registro."
  • "Añade un tipo de contenido personalizado Propiedad con campos de precio, dormitorios, baños y ciudad, seis listados de ejemplo y una página de listados filtrables."
  • "Escribe y publica una entrada de blog sobre nuestros nuevos precios, con una imagen destacada."
  • "Construye una plantilla de cabecera y pie de página y muéstralas en todas las páginas."

Video explicativo: Crea un sitio web de WordPress usando Claude Code a través del servidor MCP.

7. Plantillas: cabecera, pie de página, entrada individual, archivo

En Tuli → Plantillas puedes construir cabeceras, pies de página, diseños de entrada individual, archivos, páginas 404 y de búsqueda, además de secciones reutilizables. Cada plantilla tiene condiciones de visualización: reglas de inclusión y exclusión con prioridad, para que controles exactamente dónde aparece. Construye una sección una vez y reutilízala en cualquier página con el elemento Plantilla.

8. Bucles de consulta y datos dinámicos

Activa un bucle de consulta para cualquier elemento y se repetirá una vez por resultado. Las fuentes incluyen WP_Query (tipo de contenido, cantidad, orden, filtros de taxonomía y metadatos), la consulta principal, PHP sin procesar, un repetidor de ACF o relaciones de WooCommerce. Añade el elemento Filtro para el filtrado AJAX y el elemento Paginación para paginar.

Para imprimir valores en vivo en cualquier texto o atributo, usa tokens de datos dinámicos entre llaves:

  • {get_the_title}: título de la entrada
  • {get_permalink}: URL de la entrada
  • {get_the_excerpt}: extracto
  • {get_the_post_thumbnail_url}: URL de la imagen destacada
  • {acf:field_name}: cualquier valor de Advanced Custom Fields

Puedes llamar a cualquier función de WordPress o PHP personalizada de la misma manera, y dentro de un bucle cada token se resuelve para el elemento actual.

9. WooCommerce, ACF y WP Grid Builder

  • WooCommerce: más de 30 elementos nativos, incluyendo título de producto, precio, añadir al carrito, galería, pestañas, productos relacionados, carrito, finalizar compra, mi cuenta y mini carrito. Guía: Crea una tienda WooCommerce con IA.
  • ACF: los nombres de campo aparecen automáticamente en el selector de datos dinámicos, y los repetidores de ACF pueden impulsar bucles de consulta.
  • WP Grid Builder: se admiten los elementos Facet, Grid y View More.
  • Todo lo demás: bloques de Gutenberg, cualquier shortcode, PHP sin procesar (se puede desactivar) y Google Fonts.

10. Soporte

Las licencias incluyen actualizaciones de por vida y soporte. Mira los tutoriales en video, consulta las preguntas frecuentes o contáctanos. Gestiona tus licencias, sitios y descargas en el Portal del Cliente.