Personalizar Payload CMS: un estudio para publicar en redes sociales

Lo normal con un CMS es usarlo para escribir contenido. Payload permite más: como el panel es una aplicación de React dentro de tu proyecto, puedes añadirle pantallas, colecciones y rutas propias, y que se vean como si siempre hubieran estado ahí.

Para demostrarlo, te enseñamos lo que montamos en este sitio: el Estudio de redes. Eliges una red social y un artículo del blog, conversas con un asistente de IA, escoges las imágenes y descargas el resultado, o lo publicas si la cuenta está conectada. Todo sin salir del panel.

Cómo se ve

Esta es la pantalla de entrada. Arriba, el estado de las redes; debajo, el formulario para empezar una publicación. Ahí ya hemos elegido, como referencia, el artículo Así está construido codegea.com:

Al pulsar «Empezar con el asistente» se crea un borrador y se abre su pantalla de trabajo, con tres pasos: conversar, elegir imágenes, revisar y publicar o descargar.

Las imágenes que salen son láminas de 1080×1350 con la marca. Estas tres son del mismo titular, una con cada plantilla: editorial, partida y cobalto.

Una aclaración sobre estas capturas: el estudio está recién abierto, sin cuentas de redes conectadas y sin haber llamado al asistente. Preferimos no enseñar claves ni gastar créditos de IA por una foto. Las láminas sí son lo que genera el código con las plantillas reales, a partir del texto del artículo.

Las piezas

Para que todo esto viva dentro de Payload hacen falta seis cosas. Ninguna es complicada; la gracia es cómo encajan.

1. Una colección para los borradores

Un borrador es un documento: tiene título, red, formato (una imagen o un carrusel), propuestas, láminas y estado. Así que es una colección más:

export const Socials: CollectionConfig = {
  slug: 'socials',
  labels: {
    singular: { es: 'Publicación social', en: 'Social post' },
    plural: { es: 'Publicaciones sociales', en: 'Social posts' },
  },
  admin: {
    useAsTitle: 'title',
    group: 'Redes',
    defaultColumns: ['title', 'format', 'status', 'publishedAt'],
  },
  access: {
    read: authenticated,
    create: authenticated,
    update: authenticated,
    delete: authenticated,
  },
  fields: [/* título, red, referencia, propuestas, láminas… */],
};

Con eso ya tienes la lista, la edición «avanzada» y los permisos gratis. Los borradores solo los ve quien ha iniciado sesión.

Hay un campo que no guarda datos: un type: 'ui' con un componente propio que pinta un enlace «Abrir el asistente» dentro del formulario normal de edición. Es la forma de mezclar el formulario de Payload con tu propia interfaz.

2. Una vista propia en el panel

El asistente es una pantalla entera, no un formulario. Payload deja registrar vistas propias en una ruta:

admin: {
  components: {
    views: {
      social: { Component: '/components/admin/social/studio#SocialStudio', path: '/social', exact: true },
      accounts: { Component: '/components/admin/social/accounts#AccountsView', path: '/social/accounts' },
    },
  },
},

Eso da dos direcciones nuevas, /admin/social y /admin/social/accounts. Y para que se encuentren, se añaden al menú lateral con afterNavLinks:

afterNavLinks: ['/components/admin/social/nav-link#StudioNavLink'],

Así aparecen «Estudio de redes» y «Cuentas de redes» al final del menú, debajo de los grupos de Payload:

Las vistas usan la plantilla del panel (DefaultTemplate), así que heredan la cabecera, el menú y los estilos. No hace falta rehacer nada.

3. Rutas de API, siempre con sesión

El navegador necesita pedir cosas al servidor: crear un borrador, generar imágenes, publicar. Cada una es una ruta bajo /api/social/…, y todas empiezan igual: comprueban que quien llama es un usuario del panel.

/** Usuario del admin que hace la petición (por su cookie de sesión), o `null`. */
export async function adminUser(req: NextRequest) {
  const payload = await payloadClient();
  const { user } = await payload.auth({ headers: req.headers });
  return user;
}

