AI Agents Frontend Demo

A powerful demonstration of the Agent SDK showing two autonomous AI agents that can:

• Communicate with each other
• Register on-chain using ERC-8004
• Make autonomous gasless payments using x402
• Perform transactions on Avalanche Fuji testnet

Features

🤖 Two AI Agents - Agent A and Agent B that can interact autonomously 💬 Real-time Communication - Agents send messages to each other 💰 Autonomous Payments - Agents can make gasless payments using x402 📊 Transaction Visualization - See all onchain transactions in real-time 🌐 Avalanche Fuji Testnet - Real transactions on testnet

Prerequisites

• Node.js 18+ and npm
• Two wallet private keys (for Agent A and Agent B)
• Some AVAX on Fuji testnet for gas fees
• Some USDT tokens on Fuji testnet for payments

Setup

1. Install dependencies:

   cd agent-frontend-demo
   npm install

2. Build the agent-sdk package:

   cd ../agent-sdk
   npm run build
   cd ../agent-frontend-demo

3. Create .env file:

   cp .env.example .env

4. Add your private keys to .env:

   VITE_AGENT_A_PRIVATE_KEY=your_agent_a_private_key_here
   VITE_AGENT_B_PRIVATE_KEY=your_agent_b_private_key_here

5. Start the development server:

   npm run dev

6. Open in browser: Navigate to http://localhost:5173

Usage

1. Initialize Agents:

   • The agents will automatically initialize when the page loads
   • Or click "Register Agent A" / "Register Agent B" to register them on-chain

2. Start Conversation:

   • Click "🚀 Start Agent Conversation"
   • Watch as the agents:
     • Introduce themselves
     • Communicate with each other
     • Make autonomous payments
     • Execute onchain transactions

3. View Transactions:

   • All transactions are logged in real-time
   • Click "View on Snowscan" to see transactions on the blockchain explorer

What This Demonstrates

This demo showcases the power of the Agent SDK:

• ✅ ERC-8004 Identity - Agents register on-chain with unique identities
• ✅ x402 Gasless Payments - Agents can pay each other without gas fees
• ✅ Autonomous Transactions - Agents can execute transactions without user intervention
• ✅ Real-time Visualization - All actions are visualized in the UI
• ✅ Production Ready - Uses real contracts on Avalanche Fuji testnet

Architecture

• Frontend: React + TypeScript + Vite
• SDK: agent-sdk (local package)
• Blockchain: Avalanche Fuji Testnet
• Contracts: ERC-8004 registries + x402 relayer

Network Configuration

• Chain: Avalanche Fuji Testnet (Chain ID: 43113)
• ERC-8004 Contracts:
  • IdentityRegistry: 0x96eF5c6941d5f8dfB4a39F44E9238b85F01F4d29
  • ReputationRegistry: 0xDC61Ea0B4DC6f156F72b62e59860303a4753033F
  • ValidationRegistry: 0x467363Bd781AbbABB089161780649C86F6B0271B
• x402 Facilitator: http://testnet.0xgasless.com
• x402 Relayer: 0x8BD697733c31293Be2327026d01aE393Ab2675C4

Security Notes

⚠️ Never commit .env files with real private keys! ⚠️ This is a demo - use testnet keys only! ⚠️ Private keys are used client-side - only use testnet keys!

License

MIT