PGVector, Optimistic UX & OG Kit with Peter Suhm

So, um, without further ado, I have Mr. Peter. How are we doing, buddy? Good. How are you? Good. Good. So, you gave a talk yesterday. Um, so I I guess let's start like I like I've been starting all interviews. I like to have you introduce yourself. Yeah. So, my name is Peter Sum. I work at Tailwind Labs. uh gave a talk yesterday uh which was really fun about some AI stuff and uh yeah that's the short version. That's perfect. That's perfect. So um since you gave a talk yesterday, can you give us some kind of the cliff notes of the talk and then I'm going to tell people to go watch his talk because I think it's a it's a pretty awesome idea behind it all. Yeah. So the talk was called um unblocking your users with AI and um it's basically about how we can use AI in our Laravel applications to um make it a little bit easier for users to use their software and um sort of this sort of um thing I was talking about is um using new software that you haven't used before requires a lot of activation energy and it's just like really hard to get started with new kinds like new software you haven't used before especally for nontechnical people. And anyone who's ever run a software business knows that it's just so hard to get software to actually stick, right? So, but now with AI, the point is like we can maybe trade some AI tokens for a little bit of help there with like actually do some of the work that we ask our users to do. There's so much stuff in software where we have to ask the user like fill this thing out or like make this decision because the software is not smart enough to do it on its own. But maybe it is now with AI. So I had this framework that I call three points of paralysis. Uh where you basically different points where users get stuck. Uh so we had the blank slate which is just when they sign up. You know my example was Google forms because I used to run reform a form builder and uh the thing that always happens like people know they need to create a form but they don't even know what should be in that form like how how do you actually make a form for something and then on top of that you need to learn how to use the software itself which is also difficult um but now of course we can use AI to nudge them along but even little things like another example I gave at a different I have another section of the framework I called the T junk function which is we need to make a decision about something and we just lazily ask the user to do it right for example like what question type is this like is it a checkbox or radio it's like users have no idea you know but AI can easily pick that up um and then finally I got into some um vector database stuff which was really fun about using embeddings um to make things searchable uh based on the semantic meaning rather than just keywords uh so I showed how to use PG vector with Postgress and how to uh yeah make things a bit easier to find and yeah so got around a lot of stuff in there. So the PG vector I have not done anything with that yet. Um but that is only Postgress right my SQL does not have a anything comparable to what that is. Um for somebody like me that's never used it can you give me sort of a highle thing of what this PG vector is? Yeah I mean uh I don't even use Postquest myself. I only used it for this demo so I could use PG vector but I think a lot of people are actually moving to Postgress now because of PG vector because it's so convenient. I think there might be things popping up for my SQL as well. But basically the the way it works is you can call an embedding model like OpenAI has one called text embedding three small and it basically just like takes everything like it takes a text that you send to it and it converts it into these numerical vectors um specifically 1536 numbers in this case in an array. And each of these numbers, the way to think about it is like the model scored the text you gave it ba based on these 1536 dimensions where each dimension has some sort of meaning that we don't really get as humans but the model has decided like these are like different things that mean something and then it scores the text on all these different dimensions and then you can plot it into this vector database that has the same amount of dimensions 1536. I practice that number for my talk, you know. Um, and then when you search for stuff, things that are closely related based on what like sort of the semantic meaning of the thing are close to each other. So you can do something called similarity search. And Taylor demoed it as well in his uh demo yesterday, but basically you draw this. Basically, you just say, give me everything that's close to this thing I'm searching for. It's really fast because you don't need to look through the whole database. You just need to look specifically for the numbers that make sense for what you're looking for. Um, yeah. So that's what you can do with it. Sweet, sweet, sweet. That's awesome. Um, so I've got the schedule here because I I want to go look it back up. So his talk was yesterday. So it's on Laron EU website, YouTube. You can go and and check out yesterday's full stream, and you can go watch his talk there. And uh I think it'd be pretty sweet. I'm thinking eventually the EU team will slice those up into standalone videos, but as of right now, it's just there as one giant stream. Um, so to kind of go a little bit like you personally, so you work at Tailwind CSS. Um, why should people use Tailwind CSS? I mean, aren't they already [laughter] seem like not using T CSS? I feel like if they aren't using at this point, they have made an active decision about not using it and I respect that, you know. So, so were you there in the early days like before Tailwind CSS really like really took off or or um and I guess my question is like what was the catalyst there to make Tailwind and CSS just go from nothing to boom it's everywhere all the time. Yeah. I mean I wasn't I didn't work at the company until 3 or 4 years ago. Um but I knew Adam already so I was following sort of what happened with it. And [sighs] I think it's probably just the perfect storm. Like it is really clever. Like it it but it's there. I think there's different dynamics. Like there's just the tailwind when CSS itself um is like it's really prerogative in a sense like it it people get um people get disgusted when they see it the first time and it makes it gives but it it makes them react, right? So they want to like react to what they're seeing but then the crazy thing is once they try it they can't go back because they love it. So that like that dynamic in itself was like I think really strong but I think also till UI which was the paid sort of uh offering that came later like 3 years later where you could buy templates and um UI components and stuff that were pre-built with Tailwind also helped a ton. So I think it was just a few different things that just made it really popular. I think Laravel was a big part very early on because Laravel sort of the Laravel community adopted it because Adam was in the community. He created like refactoring to collections and all this test testing stuff. So yeah, we were definitely like all on board on Adam train. So yeah. Uh but yeah, go go ahead. Yeah. So I think I think that's like that's definitely been a big part of it. And then recently the it's still this has been a whole theme this year already, but it's still growing a lot. Um, it's actually growing like crazy right now because there's so much AI generated code right now and it's all using Tailwind. It's not necessarily great for business, but that's a whole different conversation, you know. Yeah. Yeah. At least at least it's getting used, right? Um, so Peter Peter also you have another app. Um, this one you do on your own and it automatically creates uh OG open graph images for your pages on your website. um which is really handy because if you've ever tried to generate uh OG images for every single page, it kind of sucks. So tell us about the product and the name. Yes, it's called OG kit and uh I think it's the I can't remember if the second or third time I built a SAS to solve open graph images because it's just such an annoying problem like when you have dynamic images. So, tried a few different approaches in the past, but then last summer I just it just occurred to me like, you know, I don't know if you know this feeling, but like I was sitting in the car, we're doing a road trip with my family and it just occurred to me like what if I did it this way and it's the kind of thing where like I wasn't sure if that was going to work until I was at a computer and I could try if it actually works. So, it's just like if this works, that's really clever. That's going to be really great, but I I'm not sure if it works or not. So basically the idea that I had is basically um what I wanted was I wanted the template for the open graph image. This is for dynamic open graph images right um when you have dynamic content and you want to create an OG image that matches that content for example like the text would match uh what's on that page. I wanted I didn't want to use a third party tool that sort of where I had to figure out some sort of template or editor or something. Ideally, I wanted it to just be code and I wanted it to be using tailwind of course and I wanted it to be sort of colllocated with the rest of the page. That was sort of how I was thinking about it. Then I was like what if you put the HTML for the open graph image on the page that needs the open graph image but don't render it. So like for example in HTML you can use a template tag and it doesn't render in the browser. you can just put whatever you want in there and you have access to it via JavaScript but you don't do any like the browser doesn't do anything with it and then what if you just basically as the open graph image say well I'm using ogkit so I'm doing something like ogkitdev/my api key whatever and then I have a URL parameter that just points back to the same page that I'm already on because then ogidit knows to go to that page and then what I do behind the scenes is I strip everything from the page page just front end, right? Like I don't actually do that on the U side. Um, but in the browser, I just strip everything from the page. I take the template tag and render that instead. And the nice thing about that is it'll use all the existing CSS and everything that's already on the side. So anything that already works on your website will work in the open graph image because it's just rendered in on exactly the same page by the Chrome browser. Right? I'm using a Chrome browser for this. And then I take a screenshot and that's open graph image and it has like the right size and it's cached with Cloudflare and everything. So basically anything you can do already on your website. Yeah. And then the cool thing about it is uh the developer experience is works the same way too. So if you add a flag to the URL, I just do the same thing with like as I have like a CDN script that you can use locally and it just does exactly the same thing. So while you're building your open graph image, you can just preview it straight in the browser and it'll look exactly the same way as when it's generated. So when I real I I sent that to Adam and he was like damn that's a really clever idea and he never says that. So you know when he says that you're like okay I'm on to something so now I have to build this. Yeah. So that's where it's at now basically. Sweet. So this is sort of like a technical question behind that. So you're rendering the template um and you're using Tailwind CSS. You can use Tailwind CSS inside of that. um when you like run like in npm run build or whatever on your uh I'm assuming the like the run script has no problem like parsing whatever like is in that template tag. It's even though it's hidden like that's unrelated to how tailwind and CSS will parse. So anything you add there you'll just it'll just automatically be run and and be good to go. Awesome. Awesome. Um can you use images inside too? So like you can like embed an image inside the image of the OG thing. I mean anything you can do in HTML you can do there in the template tag. The only thing is that if you make something move it won't yeah that won't work. But anything you can do in HTML you can do there. So yeah of course like if you have an image or like if it's like a profile page or like I always say like like a real estate website you know you want to show the house you want to show maybe the price or the address or the postcode or face. Yeah. Something like that. Right. And you just do that in HTML. you can preview it and then when you push it live it'll just the first time you hit that URL it's going to take a little bit longer because it's generating the image but then going forward it's going to be super fast because it's just behind Cloudflare. Oh, that's awesome. Yeah. Um that's sweet. Uh so I know you can't do animated stuff right now. Do I don't think that's ever going to be possible. Is it the Yeah, I don't know. I'm trying to think through all the all the the systems there. Um but uh and then the other app you said you had another app called Reform. Is that still is it still going or not? I sold it like through two or three years ago. So it's still going. I think I um but yeah, I'm not following it as closely anymore, but yeah, it's still out there. Nice. Um all right. Well, so Peter, I want to say thank you for coming and and joining us here on the stream. Um again, go watch his talk from yesterday. Go check out OG Kit. [music] Um Tailwind CSS. Go uh yeah, go use it. I'm trying to think of like what you tell people to do. you should already be using it. But yeah, just thank you for coming over and just tell people, you know, how to find you and all all the good things. Yeah, I mean, uh, I'm most active on Twitter, X, whatever we call it now. And just Peter Sum suM is my last name. Uh, and then OGKIT is ogid.dev. And yeah, that's where you can find me. Peter, pleasure, man. Thank you for coming over. [music]