Farcaster Miniapps - BuidlGuidl's Builder Bootcamp

Transcript

Good. Thanks. All right. Good minia app  morning everyone. Welcome. Um yeah, thanks Billy Good. Thanks Austin for  having me here. Uh my name is Horsefax and I work for Farcaster and I'm super  excited to talk about mini apps today. Uh so going to cover a few things today. Um, we'll  talk about building mini apps on Farcaster. Start by talking a little bit about what Farcaster is  just for folks who haven't maybe used Farcaster or used the network before. Um, I'm going to share  some examples of interesting mini apps that have been built in the Farcaster ecosystem just to show  you what's possible and why I think mini apps are so unique and interesting and and such a great  opportunity to build on Ethereum right now. Um,

and then we'll talk through a few kind of core  concepts in in mini apps and finally look at a code example that you can fork and run yourself  and start playing around with mini apps today. So, uh, yeah, I think right after this talk, Nikolai  is going to be here um, giving a demo on Oh, cool. There he is. Yeah, giving a demo on how  to actually use scaffold ETH for building mini apps. So I'm going to cover kind of today  generic uh generic examples of kind of the core concepts and then we'll dig in a little  bit further uh later this morning on how you can use scaffold eth specifically to bootstrap  and build many apps. Cool. I guess yeah just before I start too I'm curious how many folks  here have a caster account to start. Awesome.

And how many people have built or tried to build  a mini app? Cool. Okay, about half. That's great. Um yeah, let's start with Farcaster. So Farcaster  is an open programmable social network built on Ethereum. We've been working on it for about 4 and  a half years now. Uh and I think at this point, Farcaster is the largest social graph in crypto.  We have about 1.2 million accounts and 2.5 million connected addresses on the protocol. So at  Farcaster, we use Ethereum to ensure that users own their identity on the network. That means  that every account on Farcaster has an Ethereum wallet by default. Your Farcaster ID is similar  to an NFT. It's uh like an ID number that's registered in an onchain smart contract. It's  transferable. Uh you can you can move it around

and it's kind of an abstraction over Ethereum  identity because in Ethereum most identities have more than one address, right? It's not just  your wallet address, but uh a number of different wallets and uh their interactions that are all  kind of linked together to compose an identity. So on forecaster content like follows, posts,  reactions, uh sort of core social data is stored on a special purpose blockchain that we  call snapchain. Uh on snapchain every message is cryptographically signed uh just like when  you send an Ethereum transaction and similar to Ethereum, every snapchain node has a full  copy of the network state. So you can sync up a snapchain node, pull down the entire uh  current state of the forecaster network, all the posts, all the likes, the entire follow.  Uh it's open data and you just you just have

that ready to go. Uh which is pretty cool. It's  something you can't do with say the Twitter API. So on FER, anyone can pay 20 cents an ETH to  a smart contract, generate a new key pair, and start posting messages to the protocol. Anyone  who wants to build on top of the protocol can also sync a snapchain node and build a client or app uh  or access the follow graph and build on top of it. So the same team that works on Farcaster including  myself uh the protocol also work on Farcaster the app which looks like this. Uh right now it's  a short text social network pretty similar to Twitter uh with the addition of an embedded crypto  wallet. So you can do interesting Ethereum things,

crypto native things uh directly in the feed  because we've added the this addition of uh making it really really easy to interact with Ethereum  and crypto from from inside the app. Uh so yeah, probably looks pretty similar to Twitter. This  is a channel. This is an example of the uh the Dev Connect channel and some posts from the the  past couple days in here. Um, but you can do the typical things you might do on a normal social  network. Follow people, write short text posts with embeds and images and media, uh, react.  Uh, and also interact with Ethereum directly from the feed through this embedded wallet. Um,  and though this is the Farcaster app right now, I kind of like to think of this as the demo app  for the protocol because you can build many more things on top of Farcaster, on top of both  the protocol and this app as it exists today.

uh and this particular app is is just one of  them. Right? So we've evolved the direction of the network over time and we'll evolve the  direction of this this app over time and it's uh it's possible at a lower level to build  all kinds of interesting things on top of these primitives of a social graph follows uh  embeds, links, etc. Um plus smart contracts, right? And the entire sort of programmable  surface of uh of Ethereum and EVM chains. So if you want to build on Farcaster there  are a lot of different ways you can do it. Uh you can build a client like base app which  is uh the example here. Uh there's also zapper recaster a bunch of other clients uh that  are fullfeatured far caster protocol clients.

