इंटीग्रेशन गाइड

बिना ग़लती के इंस्टॉल करें — आप, या आपका AI एजेंट।

AppKit जो कुछ करता है, हर चीज़ कहाँ दिखती है, और आपके कोडिंग असिस्टेंट में चिपकाने के लिए एक तैयार prompt। जो आपको करना नहीं आता, वह एजेंट आपके लिए कर देता है।

AI के लिए prompt इंस्टॉलेशन कहाँ दिखता है खाली स्क्रीनें क़दमों का पूरा होना गारंटियाँ आम ग़लतियाँ

01आपके AI एजेंट के लिए prompt

नीचे का टेक्स्ट अपने कोडिंग असिस्टेंट में चिपकाएँ, MINHA_CHAVE_PK_LIVE को अपने डैशबोर्ड की key से बदलें, और वह पूरा इंटीग्रेशन कर देगा — इंस्टॉलेशन, खाली स्क्रीनें और क़दमों का पूरा होना — आपके प्रोडक्ट को तोड़े बिना।

Claude Code Antigravity OpenAI / Codex Cursor, Copilot…

prompt-appkit.txt

तुम मेरे कोडिंग असिस्टेंट हो। AppKit (appkit.com.br) को मेरे वेब प्रोडक्ट में इंटीग्रेट करो, कुछ भी तोड़े बिना। AppKit एक onboarding checklist, खाली स्क्रीनें और घोषणाएँ इंजेक्ट करता है, जिन्हें एक बाहरी डैशबोर्ड नियंत्रित करता है। ठीक-ठीक यह करो:

1) इंस्टॉलेशन
- अगर प्रोजेक्ट bundler (React/Vue/Next/Svelte/आदि) इस्तेमाल करता है: यह पैकेज इंस्टॉल करो
  @tecaless/appkit-sdk
  और entry point में, यूज़र के लॉगिन करने के बाद (जब मेरे पास उसकी id आ चुकी हो), यह कॉल करो:
  import { init } from '@tecaless/appkit-sdk'
  init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId: <लॉग-इन यूज़र की स्थिर id> })
- अगर स्टैटिक / no-code साइट है:  से पहले जोड़ो:
  
- userId/data-user लॉग-इन यूज़र का स्थिर पहचानकर्ता होना ही चाहिए। AppKit उसे सर्वर पर hash में बदल देता है — ईमेल या नाम कभी मत भेजो। अगर कोई लॉग-इन यूज़र नहीं है, तो userId छोड़ दो।

2) खाली स्क्रीनें
हर उस स्क्रीन के लिए जो बिना डेटा के शुरू होती है और जहाँ मुझे कार्रवाई का आमंत्रण चाहिए (जैसे इनवॉइस, संपर्क, कैलेंडर), मौजूदा खाली स्थिति को एक चिह्नित कंटेनर में लपेटो, और मौजूदा सामग्री को fallback के रूप में अंदर रखो:
   ...मौजूदा "कोई रिकॉर्ड नहीं" सामग्री... 
हर स्क्रीन के लिए एक छोटा, स्थिर नाम इस्तेमाल करो (जैसे faturas-vazio, contatos-vazio)। build से जनरेट हुआ CSS सिलेक्टर मत इस्तेमाल करो। बनाए गए नामों की सूची मुझे लौटाओ।

3) क़दमों का पूरा होना (असली मेट्रिक के लिए महत्वपूर्ण)
onboarding के हर उस क़दम के लिए जो यूज़र की असली कार्रवाई दर्शाता है (जैसे "पहला इनवॉइस जारी करना"), ठीक उसी क्षण कॉल करो जब कार्रवाई सचमुच पूरी होती है — सर्वर पर सेव होने के बाद, बटन क्लिक पर नहीं:
  window.AppKit && window.AppKit.track('fatura_emitida')
हर कार्रवाई के लिए snake_case में एक इवेंट नाम इस्तेमाल करो। बनाए गए इवेंट की सूची मुझे लौटाओ।

4) कुछ मत तोड़ो
- SDK को असिंक्रोनस तरीक़े से लोड करो; यह fail-open है (गिर जाए तो अपने आप ग़ायब हो जाता है और मेरे प्रोडक्ट पर असर नहीं डालता)।
- pk_live key स्वभाव से पब्लिक है (क्लाइंट पर रह सकती है)। कोई भी सीक्रेट key उजागर मत करो।
- AppKit के इंतज़ार में रेंडरिंग ब्लॉक मत करो।

