Building on Hypergraph I Kevin Jones

All right, awesome. Thank you guys, everyone, so much for coming. Uh really excited about this talk because we're going to be diving into some new stuff uh that the graph has recently announced uh called Hyperraph and we're also going to talk about the existing stuff that the graph has to offer. Uh so my name is Kevin Jones. Uh I'm a developer relations engineer working for Edge and Node on the graph protocol.

Uh and today again we're really excited. We're going to be talking about what the graph is, what bounties you can get, uh what products you can hack on, and also hyper graph, which is a brand new framework for building uh knowledge gra knowledge graph-based web3 applications. And we're going to do a quick demo of what the flow looks like to create one. Uh so first of all about the graph, I think most people know the graph. We've been around for a while.

Uh but just as a refresher, you know, the graph is a decentralized uh network of data indexers that basically provide um data to uh web 3 uh specifically for smart contracts. We now also have a token API which I'll get into. We have lots of different ways you can get data. Um there's lots of people on the network and it's growing every day. Uh so you can uh go to the graph market and you can see all the products that we have token API substreams.

We also have fire hose and the traditional subgraphs that you guys probably have known before and we still use those. Uh we're going to do like by the way this is going to be a lightning talk because I've got a lot to cover but I will definitely be around afterwards to answer questions and dive deeper if you guys need. So just let me know. Uh first of all sub graphs. Subgraphs give the ability to take uh uh data that you would have in your smart contract in the form of events and index that into uh a GraphQL API interface.

And to do that is very easy. All you need to do is run graph init with the graph CLI and it will bootstrap and ask you all the information that you need to to scaffold out a subgraph. You can do it in a few minutes. So all you need to do is install the CLI, run graph init and pass everything in and it will generate and scaffold that out for you. Uh we also have a token API which allows you to get uh more advanced information that you would not normally get from just a smart contract.

So an example would be like if you want to see uh token transfers between wallets or if you want to get token metadata like the symbol uh the top holders of a token uh balances of a specific address. Uh we also have unis swap data uh open high low close and also other other data on about seven different chains that are all listed there. Uh and so that's a great thing if you're going to build like a wallet or some kind of information where you need to get some like token price or token metadata. Uh we also have uh substreams which the substreams have been around for about uh almost two years now I think and this allows you to stream data directly from what's called fire hose into any kind of database that you want. Right?

So if you want to put it into click house or a flat file on your computer or a CSV file uh it allows you to stream that data up to a certain amount of blocks that you define. uh and it gives you that fast access to uh to applications. So it's very useful for uh again if you want to like run your own database and have your own way of like indexing that data uh you can transform it. We also have a MCP server that is uh available. We actually have a few MCP servers.

We have the subgraph MCP server which allows you to get information about existing subgraphs. Uh so if you're building like anything AI related um you can uh basically query the subgraph MCP to make decisions on like what subgraph it has a full um integration with everything in the subgraph network so it knows exactly how to find the right subgraph for that particular use case. Uh and we also have a a token API MCP server as well. So these can be put into your uh uh IDE like if you're using claude or some other like AI focused uh IDE you can add those as MCP servers or you can create some other existing way that you're interacting with those like an AI agent or something like that. Um, we have a really uh good pro uh repository.

It's in it's called the examples repository. And this is on the graph protocol GitHub. And so if anyone here is hacking and just doesn't know how to get started right away, uh there's a folder for token API examples that show you how to build on Nex.js and on scaffold ETH. Uh so scaffold ETH is like a starter kit for Ethereum.

And so it's a really good starting point if you want to hack on Ethereum and use the token API. And then there's also a uh agent folder that has an example of how you could build an AI agent uh with Verscell AI SDK uh using Coinbase agent kit and using various functionality in the graph such as the subgraph MCP server, the token API and it's already pre-built and configured. So it's a really great uh starting point for an AI agent for the hackathon as well. Okay, now that was fast. I did first five minutes of of of the graph and now I'm going to dive a little bit into hyperraph.

So this is uncharted territory for me. So uh I hope that I can uh give you as much information as possible but again we'll be available if you have questions. Um hyperraph is a new way of thinking about building web 3 applications. I think traditionally, you know, we think about building web applications, we think of smart contracts and we think of just deploying off-chain metadata on like something like IPFS, right? Um, and maybe using a traditional like web two database probably to store off-chain data, right?