It's a great platform for building autonomous  agents. So this example here is banker uh which is like a natural languagebased uh interactive  wallet that you can interact with in the feed. Uh you can also just build on the social graph  right like the data is open the follow data is open you can pull down snapchain and simply use  that to bootstrap your own app. So the example here is is Zora but other apps have done this  share XYZ is recent rodeo where you just pull in uh information about users uh information  about their connected wallets and sort of use that to enhance um enhance your own  apps experience or bootstrap your own social graph. And then finally you can build  mini apps which is what I want to talk about today. Uh these are interactive web apps that  are directly embedded in the Farcaster social

feed and also discoverable in Farcaster client  apps. So yeah, the example here is uh the demo mini app that I built originally which is called  Yoink. It's like a simple capture the flag game. Cool. So what's so great about mini apps?  Uh, I think mini apps are the best way right now to ship fast, to get discovered,  to retain users, transact seamlessly, uh, and to build on top of social. So, here's an  example of uh, the mini app browser screen in Farcaster couple versions ago, but it still looks  more or less like this. Uh, and at the moment, we have lots and lots of mini apps built on top  of Farcaster. There are many apps for games,

NFT minting, prediction markets, DeFi, trading,  launching tokens, selling merch, personality test, podcast, live streams, chat, social networking,  and much, much more. Uh, as of today on Farcaster, there are thousands of mini apps with hundreds  of thousands of unique users doing millions of transactions on Bass, Ethereum, and other  EVM networks. Um, yeah, and by the way, we have a lot of usership on on base. uh and and  Ethereum L1, but Farcaster the app itself supports uh a number of of EVM networks. So, it's not just  base only. In fact, our contracts are built on optimism and it's very easy to interact with  uh with really any L2 or or Ethereum network.

So, I'm personally really excited about mini apps.  In fact, I think they're like one of the most interesting things that's happened in in crypto  since I've been involved in it in like 10 years. uh because they help solve two really really  big problems and those are monetization and distribution. Uh these are two huge challenges  for every indie builder I've ever met like both inside and outside of crypto. Um yeah, this was  my story. I shared this on FCcaster when I was thinking about this problem. Um but yeah, before  I was in crypto, I had so many cool stupid side projects that never shipped because they couldn't  pay for themselves. My weekend was over by the time I set up Stripe, by the time I configured my  billing alerts, and I would like live in fear of the idea of, you know, building an app that paid  for itself, but dealing with things like fraud,

chargebacks, unexpected AWS bill. Um, crypto  solved this problem in a super interesting way. You can build autonomous apps and systems  that are built on top of smart contracts, uh, and you can make them pay for themselves. Um, but  of course, it didn't solve the UX problems, right? After crypto started, I had so many cool stupid  side projects that I simply never shipped because I had no distribution. I would write the  contracts. I would test the contracts. I would spend my weekend building a cool front end.  Uh, you know, write the tweet, throw it out there, and just hope that you get 10 likes. In crypto,  I would live in fear of a smart contract bug, but I would actually die because nobody knew  how to use my app or find it or connect their wallet. So, mini apps really help solve this  problem. And today, we have we have good tech

that makes it possible for you to do it all. Um,  yeah, curious if others have had this experience, like if you've had a cool idea that  you simply didn't build because it wasn't wasn't feasible because of cost or or  technology. It's happened to me a lot. So, anyways, I think if you're building a product,  a mini app is a great way to to do a few things, right? You can get your first thousand users, uh,  get your app distributed in feed in in front of people who can try it out directly in the feed.  Uh, if you're building a new crypto product, it's a great test bed for kind of finding those first  thousand users, getting feedback on your idea, kind of testing it for product market fit. If you  want to make money, mini apps are a great way to make that first thousand natively connected to  to payments and crypto and Ethereum. And so,

you have the opportunity to really monetize what  you're building in a in a new and interesting way. And if you're a creator, if you're, you know, not  necessarily a technical person, but just creating content or or or doing creative things, they're  a great way to find your thousand true fans. Oh, yeah. I looked this up last night. This was  the first Ethereum contract uh I ever deployed. It looks like I paid $887 to deploy it. I remember  waiting till uh early in the morning on Sunday morning when gas was super low. It looks like it  was still 110 quay back then. Uh and here were the number of interactions with that contract, right?  I recall carefully building this front end. It was kind of a labor of love for me. My first smart  contract, I was so proud of it. Uh and there were

10 total transactions, right? I just couldn't get  distribution for this app. I think out of those 10 transactions, seven were uh were other people and  it had three total users. So this is the problem I think we can solve with mini apps and this is  what I'm I'm I'm so excited about in terms of uh yeah in terms of sharing this with you and and  why I'm so excited to work on work on mini apps and build these into Farcaster. It solves this  distribution problem and solves monetization. And yeah, when I say you can have it all now, I  I mean it. I think we're in an interesting time in crypto right now where there's a confluence of  really good tech that makes it possible to empower individuals to build new crypto experiences. Um,  and for me, this is something that's always been exciting about crypto is the ability to empower  individuals to do new and interesting things. So,

