El dashboard sin backend

Qué es y por qué importa

Un inversor te pide los números. Normalmente le mandas una captura, o una hoja de cálculo que a la semana ya está vieja. O te montas un dashboard de verdad: un servidor, una base de datos, un login, un deploy. Todo eso para una página.

Claude Code puede publicar una página de verdad, que se llama artifact: una página web en claude.ai, con su enlace, que Claude diseña y publica desde la sesión. No hay un servidor tuyo que mantener encendido, ni deploy, ni código que mantener. Y si conectas tus servicios como conectores, por ejemplo Stripe para los pagos y PostHog para la analítica, la página lee datos frescos cada vez que se abre.

Hay un pero, y es el centro de esta guía: los datos en vivo pasan por la cuenta de quien mira la página, no por la tuya. Para ti y tu equipo funciona de maravilla. Para un inversor de fuera de tu organización se hace de otra forma: Claude vuelve a publicar la página con los números nuevos, en el mismo enlace. Aquí tienes las dos.

1. Qué necesitas

• Un plan de Claude Pro, Max, Team o Enterprise.
• Claude Code en el terminal o en la app de escritorio, con la sesión de tu cuenta de claude.ai (/login). Con una clave API o con un proveedor cloud como Amazon Bedrock no se puede publicar.
• La última versión de Claude Code: los datos en vivo y las respuestas a comentarios necesitan versiones recientes.
• En Team y Enterprise los artifacts están activados por defecto, pero un Owner los puede desactivar, y las llamadas a conectores desde las páginas tienen un interruptor aparte (Enable artifact connectors).

Si pides una página y Claude te escribe un archivo HTML en local sin enlace, los artifacts no están activos en tu sesión: revisa estos puntos.

2. Conecta los datos como conectores de claude.ai

Aquí está el detalle que más tiempo hace perder. La página publicada solo puede llamar a los conectores de tu cuenta de claude.ai. Los servidores MCP añadidos en local con claude mcp add le sirven a Claude mientras construye la página, pero la página publicada no puede llamarlos.

1. Abre claude.ai/customize/connectors.
2. Stripe tiene un conector oficial en el directorio: lo buscas, lo conectas, inicias sesión en Stripe y eliges a qué cuentas dar acceso. En Team y Enterprise antes lo tiene que añadir un Owner.
3. Para PostHog, si no lo encuentras en el directorio, usa Add custom connector con la dirección https://mcp.posthog.com/mcp e inicia sesión. La región, EE. UU. o Europa, la elige PostHog según tu cuenta.
4. En Claude Code escribe /mcp: los conectores de claude.ai aparecen en la lista. Si faltan, comprueba que has entrado con la cuenta de claude.ai y no con una clave API.

El conector de Stripe también puede escribir, no solo leer: deja activada la aprobación de herramientas, como recomienda la propia Stripe.

3. Pide el dashboard

Cuanto más preciso seas sobre lo que quieres ver, menos vueltas das. Los eventos de PostHog escríbelos con su nombre real: si no los sabes, pídele antes a Claude que te los liste desde el conector.

Hazme un artifact: un dashboard para un inversor con los números de mi app.
Arriba, cuatro recuadros: registros totales, registros de los últimos 7 días, suscriptores de pago activos, ingresos recurrentes del mes.
Debajo: los registros por día de los últimos 30 días, y el embudo del onboarding, con cuánta gente llega a cada paso y dónde abandona, en porcentaje.
Registros y onboarding desde PostHog (el evento de registro es [evento], los pasos del onboarding son [eventos en orden]); suscriptores e ingresos desde Stripe.
Lee los datos de los conectores de claude.ai cada vez que se abre la página. En cada sección en vivo pon un mensaje de reserva que diga qué conector hace falta, por si no responde. Debajo de cada número escribe de dónde viene y a qué hora se leyó.

Antes de publicar una página que llama a conectores, Claude Code te pide confirmación. Luego te da el enlace y abre el navegador; /artifacts te enseña todas tus páginas.

4. Cómo se mantiene al día

Una página con conectores lee los datos al abrirse, y puede actualizarse cada cierto tiempo o con un botón. Las respuestas se quedan guardadas en el navegador de quien mira: cuando la vuelve a abrir ve enseguida los últimos números, y un momento después los nuevos.

Añade al dashboard un botón «Actualizar» y una actualización automática cada 15 minutos mientras la página está abierta. Arriba escribe la hora de la última actualización. Si un conector no responde, deja los últimos números y escribe que no están actualizados. Luego vuelve a publicar en el mismo enlace.

