​
MiniKitProvider Setup

The MiniKitProvider wraps your app and provides MiniKit context to all child components. It configures wagmi, react-query, and the Farcaster connector automatically.
app/providers.tsx
import { MiniKitProvider } from '@coinbase/onchainkit/minikit';
import { ReactNode } from 'react';
import { base } from 'wagmi/chains';

export function Providers({ children }: { children: ReactNode }) {
  return (
    <MiniKitProvider
      apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
      chain={base}
      config={{
        appearance: {
          mode: 'auto',
          theme: 'snake', 
          name: process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME,
          logo: process.env.NEXT_PUBLIC_ICON_URL,
        },
      }}
    >
      {children}
    </MiniKitProvider>
  );
}
The provider configures wagmi and react-query and uses the Farcaster connector when available.

​
Provider Configuration

​
Required Props

PropTypeDescription
apiKeystringYour OnchainKit API key from Coinbase Developer Platform
chainChainThe blockchain network (typically base)

​
Optional Configuration

PropertyTypeDescription
config.appearance.mode’auto’ | ‘light’ | ‘dark’Theme mode for UI components
config.appearance.themestringTheme name for styling
config.appearance.namestringApp name displayed in UI
config.appearance.logostringLogo URL for branding

​
Frame Initialization

Initialize MiniKit in your main component to signal frame readiness:
app/App.tsx
'use client';

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

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

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

  return (
    <div>
      {/* Your app content */}
    </div>
  );
}

​
useMiniKit Hook

The useMiniKit hook provides access to frame state and user context:
any-component.tsx
const { 
  setFrameReady, 
  isFrameReady, 
  context 
} = useMiniKit();

​
Context Properties

PropertyTypeDescription
context.user.fidstringFarcaster ID of the current user
context.client.addedbooleanWhether user has saved the Mini App
context.locationstringWhere the Mini App was launched from
Context data can be spoofed and should not be used for authentication. Use useAuthenticate for secure user verification.