export async function POST(req: NextRequest) {
  if (!(await adminUser(req))) return new Response('Unauthorized', { status: 401 });
  // …
}

Las que generan texto o imágenes llevan export const maxDuration = 60, que es el tope que nos deja el plan de hosting actual. Si tus rutas tardan más, vas a necesitar otro plan o dividir el trabajo.

4. El asistente

La conversación usa el SDK de IA de Vercel (ai) con un modelo de OpenAI. El modelo se configura con variables de entorno, no está fijo en el código. La clave de la API va en .env, nunca en el repositorio.

Lo que hace útil al asistente no es el modelo, sino lo que le damos como contexto. Cada red tiene una ficha con sus límites y su tono:

instagram: {
  label: 'Instagram',
  captionMax: 2200,
  foldAt: 125,
  direct: true,
  tone: `- Tono cercano y visual, frases cortas…
- Los primeros ~125 caracteres son lo único que se ve antes de «más»: ahí va el gancho.
- Los enlaces no son clicables en el caption…`,
},

captionMax es el máximo de caracteres, foldAt es dónde se corta el texto con «ver más», y tone son las instrucciones de estilo. LinkedIn tiene direct: false: ahí el borrador solo se descarga. Cambiar el comportamiento de una red es cambiar esa ficha.

5. Las imágenes

Las láminas se dibujan con código, con la misma técnica que usamos para las imágenes para compartir de los artículos: un componente de React, next/og y sharp. Todas las redes usan 1080×1350 (formato 4:5), así que cambiar de red no obliga a regenerar nada.

Hay cuatro plantillas: editorial, partida, cobalto y solo imagen. Las tres primeras funcionan sin ningún fondo, solo con tinta y el isotipo; la cuarta usa un fondo generado por IA. En los carruseles, el arte de IA se genera solo para la primera y la última lámina.

6. Las cuentas

Para publicar de verdad, el estudio necesita conectarse a Instagram y a Facebook. Las credenciales viven en un global de Payload, y es lo que más cuidado exige:

const secret = {
  access: { read: () => false, create: () => false, update: () => false },
  admin: { hidden: true },
} as const;

{ name: 'accessToken', type: 'text', ...secret },

El token se guarda en la base de datos, pero ningún usuario, ni siquiera un administrador, puede leerlo por la API ni verlo en el panel. Solo lo usa el servidor al publicar.

La pantalla de cuentas explica, paso a paso, cómo conectar cada red:

Para Instagram son cinco: una cuenta profesional, crear la app en Meta, registrar la URL de redirección, añadir las claves al .env y agregarse como tester. Es un trámite de una sola vez, pero conviene tenerlo delante y no en la memoria de alguien.

Lo que no hace, y lo que costó

• No es una herramienta de programación de contenido. Publica cuando se lo pides. No tiene calendario ni cola.
• Publicar en Instagram y Facebook depende de una app de Meta. Mientras esté en modo de desarrollo, solo publican los usuarios de prueba. Revisa los requisitos de Meta antes de prometérselo a un cliente.
• LinkedIn es solo descarga. El estudio deja el texto y las imágenes listos, y se suben a mano.
• El asistente tiene un coste. Cada conversación y cada imagen generada gasta créditos de IA. Por eso las láminas funcionan sin imagen de fondo, y el arte de IA es opcional.
• Las rutas tienen un tope de 60 segundos por el plan de hosting.

¿Te sirve algo así?

Un estudio como este tiene sentido si publicas con regularidad desde el mismo contenido (artículos, proyectos) y quieres que cada pieza salga con la marca sin pasar por un editor de diseño. Si publicas dos veces al mes, un programador de publicaciones de pago es más sensato.

Lo importante es la idea: el panel de Payload no es una caja cerrada. Una colección, una vista, unas rutas y un par de componentes bastan para convertirlo en la herramienta que tu equipo necesita. Si quieres empezar por lo básico, mira primero cómo personalizar el panel con tu marca, y si prefieres que un asistente externo edite el contenido, tenemos un servidor MCP sobre tu CMS.