'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>
  );
}
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.
​
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.
'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.