Recuerda por dónde pasan esas llamadas: por la cuenta de quien mira, que tiene que dar permiso la primera vez. Dos personas que abren la misma página pueden ver datos distintos. Quien no ha conectado el conector, o no da permiso, ve la página sin las partes en vivo.

Para un inversor: la misma página, publicada de nuevo

Para quien abre el enlace público sin cuenta de claude.ai, o desde fuera de tu organización, los conectores no se ejecutan. Entonces haces una versión con los números dentro, y la mantienes fresca publicándola de nuevo en el mismo enlace: quien tiene la página abierta ve la actualización al momento.

Haz una copia del dashboard para el inversor, sin llamadas a conectores: lee ahora los números de Stripe y PostHog y ponlos en la página, con la fecha y la hora de la lectura. Publícala como artifact nuevo y dame el enlace.

Para actualizarla, también desde una sesión nueva, le das el enlace:

Actualiza [enlace del artifact] con los números de hoy de Stripe y PostHog. Misma estructura, cambia solo los números y la hora de la lectura.

Para hacerlo cada mañana puedes usar /loop, mientras la sesión siga abierta: un /loop recurrente caduca a los siete días. Con una página pública, Claude Code te pide confirmación la primera vez que la cambia en cada conversación. Las tareas programadas en la nube, en cambio, no vuelven a publicar una página compartida en público sin preguntarte.

5. Quién la ve

• Al principio solo la ves tú. Para compartirla abres la página en el navegador y usas Share, arriba.
• En Pro y Max la compartes con un enlace público: la abre cualquiera que lo tenga, sin iniciar sesión.
• En Team y Enterprise la das a personas concretas de tu organización, o a toda la organización. El enlace público está desactivado hasta que un Owner activa External sharing.
• Cada publicación es una versión: desde Share eliges cuál ven los demás, o haces que vean siempre la última.
• Para quitarla: /artifacts, eliges la página y pulsas d. Es definitivo: el enlace deja de funcionar para todos, también para ti.

La regla que yo me pondría: en la versión pública pon solo números que mandarías también por email. Quien tiene el enlace se lo puede pasar a cualquiera.

6. Los comentarios, con Claude respondiendo

Cuando compartes la página dentro de tu organización, o sea en Team o Enterprise, quien la ve puede dejar comentarios. Quien la abre solo con el enlace público no los ve y no puede escribirlos.

1. Quien puede editar la página escribe un comentario y se lo manda a Claude con Send to Claude, o escribe @claude en el comentario.
2. Claude Code vigila las páginas publicadas en tu sesión: el comentario llega ahí, Claude lee el hilo y responde. La respuesta aparece firmada por Claude, a través de ti.
3. Si tu modo de permisos le deja publicar sin preguntar, responde solo. Si no, te pide el ok antes de leer el hilo y antes de responder.
4. Para pararlo: Ctrl+C una vez, con el prompt en reposo, pone en pausa las respuestas; desde /tasks paras una sola página.

Claude solo responde a los hilos que alguien le ha mandado: los demás siguen abiertos hasta que una persona los cierra. Los comentarios también se los puedes pedir tú:

Lee los comentarios de [enlace del artifact]. Responde a las preguntas sobre los números explicando de dónde viene cada dato, haz los cambios que piden y vuelve a publicar. Si una petición cambia lo que mostramos hacia fuera, pregúntame antes.

Errores comunes

• Conectar Stripe y PostHog solo con claude mcp add. La página publicada solo llama a los conectores de claude.ai.
• Mandar al inversor la versión en vivo. Desde fuera de tu organización los conectores no se ejecutan, y ve los recuadros vacíos.
• Olvidar los mensajes de reserva. Quien no ha conectado un conector ve una sección vacía sin entender por qué.
• Pensar que todos los comentarios llegan a Claude. Solo llegan los que manda con Send to Claude o con @claude quien puede editar la página.

Lista de comprobación

• Tengo un plan Pro, Max, Team o Enterprise y he hecho /login
• Stripe y PostHog son conectores en claude.ai, y /mcp los muestra
• Cada sección en vivo tiene un mensaje de reserva
• Debajo de cada número están la fuente y la hora de la lectura
• El inversor tiene una versión con los números dentro, no la en vivo
• He decidido quién la ve, desde el botón Share

Preguntas frecuentes