right now we have fast, cheap L2s like base  and optimism. We have stable coin payments. We're getting to really good embedded wallets. We  have one built into the Farcaster app and built into the base app where you might distribute  many apps as well. We're starting to get a strongly connected and kind of sufficiently  uh sufficiently interesting social graph on Farcaster that you can use to enhance your apps  and really use social data. Uh we simply have the emergence of new Legos, things like mini apps, not  just in Farcaster but in ecosystems like uh like World and Telegram and elsewhere. And we also  have AI tools, right, which has really reduced the barriers to to building a new app and made  it cheaper and easier for anyone to build. So, I'm excited about all of these things and  they kind of all come together in mini apps

as a way that you can build build cool things,  empowers you to build cool and interesting stuff. So finally in terms of distribution um a really  unique and interesting thing about mini apps is that you can build once and get distribution  across multiple platforms and clients on on Farcaster. So here on the left is the Yoink  app uh as displayed in the Farcaster app. Here on the right is is Yoink displayed in the base  app. um same simple mini app but distributed to uh both all the all the active users on  forecasters and soon to be distributed to uh millions of users on on on base app who  have that app already installed. Um so yeah this is a cool and unique characteristic of of  building mini apps on an open social network.

So I think seeing is believing. So I want to  quickly show you a few of my favorite mini apps and want to kind of call out things that I think  here are really interesting and uniquely possible by building on top of decentralized social.  So yeah, the first one here is tippen. Uh this is a simple tipping microp payments based  mini app. And the way this works is you set a USDC allowance from your connected wallet. This  mini app watches your likes as you interact with people on Farcaster like scrolling in the feed.  you'll like, recast, interact with people. Uh, and by reading that open data from the network,  uh, it pays attention to what you're liking, who you're interacting with, and sends a microp  payment for for each interaction on the network.

So, I have this configured to, you know, I think  this demo I set it to like 10 cents, you know, 1 cent, 2 cents. But yeah, you can see here are  in my wallet history, uh, all the interactions and microp payments that are made to users I've  interacted with on the network. Um, and this is cool. It's only possible right now because we have  cheap, stable transactions on L2s like Bass. This is an idea lots of people have tried in in crypto  before, but like the tech wasn't quite there. It was either too expensive with transaction costs  or uh or too slow or we simply didn't have the open data, right, the identity layer to be able  to build something like this. Uh, and yeah, a an especially cool thing about Tippen, um, is that a  user can sign up to Farcaster, start using Tippen,

use this app, interact with people, and they  just receive USDC to their wallet, right? So, it's a way that users can actually earn their  first crypto uh rather than buy it or or send it. And I think that's that's really cool. But  we've seen users who have joined Farcaster started interacting and start to uh kind of participate  in in the Farcaster economy simply by being on the network and receiving uh receiving funds that  flow from user to user through the social graph. Okay, next one is Settle. So Settle is a mini app  for making real world payments here in Buenosis.

You can find a directory of local businesses  in here and pay with stable coins out of your Farcaster wallet just by scanning a QR  code. Uh, as well as look up users and send peer-to-peer payments. So, I think  this one is really cool because the mobile form factor that many apps are are focused on  makes it uniquely possible to build apps that interact with the real world, right? So,  you can access a QR scanner in here. Uh, you can build apps like this for peer-to-peer  payments. And I just think it's really really cool to see apps that kind of come off the  internet and and into the real world. So, it's been so cool to see this built for for Dev  Connect and see people actually out in the real world using that like any anytime crypto kind of  uh yeah extends into the real world. I think I

think this is very cool. And yeah, I'd say like  the interesting and unique thing here is that uh it's enabled by interacting with native  features on on mobile like scanning a QR code. So, next is emerge. Um, this one is super super  cool. This is a mini app that generates images based on your social graph and your PFP. So,  it generates kind of AI workflows uh that can creatively change or modify or uh or enhance your  PFP and read data from your social graph. So, the way this works is you can tag a bot in  the feed and it will create an AI workflow that transforms your profile photo. So, yeah,  here I have this little one saying like, "Put a gaucho costume on my PFP." Uh, the bot replies  back to me with this mini app. Um, generates an

AI workflow and I can open that up right away  and see this this image that was generated. So, I think there are a bunch of cool things about  Emerge, but it's particularly cool to me in a few ways. Uh, one is that it accepts Stablecoin microp  payments for access to the AI tools. Um, so right like image generation, some of these AI models  are metered and expensive. This is using microp payments to make it easy for people to access  these tools. So you can pay 25 cents I think to do a generation. Uh you can use any token in your  wallet and it automatically converts that to to USDC and makes the payment. So this is a cool and  interesting new model I think for like metering interactions with more you know more complicated  tools, right? Um the sort of thing that I'm used to maybe uh uh used to maybe need to fund API  credits for or whatever. You can sort of make apps

