> ## Documentation Index
> Fetch the complete documentation index at: https://base-a060aa97-eb-mini-app-ia-overhaul.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Add MiniKit
> Wrap your app with MiniKitProvider and initialize the frame
Add the provider and initialize MiniKit in your main page.
## Add MiniKitProvider
Create `providers/MiniKitProvider.tsx` and wrap `app/layout.tsx`.
```jsx 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 (
{children}
);
}
```
Wrap your root layout:
```jsx app/layout.tsx
import { MiniKitContextProvider } from '@/providers/MiniKitProvider';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
## Initialize MiniKit in your page
Use `useMiniKit()` to call `setFrameReady()` when your app is ready.
```jsx 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 Your app content goes here
;
}
```
The provider configures wagmi and react‑query and uses the Farcaster connector when available.
Add required and optional env vars
Generate account association and frame metadata