Hi everyone, I'd like to introduce the next speaker. Hi everybody. We're gonna be talking about uh tiles and some Dazzle stuff. Um for the folks listening on the stream, Haley is unable to uh present, so we're gonna do this instead. Um I I got I'm mic'd up. Um so hi everyone, um welcome to the impromptu, slightly impromptu tiles talk. Um I see people taking pictures. Hi everybody, you know, let's jump right in. The idea is that I'm gonna give like a pretty short intro. Um I seeing the faces here, I think most of you already know what this is, but like you know, at least I'm gonna run through it pretty quickly, and then Ted and Nick or Ted Ornick or I don't know, um, is going to like uh are going to show some uh some really cool demos of stuff they've been building with tiles.
So what are tiles? Well, they're really like you know it they they're confusing because they're so simple. It's you know what if you could have like a littly mini web app as like so many have tried before that could be embedded in anything safely because it can't touch the network. That's that's essentially the whole story. And the idea is that you remove a lot of power because you remove network, and that's significant for people who do you know network things. Um this reduction in power makes it possible to use this in many more contexts that are potentially security or privacy sensitive, such as social media.
Um so that is pretty cool, especially since the web is pretty powerful. So you can build like all kinds of stuff with with these. These are you know examples of like widgets of all kinds that could easily be tiles. And the thing is like what's new about this, like many people have tried the web app thing before, and well, we haven't heard back from them in 20 years. Um I remember like if you're if you if you're if you're really old like me, you'll remember the XML packaging um initiative that was trying to put like XHTML and SVG inside some kind of thing that you could run as an app and that you know, all that.
Um there have been every two to three years the W3C has some kind of workshop about web apps and like really maybe guys we could be solving this at some point perhaps. Um there's progress every time, but it's it it's pretty slow. Um and of course, like you know, you could always use iframes if you don't mind like exfiltrating uh a ton of information. So, you know, this is something that that that's been tried many times. The things that the thing that hasn't been properly tried is just like cutting off the network. And that's where things can can I think get quite interesting.
And so the anatomy of a tile is basically it's a small secluded web runtime. Um it can load things that are listed in its manifest. One of the values of tiles is that they don't have to be in a zip file. Like a lot of the time, like a lot of these things like widgets, I worked on W3C widgets and all that, they had to be in a zip, which means that you can only start showing something after you've loaded the whole zip because you don't know where the index is, you don't know if you have all the resources you need, yada yada.
If you have a video, your zip might be gigabytes big. It's all it's all problematic. So that some people have tried to do stuff around that, but it's usually not great. In this case, you know, you you load the manifest over AT if if they are stored on AT, or you could load it over HTTP. It's going to be pretty small. And then dynamically setting up a service worker or something like that, you see what you need to load, and if you don't need to load everything, maybe you're not watching the video that's included in that thing.
That's perfectly fine. You could have like an entire archive of many things in a tile without ever having to worry about it. Um if we look at like basically, you know, this is a PDSLS of a tile that was published on on atproto. Uh most of the fields are pretty straightforward. If you look if you've seen web app manifest straight out of web mamp app manifest, there's like an icon, there's a name, there's a description. Um one thing that's that's specific to tiles and that really helps solve this idea of like content addressable apps that you can just like move around and publish in different contexts in a way that's completely reusable, is that it has this resources thing that maps proper web path.
So like slash is mapped to this like blob of HTML and like slash image dot whatever is mapped to like a CID of this. And these things get to have proper um uh HTTP headers. In a lot of previous iterations of content addressed web things, the headers were not included, so you're getting the content, but without the HTTP headers, uh you don't have the proper context, they might interpret differently in different in different contexts, and then you're like in a crazy world. And so like really that's that's about it. One of the things that's great is that this example shows them stored on AT, but you could store this anywhere.
It really doesn't matter because everything's content addressed throughout the stack, so you can put them in a car file, you can put them over HTTP, you can load them with Razzle, so you can razzle Dazzle. All of that's pretty cool. And so essentially, you know, that that's it that's it. You know, it's just like it's this basically this small contained thing, and what makes it interesting is when you start integrating it in context and giving it extra power. So the idea is that the embedding context can say, like, oh hey, this tile actually, I know what's safe for it.
I can give it access to this specific thing that I've controlled, and you're gonna see a number of demos of of precisely that pattern in action, but that's it. Like because you've removed the power, then you can decide what you give to it. And so I'm just gonna go through a list of like, and these are most of these are fakes except for a couple ones, um, of like how to put them in different contexts. Like very simply, you could have a game in your social media stream, just like in your feed, you're scrolling by and are like, oh yeah, look, Robin posted a game, and like this is me playing like you know, like Minesweeper in the middle of the thing, it can be embedded, it's completely safe, and now you know, like I hit the bookmark button and I've got a game installed.
Because they can just like go find it, and then you could have like some local curation of stuff. And of course, because it's loading off a PDS, you can pay wallet. So like that there's a business model even potentially behind that. Um, you can also do long form. I can give you the slides afterwards, don't have to take pictures. Um you can do long form. So this is one of uh this is a blog post I wrote uh a while ago, and so you could imagine that in a in a leaflet kind of interface, instead of like you know, create using the leaflet editor, you could embed your own long form source that has your own style and your own you know pictures, fonts, etc., just like as part of the normal of the normal leaflet um publication um format.
And you click that and it opens and and you just get the the blog posts. Um another thing that's interesting is you can have something called wishes. So if any if any of you are familiar with like Android intents or web intents or stuff like that, it's sort of a declarative way of saying like, hey, I'm a piece of functionality, I'm a tile, and I need someone to edit an image for me. But I don't I don't want to call a specific program, and I definitely don't want to do the thing where you have to save the file to a file system and then the user has to like figure out what app they want to use and then give it back to me and all that dance that's like fucking insane.
And so what you say is that is you say, hey, I wish to edit, so there's always a verb, this type of data, and here's the data, and it will find for you a tile that knows how to carry out that wish. And of course, maybe you have it installed, as we said earlier, like bookmarking is installing, so that that's sufficient, but maybe it's on the network. If it was published to AT, you can know that it's able to, you can find things that are able to handle specific requests. So you can use the AT data itself.
And this is just an example of like you you you you clicked edit here and it loaded the image inside a filter editor. You know, why not? And then when you hit save, it sends it back. And that's that it's really simple, but you can integrate a lot of things in this way with loose coupling. This is an example of a tile in Ruby. Um the idea, and and I really love this pattern. I would love to like once you when you get to that part of like building stuff, I would love to work on that.
The idea here is that you can give tiles, and Delta Chat does that. Um, you can give them a way to just write to a data channel of the channel, and so it shares data, but only with other people who are on the channel. So you can install a tile to a chat. And what's cool about that, yeah, I know it kind of breaks the brain, but like if you think if you think about it, like a chat is a is a security parameter, right? There are people who are inside the chat and can read stuff, and people who are on the outside who can't.
And there's no reason that a chat would like only send text messages. Actually, they don't under the hood, they always send structured something, right? And so you send a different structured something that's just data that like, and so you you know, a user installs a tile to the chat room, every everyone in the chat room gets to see that tile, and then the thing is those things can post messages that are basically CRDT, that's sync state across every instance of the tile that people in the room see. And so you could do something instead of like having all these fucking doodle things that are always ugly and like you lose the link and you never know which one, you just like in your chat, you just like drop a time picker thing where you've like configured some options, and anyone in the chat can answer and it syncs the the options for for everyone.
And you could do that with a document. You could have like a shared markdown editor, like let's edit a doc together in the chat. So that's you know another thing. Blento, you know, just just like this is like almost like so obvious that the killer. Oh Matt, sorry, sorry. I the thing is I don't even know what these guys are gonna say, so sorry about that. Let me go faster. That way. This this thing, this is like what if we could render arbitrary content by loading a tile that has a render wish. And so imagine that you have like whatever, this is like a karaoke lexicon and inside of it it has a status sphere lexicon, and you just like want the arbitrarily render things, you could load a tile that knows how to render this to like so that you can do nested rendering of arbitrary uh embedded lexica.
And this one is actually my favorite. It looks like ass, like you know, most of the things I designed, but that's fine. Um, but like the idea here, and actually I'm gonna use the real thing. If I can find where the cursor goes, yes. So the idea here is that they don't have to be on atproto, right? They can be inside a car file. So you can have a local file that contains a tile that you can run in something that's like a PDF viewer. And so you could kill PDF, because like you know, we should kill PDF.
Um but like we don't just kill PDF by reproducing PDF. This is like, you know, this is basically a this is a presentation that I gave about tiles that was uh in a tile. Um and so you know you can you can do this, of course. But the other thing that you can do is that you can have self-editing documents. Because you can make it so that the tile can write to a data segment in its own car container, and therefore, you know, this is a rich text thing, and I can say like, hi folks, whatever, and you see the little safe things here.
If I close this and I email it to Ricardo, and he opens it in this, and he doesn't have a rich text editor, he just has the PDF replacement thing, then he can open it and edit it. And you can you can do this with you know arbitrary editors. So, like for instance, here there's MS Paint, you know, and you do this and whatever, and then you have an image editor that you know I can send it over to Ted and he can edit the image and you know, yada yada yada. Um so with that um we have websites, we have a fake demo shit browser on it.
There's a it's a dazzle spec because everything's dazzle these days, that's how you dazzle people. And there's some some code that you can check out on the wonderful NPMX. And you can come to our meetings, we share stuff. Fuck yeah, tiles. And with this, everybody hear me. All right, awesome. Nobody can see what is on my screen. So let me just fix that. Um, I'm giving away the thing. Uh we're gonna go fast. Um this also is extremely unstyled because we've been doing this around organizing a conference. So this is more of a tech demo, um, especially since uh Robin has given you the dream uh in part.
Um and uh uh shown a lot of like what we thought was really kind of cool about web tiles. Um so I'm gonna run through some of the stuff quickly and just kind of give you a sense of where um once we saw web tiles, what we immediately thought of, right? Because the entire entire uh pitch that Robin's giving is around having these self-contained little tiles that you know that you can kind of pass around safely, which I think is really an exciting idea. And the notion of these things as pieces of contextless um uh content addressed uh signed data is really useful, especially when you start thinking, well, okay, what if we reintroduced a little bit of context?
What context would you want to introduce? And so we said, well, why not um think about ways in which you could actually gain access to that proto data directly through this? So what we've built is a platform for being able to create and um host uh web tiles, and these things are you know as simple as something really goofy, like um an HTML page and some JavaScript. Um and they can uh be dragged and dropped, and there's a reason why I'm going with this super simple example here first, because I want to be able to show that.
Um these are things where if you want to handcraft something and just upload it and make something tiny, quick. Let's see, hello world clock. You absolutely can. You can self-host or you can upload these things, host them, um, share them with other people. Um these are uh embeddable. And um uh our whole goal is to be able to build a runtime that can provide um uh a way to uh load web tiles um and connect with your uh app proto count simply and easily. Um I'll switch between desktops here. So this includes things like being able to just take an at your URI from say a desktop app and also just load the tile.
Um we've been talking about uh all the different places in which we could uh stick and embed these, um, whether these are within web apps, as uh Robin was pointing out, social feeds, um embed inside of uh leaflet posts or other sorts of data structures where you can uh both be confident of the safety and security of the um app that you're embedding and still give users access to all of their data. Um there though, this gets like a lot more exciting. We can uh do quite a lot of things with uh arbitrary access to data, um, including crazy things like why don't we build um embeddable media players?
Um this is data that is up on uh uh the protocol and so part of the thing that we built is uh basically a RAS and CDM. As tiles are as tiles are created and uh propagate through the network. We look at the CIDs because CIDs are are identifiers for both records and for blobs. Um we can we can serve them geographically. We know that they are generally safe. When you label a C ID or an AT URI, you know that it's not gonna change, which means that you have a certain guarantee certain guarantee of trust in the future.
And we can return that in chunked streaming forms in whatever whatever mechanisms are necessary for you know streaming audio, video, uh, et cetera. Um so uh we can also define the security boundary here pretty uh easily and simply to align with the affordances of the protocol, right? atproto has a capability model that allows you to define uh premium article. Yeah, so for example and you can. Yep, with you cans and other sorts of things. So this allows us to do some uh fun other things that uh um build on the work that we've been talking about for the past year.
Um for example, being able to do gated content. Um you could embed an article in say a social post um that uh goes and checks whether or not you have proof of purchase or subscription or membership to um a particular service and that actually will immediately unlock for you, or if you don't, right, you have a call to action uh there directly and uh and in this context, right, like maybe it's a call to action to uh pay for the the article um and then you uh issue you know payment request here, say yes, I'd like to pay for this, and then it actually goes, makes an XRPC call, um, proves that you've got the signature, and then loads the rest of the content directly uh uh for that record.
Over the past several months we've you know, I've I've published quite a bit on uh how and why at protofans works the way it works, attestations, and the whole concept that you can have proof of payment, not web payments, but proof of payment on record in structured uh structured ways, which means that uh if you are a content provider, like with the better stack tile that we produced, uh your payment uh you your your member base of people who have paid for the one-offs or the subscriptions, they follow you if you want to change payment providers or not.
If you want to change your PDS or they change their PDS or any combinations of identity and data mobility, which is central to the Ad Proto ethos, like this this allows and enables that. Yep. And uh this isn't just about connections with your PDS, either um you can build and launch other services that um can talk through XRPC channels um and uh that can extend everything from like um little sessions and being able to do uh real-time-ish um uh experiences like um why don't you give me a high five here. Yeah, yeah, here you go. High fives.
Oh, I gotta send the yeah, send the permission. Um and so you know this provides the opportunity to do things like actually doing games directly in feeds and other sorts of uh mini multiplayer experiences. What's really important to note that this isn't magical, this tile is entirely sandboxed. The tile itself is not making external API calls. It's not it's not breaking the boundary, right, that we set from our security profile. What it's doing is it's communicating with the runtime. Whether that runtime is the browser making XRPC proto XRPC requests that are authenticated and have the context of the user, allowing for a stateless tile that is deterministic in nature thanks to content addressable storage.
But we have this global context of your PDS and the XRPC calls that you can invoke. So we can provide some structure around making you know queries and procedures and web socket connections asynchronously to offer this experience. Yep. And so we have um a bunch of experimental runners which we have been tinkering with, like for example this Rust uh desktop-based one. So now we have a uh Whoop. Oh, okay. Don't have the permission for it. All right, welcome to it. It's a little strict sometimes. There's a query string parameter to allow for create and destruct methods.
So we'll go back to using the web web version of this. Um let's see, hello. Why is it called Glacier. Uh these are all um individual aircraft. Individual aircraft. Yeah. Hanger uh software is Han, Jerichenus. Yeah.
And so right, like these are little full apps that can you can uh post and do anything you want with. So um so um the the two things, I mean, and Robin's kind of given the game away here, but one of the things that we're no no, it's perfect. Like that was great. Um being able to talk about where we want to put all of these tiles and how can we share these. Um my thesis around this is having good structures allow for people to be able to experiment more. And so you know I started out with like a little goofy um app that you can like hand code if you want, but also like this is a great place to safely be able to experiment with apps, plug clawed in, say go for it.
Um you can read lexicons out of the um lexicon garden MCP and give people capabilities to tinker with data, have front-end um capabilities on top of the app proto stack, and basically be able to um uh grow the types of things and the the the access to other communities for building new apps. To check the little agentic AI checkbox that's now required everywhere. Yeah, the difference between an MCP application and a web tile is the runtime. So we right now, there's this service is actually an MCP. So if you authenticate in and say load the hello world tile or load the create the create post tile, it will use the same structure, the same the exact same runtime structure to make XR authenticated XRPC calls from within your agent to do things like create posts, make XRPC calls, et cetera.
And that means that we have broad broad distribution. Anyone can say, hey, I want to have an allow list of tiles that are going into Ruby, or hey, I want to have a standalone website that displays some of this content and and uh has a runner that supports this payment method specific to this content provider, right? Uh and that same tile can then work on a mobile device. It can work on a desktop app. You can have a local car file with a dual car you know, basically data payload that you can give to someone else to load that local data.
It's truly distributed content, and we think that's pretty cool. Let's bring back mixtapes. Yes. Um, we've got like a minute. Any questions?
Okay, this is awesome, you guys. Like I wanted to do this 15 years ago. Uh so uh um the um uh basically what I wanted to do is actually put charts, interactive charts or maps in a feed. Okay, okay. Um my question is uh with regards to security. Uh so you I'm uh I'm I'm guessing you can run a JavaScript here within right? So how does it cross boundaries with like if there's content security policy, how does that work? Oh yeah. So basically uh when the tile runner uh gets a manifest, it takes that content and because it's a CID that's recognized and listed in the blob, the uh runtime is ferrying it down and then it's loaded.
And that's the same way any assets are are referenced as well. So like the image gallery one, could you pop that up? Yep. Um image gallery, whether it's JavaScript images, media, et cetera, the the runtime is making these calls to determine what can be fed into the the sandbox. The other thing about this is um each one of these tiles um uh the way that we host them is actually giving them each a um their own subdomain uh based on the CID. So um they're actually sandbox based on origin. Like a synthetic origin. Yeah. Yes, a synthetic origin.
Yeah. Non-deterministic to make it more difficult to you know avoid two people somehow getting the rant the same DNS and having the chance that there's contamination. Are you using wishes in your message channel here or a different type of messaging channel? Because tiles basically you can use it. So wishes, and please do correct me if I'm wrong. Your wishes represent the intention of a user to take an action that may involve other tiles. This is uh this is adjacent to it, and it's specifically XRPC calls within the the Ad proto ecosystem. So it's it's not uh conflicting and could support it.
We could we could look at what layering of tiles or navigation or any or the wishes concepts look like. Uh yeah.
It's it the idea is really task-based computing. So you don't you want your your your thing needs to carry out a task, it doesn't know who else can answer that task. And then that means you have like open-ended composition uh instead of having apps because apps suck. Um, and one small thing I wanted to add, I didn't have time to add it to my presentation. Some person I never met or uh interacted with uh the other day on on Bluesky said, Oh, this seems interesting, I'll integrate it, and then the following day they ship to a servo-based browser that supports tile.
So, you know, it's coming. That's awesome. For clarification, I was asking so that people would know you don't have to use wishes. You can use all kinds of things. Yes. Uh is hangar open source. Uh parts of it are yeah. Uh we intend on open sourcing parts of it. Um, but uh there's a bunch of different components that we're uh Yeah, we we think that there's um potential value to the community ecosystem to uh open source both the runtime and the CDN. Uh but then make some of the XRPC services specific to payment processing or other things, you know, the secret sauce of how this thing can like sustain itself.
Okay. One last question, I think we gotta wrap up. Yeah, yeah. Um forgive my ignorance. This is the first time I've ever heard of web tiles. Is this a W3C thing? Is this supported in all browsers or is this a WASM thing? What is the runtime, I guess. Uh so I I mean the it this is not a W3C thing, but like the runtime is like a web runtime. So it's it it yeah, it works in the browser. Um it's not a the container itself is not a W3C standard, it's a Dazzle standard. So I mean if you want to call Dazzle standards, but like it's it's along the same suite of stuff that powers the rest of ATP.
Yeah. No, this is this works in the browser today. Yeah, and and uh the the key things here are web tiles are standard. Um the runtime that we're talking about is a thing that loads web tiles and has the message channel for being able to connect to your atproto account um or uh yeah I I think there's a lot of room to standardize and create more formality around what runtimes do and don't support. Um and the Mazel document is is actually it's in it it's it's simple and plain complementary, right? It it does exactly what you'd expect by defining what resources we're using CIDs, uh content addressable storage references or links uh to to tell you what it needs to load and how, and then it's up to the runtime to implement it.
So it think of it as like the PDS is a collection of XRPC services. It's not really a formal spec, but you do have a general shape of what it looks like. It's very similar. And and also like generally, I mean the way we do specs in Dazzle, we do small specs that do one thing, do it well, and that way you implement what you need to implement for that. So like the tile spec is like tiny and it's just tiles, but like the wishes spec is going to be separate from that and like it uh it's only wishes.
You could do like task-based computing in other contexts. Um but also um uh you know various environments. So for instance, I demoed like I demoed, like I showed like Rumi integration. You could have a a chat context integration, and like if Rumi integrates it and say I'm making this up matrix integrates it, you could use the same tiles in both. So we like 10 minutes, 10 minutes into the one minute. Yeah, we're we're now in the bonus round. Um it this is the coffee break, so uh please be free should you want to be um otherwise if you would like to talk about tiles more, let's let's go.