Saltar al contenido
Guaso

Developers

Blocks

Son las piezas visuales de la página (texto, galería, preguntas, números, pasos, llamado a la acción). Las instalás como código en tu repo desde el kit de piezas público @guaso — no hay un package npm de blocks. El package @guaso-ai/content lo instala el adaptador blocks-from-entry, no BlockZone. Si lo arma un agente, arrancá por Para tu agente.

El kit de piezas @guaso

Para qué. En components.json le decís al CLI de shadcn de dónde bajar los componentes. La URL va fija a un commit (un SHA), no a la rama: así no te cambia el código de un día para el otro.

"registries": {  "@guaso": "https://raw.githubusercontent.com/guaso-ai/guaso-blocks/c880134ee34fe4ea770b09c6442c9596ba726949/r/{name}.json"}

Instalá las piezas

Para qué. Suma la zona y las piezas visuales a tu repo. Este add no instala @guaso-ai/content.

npx shadcn@latest add @guaso/block-zone @guaso/rich-section @guaso/cta @guaso/gallery @guaso/cards @guaso/testimonials @guaso/faq @guaso/stats @guaso/steps

Para qué. El adaptador convierte una entrada de Content en la lista de bloques que pinta BlockZone. Este add sí instala el package npm @guaso-ai/content. BlockZone recibe blocks ya armados.

npx shadcn@latest add @guaso/blocks-from-entry

Después del install suelen quedar en @/components/block-zone/*, un archivo por tipo (no se pisan en lib/).

Cómo se pinta una página

Para qué. Leés la home en el server, el adaptador arma el array, BlockZone lo dibuja.

BlockZone solo pinta blocks ya mapeados. createClient es de tu app + el package del adaptador (@guaso-ai/content), no de BlockZone. Token, server y revalidate están en Content.

import { createClient } from "@guaso-ai/content";import { blocksFromEntry } from "@/components/block-zone/blocks-from-entry";import BlockZone from "@/components/block-zone/block-zone";
const entry = await createClient({  siteId: process.env.GUASO_SITE_ID!,  token: process.env.GUASO_CONTENT_TOKEN!,}).getEntry("pages/home");const blocks = blocksFromEntry(entry);return <BlockZone blocks={blocks} isOwner={false} />;

Los ocho tipos

El catálogo creativo declara estos ocho tipos. El dueño pide una sección por chat; tu template pinta el tipo que coincida. Si llega un tipo desconocido, ignorálo — no rompas el sitio.

  • RichSection — sección de texto (título + body markdown).
  • Gallery — grilla de imágenes.
  • Cards — tarjetas con título, descripción y link.
  • Testimonials — testimonios de clientes.
  • CTA — llamado a la acción.
  • FAQ — preguntas y respuestas en acordeón.
  • Stats — números con etiqueta.
  • Steps — pasos en orden.

Código fuente

github.com/guaso-ai/guaso-blocks(abre en una pestaña nueva)

Los datos (no la UI) están en Content.