अंत में सूची दो: (a) बदली गई फ़ाइलें, (b) बनाए गए data-appkit नाम, (c) बनाए गए इवेंट नाम — ताकि मैं उन्हें AppKit डैशबोर्ड में कॉन्फ़िगर कर सकूँ।

एजेंट का काम पूरा होने पर, उसके लौटाए data-appkit नाम और इवेंट नाम इस्तेमाल करके डैशबोर्ड में खाली स्क्रीनें और क़दमों का पूरा होना कॉन्फ़िगर करें।

02इंस्टॉलेशन

दो तरीक़े। अगर आप कोई फ्रेमवर्क इस्तेमाल करते हैं, तो npm से शुरू करें।

bundler के साथ (React, Vue, Next, Svelte…) — अनुशंसित

terminal

npm i @tecaless/appkit-sdk

app.js — लॉगिन के बाद

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

init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId: usuario.id })
// जब कोई असली कार्रवाई होती है:
track('fatura_emitida')

No-code / स्टैटिक साइट — एक लाइन

</body> से पहले

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

आपकी pk_live_… key डैशबोर्ड में इंस्टॉलेशन के अंतर्गत है। यह स्वभाव से पब्लिक है (सिर्फ़ आपकी कॉन्फ़िगरेशन पढ़ने और इवेंट भेजने देती है)।

03हर चीज़ कहाँ दिखती है

तीनों अनुभव आपके प्रोडक्ट के किसी भी पेज पर काम करते हैं, उसी डोमेन के भीतर जहाँ आपने इंस्टॉल किया। सब कुछ आप डैशबोर्ड से नियंत्रित करते हैं, बिना नए deploy के।

Checklist

कोने में तैरता कार्ड। किसी भी पेज पर दिखता है; यूज़र के सब कुछ पूरा करते ही अपने आप ग़ायब हो जाता है।

घोषणा

ऊपर की पट्टी जो सामग्री को नीचे धकेलती है (ढकती नहीं)। इसमें लिंक हो सकता है। आप इसे जब चाहें प्रकाशित करें या हटाएँ।

खाली स्क्रीन

जहाँ आपका प्रोडक्ट "कोई रिकॉर्ड नहीं" दिखाता है — आपको कोड छूने की ज़रूरत नहीं (आपका एजेंट सँभालता है)। यह कार्रवाई का आमंत्रण बन जाता है।

04खाली स्क्रीनें: आपको कोड छूने की ज़रूरत नहीं

खाली स्क्रीन का जादू यह है कि आपको कुछ भी घोषित नहीं करना पड़ता। Prompt कॉपी करें पर क्लिक करें और आपका AI एजेंट तकनीकी हिस्सा सँभाल लेता है: वह आपके सिस्टम में पहले से मौजूद किसी एलिमेंट की ओर इशारा करता है (सिलेक्टर से, HTML छुए बिना) या ज़रूरत पड़ने पर एक स्थिर मार्कर जोड़ता है — AppKit दोनों स्वीकारता है। उसके बाद आप बस डैशबोर्ड से टेक्स्ट संपादित करते हैं, हमेशा के लिए, बिना deploy के।

यूज़र ने AppKit (appkit.com.br) के "खाली स्क्रीनें" फ़ीचर में "Prompt कॉपी करें" पर क्लिक किया। वह चाहता है कि उसके प्रोडक्ट की बिना डेटा वाली स्क्रीन कार्रवाई का आमंत्रण बन जाए, हाथ से कोड बदले बिना। यह करो:

पूर्व-शर्त — AppKit इंस्टॉल होना चाहिए। अगर अभी नहीं है, तो पहले इंस्टॉल करो:
  npm i @tecaless/appkit-sdk
  import { init } from '@tecaless/appkit-sdk'; init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId: <लॉग-इन यूज़र की id> })
  (या, no-code:   से पहले)

खाली स्क्रीन — कोड में वह स्क्रीन ढूँढो जो खाली शुरू होती है (जैसे इनवॉइस/संपर्क सूची) और चुनो कि AppKit वहाँ कैसे एंकर करेगा (दोनों तरीक़े स्वीकार्य हैं):
  (a) एक स्थिर CSS सिलेक्टर (id या सिमैंटिक क्लास) से पहले से मौजूद एलिमेंट की ओर इशारा करो — HTML छुए बिना; या
  (b) अगर सिर्फ़ build से जनरेट हुई क्लास हो, तो खाली स्थिति को इसमें लपेटो: …मौजूदा सामग्री….
