Over 100 subscribers
Most people know what a Farcaster frame is, but to sum it up, think of it as an iframe mini app in your feed that can perform a wide range of actions. Deploying a frame is possible with the help of LLMs, and the benefits of deploying viral frames are limitless with moxie rewards.
We'll highlight a few powerful tools to get you started, but this is just the 101. Deploying a frame will require a bit of grit and patience on your end if you don't have any coding experience.
Now that we know what Farcaster frames are, let's examine a few really cool use case examples.
Sorry gotta shill mine, this was built with the tools we're about to dive into
This week I built a frame inspired by the show “are you smarter than a fifth grader” All without writing one line of code Are you smarter than a fifth grader? https://quiz-frame-rosy.vercel.app
This frame runs through five 5th-grade level questions and gives a pass/fail at the end to let you know if you're smarter than a fifth-grader. It took me forever to work out the bugs 😉
Nikoaii is one of the best frame builders on Farcaster, but he also knows how to code, here's an example of one of his recent frames:
Ok, this is the right one: First attempt to design something based on @betashop.eth 's concepts in between /farconasia sessions. First 20 people to share their earning on X will get a replyke from me + degen tip. Use [MyStats] and then [Share@X]. Have fun! 🚀🚀🚀 https://altumbase.com/mr/366713/HUhWeLGjb2/2
Dusan is another great frame builder, and this game is really fun too!
framedl pro results #9 coming out of nowhere, as she missed the start, give a warm welcome to @klusya as our #1 1) @klusya (8k) 2) @spencerw.eth (4k) 3) @hollyr.eth (1k) 3) @blairforce.eth (1k) congrats! https://framedl-pro.vercel.app/leaderboard?date=2024-04-20
Think of LLMs as your employees, and you're their manager. Put shit in, get shit out. It might take a while, but eventually, you learn how to communicate with these sophisticated machines.
My journey always starts with Claude, and I think of Claude as your project manager. You'll go to Claude to kick things off and go back to it if your code has really gotten off the rails.
Cursor is your terminal and software engineer, you'll set up all your files and debug minor issues with Cursor.
Github is your deployment manager, making updates to your code after deployment very easy.
Vercel is your app host and deployer. Once your code is live, you can check the Vercel logs for bugs and errors.
Claude is the most powerful LLM for coding, and you can ask it to go slow when starting out, which is helpful. For example, you can specify, "I want to do XYZ," tell it what the first steps are, and it'll walk you right through it.
You can even set yourself up for success by loading in specific project knowledge, like I did here, before entering a prompt.
Claude will be your best friend throughout the whole process, and it doesn't care how dumb your questions are 😆
This is where the sausage is made.
II use Claude to ask what files I need and what structure they should be in. Then, I make those files in Cursor and start dropping the code from Claude.
If you need help with a specific section of code, all you have to do is highlight and add it to the chat and ask your question. You can also add additional files as context in the chat prompt by hitting the plus button. Sometimes, I don't get the best answers for difficult bugs in Cursor, so I go to Claude for help. It's just something you get a feel for eventually on when to use Claude or Cursor.
Claude may tell you to enter commands in the terminal and that's the section on the bottom of Cursor. You may need to install npm if you haven't coded before and that can be done by running this command in your terminal: npm install -g npm
Test your frame here: https://debugger.framesjs.org/ or https://warpcast.com//developers/frames. These tools can also find bugs in your code. Just copy/paste logs from inspect, or sometimes Claude will even ask for the full page source. These can be found by right-clicking on the page.
Github is a must; make sure you create an account. You can push updates directly from your terminal. Use Claude to figure out what commands to use and how to push updates to repositories.
Finally, Vercel, this is where you'll get your share link to share your frame with the world! There are other programs you can use as well, but Vercel works well on GitHub, and it's free.
Once your frame is deployed, you can also check your Vercel logs for bugs and errors.
If you'd like a more in-depth guide on how all this comes together, let me know! These tools are both fun and powerful, so enjoy and deploy some cool stuff!
Tim and Success Frens