Which is not ideal. What we want to do is actually enable the next stage of web 3 developers that can use uh optimized data for uh uh using this hyperraph framework. And the backbone to this is knowledge graph data. So who here has heard of knowledge graphs before? Anybody?

Right. So a lot of the the web foundation is actually built on hyperraphs. Right? If you go to like Wikipedia or if you look at some of like traditional uh indexers uh like you know Google and stuff like that, they use concepts of knowledge graphs because in an in an optimized way, you need a way to optimize data, right? And the idea of a knowledge graph is very simple.

I'm not going to focus too much on it, but the general idea is that you have uh entities, right, that you want to keep track of and then you have types and properties for those entities, right? And this gives you the ability to store data in a very organized way, right? Um and in an optimized way that's great developer experience and a user experience because you can store this metadata you normally would think about and store it in on like IPFS or a traditional web two database. you can store it on a knowledge graph in a web three-way. We're going to get to how you do that.

There's a few uh concepts you need to understand. One is there's a concept of spaces. Okay? So, you can think of a space as a collection of knowledge, right? Uh we want to collect uh an an information of all the different crypto industry and what it has to offer, right?

You want to keep track of different regions in the world, places in the world you would want to visit, different kinds of software, right? And then these are all connected um places where people can curate data, right? We're talking about curating knowledge, right? Uh and we do that with entities, right? So you can imagine here's a good example.

We have Golden Gate Park, right? Uh which has properties, right? It has a a place uh entity or a type uh that is basically a place and inside of that place type we have different uh rel um properties that we define like the address the hours that it's open the phone number right um and have designing data in this way makes it very optimal for the second developer that comes in and wants to re rebuild an application and use this existing knowledge graph or this knowledge data. So again you have this concept of spaces and then within those spaces you store knowledge in entities and then you kind of link those entities together uh with relations right we we relate that data together um and we also need to think about one one of the biggest things I struggled with when I first came into web 3 is like this concept of public versus private data right I most everything we do in blockchain is very very public you know we do have privacy applications and we have privacy protocols but when you want to build a web application in a private way, you usually end up having to use a traditional web two database. Well, Hyperraph fixes that with a cool new approach, which is a local first development with what's called a sync server.

So, you can imagine a sync server is a way to do encrypted data, right, between accounts uh that can basically share data um and get remain control over that data in that sense and do real-time collaboration, right? Um, also you can then take that data that you're working with in this private way and choose exactly what you want to make public and put that on web3 in the form of IPFS and you know blockchain and and contracts and on top of that you can uh create governance models right governance models give us this ability to really like coordinate right as a whole and build something awesome uh using this data. So the concept is simple. You have uh a consumer application and you have what is called the connect app. So the geoconnect app basically keeps track of uh your identity and how you want to allow uh access to your spaces.

Uh and so you are basically uh connecting all of your uh users data is going through the sync server in like a private way, right? And then you have a way to publish that data onchain using a safe smart account. Okay. And so we can look at an example here which is a very b basic events application where we have uh full type support right. So not hyperraph is type type first right it's all written in typescript and this gives us the ability to create these uh entities right here we have an example of a company that has a property type or a type of name and then that name is a text value and it gives you the ability to explore that data using your IDE right which if you haven't used typescript it's really really powerful um and if you start building and thinking about your your data especially your um uh uh uh application of how you want to actually make data relate and how how you want to store it.

It makes it really easy. It's also very good with AI, right? If you have AI powered application or AI development environment, you can read those types and it's very easy for AI to build an application for you as well. So here's an example of how we can use uh the use create entity to actually public private uh publish private data to a specific space, right? And in this case, we're passing in a name of like an event that we're creating.

And we're passing in a description. And then we also have like some additional relations of like sponsors that are sponsors inside. So it's like an array of data and how they they are connected. You can also query the data by passing in a special parameter called mode, right? Using the the the framework.

So it is available. It's just graph protocol hyperraph react. And this ability this gives you the ability to create uh some uh data object and query that data uh by passing in that it's private and this will pull it from the the sync server. Uh and you can also publish publish public knowledge as well. So this is an example of how you would use the uh smart session client of your wallet uh to basically call the publish ops.