that that pay for themselves. So this is a really  cool property of emerge. Uh the second thing I think is interesting is that it creates this  market for users to create new and interesting workflows. So when you uh when you pay a quarter  to do this, you know, some portion of that goes to uh simply funding the uh the AI generation  workflow. Some portion of it though goes back to the creator of the workflow, right? So, it kind  of creates this two-sided market where people can be creative in the feed and it's an opportunity  to another opportunity to earn stable coins uh for doing creative things in the feed. Uh and  then the third thing I think that's particularly interesting is that it it does a really good job  of creating a viral loop by using embeds in the feed. So, uh these emerge generations really do  a great job of of going viral. When you hit on

an interesting one, people love to share it  back to the feed. uh you will see see these kind of take over the feed as you see a new and  interesting and fun generation take off. And so it does does a great job of yeah you can see it  sort of shares back the image and shares back an embed here so you can find the app, discover it in  feed and uh and easily find and interact with it. All right, a few more. I have a lot of  favorites. I could probably do a do a full hour on this. Crowdfund. This is a simple  mini app for stable coin crowdfunds. It's like Kickstarter or GoFundMe. I really love this one  because it just puts USDC that's circulating in the Farcaster economy to use in the real world.  So, this mini app has funded podcasts, books, research projects, donations, inside jokes,  many, many good causes on Farcaster. So,

you can find and support crowdfunds in feed. And  I think in particular the embeds here do a really, really good job of using social graph context  to make a compelling embed. So you'll see they show for a for a crowdfund how much was funded  uh the profile photos of specific users who have funded it. It's a great way to have a call to  action that kind of closes that loop of uh going viral and being discovered in the feed and then  getting people to come back come back to the app. Mini word. This is one of my very favorite  apps. I love it because it has almost nothing to do with crypto. It's a daily cross word  puzzle competition that has a competitive leaderboard. So, by using the social graph  here, showing my friends and enemies, and letting me brag in the feed, Miniword has  kept me coming back for close to 200 days. Uh,

and it does use crypto for one small thing.  You can just easily pay $5 to support it. Uh, and when you do that, you get like a special  little halo that shows up on the leaderboard. So, I think this is great as an example of  a successful very independent self-funded side project uh that just asked people to  pay $5 and now sustains and funds itself. Uh and then the last one is Warplets.  This was an amazing recent success story on Farcaster. It was a generative NFT mint  mini app that basically kind of similar to Emerge actually. It turns your PFP into one  of these freaky little warplet creatures, uh, which have kind of become the unofficial mascot  of Farcaster. This app went viral in the feed. Uh, it was like a $1 mint and resulted in over  49,000 mints when people found it and got

excited about this app and kind of created  this this viral effect on Farcaster. So, this really took over Farcaster for a whole week.  These warplets were all over the feed. and the indie dev who made this as a side project made  I think at the time over $100,000 from the mint and its creator fees. So that's cool. It's cool to  get paid for the work that you do. Um but actually what I think is most interesting here is the way  that this was remixed, the way that this was used uh to build kind of composable reimaginings and  things that built on top of on top of the warplet NFT. So once everyone had minted this NFT,  it was possible to build on top of it. This is a a smart contract, so it's composable, it's  usable. Um, and we saw all kinds of interesting experiments over the course of the next week.  Derivative NFTs, remixes, games, uh, all sorts

of reimaginings. And this was possible because  the NFTs were on chain. It's possible because it's like strongly connected to your social  profile, to your social data. Uh, and yeah, like many things in Ethereum, I think the best mini  apps are composable and remixable and reusable. Okay, so based on this a few principles we've  seen like a lot of mini apps on Farcaster and I think these are the top four principles for  building compelling engaging experiences. Uh number one is use notifications. So mini apps  give you access to native notifications within Farcaster clients. Uh and this is an super  super useful tool for re-engaging your users, letting them know what's going on with your app,  bringing them back into your app when there's an interesting thing to tell them about. Uh they  can also be overused. So like be sensitive

to the way that you use them. Think uh think  carefully about how you use them. Um but yeah, number one thing is use notifications. Number two  is design engaging embeds. So this is the surface for your mini app in the feed. Uh do what you  can to make those look interesting and engaging. Number three is use the social graph. So as much  as you can enhance the context of your app and its data by using information from the social graph.  And number four, charge a dollar. Like monetize your app. you have the opportunity to uh yeah to  get paid for the work that you that you do and for what you're building. Uh and it's possible to to  build apps that fund themselves on top of caster.

