MallaDocs
InicioInicio rápidoAbrir Malla

Edita con IA y MCP

Cambia páginas con el panel de IA y conecta Claude u otro agente a través de MCP.

Guía de usuario
Intermedio20 min

Vas a construir: Una sección de página construida y pulida con el panel de IA, y luego editada desde Claude a través del servidor MCP

Lee primero: Recorrido por el editorConstruye una landing page

En este tutorial construyes una sección describiéndola, la pules, dejas que la IA escriba los textos de búsqueda y de las imágenes, y luego conectas Claude para que pueda editar tu sitio desde fuera del editor. Necesitas el rol Editor, Admin u Owner en el sitio. Para crear una clave de API se necesita un propietario o administrador del espacio de trabajo.

Edita con IA y MCPEl video llegará pronto. Los pasos escritos a continuación cubren todo.
Edita con IA y MCP· 9 min

Construye una sección con el panel de IA

  1. Abre el panel

    Abre una página en el editor y presiona Ask AI en la parte inferior del lienzo. El encabezado del panel muestra sobre qué va a trabajar la IA: Whole page cuando no hay nada seleccionado.

  2. Describe la sección

    Sin nada seleccionado, el menú de tareas junto a Send está en Generate. Escribe lo que quieres, por ejemplo:

    Agrega una sección de precios con tres planes uno al lado del otro: Free, Pro y Team. Cada plan tiene un nombre, un precio, tres características y un botón.

    Presiona Send, o ⌘↵.

  3. Mira cómo trabaja

    El panel muestra cada paso a medida que la IA lo da, como Inserted elements o Created class. Nada cambia en el lienzo hasta que la IA termina; entonces todo el cambio llega de una vez. Presiona Stop para cancelar, y no se aplica nada.

Punto de control

Aparece en la página una sección de precios con tres planes, en todas las mesas de trabajo.

Pule lo que hizo

  1. Selecciona y pide

    Selecciona la sección de precios. El encabezado ahora muestra 1 element selected y la tarea cambia a Edit. Pide un cambio:

    Apila los planes verticalmente en teléfonos y haz que el plan Pro destaque con el color de acento.

  2. Usa tus propios estilos

    La IA conoce tus clases, tokens y componentes. Nómbralos en el prompt para mantener la página consistente, por ejemplo "usa mi clase button-primary para los botones".

  3. Deshaz un cambio completo

    ¿No es lo que querías? Presiona ⌘Z. Una solicitud a la IA es un solo paso de deshacer, así que todo el cambio se revierte de una vez. Luego prueba con un prompt más preciso.

Deja que la IA escriba textos

  1. Escribe el texto alternativo

    Selecciona las imágenes de la página. La tarea cambia a Alt text. Escribe "Describe cada imagen para lectores de pantalla" y presiona Send.

  2. Escribe los textos de búsqueda

    Haz clic en un espacio vacío del lienzo, elige SEO en el menú de tareas y escribe "Escribe un título y una descripción de búsqueda para esta página". El resultado aparece en la sección SEO de los ajustes de la página. Léelo y ajústalo antes de publicar.

El menú de tareas también tiene Binding, para conectar un elemento con datos, y Workflow, para agregar lógica a la página.

Conecta Claude con MCP

MCP (Model Context Protocol) permite que un agente de IA como Claude lea y edite tus sitios desde fuera del editor. El agente se conecta con una clave de API y trabaja con las mismas herramientas que el panel de IA.

  1. Crea una clave de API

    En el panel de IA, presiona el ícono de llave (API keys). Escribe un nombre como Claude Code, marca Write para que el agente pueda hacer cambios y presiona Create.

  2. Copia la clave

    La clave empieza por mk_. Presiona Copy ahora: no se vuelve a mostrar. Guárdala en un lugar seguro, como los ajustes de secretos de tu agente.

  3. Agrega el servidor a tu agente

    La dirección MCP es el host MCP de tu instalación de Malla seguido de /mcp, por ejemplo https://mcp.example.com/mcp. Envía la clave como token bearer. En Claude Code:

    bash
    claude mcp add --transport http malla https://mcp.example.com/mcp \
  --header "Authorization: Bearer mk_your_key"

    En otros clientes MCP, agrega un servidor HTTP con la misma dirección y un encabezado Authorization con el mismo valor.

  4. Prueba una lectura

    Pídele a tu agente "Muestra mis sitios de Malla" y luego "Muestra las páginas del sitio Demo". Usa las herramientas list_sites y list_pages.

  5. Haz una edición

    Deja la página abierta en el editor y pide: "Agrega una sección de preguntas frecuentes con tres preguntas debajo de la sección de precios en la página de inicio." La sección aparece en el lienzo mientras miras, y cualquier otra persona con la página abierta también la ve.

Listo

La página tiene una sección de precios hecha en el panel de IA y una sección de preguntas frecuentes agregada por tu agente a través de MCP.

Prompts para probar

  • "Convierte esta fila en una cuadrícula de tres columnas en escritorio y de una columna en teléfonos."
  • "Agrega una sección de testimonios con tres citas, usando mi clase de tarjeta."
  • "Haz más grande el titular del hero y agrega más espacio encima del botón."
  • "Escribe el texto alternativo de estas imágenes."
  • A través de MCP: "Muéstrame las clases y los tokens de mi sitio", y luego "Cambia el estilo del pie de página con esos tokens."

Lo que aprendiste

  • El panel de IA trabaja sobre la selección, o sobre toda la página cuando no hay nada seleccionado, y cada solicitud es un solo paso de deshacer.
  • El menú de tareas elige el tipo de cambio: Generate, Edit, Binding, Workflow, Alt text o SEO.
  • Una clave de API conecta un agente con el servidor MCP; actúa como tú, y Write decide si puede hacer cambios.

Lee las guías en las que se basa este tutorial:

IA y MCPEdita con el panel de IA y conecta agentes como Claude a través del servidor MCP y las claves de API.Clases y tokensClases reutilizables, clases combinadas, tokens de diseño y fuentes que mantienen todo un sitio consistente.SEO y ajustes del sitioTítulos de página, descripciones, imágenes para redes sociales, sitemaps, robots y noindex.API HTTPLa API del editor, los endpoints de los sitios publicados y el endpoint MCP.