Cómo crear un generador de contenido con IA para Webflow

Cómo crear un generador de contenido con IA que escriba en el CMS de Webflow con Webflow Cloud

Un Worker público independiente con Access-Control-Allow-Origin: * y un botón de "Guardar en el CMS" es el formato más común que veo en los generadores de contenido con IA en Webflow, y es el más arriesgado de implementar.

La URL del Worker es fácil de encontrar, la /save ruta no tiene autenticación y cualquiera que encuentre el punto de conexión puede enviar contenido arbitrario al CMS hasta que cambies el token y te des cuenta del daño.

Los controladores de rutas de Webflow Cloud App solucionan la mitad de esto. La clave de API de OpenAI y el token de API de Webflow residen en variables de entorno del lado del servidor, por lo que no aparecen en el código del cliente, y el controlador de rutas se aloja en el dominio de tu sitio Webflow, por lo que no hay configuración de CORS ni una URL de Worker independiente que gestionar.

Sin embargo, el punto de conexión sigue siendo accesible públicamente, lo que significa que un controlador de rutas por sí solo no es suficiente. El resto de esta guía añade un encabezado con secreto compartido para un prototipo funcional y señala la autenticación basada en sesiones como la solución de nivel profesional.

¿Qué necesitas para crear un generador de contenido con IA con Webflow Cloud?

Necesitas una Webflow Cloud App, una clave de API de OpenAI, un token de API de Webflow con acceso a tu sitio y una colección del CMS de Webflow para recibir el contenido generado.

Asegúrate de confirmar estos requisitos previos antes de empezar:

• Unacceso a la API de OpenAI: En esta guía, usamos gpt-5.6-luna, el nivel económico de la generación actual de OpenAI, que es más que capaz para introducciones de blogs, descripciones de productos y contenido similar. Establece un límite de gasto mensual antes de escribir una sola línea de código.
• Un sitio de Webflow con un plan que incluya el CMS: Las escrituras en el CMS pasan por la API de datos, por lo que el sitio necesita capacidad de CMS. Ten en cuenta que los antiguos planes de sitio CMS y Business se fusionaron en Premium en 2026, así que ese es el nivel que debes buscar en lugar de un plan llamado CMS.
• Una idea de lo que costará la generación: Los precios de OpenAI se calculan por token, y un generador que tu equipo usa a diario suma de forma distinta a uno que pruebas un par de veces.
• UnaWebflow Cloud App ya creada: usando Next.js (esta guía utiliza el App Router de Next.js, pero el mismo enfoque funciona con Astro); ejecuta webflow auth login && webflow cloud init si aún no lo has hecho.
• Un token de la API de datos de Webflow con acceso de escritura a tu sitio: Genera uno en Configuración del sitio → Aplicaciones e integraciones → Acceso a la API.

Una vez que tengas todo esto, puedes proceder con la creación.

4 pasos para crear un generador de contenido con IA con Webflow Cloud

La Cloud App gestiona la generación y las escrituras en el CMS desde el lado del servidor. Webflow se encarga de la interfaz del generador. Estos pasos construyen cada pieza en orden: primero el esquema del CMS, luego las credenciales, después los controladores de rutas y, finalmente, el frontend.

Vamos a profundizar en los pasos.

1. Crea la colección del CMS de Webflow para el contenido generado

Antes de escribir código, crea la colección del CMS que recibirá el contenido generado. En el Webflow Designer, abre el panel del CMS y haz clic en Nueva colección.

Ponle de nombre "Contenido generado" (o lo que mejor se adapte a tu caso) y añade estos campos:

• Nombre (Texto plano, obligatorio): El título del artículo o contenido
• Slug (generado automáticamente a partir del Nombre)
• Tema (Texto plano): El tema que el editor introdujo en el prompt
• Cuerpo (Texto enriquecido): El contenido generado por la IA
• Tono (Texto plano): Profesional, Conversacional, Técnico. Usamos texto plano a propósito en lugar de un campo de opciones, por la razón que explicamos en el paso 3

Usa el campo de Texto enriquecido para el Cuerpo si el resultado generado va a incluir encabezados o listas. El Texto plano funciona bien para resultados más cortos, como meta descripciones o eslóganes de productos.

Guarda la colección. Anota el ID de la colección que aparece en la URL de tu panel de Webflow. Se muestra en la ruta como . Lo necesitarás como variable de entorno en el siguiente paso./cms/[collection-id]

Punto de control: La colección del CMS ya existe en tu proyecto con los cinco campos mencionados. El estado de revisión se gestiona mediante en la escritura de la API, no a través de un campo del CMS, así que no hace falta mantener ningún campo de Estado. La colección está vacía. El contenido llegará desde el generador en el Paso 3.isDraft

