useMiniKit

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

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

export default function ClientSpecificFeatures() {
  const { context } = useMiniKit();
  
  const isBaseApp = context.client.clientFid === '309857';
  const isFarcaster = context.client.clientFid === '1';

  return (
    <div>
      {isBaseApp && (
        <div>Base App specific features</div>
      )}
      {isFarcaster && (
        <div>Farcaster specific features</div>
      )}
    </div>
  );
}

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

export default function AnalyticsTracker() {
  const { context } = useMiniKit();

  useEffect(() => {
    // ✅ Safe: Use context for analytics
    analytics.track('mini_app_opened', {
      userFid: context.user.fid,
      client: context.client.clientFid,
      launchLocation: context.location,
      hasAddedApp: context.client.added
    });
  }, [context]);

  return <div>App content...</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

MiniKitContext

Frame context information provided by the host application.

Show MiniKitContext properties

object

User information from the host application.

Show User properties

string

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

object

Information about the host client application.

Show Client properties

boolean

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

string

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

string

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

boolean

Whether the frame has signaled readiness to the host application.

() => 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>
  );
}

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

export default function ClientSpecificFeatures() {
  const { context } = useMiniKit();
  
  const isBaseApp = context.client.clientFid === '309857';
  const isFarcaster = context.client.clientFid === '1';

  return (
    <div>
      {isBaseApp && (
        <div>Base App specific features</div>
      )}
      {isFarcaster && (
        <div>Farcaster specific features</div>
      )}
    </div>
  );
}

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

export default function AnalyticsTracker() {
  const { context } = useMiniKit();

  useEffect(() => {
    // ✅ Safe: Use context for analytics
    analytics.track('mini_app_opened', {
      userFid: context.user.fid,
      client: context.client.clientFid,
      launchLocation: context.location,
      hasAddedApp: context.client.added
    });
  }, [context]);

  return <div>App content...</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.

Introduction

Quickstart

Design Guidelines

Growth Playbook

Features

Troubleshooting

Technical Reference

Resources

Returns

Usage Notes

Frame Readiness

Context Data Security

Client Detection

​Returns

​Usage Notes

​Frame Readiness

​Context Data Security

​Client Detection

Returns

Usage Notes

Frame Readiness

Context Data Security

Client Detection