Integrate Context and User Data
The Mini App SDK provides access to user’s social context and enables app-specific functionality like notifications and cast composition.Why Context Integration Is Essential
Context integration allows your app to:- Access User Data: Get the user’s Farcaster profile, FID, and connected wallet
- Send Notifications: Notify users about important events or updates
- Create Social Actions: Enable users to compose casts directly from your app
Choose Your Integration Path
For React Applications Follow the MiniKit integration guide for React-specific hooks and onchain components. For All Other Frameworks Follow the Farcaster Mini Apps Getting Started Guide to integrate the core SDK.MiniKit is built on top of the Mini App SDK and provides additional React hooks and onchain components for easier integration in React applications.
Configure Ready State Handling
Mini Apps display a splash screen while loading. You must call theready()
function to signal when your app has finished loading.
Why Ready State Matters
- User Experience: Replaces the loading splash screen with your app interface
- Performance Perception: Shows users when your app is fully functional
- Required Behavior: Host clients expect this signal to know when to hide loading states
Implementation Examples
Choose the guide that matches your setup:- Mini App SDK: Ready Action Documentation
- MiniKit: Frame Readiness Documentation
Understanding Notification Requirements
Notifications enhance user engagement but require server-side infrastructure. If your app is frontend-only, you have several options to add notification capabilities.Why Notifications Need a Backend
Notifications require server-side handling because:- Security: Notification tokens must be stored securely in a database
- Webhooks: Tokens are delivered to your server when users add your Mini App
- CORS Restrictions: Notifications must be sent from your server, not the client
Frontend-only applications cannot implement notifications without additional server infrastructure.
Options for Frontend-Only Projects
Choose the approach that best fits your setup:- Add Server Routes: Extend your app with Express.js/Node.js API endpoints
- Use Serverless Functions: Deploy to Vercel/Netlify with API function support
- Managed Services: Use Neynar for managed notification infrastructure
- Skip Notifications: Build your Mini App without notification features
Webhook Configuration
If implementing notifications, add the webhook URL to your manifest:Implementation Checklist
Follow these steps to convert your web app into a Mini App:Manifest Setup
- Generate account association
- Create
/.well-known/farcaster.json
with bothaccountAssociation
andframe
orminiapp
objects - Verify manifest accessibility at
https://yourdomain.com/.well-known/farcaster.json
- Test manifest returns valid JSON with correct content type
Embed Metadata
- Add
fc:frame
orfc:miniapp
meta tag to your pages - Include preview image and launch button configuration
- Test social sharing preview in supported clients
SDK Integration
- Install appropriate SDK: Mini App SDK or MiniKit
- Access user context and social data
- Implement ready state handling when app finishes loading