Getting Started with Mini Apps

Mini Apps are lightweight web applications that run natively within clients like Coinbase Wallet. Users instantly access mini apps without downloads, benefit from seamless wallet interactions, and discover apps directly in the social feed. This benefits app developers by creating viral loops for user acquisition and engagement.

​

What is a Mini App?

A Mini App is composed of:

No rebuilding, architectural changes, or complex integrations are required.

​

Code Implementation

function App() {
  return (
    <div>
      <MyExistingComponent />
      <AnotherComponent />
    </div>
  );
}

function App() {
  return (
    <div>
      <MyExistingComponent />
      <AnotherComponent />
    </div>
  );
}

import { MiniKitProvider } from '@coinbase/onchainkit/minikit';

function App() {
  return (
    <MiniKitProvider projectId="your-id">
      <MyExistingComponent />  {/* Existing components unchanged */}
      <AnotherComponent />     {/* Existing components unchanged */}
    </MiniKitProvider>
  );
}

​

Implementation Examples

npx create-onchain --mini
cd my-miniapp
npm run dev

npx create-onchain --mini
cd my-miniapp
npm run dev

npm create @farcaster/mini-app
cd my-miniapp
npm run dev

​

Pre-Solved Development Challenges

​

Manifest File Configuration

Mini Apps require one configuration file located at /.well-known/farcaster.json in your project root. This file instructs clients how to display your application.

​

Sample Manifest Structure

{
  "accountAssociation": {
    "header": "eyJmaWQiOjgxODAyNi...",
    "payload": "eyJkb21haW4iOiJleGFtcGxlLmNvbSJ9",
    "signature": "MHhmOGQ1YzQyMmU3ZTZlMWNhMzU1..."
  },
  "frame": {
    "version": "1",
    "name": "Your App Name",
    "subtitle": "Short tagline",
    "description": "Detailed description of what your app does",
    "iconUrl": "https://yourapp.com/icon.png",
    "homeUrl": "https://yourapp.com",
    "splashImageUrl": "https://yourapp.com/splash.png",
    "splashBackgroundColor": "#000000",
    "heroImageUrl": "https://yourapp.com/hero.png",
    "tagline": "One-line value proposition",
    "screenshotUrls": [
      "https://yourapp.com/screenshot1.png",
      "https://yourapp.com/screenshot2.png"
    ],
    "primaryCategory": "games",
    "tags": ["multiplayer", "strategy", "onchain"],
    "webhookUrl": "https://yourapp.com/api/webhook"
  }
}

​

Categories and Discovery

​

Primary Categories

​

Account Association (Domain Verification)

Domain ownership verification is required. Generate your manifest using:

npx create-onchain --manifest

npx create-onchain --manifest

​

Image Requirements

​

Deployment Process

The deployment process remains identical to standard web applications:

No special hosting, new infrastructure, or complex setup procedures required.

​

Frequently Asked Questions

​

Technical Resources