Add MiniKit

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.

Configure environment

Add required and optional env vars

Create manifest

Generate account association and frame metadata

Introduction

Quickstart

Get Featured

Design & UX Standards

Growth Playbook

Mini App Features

Troubleshooting

Technical Reference

Add MiniKitProvider

Initialize MiniKit in your page

Configure environment

Create manifest

​Add MiniKitProvider

​Initialize MiniKit in your page

Configure environment

Create manifest

Add MiniKitProvider

Initialize MiniKit in your page