Instala sin errores — tú o tu agente de IA.

01Prompt para tu agente de IA

Pega el texto de abajo en tu asistente de código, cambia MINHA_CHAVE_PK_LIVE por la clave de tu panel, y él hace la integración entera — instalación, pantallas vacías y conclusión de pasos — sin romper tu producto.

Eres mi asistente de código. Integra AppKit (appkit.com.br) en mi producto web SIN romper nada. AppKit inyecta un checklist de onboarding, pantallas vacías y avisos, controlados desde un panel externo. Haz exactamente esto:

1) INSTALACIÓN
- Si el proyecto usa bundler (React/Vue/Next/Svelte/etc.): instala el paquete
  @tecaless/appkit-sdk
  y, en el punto de entrada, DESPUÉS de que el usuario haga login (cuando ya tengo su id), llama a:
  import { init } from '@tecaless/appkit-sdk'
  init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId:  })
- Si es un sitio estático / no-code: agrega ANTES de :
  
- El userId/data-user DEBE ser el identificador estable del usuario logueado. AppKit lo convierte en hash en el servidor — NUNCA envíes correo o nombre. Si no hay usuario logueado, déjalo sin userId.

2) PANTALLAS VACÍAS
Para cada pantalla que nace sin datos y donde quiero una invitación a la acción (p. ej. facturas, contactos, agenda), envuelve el estado vacío actual en UN contenedor marcado, manteniendo el contenido actual dentro como fallback:
  
 ...el "sin registros" actual... 
Usa un nombre corto y estable por pantalla (p. ej. faturas-vazio, contatos-vazio). NO uses un selector de CSS generado por el build. Devuélveme la lista de los nombres que creaste.

3) CONCLUSIÓN DE PASOS (importante para la métrica real)
Para cada paso del onboarding que representa una ACCIÓN REAL del usuario (p. ej. "emitir la primera factura"), llama en el momento EXACTO en que la acción se concreta de verdad — después de guardar en el servidor, no en el clic del botón:
  window.AppKit && window.AppKit.track('fatura_emitida')
Usa un nombre de evento por acción, en snake_case. Devuélveme la lista de eventos que creaste.

4) NO ROMPER NADA
- Carga el SDK de forma asíncrona; es fail-open (si se cae, desaparece solo y no afecta mi producto).
- La clave pk_live es pública por naturaleza (puede quedar en el cliente). No expongas ninguna clave secreta.
- No bloquees el renderizado esperando a AppKit.

Al final, lista: (a) archivos modificados, (b) nombres de data-appkit creados, (c) nombres de eventos creados — para que yo los configure en el panel de AppKit.

02Instalación

Dos formas. Si usas un framework, empieza por npm.

Con bundler (React, Vue, Next, Svelte…) — recomendado

npm i @tecaless/appkit-sdk

import { init, track } from '@tecaless/appkit-sdk'

init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId: usuario.id })
// cuando ocurre una acción real:
track('fatura_emitida')

No-code / sitio estático — una línea

<script src="https://appkit.com.br/sdk/appkit@3.0.7.js"
        data-key="MINHA_CHAVE_PK_LIVE"
        data-user="ID_DO_USUARIO" async></script>

Tu clave pk_live_… está en el panel, en Instalación. Es pública por naturaleza (solo permite leer tu configuración y enviar eventos).

03Dónde aparece cada cosa

Las tres experiencias funcionan en cualquier página de tu producto, dentro del dominio donde lo instalaste. Lo controlas todo desde el panel, sin nuevo deploy.

04Pantallas vacías: no necesitas tocar el código

La magia de la pantalla vacía es no tener que declarar nada. Haz clic en Copiar prompt y tu agente de IA se encarga de la parte técnica: apunta a un elemento que ya existe en tu sistema (vía selector, sin tocar el HTML) o, si hace falta, agrega una marca estable — AppKit acepta las dos. Después solo editas el texto desde el panel, para siempre, sin deploy.

Copiar el prompt para mi agente de IA

El usuario hizo clic en "Copiar prompt" en la función PANTALLAS VACÍAS de AppKit (appkit.com.br). Quiere que una pantalla que nace sin datos en su producto se convierta en una invitación a la acción, SIN tocar el código manualmente. Haz:

PRERREQUISITO — AppKit debe estar instalado. Si aún no lo está, instálalo antes:
  npm i @tecaless/appkit-sdk
  import { init } from '@tecaless/appkit-sdk'; init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId:  })
  (o, no-code:  antes de )

PANTALLA VACÍA — encuentra en el código la pantalla que nace vacía (p. ej. lista de facturas/contactos) y elige CÓMO se ancla AppKit ahí (las dos formas se aceptan):
  (a) apunta a un elemento que YA EXISTE, vía un selector CSS estable (id o clase semántica) — sin tocar el HTML; o
  (b) si solo hay clase generada por el build, envuelve el estado vacío en 
…contenido actual…
.
Devuélveme el selector/nombre de cada pantalla vacía (p. ej. "#faturas-vazio" o "faturas-vazio") para pegarlo en el panel → Pantallas vacías.

FUNCIONES DISPONIBLES de AppKit (activa cada una en el panel https://appkit.com.br/painel): checklist de primeros pasos, pantallas vacías, avisos arriba, y conclusión de pasos por evento (llama a window.AppKit.track('acao_real') en el instante de la acción real). Guía completa: https://appkit.com.br/guia

NO rompas nada: carga async, el SDK es fail-open, y la clave pk_live es pública (no expongas ninguna clave secreta). Al final, lista los archivos modificados y los selectores/nombres creados.

Si el anclaje desaparece algún día, AppKit te avisa (evento appkit_anchor_missing) y no renderiza nada — tu pantalla sigue normal.

05Cómo se completa un paso

Tres modos, elegidos por paso en el panel. Esto decide si tu embudo de activación mide acción real o solo clics.

06Garantías

• Falla abierta: si AppKit se cae, el widget desaparece y tu producto sigue idéntico. Ningún error nuestro llega a tu consola.
• Ligero y aislado: ~10 KB, en Shadow DOM. No toca tu CSS ni compite con la carga de tu página.
• Botón de apagado: un clic en el panel quita AppKit de todos tus usuarios en hasta 30 segundos, sin deploy.
• LGPD por construcción: el id de tu usuario se convierte en un hash irreversible (SHA-256 + salt por cuenta) antes de tocar la base de datos. Nunca envíes correo o nombre.
• Auditable: el SDK se sirve desde una URL fija y hay un paquete npm público.

07Errores comunes (y cómo evitarlos)

¿Aún con dudas? contato@appkit.com.br.