Okay, so let's do a quick crash course on how mini  apps work and how to build them. Uh I want to talk about a few fundamental concepts in mini apps and  kind of build them up from the ground up today. So if you drop right into the mini app dev tools  on Farcaster or like read our detailed dev docs, this can be a little bit overwhelming. There  are all these concepts of manifest, previews, headers, signatures. And what I want to  try to do today is just like simplify this down to a few fundamentals. So we'll  go over like five important concepts in mini apps a few times in a few ways. Uh  I want to talk about the mini app model, using the SDK, interacting with wallets,  creating embeds, and publishing your app.

Uh and then hopefully if we have time we'll look  at a live demo and kind of look at each of these in a real app that you can fork. All right. So  here are the big five ideas. Uh number one mini apps are web apps. If you can build a web app  you can build a mini app. Number two mini apps can access native features like notifications and  haptics. They can interact with the user's wallet. Users will discover them in the social  feed uh through embeds and they can also find them by searching and browsing for  them in Farcaster clients. So one more time their web apps you can access native  features like notifications by using a JavaScript SDK. You can interact with the  wallet using standard Ethereum tooling.

You distribute them by creating  embeds that go into the social feed. And you can also distribute them by publishing  information about your mini app that makes them discoverable in clients. So like  all of the seemingly technical stuff, all the jargon that's out there  maps onto these five core concepts. So number one, mini apps are web apps. The most  important thing I think about the miniapp model is that these are just web apps. That means you  can do anything you can do in a web app in a mini app. It also means you can use the tools  you already know and love to build them. So if you like React or or Vite or whatever stack you  prefer, you can use it. They're just HTML, CSS, and JavaScript. So you can use whatever framework  and stack you want. Uh and in fact, I know of like

prolific mini app builders, maybe some in this  room, who use vanilla.js, who use PHP, who use all kinds of crazy things for uh for mini apps.  I think most people I work with and I've seen use use React and the stack like Vite or Next, but  the cool thing about apps is is you can bring the tools that you know and love already. This also  means you can build fully interactive applications that make use of most of the things you can do  in a modern browser. So, as we've developed many apps, it's been really exciting to see people  kind of discover those capabilities in real time. Uh things like streaming audio, location,  camera access, and WebGL. So specifically, mini apps render in iframes on web and web views in the  mobile app. There are some cross-co compatibility gotchas. So it's always good to test in both of  those environments. Uh and since they're web apps,

it means it's also possible to convert your  existing web app into a mini app or design a mini app that exists outside of the Farcaster feed. Uh  and works equally well as a standalone website. Uh okay. So yeah, key point here. Sorry I kind of  like hammer it a lot, but these are just web apps. They're built with HTML, CSS, and JavaScript.  Your mini app is a website served somewhere on a server on the web and you can access it at  at some URL just like a website. So keep this inside the room so people still think the work  is mysterious and important. Uh but when you hear mini app just think in your head it's a website at  a URL somewhere on the internet. Uh so quick code example. This is like the minimum viable react  mini app. We are importing the Farcaster SDK.

We have a little effect in here that says,  "Hey, the app is ready as soon as it renders." And then we're just returning a uh a hello  world message here. So, if you know React, hopefully this looks familiar already. And  there's not much here on top of like what you might build in an existing web app to turn  this into something that functions as a mini app. Uh, okay. So, how about these? Uh, yeah. Yeah. So  mini apps are enhanced with native capabilities. Uh in addition to the stuff you can do on the web,  you can also enhance them with the ability to do things in the app that they're they're embedded  inside, right? So access native capabilities like haptics and send notifications and do stuff  that uh you might want to do in a in a mobile or in the Farcaster context. So the way this  works is many apps interact with the host by

using a JavaScript SDK that sends commands from  the iframe or the web view over a message bridge back to the application that's embedding them.  So you can think of this almost like if you're more familiar with Ethereum, it's almost like  Ethereum JSON RPC over this little message bridge. Uh, you can use an imperative JavaScript  SDK to do things like send notifications, authenticate the user, view profiles, swap tokens,  open URLs, and trigger haptic feedback. So, the cool thing here is that this lets you extend  your web app with new capabilities and behaviors that really look and feel native. Uh, you can also  access context information about who launched the app, what context it's launching in, um, yeah,  and get information about kind of, uh, how it was launched and and who launched it. So, I kind  of lied before. Mini apps are web apps, but they

also are enhanced with all these extra features  that you can pull in uh by using the mini app SDK. Here's a quick example of triggering a haptic.  So, you can just call this SDK haptics impact occurred. When you push this button, uh we call  that callback function and this triggers a little uh a little vibrating bump in your app. So,  this is pretty cool. So, it lets you uh kind of access native features that are usually  otherwise not available to you in the web. And here's an example of what the context looks  like inside a mini app. So, when you launch into an app, this is the information that you get  about how it launched uh where it came from.

And the cool thing here is you get information  about who launched it and uh and how they did it, right? So, in this case, the FID of the  user, that's like the user's caster ID, their username, their display name, the hash of  the Farcaster cast that interacted with it. Uh, and so this really lets you build  interesting interactive experiences that rely on sort of where the entry  point to the app was for your user. Okay. Interacting with wallets. So the mini app  SDK in addition to these actions also exposes an EIP193 Ethereum provider. Putting that more  simply, it just injects a wallet that is automatically connected to your app. So this  means you can interact with a wallet without needing to pop up like a multiple select wallet  dialogue. It means you can do it without making

a flaky connection to a remote server. And also  means like similar to building on top of web apps, you can use whatever tools you prefer to use to  interact with the Ethereum wallet. So if you like ethersjs, you can pull that into your app and use  it. If you like uh VM and WagMe, you can use that. If you want to just send calls directly to the  provider, uh you can use that. Uh, and in fact, this provider uh emits an event that announces  itself. So, in some cases, you may even be able to just use the injected provider directly. You  might not even need to pull in a library at all. Here's what this looks like in a mini app context.  This is like a typical configuration using WagMe, uh, which is a library for using React  hooks to interact with Ethereum. Uh, in this case, we're connecting to Bass. We're  pulling in the Farcaster miniapp connector,

uh, and using that to kind of  do our our WagMe configuration. And then if you're interacting with a  contract, this looks a lot like it does in other conventional web apps. Uh this is an  example from yoink that captured the flag that I uh showed you earlier. But yeah, we're  just using the conventional wagme write contract hook here to uh make a function  call to to a specific smart contract. So in fact in a lot of ways I think  you can kind of think of mini apps as the next evolution of DAPs. Uh if you see  here on the left is is Morpho as an example, web app on the left, the app inside a D app  browser in the middle uh and the mini app on the right. I think Morpho is a beautiful  interface that looks and works great in all three of these contexts. But you can  see mini apps really simplify the model

by automatically connecting your active  wallet, really simplifying the interface to be mobile first and kind of designing  with uh with this mobile first UX in mind. All right, concept for embeds. So, mini apps  appear in the feed as embeds and this is how users will discover your mini app. So, for the most  part, users discover mini apps organically in the social feed. You can go browse and search for them  in the app. But the main way that apps actually go viral and get distribution on Farcaster uh  is by creating really compelling embeds. So, mini apps are web apps. They have URLs and  what you can do at those URLs is uh use embeds, use a metatag like an open graph metatag to turn a  URL into an interactive surface that has an image

and a call to action instead of plain text links.  Uh and this works using really old standard web technologies. We use uh metatags in the HTML  and basically the open graph standard to turn interactive to to create these interactive embeds.  So basically any page in your app can create an embed. simply add this tag to the HTML and that  becomes an entry point into your app. You can give it a customized uh customized image, a customized  call to action and when this renders in the feed, we pull it in uh parse that meta tag information  and render it as this nice dynamic embed. Uh here's what an embed metag looks like.

um a little bit of a Frankenstein combination of  HTML and JavaScript here, but we're smuggling in some JavaScript data in a conventional uh metatag  header here. So, FC mini app tag and then this um this JavaScript data that describes what the  what the button title should be. Uh an image you can point to for your embed and uh yeah, some  more information about about how to launch it. This metatag produces an embed that looks like  this in the feed. much uh much more compelling and interesting to look at than the raw code.  Um, but yeah, we can you can do here for example, you see I have a dynamic number in here,  right? So, we're generating this image as more and more people uh capture the flag.  We're incrementing that number. And so, you can see a compelling, dynamic, interesting,  changing image in the feed here. So, yeah,

and then just press that button, click start,  and you're dropped directly into this mini app. Okay, final concept is publishing  extra data for discovery. So the concept here is what's called the miniapp  manifest. But you can think of this as just a file that you put on your mini app website uh that  describes extra information about your app. So users can find it and clients can index it. So  this is basically yeah how Farcaster clients discover and index information about your mini  app. Uh essentially since there's no central app store, many apps need to publish information about  things like the category that they're in or the uh you know screenshots of the app, the  description, uh who built it, etc. Um and

