🤖 MeAgent SDK Demo

Plain HTML Integration Example

Welcome!

This is a live demo showing how to integrate the MeAgent SDK into a plain HTML website. Look for the chat button in the bottom-right corner!

Features

  • ✨ Single script tag - no dependencies required
  • 💬 AI-powered chat assistant
  • 🎨 Beautiful, modern UI
  • 🔒 Secure authentication with Magic Link
  • 🎁 Complete blockchain redemption flow
  • 🛍️ Same-brand & cross-brand reward swaps
  • 📱 Fully responsive design
  • ⚡ Standalone bundle (~1.7MB, includes all dependencies)

🔗 Bundled Dependencies

This SDK is a standalone bundle built with Webpack that includes all necessary blockchain dependencies:

  • ethers.js v5.7.2 - Blockchain wallet interactions
  • web3 v1.10.0 - Web3 provider for Magic wallet
  • Runtime SDK v0.11.8 - ME Protocol redemption logic
  • Protocol Core v0.10.55 - Token swaps & relay
  • Gelato Relay SDK - Gasless transactions

Everything works out of the box - just load one script!

Try It Out

Click the chat button in the bottom-right corner to start a conversation with the AI assistant. You can ask about products, rewards, or get help with anything!

Quick Start

Add the SDK to your HTML page (standalone - no dependencies needed):

<!-- Load the SDK from npm CDN -->
<script src="https://cdn.jsdelivr.net/npm/me-agent-sdk/dist/me-agent-sdk.min.js"></script>

<!-- Initialize -->
<script>
  window.addEventListener("DOMContentLoaded", async () => {
    await MeAgent.init({
      emailAddress: 'user@example.com',
      brandId: 'your-brand-id',
      userId: 'your-user-id',
      environment: MeAgent.Environment.DEV,
      network: MeAgent.Network.SEPOLIA
    });
  });
</script>

That's it! The SDK includes all blockchain dependencies bundled with Webpack.