Create a Mini App

Quickly create a mini app, sign a manifest, and publish to the Base app.

Prerequisites

• Base app account
• Vercel account for hosting the application

1. Deploy Template

   Click the button below and follow the prompts to deploy the quickstart template to Vercel.

   Deploy to Vercel

   Rapidly deploy the quickstart template to Vercel to get started.

2. Clone your repository

   Clone the repo created by Vercel to make local edits.

   Replace <your-username> with your github username.

   Terminal

   git clone https://github.com/<your-username>/new-mini-app-quickstart
   cd new-mini-app-quickstart
   npm install
   
3. Update Manifest configuration

   The minikit.config.ts file is responsible for configuring your manifest located at app/.well-known/farcaster.json and creating embed metadata.

   You can customize the manifest by updating the miniapp object.

   For details on each field, see the field reference.

   minikit.config.ts

   export const minikitConfig = {
     accountAssociation: { // this will be added in step 5
       "header": "",
       "payload": "",
       "signature": ""
     },
     miniapp: {
       version: "1",
       name: "Cubey", 
       subtitle: "Your AI Ad Companion", 
       description: "Ads",
       screenshotUrls: [`${ROOT_URL}/screenshot-portrait.png`],
       iconUrl: `${ROOT_URL}/blue-icon.png`,
       splashImageUrl: `${ROOT_URL}/blue-hero.png`,
       splashBackgroundColor: "#000000",
       homeUrl: ROOT_URL,
       webhookUrl: `${ROOT_URL}/api/webhook`,
       primaryCategory: "social",
       tags: ["marketing", "ads", "quickstart", "waitlist"],
       heroImageUrl: `${ROOT_URL}/blue-hero.png`, 
       tagline: "",
       ogTitle: "",
       ogDescription: "",
       ogImageUrl: `${ROOT_URL}/blue-hero.png`,
     },
   } as const;
   
4. Create accountAssociation Credentials

   Now that you have a public domain for your application, you are ready to associate your mini app with your Farcaster account.

   1. Ensure all changes are live by pushing changes to the main branch.

   2. Navigate to the Base Build Account association tool.

   3. Paste your domain in the App URL field (ex: sample-url.vercel.app) and click “Submit”

   

   4. Click on the “Verify” button that appears and follow the instructions to generate the accountAssociation fields.
   5. Copy the accountAssociation object
5. Update `minikit.config.ts`

   Update your minikit.config.ts file to include the accountAssociation object you copied in the previous step.

   minikit.config.ts

   export const minikitConfig = {
       accountAssociation: {
           "header": "eyJmaBBiOjE3MzE4LCJ0eXBlIjoiY3VzdG9keSIsImtleSI6IjB4NzYwQjA0NDc5NjM4MTExNzNmRjg3YDPBYzA5OEJBQ0YxNzNCYkU0OCJ9",
           "payload": "eyJkb21haW4iOiJ4BWl0bGlzdC1xcy52ZXJjZWwuYXBwIn7",
           "signature": "MHhmNGQzN2M2OTk4NDIwZDNjZWVjYTNiODllYzJkMjAwOTkyMDEwOGVhNTFlYWI3NjAyN2QyMmM1MDVhNzIyMWY2NTRiYmRlZmQ0NGQwOWNiY2M2NmI2B7VmNGZiMmZiOGYzNDVjODVmNmQ3ZTVjNzI3OWNmMGY4ZTA2ODYzM2FjZjFi"
       },
       miniapp: {
           ...
       },
     }
   
6. Push updates to production

   Push all changes to the main branch. Vercel will automatically deploy the changes to your production environment.

7. Preview Your App

   Go to base.dev/preview to validate your app.

   1. Add your app URL to view the embeds and click the launch button to verify the app launches as expected.
   2. Use the “Account association” tab to verify the association credentials were created correctly.
   3. Use the “Metadata” tab to see the metadata added from the manifest and identify any missing fields.
8. Post to Publish

   To publish your app, create a post in the Base app with your app’s URL.