@aspro02
📱 Guide: Build a Farcaster Mini-App Game with AI (No Coding Skills Needed)
want to build a Mini-App like Ghost Rush on Base? You don't need to be a developer you just need Trae AI and this blueprint.
I have open-sourced the code for Ghost Rush. Clone my GitHub repo https://github.com/aspro45/Ghost-Rush to see exactly how a Mini-App is structured.
Want to see a live example? Play the original Ghost Rush here: https://farcaster.xyz/miniapps/3y_PqEjNqKoX/ghost-rush
🧰 The Mini-App Toolkit
1.
@Trae_ai
(Free AI Code Editor).
2. My GitHub Repo (Your template).
3. Vercel (Free hosting).
🚀 Step 1: Initialize Project
1. Create a new empty folder on your desktop (e.g., my-miniapp).
2. Open Trae AI.
3. Click "Open Folder" and select your new folder.
🧠 Step 2: The "Mini-App" Prompt
We need to tell Trae specifically that this is a Farcaster Mini-App, not just a website.
Copy and paste this EXACT prompt into Trae:
"I want to build a Farcaster Mini-App (Frame v2) game using HTML5 Canvas. Please generate the files based on this structure:
The Game Concept: [DESCRIBE YOUR IDEA HERE]
1. index.html (The Mini-App Shell)
> Include the Farcaster Frame SDK in the head: <script src=" "></script>
> Add a 'Connect Wallet' button and a 'Start Game' button.
> Ensure the viewport is width=device-width, initial-scale=1 for full-screen mobile feel.
2. src/wallet.js (The Payment Layer)
> Create a module to handle EVM wallet connections (window.ethereum).
> Include a function to switch to Base Mainnet.
> Include a function sendPayment(amount) for in-game fees.
> IMPORTANT: Create a constant named CREATOR_WALLET at the top. Set it to a placeholder address for now.
3. src/main.js (The Logic)
> Initialize farcaster.sdk.actions.ready() on load to signal the Mini-App is ready.
> Game Logic: Write the code for the game concept above.
> Integration: When 'Connect Wallet' is clicked, trigger the wallet.js logic.
4. .well-known/farcaster.json (The Manifest)
> Create a valid Frame v2 manifest JSON.
> Use placeholder URLs for the icons and splash screen.
5. styles.css
> Make it look like a native mobile app (dark mode, no scrolling, touch-friendly UI).
Please generate all these files."
🛠️ Step 3: Let Trae Build
Trae will write the code. Click "Accept" for all files.
> To test: Type npx serve in the terminal to play in your browser.
💸 Step 4: The Money Move (CRITICAL)
If you skip this, you will not get creator fees.
1. Open src/wallet.js in Trae.
2. Find the line at the top:
JavaScript
const CREATOR_WALLET = "0x...";
3. DELETE the placeholder address.
4. PASTE your own Base wallet address.
Now, any fees players pay in the Mini-App go straight to your wallet.
☁️ Step 5: Deploy & Verify
A Mini-App needs to be verified on the Farcaster network.
1. Host it: Upload your code to GitHub and deploy it on Vercel. Copy your new URL (e.g., https://my-miniapp.vercel.app).
2. Update Manifest: In Trae, go to .well-known/farcaster.json and replace the placeholder URLs with your Vercel URL.
3. Verify Domain:
> Go to the https://farcaster.xyz/~/developers/mini-apps/manifest
> Enter your Vercel URL.
> It will ask you to sign a message. Copy the signature data it gives you.
>Paste that signature data into your farcaster.json file under accountAssociation.
4. Final Push: Push these changes to GitHub.
🏆 Launch It!
Paste your Vercel URL into a Cast it will automatically detect as a Mini-App and show the "Play" button.
Stuck? Check my code https://github.com/aspro45/Ghost-Rush to see how I built Ghost Rush.
Let's build! 🫡
0 reply
0 recast
2 reactions