[Music] My name is Kevin Jones. I am a developer relations engineer working for the graph protocol. Uh I'm working for Edge and Node, which is one of the core developers, the original creators of the graph. Um and today we're going to be talking about the graph. We're going to uh talk about what the bounties are, and we're going to do a quick demo of how Hyperraph works.
Okay. Uh, you guys can hear me. Okay, good. Thumbs up. Yeah.
Awesome. Okay. So, again, my name is Kevin. Um, we're going to go through what the graph is briefly, talk about the prizes, hyperraph, and then do a demo. So, first of all, the graph, uh, I think most of you probably have heard of the graph before.
We've been around for a while. Um, the graph is a decentralized, um, indexing layer for blockchain data. Uh, but we've recently added a lot of other stuff. Um I would say that we have like really kind of given lots of new tools uh for building on blockchain. We have our subgraphs which are like the GraphQL based APIs for blockchain data but we also have uh some new stuff that we're hoping that you'll build on.
So um as of this hackathon we don't actually give any bounties for subgraphs. So you need to utilize some of these um uh different tools that we have. We have a token API which gets you access to token uh information. um pricing data on unis swap and uh other related uh information about tokens and it's available on I think seven or eight different uh chains. We also have MCP servers to get access to that data and we also have MCP servers that give you access to the subgraph data.
So as long as you're querying a subgraph through the MCP server, it does qualify for the bounty for best use of the graph. Um and then we also have a technology called Substreams which has been around for a while. It's a streaming uh protocol for streaming data into like external sources. Um they're called syncs and so you can stream the data into your own database or you can like uh reprocess that data uh in different ways. And so if you're using substreams that qualifies you as well.
So that is its own category. There's a first place and a second place. So first place is best use of any of those tools uh in your app or your DAP. And then runner up is 2000. And then we have a another category which is best used of the uh best application built on hyperraph.
Hyperraph is a framework for building knowledge graphbased applications on blockchain. And uh I'm going to do a demo and walk through it so you'll understand it. And there's a first place for 2500, second place for 1500. And then we have best use of GRC20 which is GRC20 is the um the underlying spec for how the data is stored on the knowledge graph on what's what's called geo which is a chain basically you can think of it as a chain um and if you want to put lots of public knowledge on the on the knowledge graph you would use that it's a more lower level kind of like tool for like publishing data and so we have it our own category there but if you want to build an app you should use the hyperraph framework work uh there. If you uh are a winner, you also will get an air tag just included.
So, it's just like an extra little uh bonus. And we have the hacker resources page here. So, you guys should scan this. Um you can also just go to um the graph.comdoccks and you should be able to find everything you need there.
Uh but just in case you need it, I'll give you guys a second to scan that. I'll wait till the phones go down. We look good. All right. Cool.
All right. So, let's talk about Hyperraph. So, Hyperraph is in a developer preview. So, you know what that just means is that there are bugs. Um, it is kind of like a rapidly developed uh tool and um it's just something that that we just like to preview and like explain that you don't want to use in production yet, but we are looking for people that want to build stuff that would make sense to put in production.
So um really the main features of hyperraph that are really really cool is that you can do for the first time ever like private data on the blockchain. I mean you can do private data now like in other ways uh but this is like a first kind of approach at being able to do private data and I'll go into like how that how that works. Um but essentially it's through uh the ability to do uh local first development and encrypted data with what are called like private spaces. And so you can build applications that store that data on a private sync server uh and distribute it encrypted and then you can then take the data that you choose and then publish it to the hyperraph or to the to the um the knowledge graph. It's also a full stack tool.
So, it does come with like a front end and it comes with a a boilerplate uh that let let you kind of get started with the data structure and we'll actually demo it and show you what that looks like. Um, and the full stack implementation is on React and you can either use Vite or you can use Nex.js. So, you have options. Um, and again it's endtoend encryption.
Um, and it has built-in authentication. So we have a a tool that's called geo connect which allows you to authenticate to get access to um uh the account to be able to published to the uh the knowledge graph. So some of you might be saying like what is a knowledge graph? Um so knowledge graphs are been around for a very long time. Um, and if you haven't heard of the concept, it's it's a concept of like having data and having these um like entities that store the data.
So like people's names uh cities city names um how they relate like who lives somewhere uh and these kind of relations. So you have this concept of like edges and then relations um and how they're all connected. So you can kind of think of it as like an interconnected graph, right? an intercorrected amount of knowledge that can be like kind of shared. So in other words, if you want to um you know get an access to a list of all of the different projects in crypto, well you might just use the crypto spaces to look up all of the projects and then you would be able to use that public data that's already published and we're not like repeating ourselves over and over again like uh I think most developers do and they don't realize it.
Um and so it's really this concept of like public knowledge and making the data reusable. And this is done by having what are called entity ids. Um and these uh ids are like standardized so that you can look up the data that you're looking for in an easy way using the knowledge graph. So we have this concept of spaces and so you can think of a space as like um almost like a uh a domain right like uh a a set space of like knowledge data similar to like Wikipedia I guess you would say you know Wikipedia has different sections different types of content and so with spaces you can have a your own space and then you can also uh submit your data to public spaces. So like if you wanted to get again like all of the crypto projects that are out and you wanted to maintain that in a more public way, you could use the crypto one.
If you wanted to get a list of software that's available, if you want to get a list of stuff in San Francisco or photos or notes that you've created, you can create these spaces, right? Public and private. Um and then you have entities. So like in this case you know you can look at an example like we have gold we have Golden Gate Park which is a place uh and it's a park and we have uh it is a uh a type of this place and it has an address that is worth this and it has these hours and it has these like kind of like structured data uh in what are called entities and so I talked about the sync server and this is kind of what the architecture looks like. This is kind of a busy picture.
You don't really need to fully understand this because when I do the demo, it'll kind of click a little bit more. Um, but again, you have this idea of like you're connecting your app to the sync server which we run uh as the graph and that sync server is storing the encrypted data and it's allowing your application to get access to the data using encryption. Um and then uh you have this uh safe smart account that is managed by geo connect uh so that you can publish that data to the to the um knowledge graph. So here's like a very basic example. It's uh you know fully type- safe uh implementation.
So you know there are uh helpers to be to get access to things like entities and types uh inside of the knowledge graph structure. And so you have this idea like here where we have a company that has a name that is a uh type text and then you can uh save this data in that uh that class or in that entity. Uh and then you also have this kind of event that can be stored uh that actually has a relation uh right down there at the bottom where you can like kind of like relate these two things together, right? like you can create an entity for a company and then you could create an event that that company's going to host and then hook those together with this kind of relational um relation. You can also do private data just by like specifying that you want to publish to a private oh well if you don't if you just put like the space ID and it's a private space then it will allow you to publish that data to a private space and then you can query that data just by specifying on the um parameters that it's private.
So if you're getting access to data that's in your private space then you query it that way. Um and then you can also publish to the knowledge graph publicly um by doing this kind of operation. So basically with with um uh knowledge graph the way it works is you are publishing your data in in like an operation um and you're first storing that data on uh IPFS and then you're publishing that as an op. And so we'll again we'll show what that looks like in the app. Uh but but yeah, this is what it looks like to actually use the code and then um to query data from public, you just have to stay in the parameter mode public.
So very easy to understand, easy to work with, especially with AI because it's all type safe. Um and the types are already created for you. All right. So what are some examples you could build? So crypto projects, we have a cryptos project space.
So you might want to extend that data if you're using like GRC20. You also might want to do something that's related to like investments, right? Like um maybe creating like investment strategies on knowledger graph. A DAP registry is another cool idea. Things around governance are very interesting to us.
Um, basically anything that you want to be able to allow people to collaborate in a private way and then eventually public data is a great example of using something for the hyperraph. Okay, so let's just demo it and that way you guys can see how it works. Okay, so if you go to uh the graph.comdoccks and then there's a section right here below that's hyperraph and all the docs for like all of our stuff is here. So you can just find out whatever it is you want to build on, but you know, we're going to do hyperraph.
And there's a really high level overview of like what hyperraph is, all of the terms like what a space is, what an identity is, uh what uh the how the events work, the security model. But right here on this very top one is the getting started quick guide uh right here. And what this will do is it will give you the commands to spin up a project using the npx command. You can also just use pmppm or bun or yarn. It's really up to you.
Um, just for like sake of simplicity, I'll use this one here. So, I'll use MPX. That might be hard to read, so let me make it a little bigger. Um, but we're going to do MPX create-hyperraph at latest. So, we're going to do that over here.
So, it's going to ask you to install it if you haven't installed it already. And you just say yes. And then we can name it whatever we want. So we will call it um new delhi. Yeah, new deli.
Sure. So then you get to pick what front-end framework you want. Um we just added next.js I think recently. I did notice there's a bug uh this morning.
Getting working to get it fixed. So u it doesn't really matter. You can choose either one. It still works actually, but uh you get to choose. I like Nex.
js, so I'm going to use that. And then you get to choose what package manager you want to use. I'll use npm. And this is going to scaffold out a project for you. So it's going to give you like a project that is already has a schema and it already has mappings and it already has all the types created for you so that it's easy to get started.
And then there's a tool that's called type sync which is a way to uh help you manage your your entities because it gets a little confusing with hyperraph because you as you get more and more data in your application and more relations it it's almost like uh you know a mind map right of all this stuff and so you need something really to help you manage that and maybe help you create the config files and stuff like that. And so once it's done here we'll we'll show it off. There we go. Um, so we're going to spin that up in a sec. But now we want to spin up Hypergraph.
So we need to go into the New Delhi directory and write npm rundev. And this is going to spin up our app. Now it's going to spin it up on port 3000. I'm going to show you the bug because I fixed found it earlier. What we need to do is actually load it up in cursor real quick and we need to change the port because Typesc runs on the same port and there's a conflict.
So this is a again it's a you know bootstrapped application that uses npm or pnpm or bun or whatever and so there's this like package json file and you'll see there's a dev file and this next npm rundev starts up the front end we're just going to like choose a different port so I'm going to do d-port 3001 so that it starts on 3001 then if I come over here it will start on 3001 on. Okay, so now the app is up and running and we'll show it in a sec. Actually, let's show it now. Okay, so localhost 2001. Do not disturb.
Okay, so this is hyperraph. So again, it's got this very basic front end and what you'll see on Matt automatically is you can go to explore public knowledge and this is actually data that is on the public network. Oh, that's weird. It's not letting me see it. Let me sign in first.
So, in order to um publish data in your application, you need to sign in. So, I got five minutes. Let's try to do this. Okay. So, we're going to sign in.
It's going to ask us for email. So, I'm going to do Kevin uh plust 101.com. [Music] Submit. Let me get the code real quick.
You're seeing my email right now, but that's all right. Okay. Um, what is it? 1 2 3 796. So, you'll email, you'll sign in with your email, and this basically is like privy underneath the hood.
It's going to create a um a wallet for you basically. And then it's going to sign you in, create the wallet, and then it's going to ask you to sign to prove that you own the the wallet because at this point you like have custody of it. So you're assigning the message saying that you own that wallet. Okay. So then now we have this geoconnect page which is where we manage our spaces.
So because we built an app, now we need to create a space for our public and our private knowledge. So, we're going to come in here and say, well, we want a uh example private. Choose private. Create it. And then we're going to do an example public public.
Make it a little bigger. And then create space. So, I'm creating two spaces. A private one that will utilize the sync server and a public one which will be deployed to the public network, the public knowledge graphs. That's it.
Then I just need to like select each one, make sure they're both selected, and hit authenticate back to the app. So what I've done at this point is I basically like redirecting my geo to give it my app rights to access to that data to publish. So now it should be good. There's that error by the way that also is a bug. It will be hopefully be gone.
Um, but now I should be able to see my spaces here. So you can see I have two spaces. I have a private and a public space. And then here I can also explore like stuff on the knowledge graph. This is actually not working.
It's broken. It will hopefully will be fixed. I'll try to get it fixed. But normally you would come here and see other stuff that's on the knowledge graph. These are crypto projects, but it's not working.
It was working earlier actually. Um but okay. So let's go to the private space first. So what do we see here? We have the ability to add a project to the sync server using this uh this framework.
I want to show what it looks like in code real quick so that you guys can see what that looks like. Uh, so I'm going to load it up real quick. I only have three minutes. So, okay. So, if I come to the app and I look inside the app and I look at a few things.
One is the schema file. So, this is where those types are, right? And so, you can see it creates a bunch of types for you out of the box. um that are just like starter ones. You can come in here and delete them.
You can recreate them. It's up to you. And then you have this mapping file which maps all the spaces for those types. Right? So this is all managed by um type sync.
So now we can start up type sync. So let's do that real quick. Uh so we're going to do npm run typesc. And this is going to spin up typesc on port 3000. And then we get a visual way to manage those types.
So if I want to create a new one, right? Like let's say I want to add a new one that's um an account right here. There's an account. It has the description, name, address, network. All I have to do is click plus here.
It will add it right down here, right? And then I can maybe it's already there actually. Let me let me add academic field. Let's try that. Oh my gosh.
It's not working. It should have actually brought up. Oh, there it goes. So, you'll see that this highlight sync. So, you can see I added academic fields and I need to sync it here.
And when I click that, it will automatically update my schema for me here. So, it will add it to the the file. So, type sync is just a way for you to like manage your your your types. Cool. I got one more minute.
Let's see if I can just send some data to the knowledge graph. So I have this example app. I have a project. I want to call it uh my project and it is a cool project, right? And I'm creating it.
So right now I'm creating the data. I'm publishing it to the sync server. And then here I'm publishing it to the public space. So now I basically have done that. And now if I go to my my public space, there it goes.
It was successful. I should see that data here. There it is. So just like that, easy. I added some data, put it on the sync server, and then published it to the knowledge graph with this very last step.
So that's pretty much hyperraph. Thank you guys. [Music]
Automatic transcript — names and jargon may be misspelled.