Convert Your Website into a Farcaster Mini App — The Easiest Way (Even Without Knowing Mini Apps)

Farcaster Mini Apps are lightweight, decentralized apps you can launch directly inside the Farcaster ecosystem — just like how web apps work inside Telegram or WeChat. Sounds exciting, right?

But if you’re wondering:

“How do I turn my existing website into a Farcaster Mini App without learning their entire protocol?”

You’re in luck.

In this guide, I’ll walk you through two super simple ways to make your site Mini App–ready. Whether you’re using an AI-powered IDE like Cursor or doing it manually — this tutorial has you covered.

---

🧠 Method 1: The AI + IDE Way (e.g. Using Cursor or ChatGPT)

If you have access to an LLM-based IDE (like Cursor, Continue, or Copilot), this method will take you just 5–10 minutes. No Mini App expertise required.

✅ Steps:

1. Grab the full context file

   • Visit: https://miniapps.farcaster.xyz/llms-full.txt

   • Download the llm.txt file

2. Feed it into your LLM

   • If you're using Cursor or any context-aware model, load this file into the project or give it as context manually.

3. Use this Super Prompt (copy-paste directly):

    You are a dev assistant. I have a website I want to turn into a Farcaster Mini App. Using the context in llms-full.txt, help me:
    - Add a valid manifest (farcaster.json)
    - Guide me on associating my Farcaster account
    - Embed the Mini App preview frame correctly
    - Ensure the Mini App passes the validator
   

That’s it. Your AI assistant will generate everything for you — from the manifest to the QR code association instructions.

---

🛠️ Method 2: The Manual (No AI Needed) Way

No fancy IDE? No worries. You can still do it manually with just your code editor and browser.

✅ Step-by-Step Guide:

1. Create a farcaster.json Manifest

Create a JSON file at this public path:

public/.well-known/farcaster.json

Here’s a template you can use:

{
  "miniapp": {
    "version": "1",
    "name": "Yoink!",
    "iconUrl": "https://yoink.party/logo.png",
    "homeUrl": "https://yoink.party/framesV2/",
    "imageUrl": "https://yoink.party/framesV2/opengraph-image",
    "buttonTitle": "🚩 Start",
    "splashImageUrl": "https://yoink.party/logo.png",
    "splashBackgroundColor": "#f5f0ec",
    "requiredChains": [
      "eip155:8453"
    ],
    "requiredCapabilities": [
      "actions.signIn",
      "wallet.getEthereumProvider",
      "actions.swapToken"
    ]
  }
}

📚 Reference: Mini App Manifest Docs

---

2. Deploy Your Site

Push your site live — Vercel, Netlify, or any static host works.

---

3. Validate the Manifest

Open the Farcaster Mini App validator:

➡️ https://farcaster.xyz/~/developers/mini-apps/manifest?domain=yourdomain.com

Replace yourdomain.com with your actual domain.

---

4. Associate Your Farcaster Account

Once your manifest is valid:

• Click the "Generate Association" button

• Scan the QR code with your Farcaster mobile app

• Sign the message inside the app

• On desktop, you’ll get an output like this:

"accountAssociation": {
  "header": "eyJmaWQiOjkxNTIsInR5cGUiOiJjdXN0b2R5Iiwia2V5IjoiMHgwMmVmNzkwRGQ3OTkzQTM1ZkQ4NDdDMDUzRURkQUU5NDBEMDU1NTk2In0",
  "payload": "eyJkb21haW4iOiJyZXdhcmRzLndhcnBjYXN0LmNvbSJ9",
  "signature": "MHgxMGQwZGU4ZGYwZDUwZTdmMGIxN2YxMTU2NDI1MjRmZTY0MTUyZGU4ZGU1MWU0MThiYjU4ZjVmZmQxYjRjNDBiNGVlZTRhNDcwNmVmNjhlMzQ0ZGQ5MDBkYmQyMmNlMmVlZGY5ZGQ0N2JlNWRmNzMwYzUxNjE4OWVjZDJjY2Y0MDFj"
}

---

5. Add This to Your farcaster.json

Update your farcaster.json with the accountAssociation object:

{
  "accountAssociation": {
    "header": "eyJmaWQiOjkxNTIsInR5cGUiOiJjdXN0b2R5Iiwia2V5IjoiMHgwMmVmNzkwRGQ3OTkzQTM1ZkQ4NDdDMDUzRURkQUU5NDBEMDU1NTk2In0",
    "payload": "eyJkb21haW4iOiJyZXdhcmRzLndhcnBjYXN0LmNvbSJ9",
    "signature": "MHgxMGQwZGU4ZGYwZDUwZTdmMGIxN2YxMTU2NDI1MjRmZTY0MTUyZGU4ZGU1MWU0MThiYjU4ZjVmZmQxYjRjNDBiNGVlZTRhNDcwNmVmNjhlMzQ0ZGQ5MDBkYmQyMmNlMmVlZGY5ZGQ0N2JlNWRmNzMwYzUxNjE4OWVjZDJjY2Y0MDFj"
  },
  "miniapp": {
    "version": "1",
    "name": "Rewards",
    "iconUrl": "https://rewards.warpcast.com/app.png",
    "splashImageUrl": "https://rewards.warpcast.com/logo.png",
    "splashBackgroundColor": "#000000",
    "homeUrl": "https://rewards.warpcast.com",
    "webhookUrl": "https://client.farcaster.xyz/v1/creator-rewards-notifs-webhook",
    "subtitle": "Top Warpcast creators",
    "description": "Climb the leaderboard and earn rewards by being active on Warpcast.",
    "screenshotUrls": [
      "https://rewards.warpcast.com/screenshot1.png",
      "https://rewards.warpcast.com/screenshot2.png",
      "https://rewards.warpcast.com/screenshot3.png"
    ],
    "primaryCategory": "social",
    "tags": [
      "rewards",
      "leaderboard",
      "warpcast",
      "earn"
    ],
    "heroImageUrl": "https://rewards.warpcast.com/og.png",
    "tagline": "Top Warpcast creators",
    "ogTitle": "Rewards",
    "ogDescription": "Climb the leaderboard and earn rewards by being active on Warpcast.",
    "ogImageUrl": "https://rewards.warpcast.com/og.png"
  }
}

Then deploy again.

---

6. Add the Mini App Preview Frame

To make your app embeddable and previewable from Farcaster feeds, add this to your <head> tag in index.html:

<meta name="fc:frame" content='{"version":"next","imageUrl":"https://onchainik.me/miniapp-preview.png","button":{"title":"🚀 Explore portfolio","action":{"type":"launch_frame","name":"Nikunj Navdiya portfolio","url":"https://onchainik.me","splashImageUrl":"https://onchainik.me/miniapp-splash.png","splashBackgroundColor":"#ffffff"}}}' />

🧩 More on frames here: Manifest vs Embed Guide

---

✅ Final Checklist

• farcaster.json created and deployed

• Validated via manifest checker

• Account associated

• Mini App embedded and previewable

---

✨ You’re Now Live on Farcaster!

You’ve just unlocked a new distribution channel and audience without needing to build a new app from scratch.

You can now share your Mini App inside Warpcast and let people interact with it natively inside their feed. No redirects. No friction.

---

🔗 Useful Links

• Farcaster Mini Apps Docs

• Mini App Validator Tool

• Mini App Embed Guide

---

💬 Questions?

If you're stuck anywhere or want to see example manifests, feel free to drop a comment or reach out on Farcaster @nik-navdiya or contact at onchainik.me