So here we do like an await statement and publish the operations. So one of the concepts that you'll learn with hyperraph or with GRC20 uh is that you are publishing uh operations to the knowledge graph. And so what this does is it allows you to publish the data that you have in your private uh space to the public knowledge graph. And we'll show a demo of that as well. Uh and you can also uh just query public data as easy as this.

So again, it's the same thing as the private, but in this case, we're saying that it's public. And we can get the data that we care about. And we can also get additional objects like is it pending or is it is there an error with the query or whatever it is and do some, you know, interesting stuff with the with logging or whatever you need to there. So let's talk about the prizes. So there's uh 10,000 $10,000 in prizes from the graph for various uh things.

Uh if you want to build on top of hyperraph, I'm just going to skip the first one for a second. If you want to build on hyperraph using the knowledger graph framework, there is a total of five $5,000. I think this is actually is that wrong? Oh, that's right. Yeah.

Yeah. Uh the best use of hyperraph is first place for $3,000. Second place is $2,000. Uh the best use of GRC20TS library in ADAP is 1,000. So the difference here, I just want to explain it.

So people understand the hyperraph framework is for building web 3 applications. It's a framework. But let's say you want to just publish directly to the knowledge graph using uh uh the graph GRC20TS library you can also do that. Uh so this would be like if you really wanted to publish a lot of data to the knowledge graph uh or you know trying to curate data you would want to use that library and I can go into more detail about that if you come to the booth. Um, and then the other one is for the best use of the graph token API, subgraphs, substreams, or the AI IMCP servers.

And that's $4,000 total. So, first prize is 2500 and the runner up is 1500. Okay, everyone who builds on Hyperraph gets an Air Tag. So, that's pretty awesome. So, I hope everyone in this room uh is building on Hyperraph.

And uh please come by. As long as you judge and you're using Hypergraph, we will get you one. Um, if we run out here, we will mail you one. So just uh uh do your best. Uh we also have some ideas like examples.

Um there's existing data in the knowledge graph right now that you can use. Um so there's like crypto projects that are available. Um and so these are just some examples of things you might want to build. Um and maybe you could like reuse the data. Uh or if you just are want to get some inspiration, maybe you want to take this and then you know modify it a little bit or extend it, you could.

Uh we also have all the docs here. So if everyone wants to get this, I'm gonna also show another slide which has the um uh well actually if you stop by the booth there's a hacker dashboard you can query and it has all the information you need. But this is a good starting point for if you want to build on hypergraph. Uh go give everyone a second to scan that. Okay, cool.

All right, now we get to the demo. All right, so I know that was fast. So let's actually uh build something. Okay. So, the first thing you want to do, we're going to focus on hyperraph for the demo.

And the first thing you're going to want to do is go to the docs.hypergraph.thegraph.com and go to the quick start section here. So, you go to the quick start section.

There's a couple ways you can get started. There is a app template that uh Nick here has been working on that's really awesome. It's got a built-in like UI that's ready to go. Uh it's a little bit more like an example of how you could start out. Um, all you need to do is clone that and install all the dependencies inside the package and run the dev server and it will spin it up for you.

Or if you want to create your own application and scaffold it out from, you know, uh, from nothing, then you're going to want to use Typesc. Okay, Typesc is this application that we're going to use to basically create a database of how we want to store our data in the knowledge graph. Okay, so to do that, you need to install the Hyperraph CLI. So, this command here will allow you to install it. Uh, you would just basically come up here, paste it in, and that's pretty much it.

That's going to install the latest version of the CLI. Um, once you have the CLI installed, uh, I already did that, so I'm going to skip that step. Uh, is we can actually, um, run here. Yes, thank you.

Yeah. Yeah. Yeah. I'm going to make it bigger.

Sorry.

Okay. So, the next thing, um, what's that? Even bigger. Oh, sorry. Is it hard?

Oh, it's because Yeah, it should just be Can you make it my entire screen or No, can you make it my entire screen instead of the video? Yeah, that's a good idea. Yeah. Okay. How's that better?

