Vibe Coding — Web Integration

=== GAMMAL TECH WEB SDK v3.0 REFERENCE ===

SETUP:
Add this script to your HTML:
<script src="https://api.gammal.tech/sdk-web.js"></script>

IMPORTANT: Register your domain at https://my.gammal.tech first.
No API keys needed - security uses domain whitelisting.

---

ONE-LINE INTEGRATIONS SUMMARY:

| Feature              | Code                                                      |
|----------------------|-----------------------------------------------------------|
| Login                | GammalTech.login()                                        |
| Logout               | GammalTech.logout()                                       |
| Check Auth           | GammalTech.onAuth(onLoggedIn, onLoggedOut)                |
| Is Logged In         | GammalTech.isLoggedIn()                                   |
| Verify Token         | GammalTech.verify()                                       |
| Get User Data        | GammalTech.user.get()                                     |
| Save User Data       | GammalTech.user.save({ name: 'Ahmed', level: 5 })         |
| Wallet Payment (EGP) | GammalTech.pay(100, 'Premium', onDeliver)                 |
| Card Payment (USD)   | GammalTech.payCard(10, 'USD', 'Pro Plan', onDeliver)      |
| AI Simple            | GammalTech.ai.ask('What is AI?')                          |
| AI + System Prompt   | GammalTech.ai.ask('Help', { system_prompt: '...' })       |
| AI + Temperature     | GammalTech.ai.ask('Write poem', { temperature: 0.9 })     |
| AI + Max Tokens      | GammalTech.ai.ask('Explain', { max_tokens: 2000 })        |
| AI + History         | GammalTech.ai.ask('Continue', { history: [...] })         |

---

AUTHENTICATION:

GammalTech.login()
- Opens secure login popup, auto-stores token
- Returns: Promise<string> (JWT token)
- Example:
  GammalTech.login().then(function() {
      showDashboard();
  });

GammalTech.logout()
- Logs out user, auto-clears token
- Returns: Promise<boolean>
- Example:
  GammalTech.logout().then(function() {
      showLoginPage();
  });

GammalTech.isLoggedIn()
- Check if user is logged in (sync)
- Returns: boolean
- Example:
  if (GammalTech.isLoggedIn()) {
      showDashboard();
  }

GammalTech.onAuth(onLoggedIn, onLoggedOut)
- React to auth state (verifies token with server)
- Example:
  GammalTech.onAuth(
      function() { showDashboard(); },
      function() { showLoginPage(); }
  );

GammalTech.verify()
- Verify current token is valid
- Returns: Promise<{valid: boolean}>
- Example:
  GammalTech.verify().then(function(result) {
      console.log('Valid:', result.valid);
  });

GammalTech.getToken()
- Get the stored token
- Returns: string or null

---

USER DATA STORAGE:

GammalTech.user.get()
- Gets stored user data (no token needed)
- Returns: Promise<object>
- Example:
  GammalTech.user.get().then(function(data) {
      console.log(data.name);
  });

GammalTech.user.save(data)
- Saves user data (no token needed)
- Returns: Promise<boolean>
- Example:
  GammalTech.user.save({
      name: 'Ahmed',
      preferences: { theme: 'dark' }
  });

---

PAYMENTS:

GammalTech.pay(amount, description, onDeliver)
- ONE-LINE wallet payment (EGP)
- Opens popup, verifies payment, calls your callback, confirms delivery
- onDeliver callback runs ONLY after payment is verified
- Returns: Promise<{success, txn, amount, delivered_at}>
- Example:
  GammalTech.pay(100, 'Premium Access', function(info) {
      // This runs after payment verified
      console.log('Paid! TXN:', info.txn);
      unlockPremium();
  }).then(function(result) {
      alert('Thank you! TXN: ' + result.txn);
  }).catch(function(err) {
      if (err.message !== 'Payment cancelled') {
          alert('Error: ' + err.message);
      }
  });

GammalTech.payCard(amount, currency, description, onDeliver)
- ONE-LINE card payment (Stripe)
- Supports: USD, EUR, GBP, EGP, AED, SAR, and more
- Example:
  GammalTech.payCard(10, 'USD', 'Pro Plan', function(info) {
      unlockPro();
  });