2. Añade las credenciales a tu entorno de Webflow Cloud

Tu aplicación en la nube necesita cuatro variables de entorno.

Añádelas a .env.local para el desarrollo local:

# .env.local
OPENAI_API_KEY=sk-...your_openai_key
WEBFLOW_API_TOKEN=your_webflow_data_api_token
WEBFLOW_COLLECTION_ID=your_collection_id_here
GENERATOR_SECRET=a-long-random-string-you-choose

En Webflow Cloud, abre el panel de despliegues (Deployments Dashboard) de tu entorno, haz clic en Variables de entorno y añade las mismas cuatro claves. Marca , , y como Secretos para que aparezcan cifrados y ocultos en el panel.OPENAI_API_KEYWEBFLOW_API_TOKENGENERATOR_SECRET

GENERATOR_SECRETes un secreto compartido que el formulario de Webflow envía en una cabecera en cada solicitud. El gestor de rutas (Route Handler) lo verifica antes de hacer nada. Esto evita que solicitudes públicas aleatorias lleguen a tus rutas de generación o de escritura en el CMS.X-Generator-Secret

Para un despliegue en producción que utilice todo tu equipo, combínalo con una autenticación basada en sesiones adecuada.

Punto de control: Ejecuta localmente y confirma que y se resuelven correctamente.next devprocess.env.OPENAI_API_KEYprocess.env.WEBFLOW_API_TOKEN

3. Crea los gestores de rutas para generar y guardar

Crea dos gestores de rutas en tu aplicación en la nube. El primero llama a OpenAI y devuelve el contenido generado. El segundo toma ese contenido y crea un borrador de elemento en el CMS mediante la API de datos de Webflow.

Un detalle importante que debes omitir, ya que es la causa más común de errores en estos gestores: no añadas a ellos. Webflow Cloud despliega Next.js a través del adaptador OpenNext Cloudflare, y la guía de configuración de dicho adaptador indica eliminar esa directiva porque el entorno de ejecución Edge de Next.js no es compatible.export const runtime = 'edge'

Tus gestores de rutas deben usar el entorno de ejecución de Node.js, que es el predeterminado y el que te proporciona las APIs de Node que ofrece el entorno de ejecución de Workers.

Vale la pena dejar esto claro porque la propia bring-your-own-app página de Webflow todavía te dice que añadas la directiva para las rutas de API. Si sigues eso y la guía del adaptador al mismo tiempo, obtendrás una contradicción; el adaptador es el que construye tu aplicación, así que hazle caso a él.

Ambos controladores validan la GENERATOR_SECRET cabecera antes de procesar nada:

// app/api/generate/route.ts
// No `export const runtime = 'edge'` here. See the note below.

function authorized(request: Request): boolean {
  return (
    request.headers.get('X-Generator-Secret') ===
    process.env.GENERATOR_SECRET
  )
}

export async function POST(request: Request) {
  if (!authorized(request)) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 })
  }

  const { topic, tone, contentType } = await request.json()

  if (!topic?.trim()) {
    return Response.json({ error: 'Topic is required' }, { status: 422 })
  }

  const instructions = `You are a professional content writer. Write ${contentType ?? 'a blog introduction'} in a ${tone ?? 'professional'} tone. Be specific, avoid filler phrases, and write for a developer-savvy audience. Target length: 300 to 400 words.`

  const res = await fetch('https://api.openai.com/v1/responses', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      model: 'gpt-5.6-luna',
      instructions,
      input: `Write about: ${topic}`,
    }),
  })

  if (!res.ok) {
    const err = await res.text()
    console.error('OpenAI error:', err)
    return Response.json({ error: 'Generation failed' }, { status: 502 })
  }

  const data = await res.json()

  // `output_text` is a convenience property the official SDKs add, not
  // a field of the raw JSON. Calling the endpoint with bare fetch means
  // walking the output array yourself.
  const content = (data.output ?? [])
    .filter((item: { type?: string }) => item.type === 'message')
    .flatMap((item: { content?: { type?: string; text?: string }[] }) => item.content ?? [])
    .filter((part: { type?: string }) => part.type === 'output_text')
    .map((part: { text?: string }) => part.text ?? '')
    .join('')
    .trim()

  if (!content) {
    return Response.json({ error: 'No content returned from OpenAI' }, { status: 502 })
  }

  return Response.json({ content })
}

El controlador valida el secreto, analiza el cuerpo JSON, requiere un tema, construye una instructions cadena a partir del tono y el tipo de contenido, y lo envía a /v1/responses.

