Ajustes de IA
Asistente de inteligencia artificial integrado en Bricks Builder con capacidades agentivas: lee tu página, entiende tu diseño y aplica cambios directamente en el editor. Solo se carga para administradores.
Casos de uso
El asistente no es un simple chatbot: es un agente que puede leer el estado de tu página, consultar datos de WooCommerce y aplicar cambios directamente en el editor de Bricks. Estos son algunos ejemplos prácticos de lo que puedes hacer:
Contenido y copywriting
- Generar descripciones de productos a partir de sus datos en WooCommerce
- Reescribir el texto de una sección hero con un tono diferente
- Crear contenido para secciones de FAQ, testimonios o beneficios
- Traducir contenido existente manteniendo el formato
Estilos y diseño visual
- Añadir clases CSS o Tailwind a elementos seleccionados
- Crear efectos hover, transiciones y animaciones
- Ajustar tipografía, espaciado y colores usando los tokens del tema
- Aplicar estilos responsive para distintos breakpoints
Estructura y layout
- Crear secciones completas (grids de productos, testimonios, pricing)
- Insertar estructuras de elementos de Bricks listas para usar
- Reorganizar layouts existentes
Consultas y análisis
- Preguntar sobre los elementos de la página actual
- Buscar productos en WooCommerce por nombre o categoría
- Consultar los colores y estilos definidos en el tema
Ejemplos de prompts
El asistente funciona mejor con instrucciones claras y específicas. Aquí tienes ejemplos por tipo de tarea:
| Prompt | Qué hace el asistente |
|---|---|
| "Escribe una descripción corta y persuasiva para este producto" | Lee los datos del producto actual en WooCommerce y genera el texto, aplicándolo al campo seleccionado |
| "Añade una sombra suave al hover de este botón" | Genera las clases CSS necesarias y las aplica directamente al elemento |
| "Crea una sección de 3 columnas con iconos y texto para beneficios" | Inserta una estructura completa de elementos Bricks con contenido de ejemplo |
| "¿Qué productos hay en la categoría Accesorios?" | Consulta WooCommerce y devuelve la lista de productos con sus datos |
| "Haz este texto más grande y en negrita con Tailwind" | Aplica las clases text-xl font-bold al elemento seleccionado |
| "¿Qué elementos tiene esta página?" | Lee el árbol de elementos de Bricks y devuelve un resumen estructurado |
Arquitectura
El asistente se compone de 3 archivos con responsabilidades separadas:
| Archivo | Responsabilidad |
|---|---|
| ai-settings.php | Configuración del proveedor, modelo, API keys y presets de acción |
| ai-api.php | Proxy server-side para llamadas a la API del proveedor de IA |
| ai-assistant.php | Interfaz frontend del asistente dentro de Bricks Builder |
Configuración
Toda la configuración se gestiona desde FlowKit > IA en el panel de WordPress.
Proveedores soportados
| Proveedor | Modelo por defecto | Endpoint |
|---|---|---|
| OpenAI | gpt-4.1-mini | api.openai.com/v1/chat/completions |
| Anthropic | claude-sonnet-4-20250514 | api.anthropic.com/v1/messages |
| OpenRouter | Configurable | openrouter.ai/api/v1/chat/completions |
| Custom | Configurable | Cualquier endpoint compatible con OpenAI |
Ajustes disponibles
| Ajuste | Descripción |
|---|---|
| API Key | Encriptada en la base de datos con el sistema de encriptación de FlowKit. Nunca visible en texto plano ni enviada al navegador |
| Modelo | Selección del modelo específico del proveedor |
| Prompt del sistema | Instrucciones base que recibe el asistente en cada conversación |
| Presets de acción | Acciones predefinidas reutilizables (ej: "Reescribir más corto", "Traducir al inglés") |
| Master prompt: clases | Instrucciones adicionales inyectadas en el modo Styles para guiar el uso de clases CSS/Tailwind |
| Master prompt: estructuras | Instrucciones adicionales inyectadas en el modo Layout para guiar la creación de estructuras Bricks |
Seguridad
- Las API keys se encriptan antes de guardar en
wp_optionsusandoHelpers::encrypt() - El frontend solo recibe la URL del proxy AJAX (
admin-ajax.php) y un nonce; nunca la API key ni el endpoint real - Todas las peticiones al proveedor de IA pasan por el proxy server-side de WordPress
- Los resultados de herramientas están limitados a 50KB por respuesta
- El bucle agentivo tiene un máximo de 10 iteraciones por petición
Modos de operación
El asistente ofrece 4 modos especializados, cada uno optimizado para un tipo de tarea:
| Modo | Especialidad | Ejemplo de uso |
|---|---|---|
| General | Consultas generales sobre Bricks, WordPress o el proyecto | "¿Cómo creo un loop de productos?" |
| Content | Generación y edición de contenido de texto | "Escribe una descripción para esta sección hero" |
| Styles | Modificación de clases CSS y estilos visuales | "Añade un efecto hover con sombra a este botón" |
| Layout | Creación y modificación de estructura HTML/Bricks | "Crea una sección de testimonios con 3 columnas" |
Herramientas
El asistente opera con un bucle agentivo de herramientas (tool-use loop) con un máximo de 10 iteraciones por petición. Esto significa que puede encadenar varias acciones para completar una tarea compleja: por ejemplo, leer los elementos de la página, buscar un producto y luego insertar contenido.
Herramientas server-side de lectura
Se ejecutan en el servidor de WordPress. Las 5 primeras son herramientas propias de FlowKit. Además, cualquier herramienta registrada por otros plugins en la WordPress Abilities API se descubre automáticamente y está disponible para el asistente.
| Herramienta | Función |
|---|---|
| get_page_elements | Obtiene el árbol completo de elementos de la página actual en Bricks (tipo, id, settings, parent, children). Acepta un page_id opcional |
| search_products | Busca productos en WooCommerce por nombre o keyword. Devuelve nombre, precio, slug, imagen y stock. Requiere query, acepta limit |
| get_theme_colors | Lee los tokens de diseño de flowtitude.css: colores OKLCH, tipografía, espaciado |
| get_site_pages | Lista páginas o posts del sitio con ID, título, slug, estado y template. Acepta post_type y limit |
| get_post_content | Lee el contenido de un post o página específica incluyendo título, excerpt, contenido y elementos de Bricks. Requiere post_id |
Herramientas server-side de escritura
Herramientas que pueden crear o modificar datos en WordPress:
| Herramienta | Función |
|---|---|
| create_page | Crea una nueva página de WordPress. Devuelve el ID y la URL de edición. Acepta title (requerido), content, status y template |
| update_post | Actualiza un post o página existente. Puede cambiar título, contenido, estado o excerpt. Requiere post_id |
| set_design_tokens | Modifica tokens del design system (flowtitude.css). Acepta un objeto tokens con pares nombre-valor |
Además, las herramientas de la WordPress Abilities API que otros plugins registren (Bricks, WooCommerce, etc.) se descubren automáticamente y están disponibles para el asistente. Las abilities anotadas como [read-only] o [destructive] se marcan para que el modelo de IA tenga contexto adicional de seguridad.
3 acciones client-side
Se ejecutan directamente en el navegador dentro del editor de Bricks. Son las que realmente modifican tu diseño.
| Acción | Función |
|---|---|
| apply_text_to_field | Aplica texto generado a un campo del elemento seleccionado en el editor |
| apply_css_classes | Añade, modifica o reemplaza clases CSS en un elemento de Bricks |
| insert_bricks_layout | Inserta una estructura completa de elementos de Bricks (secciones, columnas, textos, imágenes) |
[destructive] para que el modelo tenga contexto adicional de seguridad.
Integración con WindPress
Si tienes WindPress instalado (el plugin que añade Tailwind CSS a WordPress), el asistente lo detecta automáticamente y activa funcionalidades adicionales.
Modo "Tailwind Expert"
Cuando WindPress está activo, el asistente cambia su comportamiento en el modo Styles:
- Prioriza clases de Tailwind CSS sobre CSS personalizado
- Escribe las clases directamente en el input de WindPress del elemento seleccionado
- Conoce las utilidades de Tailwind v3/v4 y las aplica correctamente
- Genera código responsive con los prefijos de breakpoint de Tailwind (
sm:,md:,lg:)
Autodiscovery de habilidades
El asistente usa la WordPress Abilities API para descubrir qué puede hacer WindPress y otros plugins. El proceso es:
- Al cargar, FlowKit llama a
wp_get_abilities()para obtener todas las abilities registradas - Cada ability se convierte automáticamente en una herramienta disponible para el asistente
- El nombre, descripción y schema de parámetros se heredan de la ability original
Abilities excluidas
Algunas abilities se excluyen del autodiscovery por motivos de estabilidad:
| Prefijo excluido | Razón |
|---|---|
| mcp-adapter/* | Abilities internas del adaptador MCP que no deben ser invocadas directamente por el asistente |
| windpress/* | Implementación inestable de la Abilities API en WindPress que puede causar errores en tiempo de ejecución |
Si una ability de WindPress falla durante la ejecución, el error se captura con un try-catch y se devuelve como mensaje de error al modelo, sin interrumpir la sesión.
Compatibilidad MCP
El asistente incluye un MCP Adapter (v0.4.1) que permite la comunicación con herramientas externas compatibles con el protocolo MCP (Model Context Protocol).
- Compatible con Claude Code (Anthropic CLI)
- Compatible con Cursor y otros editores con soporte MCP
- Permite extender las capacidades del asistente con herramientas externas
Esto significa que puedes usar el asistente de FlowKit como una herramienta más dentro de tu flujo de trabajo con IA, controlándolo desde tu editor de código favorito.