---

AI ASSISTANT:

GammalTech.ai.ask(message)
GammalTech.ai.ask(message, options)
- Sends message to AI, returns response (no token needed)
- Returns: Promise<string>
- Options:
  - system_prompt: string (custom AI personality/instructions)
  - history: array of {role: 'user'|'assistant', content: string}
  - temperature: number (0-1, default 0.7, higher = more creative)
  - max_tokens: number (response length limit)

- Basic example:
  GammalTech.ai.ask('What is 2+2?').then(function(answer) {
      console.log(answer);
  });

- With system prompt:
  GammalTech.ai.ask('Help me write an email', {
      system_prompt: 'You are a professional business writer. Be concise.'
  });

- With temperature:
  GammalTech.ai.ask('Write a poem about coding', {
      temperature: 0.9
  });

- With conversation history:
  var history = [
      {role: 'user', content: 'My name is Ahmed'},
      {role: 'assistant', content: 'Nice to meet you!'}
  ];
  GammalTech.ai.ask('What is my name?', {
      history: history
  });

- All options combined:
  GammalTech.ai.ask('Continue the story', {
      system_prompt: 'You are a creative storyteller',
      history: previousMessages,
      temperature: 0.8,
      max_tokens: 2000
  });

---

COMPLETE EXAMPLE:

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <!-- Guest View -->
    <div id="guest">
        <h1>Welcome</h1>
        <button id="loginBtn">Login</button>
    </div>
    
    <!-- User View -->
    <div id="user" style="display:none">
        <h1>Hello <span id="userName"></span>!</h1>
        
        <button id="buyBtn">Buy Premium - 100 EGP</button>
        <button id="buyCardBtn">Buy Pro - $10 USD</button>
        
        <input id="chatInput" placeholder="Ask AI...">
        <button id="askBtn">Ask</button>
        <p id="response"></p>
        
        <button id="logoutBtn">Logout</button>
    </div>

    <script src="https://api.gammal.tech/sdk-web.js"></script>
    <script>
        // Check auth state on page load
        GammalTech.onAuth(showUser, showGuest);
        
        function showGuest() {
            document.getElementById('guest').style.display = 'block';
            document.getElementById('user').style.display = 'none';
        }
        
        function showUser() {
            document.getElementById('guest').style.display = 'none';
            document.getElementById('user').style.display = 'block';
            
            GammalTech.user.get().then(function(data) {
                if (data.name) {
                    document.getElementById('userName').textContent = data.name;
                }
            });
        }
        
        // Login
        document.getElementById('loginBtn').onclick = function() {
            GammalTech.login().then(showUser);
        };
        
        // Buy Premium (Wallet)
        document.getElementById('buyBtn').onclick = function() {
            GammalTech.pay(100, 'Premium Access', function(info) {
                GammalTech.user.save({ premium: true });
                alert('Premium unlocked!');
            });
        };
        
        // Buy Pro (Card)
        document.getElementById('buyCardBtn').onclick = function() {
            GammalTech.payCard(10, 'USD', 'Pro Plan', function(info) {
                GammalTech.user.save({ pro: true });
                alert('Pro unlocked!');
            });
        };
        
        // AI Chat
        document.getElementById('askBtn').onclick = function() {
            var msg = document.getElementById('chatInput').value;
            GammalTech.ai.ask(msg).then(function(res) {
                document.getElementById('response').textContent = res;
            });
        };
        
        // Logout
        document.getElementById('logoutBtn').onclick = function() {
            GammalTech.logout().then(showGuest);
        };
    </script>
</body>
</html>

---

LEGACY API (v2.x style - still works):

If you need to pass tokens manually:
- GammalTech.verify(token)
- GammalTech.logout(token)
- GammalTech.user.get(token)
- GammalTech.user.save(token, data)
- GammalTech.ai.chat(token, message, options)
- GammalTech.payment.checkout(token, {amount, description})
- GammalTech.payment.card(token, {amount, currency, description})
- GammalTech.payment.verifyPayment(token, payment_token)
- GammalTech.payment.confirmDelivery(token)
- GammalTech.payment.settlePending(token)

=== END OF REFERENCE ===