Easiest way to build Mini Apps on Base
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.
MiniKit streamlines mini-app development by providing a comprehensive toolkit that makes complex Frames SDK interactions intuitive:
Build apps with minimal knowledge of the Frames SDK
Access Coinbase Wallet-specific hooks
Use OnchainKit components out of the box with MiniKit
CLI tool for quick project scaffolding with webhooks and notifications
And many more possibilities!
The fastest way to get started with MiniKit is to use the CLI to bootstrap a new project:
You can also follow our comprehensive Quick Start guide for detailed setup instructions
This command will:
Project Setup
Set up a new project with both frontend and backend components
Webhook Configuration
Configure webhooks and notifications
Account Association
Set up account association generation
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.
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.
The MiniKitProvider
accepts the following props:
React components to be wrapped by the provider
Optional URL to override the default /api/notification
proxy
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.
MiniKit provides several utility hooks that wrap the SDK functionality, making it easy to access different features.
This hook handles initialization of the application and provides access to the SDK context.
Returns:
Removes splash screen and shows the application
Whether the app is ready to be shown
The current frame context
Update client context
The notification proxy URL
This hook adds a frame to the user’s list of frames and returns notification details.
Returns:
Function that adds frame and returns notification details
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.
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
.
This hook wraps sdk.actions.openUrl
and falls back to window.open
when outside a frame context.
This hook wraps the sdk.actions.close
functionality.
The useComposeCast
hook provides functionality to open the Farcaster compose interface with pre-filled content.
Parameters:
text: string
- The text content for the castembeds?: string[]
- Optional array of URLs to embed in the castReturns:
composeCast: (params: ComposeCastParams) => void
- Function to open compose interfaceThe useViewCast
hook provides functionality to view a specific Farcaster cast by its hash.
Parameters:
hash: string
- The hash of the cast to viewReturns:
viewCast: (params: ViewCastParams) => void
- Function to view a specific castThis hook accepts primary button options and a callback which will be called on click.
This hook wraps sdk.actions.viewProfile
, accepting an FID but falling back to the client’s FID.
This hook allows users to sign in with Farcaster. It wraps the SDK’s signIn message, adding a default nonce and verification.
Authentication requires additional setup utilizing an auth framework like next/auth or manually integrating session storage and route/component authentication.
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.
The CLI creates an application with:
Frontend and Backend Integration
Complete setup for adding frames, webhooks, and notifications using upstash/redis for data storage (compatible with Vercel). Requires users to sign up for an upstash/redis account and add their key and URL to the .env file.
The CLI creates both frontend and backend components to support adding frames, webhooks, and notifications. While a frontend-only option was considered, the ability to add frames and handle notifications requires backend support. If you don’t need these features, you can easily remove the database and related routes after project creation.
Account Association Generation
Automatically generates valid account associations and configures the necessary environment variables.
.well-known/farcaster.json Configuration
Sets up the required configuration file:
Notification Proxy
Automatically sets up a proxy route at /api/notification
used by the useNotification
hook when sending notifications.
Webhooks
Implements webhooks using the Farcaster key registry contract for verification. Allows applications to respond to events such as FRAME_ADDED
.
The CLI also creates a demo snake game application that showcases:
<Transaction/>
component<Identity/>
components to resolve ENS namesNow that you have MiniKit set up, you can:
Explore the Demo
Explore the demo application to understand how the hooks work
Customize Your App
Customize the application to fit your needs
Deploy
Deploy your application to a hosting provider like Vercel
Enjoy building!