Widgetry
Empezar

Plantilla

Widget de tablero kanban para MCP Apps

Enseña el trabajo agrupado por estado dentro de la conversación. El modelo reparte tus tareas en columnas y el tablero las pinta como tarjetas con etiquetas, fechas y personas.

Añadir una interfaz a tu servidor MCP

¿Cómo va el lanzamiento de la beta? Enséñame el tablero antes del daily.

Ha usado show_kanban

El de la casa: contorno negro, amarillo mantequilla y subrayado de rotulador en el título.

Cuándo usar un widget de tablero kanban

Un tablero contesta a "¿cómo vamos?" antes que cualquier párrafo. Úsalo cuando tu servidor MCP ya sabe qué tareas hay y en qué estado está cada una, y quien pregunta quiere verlo todo de un vistazo:

  • Estado de un sprint o de una versión, sacado de tu gestor de incidencias: por hacer, en curso, en revisión, hecho.
  • Tickets de soporte por estado, para que la responsable vea qué espera a quién.
  • Procesos de selección: candidatos como tarjetas, fases como columnas y la entrevista como fecha.
  • Calendarios de contenido y listas de lanzamiento, donde etiquetas como "Web" o "Ventas" separan equipos.

Si tus datos son una lista plana con muchos campos por fila, se lee mejor una tabla. Si la pregunta es cuánto está hecho y no qué, los anillos de progreso lo contestan de un vistazo.

Cómo lo rellena el modelo

El esquema de datos del widget es el esquema de entrada de su tool (show_<slug>), así que el modelo ve exactamente lo que necesita un tablero: un title, un subtitle opcional y una lista de columns, cada una con su name y sus cards. De cada tarjeta solo es obligatorio el title; lo demás es opcional y el tablero se adapta:

  • due es una fecha ISO 8601 y se ve como día y mes abreviado.
  • members recibe nombres completos. El tablero los convierte en iniciales dentro de un avatar y deja el nombre entero como tooltip, así que pide a tu tool nombres, no ids.
  • labels llevan un name y un color opcional. Sin color, el tablero toma uno de la paleta del diseño, siempre el mismo para el mismo nombre: "Backend" conserva su color en todas las tarjetas sin que el modelo tenga que elegirlo.

La descripción de la tool le dice al modelo que lo use para tareas, tickets o cualquier trabajo agrupado por estado. Si en tu sistema las columnas tienen nombres fijos, escríbelos en el esquema (un enum en el nombre de la columna) y el modelo dejará de inventarse otros.

Qué hace en el chat

Cada columna enseña cuántas tarjetas tiene, y una columna vacía lo dice en vez de desaparecer. Con muchas columnas, el tablero se desplaza en horizontal en lugar de apretar las tarjetas.

Cada tarjeta es una acción del host: lleva un data-wg-message, así que al pulsarla se envía al chat un mensaje que pregunta por esa tarjeta. El modelo contesta con el detalle o llama a otra de tus tools para buscarlo. El tablero no tiene script ni librerías: su documento no carga nada de fuera y no necesita dominios extra en la CSP.

Hazlo tuyo

El tablero funciona con los veinte diseños de serie y con cualquiera que cree tu organización en el diseñador: carriles de cristal en Aurora, columnas en caja con sombras duras en Brutalista, columnas con filetes y titulares con serifa en Editorial. El markup es una plantilla Liquid que puedes editar, igual que los estilos y el esquema. El mensaje de seguimiento y el texto de columna vacía vienen en inglés y en castellano y siguen el idioma que indica el host; los dos son cadenas del markup, así que ahí cambias la redacción. Añade campos al esquema (una prioridad, una estimación) y píntalos en la tarjeta.

Llévalo a tu servidor

