AI Pass Web SDK — Quick Guide

1) Add the SDK

<!-- Include AI Pass UI Stylesheet (optional but recommended) -->
<link rel="stylesheet" href="https://aipass.one/aipass-ui.css">

<!-- Include AI Pass SDK (UI components built-in!) -->
<script src="https://aipass.one/aipass-sdk.js"></script>

The UI stylesheet is optional but provides beautiful, zero-config authentication button with balance display and automatic state management!

2) Initialize (clientId is required)

<script>
  AiPass.initialize({
    clientId: 'your_client_id',
  });
</script>

3) Add AI Pass Button (Zero Config!)

<!-- Just add this one line - everything works automatically! -->
<div data-aipass-button></div>

The button automatically handles login/logout, balance display, and state changes. No JavaScript code needed!

Or use a custom button:

<button id="aipass-login">Sign in with AI Pass</button>
<script>
  document.getElementById('aipass-login').addEventListener('click', async () => {
    try {
      await AiPass.login();
      alert('Signed in!');
    } catch (e) {
      alert('Login failed: ' + e.message);
    }
  });
</script>

4) Call your first completion

const result = await AiPass.generateCompletion({
  prompt: 'Tell me a short joke about browsers',
  model: 'gemini/gemini-2.5-flash-lite',
  maxTokens: 120
});
console.log(result.choices[0].message.content);

✅ Done!

That’s the entire flow. From here you can:

Generate images, speech, or embeddings with one-liners.
Open your user dashboard with AiPass.openDashboard().
Check balance with AiPass.getUserBalance().

Explore all SDK methods →

Bonus: Complete minimal page with UI Button

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://aipass.one/aipass-ui.css">
</head>
<body>
  <!-- Zero-config AI Pass button -->
  <div data-aipass-button></div>

  <button id="ask" disabled>Ask AI</button>
  <div id="out"></div>

  <script src="https://aipass.one/aipass-sdk.js"></script>
  <script>
    AiPass.initialize({ clientId: 'your_client_id' });

    // Enable Ask button when user logs in
    document.addEventListener('aipass:login', () => {
      document.getElementById('ask').disabled = false;
    });

    // Disable Ask button when user logs out
    document.addEventListener('aipass:logout', () => {
      document.getElementById('ask').disabled = true;
      document.getElementById('out').textContent = '';
    });

    // Enable if already authenticated
    if (AiPass.isAuthenticated()) {
      document.getElementById('ask').disabled = false;
    }

    document.getElementById('ask').onclick = async () => {
      const res = await AiPass.generateCompletion({
        prompt: 'Tell me a short joke!',
        model: 'gemini/gemini-2.5-flash-lite'
      });
      document.getElementById('out').textContent = res.choices[0].message.content;
    };
  </script>
</body>
</html>

Live Interactive Demo

See the AI Pass button in action! Code on the left, live demo on the right:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet"
    href="https://aipass.one/aipass-ui.css">
</head>
<body>
  <!-- Zero-config button -->
  <div data-aipass-button></div>

  <button id="ask" disabled>
    Ask AI
  </button>
  <div id="out"></div>

  <script
    src="https://aipass.one/aipass-sdk.js">
  </script>
  <script>
    AiPass.initialize({
      clientId: 'your_client_id'
    });

    // Enable on login
    document.addEventListener(
      'aipass:login', () => {
      document.getElementById('ask')
        .disabled = false;
    });

    // Disable on logout
    document.addEventListener(
      'aipass:logout', () => {
      document.getElementById('ask')
        .disabled = true;
      document.getElementById('out')
        .textContent = '';
    });

    // Check if authenticated
    if (AiPass.isAuthenticated()) {
      document.getElementById('ask')
        .disabled = false;
    }

    // Ask AI handler
    document.getElementById('ask')
      .onclick = async () => {
      const res = await
        AiPass.generateCompletion({
        prompt: 'Short joke!',
        model: 'gemini/gemini-2.5-flash-lite'
      });
      document.getElementById('out')
        .textContent =
        res.choices[0].message.content;
    };
  </script>
</body>
</html>

Live Demo

👆 Click the AI Pass button to authenticate, then try "Ask AI"