Update any JavaScript web app to be a Farcaster mini app
<MiniAppProvider>
provider in your app
sdk.actions.ready()
sdk.wallet.ethProvider
farcaster.json
file with mini app metadata and a signature proving ownership<meta />
tag specifying how embeds should be rendered@neynar/react
package, which includes the Mini App SDK along with custom Neynar components and built-in analytics:
<MiniAppProvider>
provider:
useMiniApp()
react hook:
ready()
as early as possible in the app, but after any pageload processes that might cause the UI to re-render or update significantly. In a React app, it’s generally best to call ready()
inside the page-level component at the root of your UI, e.g. in your homepage component.
Here’s an example of how you might do this in a standard React app:
wagmi
for your wallet provider, as the Farcaster team provides the @farcaster/miniapp-wagmi-connector package for easy configuration.
Run npm i @farcaster/miniapp-wagmi-connector
to install, and then connecting is as simple as adding the connector to the wagmi config:
useAccount()
.
hasSolanaProvider
before rendering Solana-specific UI components./.well-known/farcaster.json
, published at the root of the mini app’s domain.
The manifest consists of a miniapp
section containing metadata specific to the mini app and an accountAssociation
section consisting of a JSON Farcaster Signature (JFS) to verify ownership of the domain and mini app.
The miniapp
metadata object only has four required fields (version
, name
, homeUrl
, and iconUrl
), but providing more is generally better to help users and clients discover your mini app. See the full list of options here in the Farcaster docs.
Start by publishing just the miniapp portion of the manifest:
yourURL.com/.well-known/farcaster.json
, you need to generate an accountAssociation
signed with your farcaster custody address:
<head>
section of the HTML page serving your mini app.
launch_miniapp
, so unless you have a specific use case, you can safely copy the following example: