Step-by-step tutorials to master H33.ai's powerful features
Create a secure app with biometric authentication and AI-powered caching in under 15 minutes.
Start Tutorial →Build a complete e-commerce flow with face ID checkout and 94% cache hit rates.
Start Tutorial →Implement a secure healthcare system with homomorphic encryption and blockchain audit trails.
Start Tutorial →Build a real-time app with WebSocket support and intelligent caching strategies.
Start Tutorial →Learn the fundamentals by building a secure app from scratch
Start by creating a new project and installing H33.ai:
# Create a new directory
mkdir my-h33-app && cd my-h33-app
# Initialize npm
npm init -y
# Install H33.ai
npm install @h33/platform expressCreate server.js with basic H33.ai integration:
import express from 'express';
import { H33 } from '@h33/platform';
const app = express();
const h33 = new H33({
apiKey: process.env.H33_API_KEY || 'demo_key'
});
// Initialize H33.ai
await h33.initialize();
// Add H33.ai middleware
app.use(h33.middleware());
// Protected route with biometric auth
app.get('/secure', h33.requireAuth(), (req, res) => {
res.json({
message: 'Welcome to the secure area!',
user: req.h33.user
});
});
// Cached API route
app.get('/api/data', h33.cache('5m'), async (req, res) => {
// This will be automatically cached with AI optimization
const data = await fetchExpensiveData();
res.json(data);
});
app.listen(3000, () => {
console.log('🚀 Server running on http://localhost:3000');
});Create index.html with biometric login:
<!DOCTYPE html>
<html>
<head>
<title>My H33 App</title>
<script src="https://cdn.h33.ai/sdk/latest.js"></script>
</head>
<body>
<h1>Welcome to My H33 App</h1>
<button id="loginBtn">Login with Face ID</button>
<div id="userInfo" style="display:none;">
<h2>Welcome, <span id="userName"></span>!</h2>
<button id="logoutBtn">Logout</button>
</div>
<script>
// Initialize H33
const h33 = new H33Client({
apiKey: 'demo_key'
});
// Login button
document.getElementById('loginBtn').onclick = async () => {
try {
const user = await h33.auth.login({
method: 'biometric'
});
// Update UI
document.getElementById('loginBtn').style.display = 'none';
document.getElementById('userInfo').style.display = 'block';
document.getElementById('userName').textContent = user.email;
} catch (error) {
console.error('Login failed:', error);
}
};
// Check if already logged in
h33.auth.onAuthStateChange((user) => {
if (user) {
document.getElementById('loginBtn').style.display = 'none';
document.getElementById('userInfo').style.display = 'block';
document.getElementById('userName').textContent = user.email;
}
});
</script>
</body>
</html>Start your server and test the features:
# Set your API key (get one free at h33.ai)
export H33_API_KEY=your_api_key
# Run the server
node server.js
# Open http://localhost:3000 in your browserYou've just built your first H33.ai app with:
Quick overview of the platform
Complete walkthrough
Understanding the technology
Get help, share your projects, and learn from others