they do this by creating a special JSON file  which they host at a well-known location, right? So you put that at a special URL, this kind  of con a convention that any app can go find this, parse that and figure out this extra  information about your mini app. Um, yeah, I actually hear from devs a lot who will  come to us and ask like, "How do I how do I get approved for the Farcaster app store, right? How  do I get my app into there?" And the interesting answer is there is no central app store, right?  Like the way that you do that, it's it's really more much more like a search index than it is an  app store. There's no gatekeeper of who shows up in the in uh in this store. All you need to  do is is post this file on your mini app site

where we can find it. we'll go pull it in, index  it, and uh and display it in the in the feed. Here's an example of what this manifest file  looks like. Uh it has two important parts. So, up at the top, you can see this account  association. Uh this is a cryptographic signature over some of the information in  your app. It's over the domain in your app, uh signed by your Farcaster account, which  lets us attribute who actually built this app in a verifiable and strong way to your Farcaster  identity. This is maybe one of the trickier parts of of building these. We have a tool built into  Farcaster that makes it easy to generate these from your Farcaster account. We won't spend a ton  of time on this, but the the concept here is that you can get this strong and usable association  between the mini app and who built it. And then

yeah, the second thing in here is just a bunch of  additional data that can be used to uh yeah to to publish information about your app. So, version  of the app, name of the app, uh icons, images, uh and some some sane defaults in here for uh when  you render the app outside of an embed context. Okay, so yeah, putting it  all together one more time, your mini app is a web app. It's on a server  somewhere with embed metatags in its HTML. It can do native stuff by using a JavaScript  SDK and it publishes information about itself at a known URL so clients and users can find it.  Okay, this was a real speedun. We didn't cover a few other things here like authentication,  sending notifications, using web hooks,

all the different SDK actions. There's like a  lot of surface area in many apps. Um, but yeah, I'd encourage folks who want to build today,  go check out the docs at miniapps.xyz. We have pretty extensive docs and a good guide to to  getting started and all the different things you can do and build in many apps. Uh I also  have a demo here. We can uh yeah we can run through it in the next uh 10 minutes or so. Um  if you want to grab this. So this is a forkable replet that you can use as an example to build  a mini app. And yeah, let's take a look at it. Cool.

Uh so if you don't want to use replet, you  can also grab this app here uh from GitHub. Horsefax mint mini app. This is kind of a  starter. This is what we're looking at. And let me show this in VS Code. We'll do a quick  speedrun of these important concepts and how they map into the code. Uh so you can see this  app. Let's start with a package JSON in here. This is a pretty standard Vite and React app  we are building on top of uh a Vite which is a React framework. We have TypeScript. We have some  uh common utilities here for Ethereum Wagme. Um and then we have yeah the Farcaster mini app SDK  and Farcaster Wagme connector here. So those are

the core dependencies you'll need to turn just  a standard React app into uh into a mini app. So concept one is right here. This is uh just a  standard web app. You can see here we're setting up a WagMe provider to interact with wallets  query provider. And then we have our app. And if you look through this, this  is hopefully a pretty familiar, pretty standard looking React app. Concept two here is how we're using the SDK for  these native capabilities. So here we're importing the SDK. Um, and it's commented here if you want  to pull the code and and follow along. But yeah, we're using a few of these different SDK  capabilities. So we're calling ready,

which signals that the app is ready when it  loads. Add mini app to save it to the user's uh the user's app. View profile  to open user's profile. Compose cast. Some of these different actions  are are throughout the codebase here. Uh, this little effect is important.  This is kind of the most important part if you're building a mini app. This  is what hides the splash screen and says, "Hey, my app is ready to render." This just makes  them feel nice and performant when they load. Um, but yeah, we're doing two things in  here. We're grabbing the context, storing that in some state, and also saying,  "Hey, this mini app is is ready to load." So, this example is like a simple NFT mint. Um,  it's just connected up to a smart contract and lets you uh tap a button to mint a token.  And I won't go through like all the all

the details of these components here, but we  have a little card that shows the artwork, um, a button that does the the  actual contract interaction, and then a little bottom sheet that  pops up here on success or failure. In fact, let's pop over and demo it for a  sec. Here's what this looks like in the feed. So in this component up here at the top, we are  reading the app context. So this is showing who has opened the app and launched it. If you demo  this and try this yourself, this will read the context for uh for your own interaction with  the app and should show your username and PFP.

Uh, and then I have this wired up  right now so that you can kind of just swap out the the config and  the details to a highlight NFT, just a simple NFT that you can set up. But  if we tap here, we'll do a wallet request and then I can share this back to my home feed. So  that's really the core of like the viral loop in building a mini app is uh you know open the app  user discovers it through an embed do something hopefully interacting with an Ethereum wallet or  doing something interesting on chain uh and then share it back to the feed to get other people to  to find it and discover it and continue that loop.

