Add MiniKit

Add the provider and initialize MiniKit in your main page.

Add MiniKitProvider

Create providers/MiniKitProvider.tsx and wrap app/layout.tsx.

providers/MiniKitProvider.tsx

'use client';
import { MiniKitProvider } from '@coinbase/onchainkit/minikit';
import { ReactNode } from 'react';
import { base } from 'wagmi/chains';

export function MiniKitContextProvider({ children }: { children: ReactNode }) {
  return (
    <MiniKitProvider apiKey={process.env.NEXT_PUBLIC_CDP_CLIENT_API_KEY} chain={base}>
      {children}
    </MiniKitProvider>
  );
}

Wrap your root layout:

app/layout.tsx

import { MiniKitContextProvider } from '@/providers/MiniKitProvider';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='en'>
      <body>
        <MiniKitContextProvider>{children}</MiniKitContextProvider>
      </body>
    </html>
  );
}

Initialize MiniKit in your page

Use useMiniKit() to call setFrameReady() when your app is ready.

app/page.tsx

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

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

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

  return <div>Your app content goes here</div>;
}

The provider configures wagmi and react‑query and uses the Farcaster connector when available.

Use Cases

Build with AI

Vibe Code a Mini App

Add MiniKitProvider

Initialize MiniKit in your page

​Add MiniKitProvider

​Initialize MiniKit in your page

Add MiniKitProvider

Initialize MiniKit in your page