useMiniKit

Access frame context and control readiness state

Defined in @coinbase/onchainkit

Primary hook for accessing MiniKit frame context and managing frame readiness. This hook provides essential Mini App state and user context information.

Returns

context · MiniKitContext

Frame context information provided by the host application.

Show MiniKitContext properties

user · object

User information from the host application.

Show User properties

fid · string

Farcaster ID of the current user. Can be spoofed - use for analytics only.

client · object

Information about the host client application.

Show Client properties

added · boolean

Whether the user has saved this Mini App to their collection.

clientFid · string

Farcaster ID of the host client. Base App: “309857”.

location · string

Where the Mini App was launched from (e.g., “cast”, “launcher”, “notification”).

isFrameReady · boolean

Whether the frame has signaled readiness to the host application.

setFrameReady · () => void

Function to signal frame readiness to the host application. Call this once your Mini App has finished loading.

app/App.tsx

'use client';

import { useMiniKit } from '@coinbase/onchainkit/minikit';
import { useEffect } from 'react';

export default function MyMiniApp() {
  const { context, isFrameReady, setFrameReady } = useMiniKit();

  useEffect(() => {
    if (!isFrameReady) {
      setFrameReady();
    }
  }, [setFrameReady, isFrameReady]);

  return (
    <div>
      <h1>Welcome, User {context.user.fid}!</h1>
      <p>Launched from: {context.location}</p>
      {context.client.added && (
        <p>✅ You've saved this app!</p>
      )}
    </div>
  );
}

Usage Notes

Frame Readiness

Always call setFrameReady() once your Mini App has finished initial loading:

components/FrameReady.tsx

useEffect(() => {
  if (!isFrameReady) {
    setFrameReady();
  }
}, [setFrameReady, isFrameReady]);

Context Data Security

Context data can be spoofed by malicious actors. Never use context data for authentication or security-critical operations. Use useAuthenticate for verified user identity.

// ❌ Don't use for authentication
const isAuthenticated = !!context.user.fid; // Can be spoofed!

// ✅ Use for analytics and UX hints only
const userHint = context.user.fid; // For analytics tracking

Client Detection

Use client detection to provide platform-specific experiences:

components/ClientDetection.tsx

const isBaseApp = context.client.clientFid === '309857';
const isFarcaster = context.client.clientFid === '1';

if (isBaseApp) {
  // Enable Base App specific features
}

The useMiniKit hook must be used within a component that’s wrapped by MiniKitProvider. This hook provides the foundation for all Mini App functionality and should be one of the first hooks you use in your application.