JavaScript SDK Examples

Live Applications

Explore our live demo applications to see AI Pass in action:

AI Chat Application - Full-featured chat interface with AI Pass authentication
Grammar Checker - Text correction with side-by-side comparison
Image Studio - AI image generation and editing
Video Generator - AI video creation
Nail Art Studio - Creative AI application

Complete Example: Chat Application

Full working example with authentication and API calls:

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

  <div id="chat-interface" style="display:none;">
    <input id="message" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>
    <div id="messages"></div>
  </div>

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

    // Show chat interface when logged in
    document.addEventListener('aipass:login', () => {
      document.getElementById('chat-interface').style.display = 'block';
    });

    // Send message to AI
    async function sendMessage() {
      const input = document.getElementById('message');
      const messagesDiv = document.getElementById('messages');

      const userMsg = input.value;
      messagesDiv.innerHTML += `<div>You: ${userMsg}</div>`;

      const response = await AiPass.generateCompletion({
        prompt: userMsg,
        model: 'gemini/gemini-2.5-flash-lite',
        maxTokens: 500
      });

      const aiMsg = response.choices[0].message.content;
      messagesDiv.innerHTML += `<div>AI: ${aiMsg}</div>`;

      input.value = '';
    }
  </script>
</body>
</html>

Quick Start Example

For step-by-step guidance, see our Interactive Quick Start Guide which includes:

Live code examples with syntax highlighting
Interactive demo you can test in your browser
Complete minimal page examples

More Resources

Continue learning:

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