What if you could visualize your social graph and actually see your connections, and their connections, in real time?
For a lot of users, the concept of owning a social graph can be a little abstract. So, with Lens Chain now live on Avail, we decided it would be fun to build a POC data visualisation tool to help Lens users actually see and interact with theirs. We vibecoded LensCollective.me to visualize and mint your social graph as a social card (the visualization is live now, with minting coming soon!).
Here’s a quick preview of how the social card will look
- You can check it out and explore your Lens social graph at LensCollective.me
- You can also check out the public repo and submit PRs for new features and improvements.
How We Built It
We used a variety of tools to bring it all together. Mocking up the UI was done in about 30 mins, with the bulk of the work getting all the features connected and working. Plenty of debugging work was required between prompts to test and fix things, but overall, this is the setup we used to build the app.
Building the Social Graph Tool
- Using Cursor (an AI code editor) to visualize social connections with Three.js (JavaScript 3D library).
- Used ChatGPT & Deepseek to help with data querying and formatting data from Lens to The Graph, (web3 data indexer).
- Once we’d initiated a dataset, we went back to Cursor to ask it to redo the data visualization based on the new data structure.
- Once we had this working, we used the Apollo client to enable search for Lens Chain.
- After that, we added the login logic using the Lens SDK.
- Then we added the user handle lookup via user wallet. For this we used Cursor with Claude 3.7.
Creating The Social Card
- With Html2Canvas and Deepseek we were able to screenshot the app client side and used it to create the social card.
The initial version we started building used the previous Lens SDK and when V3 went live, there were some changes that required a bit of good old-fashioned engineering to fix. The result however, has mapped very closely to our vision from just a few weeks ago.
How We Build Apps Is Changing
While we’re still a while off having ‘AI take all the jobs’ (if that ever does happen), what’s become obvious is the way we build apps has changed for good. Whether you’re currently learning to code or you’ve been programming for a while, not using these tools to help you build stuff doesn’t really make sense (excluding edge cases).
That said, as a programmer who has been developing professionally long enough to know what it’s like to build things the old way, I really like that I have so many new tools to choose from that can rapidly speed up my development process.
Where Things Are Going
In addition to the way we build apps changing, the types of apps we can build is rapidly changing too. Making a social graph something you can own is not just a concept now, it’s actually here.
For content creators today, their work experience is like working in a job, and having your CV (i.e. social graph) reset to zero every time you try to get a new job (i.e. move to a new platform). For 200 million professional creators, and those aspiring to join the content creator work force, a portable social graph isn't just a feature, it's a digital asset that safeguards their livelihood. Lens Chain makes it possible for creators to break free from today’s platform lock-in, and we’re pretty excited about what developers are going to build with it… using AI of course 😉
What Happens Next?
If I were to place my cards on the table, I’d assume that vibecoding is going to become the new normal for most app developers. Builders in web3 have a lot to gain from this for two main reasons;
- The open source nature of Web3 means that people can experiment with different tools, technologies and protocols really quickly.
- The economics of building and deploying a chain have changed.
Lens Chain is just the tip of the iceberg in terms of what you can build on a blockchain these days. Using modern blockchain scaling technologies (like Avail and ZKsync in the case of Lens Chain), developers can build onchain platforms that were previously unrealistic and unsustainable. High-throughput use cases such as social media are entirely possible on a blockchain now, with a UX that is comparable to today’s web2 platforms complimented by web3 features. It’s like having web3 apps at web2 scale.
I think we’re not far off hitting an inflection point where these technologies come together and developers can rapidly prototype, test and deploy apps and little experiments that will begin to rapidly turn into the most important digital communities of our time.
If you’re interested in building apps with AI, then you should come along and vibecode with us.
