Building Farcaster Frames
Farcaster, a "sufficiently decentralized" social network protocol built on Ethereum layer 2 (Optimism), is gaining traction in web3. The core protocol uses smart contracts and is decentralized, but the popular Warpcast client currently has centralized components as it scales.
The vision is an ecosystem of decentralized clients and apps built on the open Farcaster protocol, allowing users to own their social graph and data. And just like building apps on centralized platforms previously, you can now build interactive "frames" — decentralized apps embedded in the social feed. The key difference is true ownership on Farcaster.
What makes frames so powerful is how they enable rich, interactive experiences without the user ever having to leave their social feed. Want to run a poll, mint an NFT, or even play a game? Frames make it possible with just a few taps, all while keeping the user in the familiar interface of their Farcaster client like Warpcast.
This seamless interactivity is opening up a whole new design space for social apps. Developers are taking advantage of Farcaster's decentralized identity and open data to create novel onchain social experiences.
In this post, I'll share my journey of building frames using different frameworks and tools and I'll share my thoughts on why frames represent an exciting new frontier for social media, and what it means for the future of web3. Let's go.
My Experience Building Frames
I initially used Next.js to build a frame displaying on-chain data from the Covalent API. Frames work by leveraging the OpenGraph protocol - the client sends a POST request when interacted with, and the server responds with an HTML snippet containing OpenGraph meta tags describing how to render the frame state.
While Next.js was familiar, I realized it was overkill for generating these simple OpenGraph snippets. My project ballooned to over 100 files when all I needed was a single route to handle POST requests.
That's when I found Frog, a purpose-built framework for frames created by Paradigm and Wevm (Wagmi, Viem). Designed for the OpenGraph flow, Frog provides a minimal footprint and utilities for common tasks. With Frog, my project shrunk to just a handful of files.
Here's a quick comparison of the file count:
| Next.js | Frog |
|---|---|
| 107 | 12 |
Despite the drastic reduction in project complexity, I was still able to easily call the Covalent API from my Frog index.ts file to fetch and display on-chain data. The simplified mental model and helpful error messages made the development experience quite enjoyable.
One thing I really liked about Frog was the built-in frame debugger. Running frog dev spins up a local server with live reloading and provides a URL you can paste into the Warpcast frame validator. The devtools show a live preview of your frame, provide time-travel debugging, display request information, and more. This tight feedback loop made it super quick to iterate and test out changes to my frame.
Overall, while it's certainly possible to build frames with generalist web frameworks like Next.js or Create React App, I found that Frog eliminated a lot of complexity and let me focus purely on the frame-specific logic. The thoughtful defaults and well-designed abstractions made frame development a breeze.
Frames, frames, frames
Here I'll highlight a few frames me and our team at Covalent have created while exploring different frameworks and tools:
Built with Next.js and frames.js
Input any wallet address to get all of the approvals given to smart contracts, with their amounts. Links to revoke.cash so you can also revoke approvals.
Powered by the Covalent Unified API to check your wallet for approvals.
Built with Next.js and frames.js
Input a wallet address to check recent transactions for a wallet. Opens a transaction using the GoldRush transaction receipt view.
Powered by the Covalent Unified API to get the summary of wallet transactions.
Wallet activity visualizer frame
Built with Frog
Input a wallet address and get back a visualization that represents the chains the wallet is active on.
Powered by the Covalent Unified API to get the cross-chain activity for a wallet address.
Other Tools and Frameworks to Build Frames
While Frog worked well for my needs, there are other frameworks and tools available for building Farcaster frames:
OnchainKit by Coinbase
OnchainKit is a comprehensive library of React components and TypeScript utilities from Coinbase for building web3 apps, including Farcaster frames. It provides pre-built themes with components ready to use out-of-the-box. The main benefits are a robust feature set and tight integration with Coinbase Wallet. However, it has a steeper learning curve compared to purpose-built frame frameworks.
Frames.js
Frames.js bills itself as the "fastest way to build frames". It includes a local debugger, React support, and aims to be as lightweight as possible. Key features are hot reloading, state management, and built-in wallet connection. It has a very active community with plenty of examples and frequent updates.
Challenges in Frame Development
While Farcaster frames offer exciting possibilities, developing them comes with its own set of challenges:
Real-time interactivity is currently impossible: Fast-paced, highly interactive experiences like twitch games are extremely difficult to implement as frames today. Frames can only display static images or gifs, requiring a full round-trip to the server for every user interaction to fetch a new visual. This request/response cycle introduces latency that makes real-time, instantaneous feedback impossible with the current architecture. The limitation to static visuals poses a significant hurdle for real-time interactivity. Developers must carefully consider if a use case demanding high interactivity is well-suited for the current frame constraints.
Frames discovery: Discovery poses a significant challenge in Farcaster's early days. Currently, frames surface primarily through users' feeds when others cast them, or in the "Trending Frames" section. While users can search for specific frames or bookmark favorites, there is no comprehensive directory or app store experience for discovering new frames yet. This lack of dedicated discovery surfaces limits the potential audience reach for frame developers. As the Farcaster ecosystem evolves, shared discovery mechanisms like curated directories could help users more easily find and adopt compelling frames from a wider pool.
Handling complex state: As frames become more sophisticated, managing the application state can become difficult. Developers need to carefully consider how to represent and update state on-chain without prohibitive gas costs. Established web development patterns around state management need to be adapted for the unique environment of blockchain-based frames.
Despite these challenges, the rapid innovation happening in the Farcaster frames ecosystem is encouraging. Developers are experimenting with creative workarounds and pushing the boundaries of what's possible. As the platform matures, we can expect many of these friction points to be addressed.
The Future of Farcaster Frames
I'm incredibly excited about the future potential of Farcaster frames. This new primitive represents a paradigm shift - enabling open, composable social apps built directly on users' social graphs, without intermediaries extracting rent.The possibilities are vast - from decentralized networks and marketplaces, to community-owned games and collaborative tools. We could see an explosion of creativity and a new creative economy as tooling improves. Of course, challenges around onboarding, usability, and regulations remain. But the core innovation of open, interoperable social primitives is powerful. I can't wait to see what the community builds next.
Conclusion
We explored frameworks simplifying frame development like Frog, OnchainKit, and Simplest-Frame. Key challenges include interactivity, state management, and discovery.
While not fully decentralized today due to Warpcast's architecture, Farcaster is designed as a "sufficiently decentralized" protocol. The decentralized core aims to enable an ecosystem of open clients and apps, eventually providing true decentralization over time.
The nascent Farcaster ecosystem could reshape social experiences. I'm excited to see what emerges as it matures. Interested? Start building frames - the future of social media is being rewritten.
About Covalent:
Covalent provides the industry-leading Unified API bringing visibility to billions of Web3 data points. Developers and analysts use Covalent to build exciting multi-chain applications like crypto wallets, NFT galleries, and investor dashboard tools utilizing data from 229 + blockchains. Covalent is trusted by a community of 40,000+ developers and powers data for 5,000+ applications, including 0x, Zerion, Rainbow Wallet, Rotki, Bitski, and many others.