Guess the Character
Guess, Play, Win – An Onchain AI-Powered Game 🚀
Created on 4th April 2025
•
Guess the Character
Guess, Play, Win – An Onchain AI-Powered Game 🚀
The problem Guess the Character solves
🎭 Guess the Character – An Onchain AI Game
"Guess the Character" is an interactive, AI-powered onchain game where players chat with an AI agent that takes on the persona of a famous personality. The goal is to ask questions, gather hints, and correctly guess the character within 5 attempts to win onchain rewards.
If guessed correctly, the player receives:
✅ 1.25x their entry fee
✅ A mintable LSP8 NFT as a collectible
If they fail, the entry fee is lost, but they can try again!
- Frontend: Next.js, Shadcn, TailwindCSS, TypeScript
- AI Agent: Google Gemini AI (via Vercel AI SDK)
- Smart Contracts: Foundry (Solidity)
- Blockchain Standards: LSP8 Mintable NFT (LUKSO)
- Deployment: Vercel
Game Flow
1️⃣ User connects their Universal Profile (UP) Provider and selects a category (Football, Cricket, Hollywood, etc.).
2️⃣ The AI agent initiates the game and requests a small entry fee (~$2) via an onchain transaction.
3️⃣ Once the transaction is confirmed, the user has 5 tries to guess the character's exact name.
4️⃣ If the user wins:
- The GuessTheCharacter.sol contract mints an LSP8 NFT as a reward.
- The user receives 1.25x their entry fee back.
5️⃣ If the user loses, the entry fee is burned, and they can try again.
Challenges I ran into
Next.js Hydration Issues with UP Provider
While integrating the Universal Profile (UP) Provider, we faced a common Next.js issue where the app would throw errors related to window is not defined during server-side rendering (SSR). This happened because the UP Provider relies on window (a browser-specific object), which is unavailable during SSR.
Hydration Mismatch – The UP Provider expected window to be defined, leading to unexpected crashes.
Rendering Conflicts – Since Next.js renders components on the server first, any direct interaction with window resulted in errors.
To resolve this, I had to:
Used React Context to manage UP Provider initialization only on the client side.
Wrapped the Provider in useMemo to ensure it was initialized correctly without unnecessary re-renders.
Deferred Execution – By wrapping UP-related logic inside a useEffect hook, I ensured it ran only after the component was mounted.
Tracks Applied (1)