Okay. So, all we need to do is run hg typ and dashop d-open. So, what this is going to do is it's going to spin up the hyper graph types sync like tool. Basically, it's kind of a tool. You can think of it as like a database tool.

That's the way that's the way I like to think about it. And you can see I have some pre-existing apps that I've created here, but I'm going to start with a brand new app. Okay. So, we're going to go new app. We're going to call this app uh what Academy uh academic.

We'll call it academic. And this is a collection of uh study studies something like that. And we say define schema. So what what what we are basically doing here is we're creating a way that you want to store the data in the knowledge graph. Okay.

So for this one I'm going to keep it very simple. I'm not going to make anything too complicated. And you'll see this very first one here is the academic field. So if I click that I can expand it and see the properties. So in this case it has the a property of name which is a text a description that is text.

And then we can click this little add button and it will add it to our uh configuration. So if you wanted to add more, you could manually add them here or you could find existing uh schema or existing yeah schemas that are available. So the benefit to that is that someone is probably already after a while maybe have done something similar to what you have done and they've started creating these. So there's a whole list of existing things you can browse through to get the types that you need. Okay.

So for this one we're going to be keep it very simple. We're going to call it academic field has a name, the text, and there you can add and remove properties as well. Like if I wanted to add a property that was like um I don't know. Uh

yeah,

trying to think something to add.

I gave you

any ideas. Anyways, you could add more if you wanted to here. And we support all sorts of different things like uh text numbers, booleans. Oh, it says booleans now. Good.

Uh date, and then URL is not used, so you don't need to use that actually. Um and then point, but I'm going to delete that one. on and then just go ahead and generate and now we have this academic uh folder where it wants to create it. So it is a Vite application. We'll click generate.

Okay. So now it's been generated. Okay. And then if I come back over here, you can see here that it created the U application and then we can go into that uh academic folder here and we can do PMPI to install all the dependencies. Okay.

So it is a um uh you know project that has dependencies. So, we need to install those. Uh, and then we're gonna, while that's loading, let me go ahead and go into the folder here and load it up so we can take a look at it. And we'll go back to that in a second. Oh, it's almost done.

Okay. So, here's the the kind of application. It's a like say a Vite application built on React. We have this source folder and then inside of here, we have the routes, right? And we have an index.

tsx file. Let me close this. Can you see that? Okay. Yep.

Better. And so you can see here where we're able to uh access and get back data using the use spaces command. And we're basically putting that into data called public or private spaces. And that's by importing the use spaces option here. And then those spaces have both a private and a public uh endpoint.

Uh and so here we can see we actually import all of the uh helpers for the TypeScript library uh that allow us to uh get access to that data. Okay, now it's up and running. So, let's run the server. I only have a minute, so I'm going to just show you real quick how we do that. So, it's on port 5173.

Okay, here we have our spaces. So, here we have our existing one here which is uh oh, I need to log out, authenticate with. So in other words, when you first built your application, in order to publish data, uh you need to sign in with geoconnect. So I'm going to do that here.

Uh you need to put in email address. So I'm going to do that to like register basically to log in.

And I'm going to get the we use privy for login. So you'll be able to log in with email, get the code like this. You need to sign basically to prove that you own that uh wallet. Sign again. Got to sign a couple times.

That's going away. Pretty soon you'll just have to sign back. Okay. So now I am logged in and then I can create a public space and a private space using this tool. So I can say I want to create uh academic private and academic public.

So, it's hard for me to I'm trying to fly through this so I can get it done. But basically, I'm creating a private space and a public space. The private space will be on the sync server and that's where we'll store, you know, the data. The public space will actually be on the knowledge graph and it will be on chain, right? Then all I have to do is authenticate and give give my app access to each of those spaces.

In the future, you'll be able to select which space you want to give access to, but in this case, I'm just going to give full access sign. And then what it's going to do is redirect me back and take me back to my app. And now I have the academic private space and public space. And I can create biology biology. I don't know if I spelled that right.

Generic. And I can publish it to the knowledge graph which is one click. So basically this allows me to create a I just created a private value for an an academic thing and I just published it to the geo network pretty quickly and now it's going to be available here in the public spaces as biology. I went over by a minute so sorry. [Applause] Thank you.

We'll be outside for questions so just please come grab us and thank you so much guys. [Music]