La extracción de texto es la parte que merece la pena leer dos veces. Si has usado el SDK de OpenAI, buscarás data.output_text, y undefined te llevarás una sorpresa: los SDK oficiales añaden esa propiedad en lugar de que el endpoint la devuelva. Con fetch, puro, recorres el output, tomas el message elemento y unes sus output_text partes.

No asumas que el texto está en output[0].content[0].text tampoco, ya que la matriz puede incluir otros tipos de elementos antes del mensaje.

Ante un error 502 o una output_text ausente, registra el error de OpenAI en los logs de tu servidor y devuelve un mensaje genérico al cliente. No hay ninguna ventaja en exponer el texto de error original de OpenAI en un endpoint público. El contenido generado vuelve como JSON, listo para que el controlador de guardado lo recoja.

El controlador de ruta para guardar en el CMS

El controlador de guardado realiza la misma comprobación del secreto, valida el título y el contenido, deriva un slug y lo envía a la API de datos de Webflow.

Marca el elemento como borrador para que nada llegue al sitio en vivo sin una revisión humana:

// app/api/save-to-cms/route.ts
function authorized(request: Request): boolean {
  return (
    request.headers.get('X-Generator-Secret') ===
    process.env.GENERATOR_SECRET
  )
}

export async function POST(request: Request) {
  if (!authorized(request)) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 })
  }

  const { title, topic, content, tone } = await request.json()

  if (!title?.trim() || !content?.trim()) {
    return Response.json({ error: 'Title and content are required' }, { status: 422 })
  }

  const slug = title
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    // Note the + and the g: /^-|-$/ replaces only the first match,
    // so a title with punctuation at both ends keeps a stray hyphen.
    .replace(/^-+|-+$/g, '')

  const wfRes = await fetch(
    `https://api.webflow.com/v2/collections/${process.env.WEBFLOW_COLLECTION_ID}/items`,
    {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${process.env.WEBFLOW_API_TOKEN}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        fieldData: {
          name: title,
          slug,
          topic: topic ?? title,
          body: content,
          tone: tone ?? 'Professional',
        },
        isDraft: true,
      }),
    }
  )

  if (!wfRes.ok) {
    const err = await wfRes.text()
    console.error('Webflow CMS error:', err)
    return Response.json({ error: 'CMS write failed' }, { status: 502 })
  }

  const item = await wfRes.json()
  return Response.json({ success: true, itemId: item.id })
}

Unas cuantas cosas que siempre hago en estos controladores y que importan en producción:

• La comprobación de authorized() ocurre antes de await request.json(). Analizar el cuerpo de una solicitud no autorizada desperdicia CPU y puede exponer mensajes de error sobre cargas útiles mal formadas a cualquiera que esté sondeando el endpoint.
• isDraft: true en cada escritura en el CMS. Una respuesta de OpenAI mal formada puede producir contenido incoherente, y el paso de revisión manual en el editor del CMS de Webflow detecta problemas antes de que lleguen a las páginas en vivo. Establecer isDraft: false no publica el elemento, lo cual suele sorprender a la gente.

En el endpoint de preparación, mueve el elemento a "se publicará en la próxima publicación de todo el sitio" en lugar de hacerlo público; para que sea público de inmediato, usa el endpoint /items/live o una llamada de publicación posterior. De cualquier manera, mantén el filtro de borrador durante el lanzamiento inicial.

• tone se escribe como texto plano a propósito. Los campos de Opción de Webflow no aceptan el nombre visible de la opción; toman el ID de la opción, que tienes que buscar en "Obtener detalles de la colección" y mapear tú mismo. Enviar "Professional" a un campo de opción será rechazado, y es la forma más probable en que este controlador de guardado falle en la práctica.

Si quieres que el Tono sea un campo de Opción real, obtén los IDs de las opciones una vez y mantén un mapa de nombre a ID en el servidor.

• POST /v2/collections/{collection_id}/items es el endpoint de elementos preparados, que es lo que quieres para los borradores. Ten en cuenta que acepta un único fieldData de nivel superior o una matriz de items, así que no es una ruta estrictamente para un solo elemento; el endpoint separado es /items/bulk, que existe para la creación en múltiples idiomas.

Punto de control: Con el servidor de desarrollo en marcha, prueba la ruta de generación:

curl -X POST http://localhost:3000/YOUR_MOUNT_PATH/api/generate \
  -H "Content-Type: application/json" \
  -H "X-Generator-Secret: your-generator-secret" \
  -d '{"topic":"Webflow CMS best practices","tone":"Professional","contentType":"blog introduction"}'

Reemplaza YOUR_MOUNT_PATH con la ruta de montaje que estableciste al crear el entorno (comúnmente /app). Deberías recibir { "content": "..." } con el texto generado. Sin la cabecera secreta, deberías recibir { "error": "Unauthorized" }.

4. Construye la interfaz del generador en Webflow

Mientras pruebas este patrón, activa la protección por contraseña para la página del generador: abre la configuración de la página y actívala en la sección General, no en SEO. Ten en cuenta que requiere un plan de sitio de pago, así que si estás en el plan Starter, necesitarás una forma alternativa de mantener la página fuera del alcance durante las pruebas.

Añade esto a un bloque de Código personalizado (código de pie de página, antes de </body>) en tu página generadora. La página necesita un formulario con tres campos de entrada (atributos data-gen-topic, data-gen-tone, data-gen-type) y elementos de salida (data-gen-output para la vista previa del contenido, data-gen-title para la entrada del título, data-gen-save para el botón Guardar).

El script conecta el controlador de envío del formulario para llamar a /api/generate, renderiza el resultado en el elemento de salida y muestra el botón Guardar en CMS solo después de que la generación sea exitosa.

Ambas llamadas fetch envían la cabecera X-Generator-Secret:

(function () {
  const GENERATE_URL = '/app/api/generate'
  const SAVE_URL = '/app/api/save-to-cms'
  const SECRET = document.querySelector('[data-generator-secret]')?.dataset.generatorSecret ?? ''

  const form = document.querySelector('[data-gen-form]')
  const outputEl = document.querySelector('[data-gen-output]')
  const titleInput = document.querySelector('[data-gen-title]')
  const saveBtn = document.querySelector('[data-gen-save]')

  if (!form || !outputEl) return

  let lastContent = ''
  let lastTone = ''

  form.addEventListener('submit', async function (e) {
    e.preventDefault()

    const topic = form.querySelector('[data-gen-topic]')?.value.trim()
    const tone = form.querySelector('[data-gen-tone]')?.value
    const contentType = form.querySelector('[data-gen-type]')?.value

    if (!topic) return

    const submitBtn = form.querySelector('[type="submit"]')
    if (submitBtn) submitBtn.disabled = true
    outputEl.textContent = 'Generating...'
    if (saveBtn) saveBtn.style.display = 'none'

    try {
      const res = await fetch(GENERATE_URL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Generator-Secret': SECRET,
        },
        body: JSON.stringify({ topic, tone, contentType }),
      })

      const data = await res.json()

      if (!res.ok || data.error) {
        outputEl.textContent = `Error: ${data.error ?? 'Generation failed'}`
        return
      }

      lastContent = data.content
      lastTone = tone
      outputEl.textContent = lastContent

      if (titleInput) titleInput.value = topic
      if (saveBtn) saveBtn.style.display = 'block'
    } catch {
      outputEl.textContent = 'Network error. Check the browser console.'
    } finally {
      if (submitBtn) submitBtn.disabled = false
    }
  })

  if (saveBtn) {
    saveBtn.addEventListener('click', async function () {
      if (!lastContent) return

      const title = titleInput?.value.trim() || form.querySelector('[data-gen-topic]')?.value.trim()
      saveBtn.disabled = true
      saveBtn.textContent = 'Saving...'

      try {
        const res = await fetch(SAVE_URL, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-Generator-Secret': SECRET,
          },
          body: JSON.stringify({
            title,
            topic: title,
            content: lastContent,
            tone: lastTone,
          }),
        })

        const data = await res.json()
        saveBtn.textContent = data.success ? 'Saved to CMS' : 'Save failed — check console'
        if (!data.success) console.error('CMS save error:', data)
      } catch {
        saveBtn.textContent = 'Save failed — check console'
      } finally {
        saveBtn.disabled = false
      }
    })
  }
})()

Ten en cuenta que el script lee el secreto de un atributo data-generator-secret en un elemento oculto en lugar de codificarlo directamente. Añade un div oculto a la página con data-generator-secret="your-secret-value".

Esto sigue siendo visible en el código fuente de la página, por lo que GENERATOR_SECRET por sí solo no es un modelo de seguridad completo. Para una herramienta de producción accesible a todo tu equipo de contenido, añade autenticación basada en sesiones a través de Cloud App y verifica la cookie de autenticación en los Route Handlers.

Punto de control: Publica tu sitio de Webflow. Rellena el tema, selecciona un tono y un tipo de contenido, y haz clic en Generar. El área de salida debería completarse en un plazo de 3 a 8 segundos. Haz clic en Guardar en CMS y confirma que aparece un nuevo borrador en la colección de Contenido Generado en tu editor de CMS de Webflow.

