AI Pass Web SDK — Quick Guide

Using Claude Code, Cursor, or another AI coding agent?

Skip the manual setup — install the AI Pass skill so your agent already knows how to integrate:

npx skills add aipass-one/skill

Pick aipass-api for personal use, or aipass-oauth-appif you're building an app where users sign in.

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>

Docs Home Go to Dashboard

Using Claude Code, Cursor, or another AI agent?

Drop the AI Pass skill into your agent and skip the manual setup. Works with Claude Code, Codex, Cursor, OpenCode, and 38+ other agents.

npx skills add aipass-one/skill

Two skills available: aipass-api (personal use) and aipass-oauth-app (for app builders).

Stuck? We're happy to help on Discord

Active Discord community with the AI Pass team. Get unblocked on integration, ask about models, share what you're building.

Join AI Pass Discord