AI
Pass
Get started

AI Pass Web SDK -- Quick Guide

Get up and running in 5 minutes

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>
Back to Developer HubGo to Dashboard