¿Qué hace que el generador de IA falle en Webflow Cloud?

La mayoría de los fallos provienen de tres lugares:

• El GENERATOR_SECRET no coincide entre el formulario y el Route Handler
• La API de respuestas de OpenAI devuelve una estructura inesperada
• La API de datos de Webflow rechaza la escritura en el CMS debido a una falta de coincidencia en el mapeo de campos

Analicemos cada uno.

El Route Handler devuelve un error 401 en cada solicitud

La cabecera X-Generator-Secret en la llamada fetch del formulario no coincide con process.env.GENERATOR_SECRET en el Route Handler.

Comprueba dos cosas: que el valor secreto en .env.local coincida con el que está en el panel de variables de entorno de Webflow Cloud, y que el atributo data-generator-secret en el elemento oculto de la página de Webflow coincida con ese mismo valor.

Un espacio final o un salto de línea en el valor de la variable de entorno provoca una falta de coincidencia silenciosa.

OpenAI devuelve una respuesta, pero output_text no está definido

La causa habitual es leer una propiedad exclusiva del SDK desde una respuesta HTTP sin procesar. output_text es una agregación de conveniencia que proporcionan los SDK oficiales; el endpoint /v1/responses en sí devuelve una matriz output, por lo que data.output_text es undefined sin importar lo correcta que sea el resto de tu llamada.

Dos formas de solucionarlo. O bien extraes el texto de output como hace el controlador anterior, o instalas el paquete openai y llamas a client.responses.create(...), momento en el cual response.output_text existe porque el SDK lo construye para ti.

Vale la pena conocer las estructuras para que puedas distinguir los endpoints mientras depuras:

• Chat Completions (/v1/chat/completions) toma messages y devuelve choices[0].message.content
• La API de respuestas (/v1/responses) toma instructions y input, y devuelve una output matriz

Si te quedas atascado, registra temporalmente la respuesta completa de OpenAI en la consola de tu servidor antes de que se ejecute la lógica de análisis. A menudo, la estructura de la matriz de salida o el objeto de opciones diferirán ligeramente de lo que esperabas debido a cambios en la versión de la API o a respuestas específicas del modelo.

Ver la estructura JSON sin procesar en tu terminal es la forma más rápida de confirmar si tu lógica de análisis necesita apuntar a una ruta diferente.

La escritura en el CMS de Webflow devuelve 400 o 422

Lee el estado con atención, ya que ambos errores parecen similares pero tienen causas distintas.

Un 401 es un problema de credenciales: un token faltante, mal formado o con el alcance incorrecto. Confirma que el encabezado sea Bearer {token} con un espacio, y que el token tenga CMS:write en lugar de acceso de solo lectura al CMS.

Un 400 significa una solicitud mal formada, y la causa más común es una discrepancia en el nombre del campo: las claves fieldData deben coincidir con los slugs que Webflow generó para cada campo del CMS. Webflow no devuelve 422 por esto, así que si ves uno, proviene de tu gestor de rutas, no de Webflow.

Un 409 significa una colisión de slugs. Debido a que el slug se deriva del título y el título se rellena previamente a partir del tema, generarlo dos veces para el mismo tema provoca esto. Los slugs de los elementos deben ser únicos dentro de una colección, así que añade un sufijo corto cuando vuelvas a intentarlo.

Un campo llamado "Body Content" obtiene el slug body-content, no body o bodyContent. GET https://api.webflow.com/v2/collections/{collection_id} contra la API de datos de Webflow para inspeccionar los slugs exactos de los campos antes de enviar una solicitud de escritura.

Construye un flujo de trabajo de contenido completo

Para profundizar en el lado del CMS, nuestra guía de la API del CMS cubre la lectura, escritura y publicación mediante programación. Con la generación y las escrituras en el CMS funcionando, el siguiente paso natural es un flujo de trabajo de revisión. El gestor /save-to-cms de la aplicación en la nube crea cada elemento como borrador.

Un webhook de Webflow registrado a través del punto de conexión Crear Webhook puede activarse en el evento collection_item_created y notificar a un canal de Slack cuando haya nuevos borradores listos para revisar.

Puedes crear webhooks desde Configuración del sitio → Aplicaciones e integraciones → Webhooks y elegir un tipo de activador allí. La razón para preferir la API es distinta a lo que quizás hayas leído: los webhooks creados desde el panel no envían los encabezados necesarios para validar las firmas de las solicitudes, por lo que todo lo que requiera una entrega verificada debe registrarse a través de la API.

Si prefieres no crear el generador desde cero, Webflow + ChatGPT puede guiarte a través de las opciones de conexión.