Install without mistakes — you, or your AI agent.

01Prompt for your AI agent

Paste the text below into your coding assistant, swap MINHA_CHAVE_PK_LIVE for the key from your dashboard, and it does the whole integration — installation, empty states and step completion — without breaking your product.

You are my coding assistant. Integrate AppKit (appkit.com.br) into my web product WITHOUT breaking anything. AppKit injects an onboarding checklist, empty states and announcements, controlled from an external dashboard. Do exactly this:

1) INSTALLATION
- If the project uses a bundler (React/Vue/Next/Svelte/etc.): install the package
  @tecaless/appkit-sdk
  and, at the entry point, AFTER the user logs in (once I already have their id), call:
  import { init } from '@tecaless/appkit-sdk'
  init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId:  })
- If it is a static / no-code site: add BEFORE :
  
- The userId/data-user MUST be the stable identifier of the logged-in user. AppKit hashes it on the server — NEVER send email or name. If there is no logged-in user, leave userId out.

2) EMPTY STATES
For each screen that starts out with no data and where I want a call to action (e.g. invoices, contacts, calendar), wrap the current empty state in ONE marked container, keeping the current content inside as a fallback:
  
 ...the current "no records" content... 
Use a short, stable name per screen (e.g. faturas-vazio, contatos-vazio). Do NOT use a build-generated CSS selector. Hand me back the list of names you created.

3) STEP COMPLETION (important for real metrics)
For each onboarding step that represents a REAL user ACTION (e.g. "issue first invoice"), call it at the EXACT moment the action truly happens — after saving on the server, not on the button click:
  window.AppKit && window.AppKit.track('fatura_emitida')
Use one event name per action, in snake_case. Hand me back the list of events you created.

4) DO NOT BREAK ANYTHING
- Load the SDK asynchronously; it is fail-open (if it goes down, it disappears on its own and does not affect my product).
- The pk_live key is public by nature (it can live on the client). Do not expose any secret key.
- Do not block rendering while waiting for AppKit.

At the end, list: (a) files changed, (b) data-appkit names created, (c) event names created — so I can configure them in the AppKit dashboard.

02Installation

Two ways. If you use a framework, start with npm.

With a bundler (React, Vue, Next, Svelte…) — recommended

npm i @tecaless/appkit-sdk

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

init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId: usuario.id })
// when a real action happens:
track('fatura_emitida')

No-code / static site — one line

<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>

Your pk_live_… key is in the dashboard, under Installation. It is public by nature (it only allows reading your configuration and sending events).

03Where each piece appears

The three experiences work on any page of your product, within the domain where you installed it. You control everything from the dashboard, with no new deploy.

04Empty states: you do not need to touch the code

The magic of the empty state is that you declare nothing. Click Copy prompt and your AI agent takes care of the technical part: it points to an element that already exists in your system (via a selector, without touching the HTML) or, if needed, adds a stable marker — AppKit accepts both. After that you just edit the copy from the dashboard, forever, with no deploy.

Copy the prompt for my AI agent

The user clicked "Copy prompt" in AppKit's EMPTY STATES feature (appkit.com.br). They want a screen that starts out with no data in their product to become a call to action, WITHOUT editing code by hand. Do this:

PREREQUISITE — AppKit must be installed. If it is not yet, install it first:
  npm i @tecaless/appkit-sdk
  import { init } from '@tecaless/appkit-sdk'; init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId:  })
  (or, no-code:  before )

EMPTY STATE — find in the code the screen that starts out empty (e.g. invoice/contact list) and choose HOW AppKit anchors there (both ways are accepted):
  (a) point to an element that ALREADY EXISTS, via a stable CSS selector (id or semantic class) — without touching the HTML; or
  (b) if there is only a build-generated class, wrap the empty state in 
…current content…
.
Hand me back the selector/name of each empty state (e.g. "#faturas-vazio" or "faturas-vazio") so I can paste it in the dashboard → Empty states.

AVAILABLE AppKit FEATURES (enable each one in the dashboard https://appkit.com.br/painel): first-steps checklist, empty states, top announcements, and event-based step completion (call window.AppKit.track('acao_real') at the moment of the real action). Full guide: https://appkit.com.br/guia

Do NOT break anything: load async, the SDK is fail-open, and the pk_live key is public (do not expose any secret key). At the end, list the files changed and the selectors/names created.

If the anchor ever disappears, AppKit warns you (an appkit_anchor_missing event) and renders nothing — your screen stays normal.

05How a step gets completed

Three modes, chosen per step in the dashboard. This decides whether your activation funnel measures real action or just clicks.

06Guarantees

• Fail-open: if AppKit goes down, the widget disappears and your product stays exactly the same. None of our errors reach your console.
• Light and isolated: ~10 KB, in a Shadow DOM. It does not touch your CSS or compete with your page load.
• Off switch: one click in the dashboard removes AppKit from all your users within 30 seconds, no deploy.
• LGPD by construction: your user's id becomes an irreversible hash (SHA-256 + per-account salt) before it touches the database. Never send email or name.
• Auditable: the SDK is served from a fixed URL and there is a public npm package.

07Common mistakes (and how to avoid them)

Still unsure? contato@appkit.com.br.