MiniKit
MiniKit is easiest way to build Mini Apps on Base, allowing developers to easily build applications without needing to know the details of the SDK implementation. It integrates seamlessly with OnchainKit components and provides Coinbase Wallet-specific hooks.

​
Why MiniKit?

MiniKit streamlines mini-app development by providing a comprehensive toolkit that makes complex Frames SDK interactions intuitive:

Simplified Development

Build apps with minimal knowledge of the Frames SDK

Coinbase Wallet Integration

Access Coinbase Wallet-specific hooks

Component Compatibility

Use OnchainKit components out of the box with MiniKit

Automatic Setup

CLI tool for quick project scaffolding with webhooks and notifications

​
Use Cases

Gaming mini apps

Social mini apps

Payment mini apps

And many more possibilities!

​
Quick Start

The fastest way to get started with MiniKit is to use the CLI to bootstrap a new project: 
npx create-onchain --mini

Quick Start Guide

You can also follow our comprehensive Quick Start guide for detailed setup instructions
 This command will:
1

Project Setup

Set up a new project with both frontend and backend components
2

Webhook Configuration

Configure webhooks and notifications
3

Account Association

Set up account association generation
4

Demo App Creation

Create a demo app showcasing onchain abilities using OnchainKit
After running the command, follow the prompts to configure your project.
We recommend using Vercel to deploy your MiniKit app, as it integrates seamlessly with the upstash/redis backend required for frames, webhooks, and notifications. The CLI will guide you through setting up the necessary environment variables for your Redis database.

​
Provider

The MiniKitProvider wraps your application and provides global access to the SDK’s context. It handles initialization, events, and automatically applies client safeAreaInsets to ensure your app doesn’t overlap parent application elements. 
import { MiniKitProvider } from '@coinbase/onchainkit/minikit';

function App({ children }) {
  return (
    <MiniKitProvider
      projectId="your-project-id"
      notificationProxyUrl="/api/notification"
    >
      {children}
    </MiniKitProvider>
  );
}

​
Props

The MiniKitProvider accepts the following props:
​
children
React.ReactNode
required
React components to be wrapped by the provider
​
notificationProxyUrl
string
default:"/api/notification"
Optional URL to override the default /api/notification proxy
​
...OnchainKitProviderProps
object
All props from OnchainKitProvider are also supported
The provider sets up wagmi and react-query providers automatically. It configures connectors to use the Farcaster connector if sdk.context is set, with a fallback to CoinbaseWallet. This allows the same application to run both in frames and as a standalone application.

​
Hooks

MiniKit provides several utility hooks that wrap the SDK functionality, making it easy to access different features.

​
useMiniKit

This hook handles initialization of the application and provides access to the SDK context. 
const { setFrameReady, isFrameReady, context, updateClientContext, notificationProxyUrl } = useMiniKit();

// Call setFrameReady() when your app is ready to be shown
useEffect(() => {
  if (!isFrameReady) {
    setFrameReady();
  }
}, [isFrameReady, setFrameReady]);
Returns:
​
ready
() => Promise<MiniKitContextType>
Removes splash screen and shows the application
​
isReady
boolean
Whether the app is ready to be shown
​
context
FrameContext | null
The current frame context
​
updateClientContext
(params: UpdateClientContextParams) => void
Update client context
​
notificationProxyUrl
string
The notification proxy URL

​
useAddFrame

This hook adds a frame to the user’s list of frames and returns notification details. 
const addFrame = useAddFrame();

// Usage
const handleAddFrame = async () => {
  const result = await addFrame();
  if (result) {
    console.log('Frame added:', result.url, result.token);
  }
};
Returns:
​
addFrame
() => Promise<{ url: string; token: string; } | null>
Function that adds frame and returns notification details

​
useNotification

This hook allows sending notifications to users who have added your frame. It requires a token and URL, which are returned when a user adds your frame. 
const sendNotification = useNotification();

// Usage
const handleSendNotification = () => {
  sendNotification({
    title: 'New High Score!',
    body: 'Congratulations on your new high score!'
  });
};
Notifications require a backend proxy to avoid CORS restrictions. The CLI automatically sets up this proxy at /api/notification, but you can override this in the MiniKitProvider.

​
useOpenUrl

