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 the ready() 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:

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:
  1. Add Server Routes: Extend your app with Express.js/Node.js API endpoints
  2. Use Serverless Functions: Deploy to Vercel/Netlify with API function support
  3. Managed Services: Use Neynar for managed notification infrastructure
  4. Skip Notifications: Build your Mini App without notification features

Webhook Configuration

If implementing notifications, add the webhook URL to your manifest:
{
  "frame": {
    "webhookUrl": "https://yourapp.com/api/webhook"
  }
}

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 both accountAssociation and frame or miniappobjects
  • 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 or fc: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

Next Steps