Publica el widget y enlázalo desde tu servidor MCP con una clave de lectura, para que cada cambio que publiques llegue al servidor sin desplegar, o descarga el HTML y el manifiesto y regístralos tú. La guía para añadir una interfaz a tu servidor MCP explica los dos caminos. Si prefieres que tu agente monte el tablero por ti, mira cómo crear widgets de MCP Apps con tu agente de IA.

Los datos que recibe

CampoTipoQué es
titleobligatoriostringBoard name
subtitlestring
columnsobligatorioobject[]
└ nameobligatoriostring
└ cardsobligatorioobject[]
└ titleobligatoriostring
└ duestringISO 8601 date
└ membersstring[]Full names
└ labelsobject[]
└ nameobligatoriostring
└ colorstringAny CSS color. Optional: without it the label takes a color of the design palette

Datos de ejemplo

{
  "title": "Lanzamiento de la beta",
  "subtitle": "Equipo de producto",
  "columns": [
    {
      "name": "Por hacer",
      "cards": [
        {
          "title": "Escribir la página de precios",
          "labels": [
            {
              "name": "Web"
            }
          ],
          "members": [
            "Ana Ruiz"
          ]
        },
        {
          "title": "Preparar la demo para inversores",
          "due": "2026-10-09",
          "labels": [
            {
              "name": "Ventas"
            }
          ]
        }
      ]
    },
    {
      "name": "En curso",
      "cards": [
        {
          "title": "Endpoint MCP por organización",
          "due": "2026-10-05",
          "labels": [
            {
              "name": "Backend"
            }
          ],
          "members": [
            "Luis Gómez",
            "Marta Sanz"
          ]
        },
        {
          "title": "Vídeo de presentación",
          "labels": [
            {
              "name": "Marketing"
            },
            {
              "name": "Ventas"
            }
          ],
          "members": [
            "Marta Sanz"
          ]
        }
      ]
    },
    {
      "name": "Hecho",
      "cards": [
        {
          "title": "Galería de plantillas",
          "labels": [
            {
              "name": "Web"
            }
          ],
          "members": [
            "Ana Ruiz",
            "Luis Gómez"
          ]
        }
      ]
    }
  ]
}

La tool que lo muestra

Un widget hecho con esta plantilla se muestra con una tool. El modelo lee su descripción para decidir cuándo llamarla y rellena el esquema de entrada con los datos. Esta es la definición que exporta Widgetry:

{
  "name": "show_kanban",
  "title": "Tablero",
  "description": "Shows a kanban board: columns with cards, each card with optional labels, due date and assignees. Use it to display tasks, tickets or any work grouped by status.",
  "inputSchema": {
    "type": "object",
    "required": [
      "title",
      "columns"
    ],
    "properties": {
      "title": {
        "type": "string",
        "description": "Board name"
      },
      "subtitle": {
        "type": "string"
      },
      "columns": {
        "type": "array",
        "items": {
          "type": "object",
          "required": [
            "name",
            "cards"
          ],
          "properties": {
            "name": {
              "type": "string"
            },
            "cards": {
              "type": "array",
              "items": {
                "type": "object",
                "required": [
                  "title"
                ],
                "properties": {
                  "title": {
                    "type": "string"
                  },
                  "due": {
                    "type": "string",
                    "description": "ISO 8601 date"
                  },
                  "members": {
                    "type": "array",
                    "items": {
                      "type": "string"
                    },
                    "description": "Full names"
                  },
                  "labels": {
                    "type": "array",
                    "items": {
                      "type": "object",
                      "required": [
                        "name"
                      ],
                      "properties": {
                        "name": {
                          "type": "string"
                        },
                        "color": {
                          "type": "string",
                          "description": "Any CSS color. Optional: without it the label takes a color of the design palette"
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

Más plantillas

Tu primer widget, en el chat en unos minutos

Elige una plantilla, pon tus datos y míralo como lo enseñarán ChatGPT o Claude. Después enlázalo desde tu servidor MCP, o deja que tu agente haga el siguiente.

Empezar con Google