हर खाली स्क्रीन का सिलेक्टर/नाम मुझे लौटाओ (जैसे "#faturas-vazio" या "faturas-vazio") ताकि मैं उसे डैशबोर्ड → खाली स्क्रीनें में चिपका सकूँ।

AppKit के उपलब्ध फ़ीचर (हर एक को डैशबोर्ड https://appkit.com.br/painel में सक्रिय करो): पहले क़दमों की checklist, खाली स्क्रीनें, ऊपर की घोषणाएँ, और इवेंट से क़दमों का पूरा होना (असली कार्रवाई के क्षण window.AppKit.track('acao_real') कॉल करो)। पूरी गाइड: https://appkit.com.br/guia

कुछ मत तोड़ो: async लोड करो, SDK fail-open है, और pk_live key पब्लिक है (सीक्रेट key उजागर मत करो)। अंत में बदली गई फ़ाइलें और बनाए गए सिलेक्टर/नाम सूचीबद्ध करो।

अगर कभी एंकर ग़ायब हो जाए, तो AppKit आपको सूचित करता है (appkit_anchor_missing इवेंट) और कुछ भी रेंडर नहीं करता — आपकी स्क्रीन सामान्य बनी रहती है।

05एक क़दम कैसे पूरा होता है

तीन तरीक़े, डैशबोर्ड में हर क़दम के लिए चुने जाते हैं। यही तय करता है कि आपका ऐक्टिवेशन फ़नल असली कार्रवाई मापता है या सिर्फ़ क्लिक।

सच

इवेंट से

आपका कोड असली कार्रवाई के क्षण AppKit.track('acao') कॉल करता है। इसे नक़ली नहीं बनाया जा सकता — यही ट्रैक्शन मेट्रिक के काम आता है।

proxy

रूट से

यूज़र किसी रूट पर पहुँचता है (जैसे /faturas/nova)। असली संकेत, पर "पहुँचना" "करना" नहीं है।

वैकल्पिक

मैनुअल

यूज़र आइटम पर क्लिक करके उसे चिह्नित करता है। सूचनात्मक क़दमों ("यह पढ़ें") के लिए है। इसे जानबूझकर नक़ली बनाया जा सकता है।

आपके ट्रैक्शन एनालिटिक्स के मायने रखने के लिए, महत्वपूर्ण क़दम इवेंट से होने चाहिए। मैनुअल हों तो आप "यूज़र ने पूरा करें पर क्लिक किया" मापते हैं, "यूज़र ने किया" नहीं।

06गारंटियाँ

Fail-open: अगर AppKit गिर जाए, तो widget ग़ायब हो जाता है और आपका प्रोडक्ट जस का तस रहता है। हमारी कोई त्रुटि आपके console तक नहीं पहुँचती।
हल्का और अलग-थलग: ~10 KB, Shadow DOM में। आपकी CSS को नहीं छूता और न ही आपके पेज लोड से होड़ करता है।
बंद करने का बटन: डैशबोर्ड में एक क्लिक 30 सेकंड के भीतर आपके सभी यूज़र्स से AppKit हटा देता है, बिना deploy के।
बनावट से ही LGPD: आपके यूज़र की id डेटाबेस तक पहुँचने से पहले अपरिवर्तनीय hash बन जाती है (SHA-256 + प्रति-खाता salt)। ईमेल या नाम कभी न भेजें।
ऑडिट योग्य: SDK एक स्थिर URL से परोसा जाता है और एक पब्लिक npm पैकेज उपलब्ध है।

07आम ग़लतियाँ (और उनसे कैसे बचें)

Widget नहीं दिखता

data-key जाँचें और देखें कि अनुभव डैशबोर्ड में प्रकाशित है (ड्राफ़्ट नहीं)।

खाली स्क्रीन नहीं दिखती

HTML में data-appkit="…" नहीं है, या डैशबोर्ड का नाम कोड वाले नाम से मेल नहीं खाता।

क़दम अपने आप पूरा नहीं होता

"रूट से" नियम में रूट खाली है, या "इवेंट से" नियम में सही समय पर आपके कोड में track() नहीं है।

यूज़र का नाम दिख रहा है

अनुभवों के शीर्षक या data-user में नाम/ईमेल न डालें — एक स्थिर id इस्तेमाल करें।

अब भी कोई सवाल? contato@appkit.com.br।