Um, okay. So, that's sort of the first  two concepts. Mini apps are web apps. Uh, secondarily, you can use the SDK to to do  stuff in your app. Let's look at the third, which is connecting to an Ethereum wallet.  So, here's where we're using uh using WagMe, kind of a standard library for interacting with  with React and doing Ethereum stuff with a React app. Um, and here's where we're configuring this  connector. We're importing a custom Farcaster mini app connector uh which you just sort of pass  into your usual WagMe config. Uh and this this is cool as well because it can live alongside  other uh other connectors for WagMe. So you can kind of have an app that exists both outside  the Farcaster feed and as a mini app in feed.

And in terms of the actual interactions, these are in this collect button  component. Here's how this works. We're importing kind of standard WagMe hooks  here. Use write contract connect to wallet. Use wait for transaction receipt. And  then here's this actual interaction with the wallet when you are uh  minting the token to make a request. So, if you've already minted, we'll prompt  you to add the mini app. If you're doing a new transaction, we clear the state. Uh,  if your wallet's not already connected, connect it up. And then here, just  use write contract async to call

the mini app. Call the uh call  the uh smart contract function. All right, concept for uh embeds. So invite this is a little bit tricky. We're  doing this by uh at build time reading and inserting these embed tags. So this is one  thing that I couldn't like really clearly show in this simple react example. Um, but  if you look here in in this vite config, we're pulling in some config from this  file here that defines our metatags.

Here's our embed config. And then we have basically a little  buildtime script that reads that and injects it here into the markup  of the page to to create an embed. But you can just imagine here  right uh we have a metatag here type equals FC mini app it has  some content and this just gets um gets injected at at build time  into our app to create this embed. And the tool you can use to  test these in the development environments is this embed tool  in the Farcaster mini app tools.

Let me in fact show you how this  embed appears in the markup. Cool. So here it is. You can see  this page has this embed tag. If we go grab the URL for this mini app entry  point and we fetch it through the dev tools, we parse out, we find that that  embed tag and here's the preview of the the embed that we would render in the feed.

So when you see this in the feed,  this says here's an entry point to my mini app. Click this, open it,  and and launch the mini app from here. Okay, final concept is the manifest. So you can find this in here as a static  file in this public well-known directory. Um yeah, and here's this simple file publishing  information about this mini app. So other apps and clients and users can find this and index  it. So concretely on the web, you can find it right here.

This is always at this path  well-known forecaster.json. Okay. And there it is. So yeah, anyone  who sees this mini app on the web, right, when we see an embed, we see there's a  new a new mini app, we can go parse this uh pull this data and ingest it to index  this and and surface it in Farcaster. And the simple way you can do this, right, this  is just a JSON file that's on your web server. uh you sort of fill this out, put this in a static  location uh where anyone can find it. So the hard part here is probably signing generating this  account association and signing it. To do this, you can use the miniapp manifest tools built  into the forecaster dev tools. Uh yeah, and there docs on how to kind of use these tools  and and how to use all this at miniapps.xyz.

Let me put the uh the replet back up here. Cool. Cool. So yeah, if you want to try this  forkable example uh or find the GitHub repo, you can scan that QR, hit that URL,  and I think this is a good framework, like a uh starting point for for playing  around with the exact demo that I just just showed you there. Uh cool. We have  like two minutes if anyone has questions.

Yeah, it's called Cryptoals, but we didn't uh we  kind of push it through very very fast. So, we didn't like thought about notifications,  all the stuff that you um uh talked about. So, we didn't build like a like a a user uh like  a user base enough for the app to show up in the like when you search it, it it doesn't  show. We just have to share the the link. So, um so people to see it. I'm actually I'm just a  graphic designer. I made the graphic design. Uh I have a my brother is the developer and our friend  is the UX designer. But what do you recommend us

uh like to move on to the next thing or keep  pushing with this app? Yeah. Um so we're tuning that a little bit and hopefully you don't need  to like hopefully a few interactions with that app should be enough to start surfacing it  in in indexing and in the feed. But my main piece of advice is to try to surface your  app through embeds, right? Because that's natively how people will find it. Like that's  natively where they'll see it in in the feed. uh and actually like looking at the data.  Something like 85% of users get to mini apps through seeing embeds in the feed and not by like  going to the search page and finding it. Um yeah, but also we want in apps to be indexed and found.  So like you can always reach out to us if it's not indexed and you expect it to be like maybe it's  a bug and we'll fix it. Yeah. Cool. Thanks. Yeah.

Cool. Thanks everyone. Um, I'll hang out  for the rest of the day. If folks have questions about Farcaster apps or the docs,  I'm happy to uh to sit down and help you. Uh, yeah, and I think Nikolai's going to  show specifically using Scaffold ETH, kind of an example of using those tools  next, which should be really cool. Thanks,