Guide for building and optimizing mini apps for Base App
openUrl
function as a workaround, this approach can create problems. Farcaster-specific deeplinks might not match Base App-specific deeplinks, potentially leaving users dead-ended and unable to take further action in your mini app.
Using the official SDK functions ensures your users have the best viewing experience possible across all supported clients, including Base App.
npm create onchain --mini
, your mini app will have a “Connect Wallet” button already set upMini App Store Listing
Field | Purpose | Limitations | Design Guidelines |
---|---|---|---|
iconUrl | Main icon | 1024x1024 px PNG, no alpha | Use a bold, recognizable logo. No text. Avoid photos or screenshots. |
name | Display name of the app | 30 characters, no emojis or special characters | Use brandable, unique names. Avoid generic terms. No emojis or trademark symbols. |
subtitle | Short description under the app name | 30 characters, no emojis or special characters | Should clarify what your app does in a catchy way. Avoid repeating the title. |
Mini App Store Page
Field | Purpose | Limitations | Design Guidelines |
---|---|---|---|
description | Promotional message displayed on Mini App Page | 170 characters, no emojis or special characters | Use short paragraphs, headings, and bullet points. Focus on value, not features. Include social proof if possible. Avoid jargon. |
screenshotUrls | Visual previews of the app, max 3 screens | Portrait, 1284 x 2778 | Focus on showing the core value or magic moment of the app in the first 2–3 shots. Use device frames and short captions. |
Search & Discovery
Field | Purpose | Options | Design Guidelines |
---|---|---|---|
primaryCategory | Primary category of app | One of: games , social , finance , utility , productivity , health-fitness , news-media , music , shopping , education , developer-tools , entertainment , art-creativity | Choose the category that best represents your app’s primary use case |
tags | Descriptive tags for filtering/search | up to 5 tags | Use 3–5 high-volume terms; no spaces, no repeats, no brand names. Use singular form. |
Promotional Assets
Field | Purpose | Limitations | Design Guidelines |
---|---|---|---|
heroImageUrl | Promotional display image on top of the mini app store | 1200 x 630px (1.91:1) | 1200x630 px JPG or PNG. Should show your brand clearly. No excessive text. Logo + tagline + UI is a good combo. |
tagline | Marketing tagline should be punchy and descriptive | 30 characters | Use for time-sensitive promos or CTAs. Keep copy active (e.g., “Grow, Raid & Rise in Stoke Fire”). |
Sharing Experience
sdk.isInMiniApp()
sdk.haptics.impactOccurred()
sdk.haptics.notificationOccurred()
sdk.haptics.selectionChanged()
sdk.actions.swapToken()
sdk.actions.sendToken()
sdk.actions.getEthereumProvider()
<a href=
, <Link href=
)
sdk.actions.openUrl()
to safely open a third-party website in our in-app browserwarpcast.com/~/compose
, farcaster.com/~/compose
)
sdk.actions.composeCast()
to compose a cast directly in Base Appsdk.context.location
sdk.actions.openUrl()
for external navigation instead of direct HTML linkssdk.actions.composeCast()
instead of Warpcast composer URLscontext.client.clientFid
(Base App returns 309857
)