This hook wraps sdk.actions.openUrl and falls back to window.open when outside a frame context. 
const openUrl = useOpenUrl();

// Usage
<button onClick={() => openUrl('https://example.com')}>Visit Website</button>

​
useClose

This hook wraps the sdk.actions.close functionality. 
const close = useClose();

// Usage
<button onClick={close}>Close</button>

​
useComposeCast

The useComposeCast hook provides functionality to open the Farcaster compose interface with pre-filled content. 
import { useComposeCast } from '@coinbase/onchainkit/minikit';

export default function ComposeCastButton() {
  const { composeCast } = useComposeCast();

  const handleCompose = () => {
    composeCast({
      text: 'Just minted an awesome NFT using @coinbase OnchainKit! 🚀',
    });
  };

  const handleComposeWithEmbed = () => {
    composeCast({
      text: 'Check out this amazing frame!',
      embeds: ['https://your-frame-url.com'],
    });
  };

  return (
    <div>
      <button onClick={handleCompose}>
        Share Achievement
      </button>
      <button onClick={handleComposeWithEmbed}>
        Share Frame
      </button>
    </div>
  );
}
Parameters:
  • text: string - The text content for the cast
  • embeds?: string[] - Optional array of URLs to embed in the cast
Returns:
  • composeCast: (params: ComposeCastParams) => void - Function to open compose interface

​
useViewCast

The useViewCast hook provides functionality to view a specific Farcaster cast by its hash. 
import { useViewCast } from '@coinbase/onchainkit/minikit';

export default function ViewCastButton() {
  const { viewCast } = useViewCast();

  const handleViewCast = () => {
    viewCast({
      hash: '0x32aed77ca61c92d253b98983f1e0fd20a8bd5745',
    });
  };

  const handleViewAnotherCast = () => {
    viewCast({
      hash: '0x48f4d2c45e7b1a923d5c6f8e9a7b2c1d5e8f3a6b',
    });
  };

  return (
    <div>
      <button onClick={handleViewCast}>
        View Featured Cast
      </button>
      <button onClick={handleViewAnotherCast}>
        View Community Cast
      </button>
    </div>
  );
}
Parameters:
  • hash: string - The hash of the cast to view
Returns:
  • viewCast: (params: ViewCastParams) => void - Function to view a specific cast

​
usePrimaryButton

This hook accepts primary button options and a callback which will be called on click. 
usePrimaryButton(
  { text: 'Submit Score' },
  () => {
    // Handle button click
    submitScore();
  }
);

​
useViewProfile

This hook wraps sdk.actions.viewProfile, accepting an FID but falling back to the client’s FID. 
const viewMyProfile = useViewProfile(); // Uses client's FID
const viewUserProfile = useViewProfile(123456); // Uses specified FID

// Usage
<button onClick={viewMyProfile}>View My Profile</button>
<button onClick={viewUserProfile}>View User Profile</button>

​
useAuthenticate

This hook allows users to sign in with Farcaster. It wraps the SDK’s signIn message, adding a default nonce and verification. 
const { signIn } = useAuthenticate();

// Usage
const handleSignIn = async () => {
  const result = await signIn({
    domain: 'your-domain.com',
    siweUri: 'https://your-domain.com/login'
  });

  if (result) {
    // Handle successful authentication
    console.log('Authenticated:', result);
  }
};
Authentication requires additional setup utilizing an auth framework like next/auth or manually integrating session storage and route/component authentication.

​
CLI

The MiniKit CLI is the easiest way to get started. It automatically creates a sample application that integrates different parts of the SDK and some OnchainKit components. 
npx create-onchain --mini

​
Features

The CLI creates an application with:

​
Demo Application

The CLI also creates a demo snake game application that showcases:
  • Buttons to add the frame and connect your wallet
  • High score tracking with attestations using OnchainKit’s <Transaction/> component
  • Score display using OnchainKit’s <Identity/> components to resolve ENS names
  • Notifications for high scores (rate limited to one every 30 seconds)

​
Next Steps

Now that you have MiniKit set up, you can:
1

Explore the Demo

Explore the demo application to understand how the hooks work
2

Customize Your App

Customize the application to fit your needs
3

Deploy

Deploy your application to a hosting provider like Vercel
Enjoy building!