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: