Making your own Farcaster mini-app as an artist

Table of Contents (ctrl-F to skip to section)

NFTs might be down, but they are not out
You CAN build your own NFT experience
Quick tips for vibecoding
Highlight how-to
Manifold how-to
How to use other smart contract providers
Ideas to inspire you
Let's mint something that matters

NFTs might be down, but they are not out

I think it's fair to say that we are in a bit of an NFT lull. Certainly no collectible to-date has commanded the eye-popping prices of pieces from collections like Bored Ape Yacht Club or Doodles at the peak of NFT mania in the early 2020s (save for maybe the Farcaster OGs).

But to me, it seems unfair to judge the token formats simply by the fact they don't generate millions of dollars of revenue in seconds. They still are a valuable and interesting packaging layer for digital rights, and can enable all kind of interesting experiences, some of which have yet to be built. I think of the onchain Patreon alternative Hypersub which revolves around NFTs and wonder what else could be enabled.

You can building your own NFT minting experience with AI as your guide

Farcaster gives creators a unique chance to sell NFTs directly in-feed, mintable in one click using the built-in wallet. Thanks to the built-in liquidity layer Farcaster provides, artists can connect with current and would-be patrons easily, opening up new opportunities for creators and collectors alike.

This can already be taken advantage of today, via some (definitely neglected) mini app experiences from some of the no-code NFT creation platforms. And I know that as artists and creators, we want to focus on what we do best—making amazing work—not wrestling with code. But the reality is that having your own customized minting experience can make a huge difference in how collectors engage with your drops.

Luckily, today this is easier than ever before. You don't need to hire an engineer—you can direct AI to be your engineer, plus test and deploy your custom minting mini-apps super cheaply!

Below, you'll fiind step-by-step instructions for doing this, using

either Highlight and Manifold provided smart contracts
AI assistance from the model of your choice for technical and design support
Easy testing and deployment on Replit
All mints in this tutorial were deployed on Base

When you do this, it costs nothing to you, but really helps me!

A few quick tips for vibecoding

As someone who can't write most code straight from her fingers anymore, but can understand generally, what she's looking and what it does, my level of understanding is still not strong enough yet that I feel comfortable using fully agentic modes of development. I most often work by copying sections of code into AI chat windows, talking to the AI about it, and then copy/pasting it back into Replit, VSCode, et cetera.
This ensures I have command of my files still and am actively learning about code, how it works.
If I really don't understand what's going on in an open source repository that does something I want to also do, I will have Gemini go through every file and tell me what that file does. You can write a simple script to do this and execute it within Replit. You can also do this with single files and get line by line comments!
Make sure you are taking advantage of your endlessly patient pair programmer, who writes better docs than a human ever could or would and doesn't get mad when you ask the same question 5 times in a row.
Take the time to set up Github in your projects. You will appreciate the version control, I promise.
Make sure to read the Farcaster mini-app docs on deployment. This tutorial discusses adapting several different smart contract providers for a mini-app. All of the template mini apps are set up for deployment, but you'll have to update the Farcaster metadata in the files, as well as generate your own farcaster.json to use.
While working with Replit, to test your mini app on Farcaster, copy THIS url while the server is running and paste it into a debugger like the Farcaster Preview Tool or the Frames.js Debugger.

How to use Highlight smart contracts in a mini-app

Horsefacts.eth generously deployed a mini-app that will be the basis of all going forward.

This mini app template works out of the box with Highlight smart contracts, requiring only a few simple swaps to get up and running. You don't need to change much at all, because all mints on Highlight are minted via the same smart contract.

Change the vectorID in the config.ts to your mint's vector ID. You can find this number on your mint's management page. (Optionally, add a referrer address so your mini app gets referral coin from your mints!)
Update the NFT metadata to match your own NFT's details. Make sure to match the price for 1 NFT exactly to what Highlight charges, INCLUDING fees. Try a test transaction out and see what amount pops up in your wallet, and then put that in, exactly.
Add in your mint image to the /public folder, making sure the reference to the file in the metadata also changes as well.
Have fun adding any customizations you want! All of the components that control the front end are in /src/app/components and are styled with Tailwind. You can dump an entire component file in to an AI and ask it to change whatever you want, and go from there!

How to use Manifold smart contracts in a mini-app

I also experimented with using Manifold's widget technology in a mini-app.

~~Unlike the other examples here, you do not interact directly with your mint.~~

UPDATE: YES IT DOES. I created an all new tutorial to fix this error. If you want to still use Manifold widgets, read on. If you want to interact directly with Manifold smart contracts, read this.

How to mint Manifold 1155s in A Farcaster mini app

A key update to my Farcaster mini app guide revealing that Manifold integration is possible after all. Includes working examples for ERC-1155 tokens with both ETH-only and USDC+ETH fee mints, plus a demo Replit showing the implementation in action.

https://paragraph.com

Instead, Manifold provides a component that handles everything for you, from wallet connection to the confirmation dialogue.

It's very simple to set up, but you have very little control over display and function. There's no auto-connection to the Farcaster wallet. And because you are completing all operations passing through Manifold, it can be quite slow.

BUT! It works! And is an option for you. So here's how to do it.

Add the links to the Javascript and CSS files to the widget you want to use from Manifold into the <head> of your page in index.html. You'll see here I have both the Connect and Buy Button components here available.
In the app.tsx, replace the entire <CollectButton> component with the HTML provided by Manifold for the Buy Button. Replace the data-id with the Instance number of your mint, from the mint management page.
then repeat steps 3 and 4 above!
Add in your mint image to the /public folder, making sure the reference to the file in the metadata also changes as well. (The information in config.ts becomes way less relevant in this example. You could remove most of that and just write in all the details you want, on the front end, if you so choose.)
Have fun adding any customizations you want! All of the components that control the front end are in /src/app/components and are styled with Tailwind. You can dump an entire component file in to an AI and ask it to change whatever you want, and go from there! To style the Manifold provide Buy Button, right-click-Inspect-Element, copy the HTML for the button out of the page, and then ask AI to style it using the classes provided in that HTML.

How to use other smart contract providers in a mini-app

Highlight and Manifold are not the only smart contract providers available for artists who don't want to write their own.

When modifying Horsefacts' original example for other smart contracts, the files you'll want to focus on to adapt that repository for other providers are:

src/config.ts
src/components/app/collectButton.tsx

Those 2 files control the entirety of the "web3" logic within the application. All other files are just window dressing that make your app look cool and allow the end user to have a great experience. You can drop those 2 files in their entirety into an AI, along with the docs you're working with, and start to adapt the files.

Other options for NFT providers

Thirdweb
Scatter.art (recently used for Based Dickbutts and Based Interns collections, the mini app is open source)
Creating and deploying your own smart contract! (In the process of doing this tutorial, I experimented with this option, and found it easier than I expected. Perhaps the start of another tutorial).

Ideas to inspire you

Wrap your entire application in a wrapper that detects if the app is being loaded in a Farcaster mini app or not. Bam! You can now display minting and crypto stuff only to people with wallets, and create "normie friendly" experiences for everyone else. Make a Quote of the Day app but only allow Farcaster users to mint it.
Offer a free mint if the user provides his or her email address, allowing you to build your audience in a way that exists outside of Farcaster.
Bring back the time-released metadata of the NFT boom and turn a metadata reveal into a social event (the creative hook here is on you!).

Let's mint something that matters 🛳

We’re past the gold-rush stage when a NFT could raise millions overnight—and that’s good . The quieter market gives builders room to experiment without noise and beating back scammers. With free AI copilots, one-click contract deployments, and Farcaster’s fully integrated wallets, you can launch a completely custom minting experience in a weekend or less.

At the end of the day, an NFT is just a wrapper. What you wrap—art, access, memories, patronage, gameplay—is up to you. So spin up a Replit workspace, remix a mini-app, and let the AI handle the boilerplate while you focus on the fun stuff. 🥰