A decentralized marketplace for AI agents built on Avalanche blockchain, featuring NFT-based ownership, secure authentication, and interactive chat interfaces.
Synaptica is a decentralized web application that lets users create, own, buy, sell, and interact with AI agents as NFTs on the Avalanche blockchain. It combines blockchain technology, secure wallet authentication, and interactive AI chat interfaces to create a marketplace for digital agents.
- Connect MetaMask or compatible Web3 wallet
- Authenticate via cryptographic message signing (no passwords)
- All transactions (minting, buying, selling) are signed and executed from the user's wallet
- Create custom AI agents: name, description, avatar image, system prompt
- Mint agents as ERC-721 NFTs on Avalanche Fuji testnet
- Pay AVAX for gas fees
- Store agent metadata on IPFS for decentralization
- List agents for sale, set price in AVAX
- Browse all available agents with metadata, price, seller info
- Buy agents directly, transferring NFT ownership on-chain
- Owners chat with their AI agents using built-in chat UI
- Agents respond based on their system prompt and capabilities
- Chat history and context maintained for personalized interactions
- Profile page shows owned and purchased agents
- Dashboard includes statistics (agents, purchases, sales) and recent activity
- Manage listings, view transaction history, access account settings
- Wallet-based authentication using cryptographic signatures
- Secure session management, no passwords or sensitive data stored
- Marketplace and profile pages update dynamically
- React hooks and context for efficient state management
- Frosted glass effects, gradients, backdrop blurs
- Responsive layouts for desktop, tablet, mobile
- Floating navigation bar, smooth transitions, micro-interactions
- View statistics about activity, agent performance, marketplace trends
- Activity feed shows recent actions (minting, buying, selling, chatting)
- Agent metadata and images stored on IPFS
- App converts IPFS URLs to HTTP for browser compatibility
- Frontend: Next.js 15, TypeScript, Tailwind CSS, React 19
- Blockchain: Avalanche Fuji Testnet, Solidity smart contracts (ERC-721), Ethers.js
- Backend: Next.js API routes for authentication, NFT operations, IPFS integration
- Smart Contracts: Custom contracts for agent minting, marketplace listing, transfers
- Storage: IPFS for agent metadata and images
- Security: Wallet-based authentication, input validation, error boundaries
- Performance: Turbopack, code splitting, image optimization
- Testing: ESLint, TypeScript type checking
- Connect Wallet: Click "Connect Wallet" and sign in with MetaMask
- Create Agent: Fill out agent details and mint as NFT
- List for Sale: List agent on marketplace, set price
- Buy Agent: Purchase agent, transfer ownership
- Chat: Owner chats with agent via profile dashboard
- Manage Profile: View stats, activity, manage agents
- Combines AI and blockchain for true digital ownership of intelligent agents
- Decentralized, censorship-resistant, user-controlled
- Modern, beautiful UI with advanced design and responsive features
- Secure, passwordless authentication and transaction management
- Framework: Next.js 15.5.0 with App Router
- Language: TypeScript 5
- Styling: Tailwind CSS 4
- Icons: Heroicons (SVG)
- State Management: React hooks and context
- Network: Avalanche Fuji Testnet
- Smart Contracts: Solidity
- Web3 Library: Ethers.js 6.15.0
- Development: Hardhat 3.0.1
- Linting: ESLint 9 with Next.js config
- Build Tool: Turbopack (Next.js)
- Package Manager: npm/yarn/pnpm
- Node.js 18+
- npm, yarn, or pnpm
- MetaMask or compatible Web3 wallet
- Avalanche Fuji testnet AVAX for transactions
-
Clone the repository
git clone https://github.com/lhcee3/ai-agent-marketplace-2.git cd ai-agent-marketplace-2 -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000
Create a .env.local file in the root directory:
# Add your environment variables here
NEXT_PUBLIC_CHAIN_ID=43113
NEXT_PUBLIC_RPC_URL=https://api.avax-test.network/ext/bc/C/rpcsrc/
├── app/ # Next.js App Router pages
│ ├── api/ # API routes
│ │ ├── auth/ # Authentication endpoints
│ │ ├── chat/ # Chat functionality
│ │ ├── nft/ # NFT operations
│ │ └── pinata/ # IPFS integration
│ ├── artist/ # Artist profile pages
│ ├── chat/ # Chat interface
│ ├── create/ # AI agent creation
│ ├── docs/ # Documentation
│ ├── marketplace/ # Marketplace browsing
│ └── profile/ # User dashboard
├── components/ # Reusable React components
│ └── ConnectWallet.tsx # Wallet connection component
├── lib/ # Utility libraries
│ ├── aiAgentMarketplace.ts
│ ├── aiAgentNft.ts
│ ├── eth.ts
│ └── mint-nft-real.ts
contracts/ # Smart contracts
├── AiAgentMarketplace.sol
└── AiAgentNFT.sol
public/ # Static assets
└── README.md
- Click "Connect Wallet" in the navigation
- Approve the connection in MetaMask
- Sign the authentication message
- Navigate to "Create" page
- Fill in agent details (name, description, capabilities)
- Upload avatar image
- Mint as NFT (requires AVAX for gas fees)
- Explore available AI agents
- View detailed agent profiles
- Purchase agents with AVAX
- Access owned agents from your profile
- Start conversations in the chat interface
- Enjoy personalized AI interactions
- View your statistics and activity
- Monitor owned and created agents
- Access account settings
- Handles wallet connection and authentication
- Manages user session state
- Provides secure sign-in flow
- User statistics and analytics
- Activity feed with recent actions
- Quick access to main features
- Account settings and preferences
- Public profiles for each user
- Wallet address-based routing
- Clean, minimal design focus
- Real-time conversations with AI agents
- Message history and context
- Responsive design for all devices
- Primary: Blue (#3B82F6) to Purple (#8B5CF6) gradients
- Background: Black (#000000) with transparency layers
- Text: White (#FFFFFF) with various opacity levels
- Accents: Blue-200, Purple-400, Green-400, Yellow-400
- Headings: Space Mono font family
- Body: Work Sans font family
- Display: Gradient text effects with bg-clip-text
- Glassmorphism: backdrop-blur-xl with transparent backgrounds
- Animations: Smooth transitions and hover effects
- Shadows: Layered shadow effects with color variants
- Wallet Authentication: Cryptographic signature verification
- Session Management: Secure token-based sessions
- Input Validation: Type-safe form handling
- Error Boundaries: Graceful error handling
- Mobile First: Optimized for mobile devices
- Tablet Support: Adaptive layouts for tablets
- Desktop Enhanced: Full feature set on desktop
- Touch Friendly: Large tap targets and gestures
- Next.js 15: Latest framework with automatic optimizations
- Turbopack: Fast development builds
- Code Splitting: Automatic route-based splitting
- Image Optimization: Next.js Image component
- Tree Shaking: Unused code elimination
# Run linting
npm run lint
# Type checking
npx tsc --noEmit# Build for production
npm run build
# Start production server
npm start- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Uses React 19 with concurrent features
- Async params handled with React.use()
- App Router with server/client components
- Avalanche Fuji testnet deployment
- ERC-721 NFT standards
- Gas-optimized smart contracts
- Lazy loading for heavy components
- Optimized asset delivery
- Efficient re-rendering patterns
For support, email [email protected] or create an issue in the GitHub repository.
- Mobile app development
- AI model training integration
- Cross-chain compatibility
- Advanced chat features
- Marketplace analytics
- Social features and communities
Built with ❤️ by the Synaptica Team