Transcription: OpenAgents Episode 078 - Installing Livewire

Source: https://twitter.com/OpenAgentsInc/status/1758497309694767509 Wiki source: https://raw.githubusercontent.com/wiki/OpenAgentsInc/openagents/Video-Series.md Media title: OpenAgents - Episode 078: Installing Livewire We learn about @LaravelLivewire and ... Upload date: 20240216 Transcription model: mlx-whisper/mlx-community/whisper-tiny Generated at: 2026-06-01T19:01:31Z

Machine-generated transcript. Review speaker labels and wording before using this as quote-grade source material.

[00:00] Christopher David: Alright, let's learn about live wire and install live wire and try to get this all

[00:06] Christopher David: converted over to live wire and as a nice stretch goal for this video, maybe we'll do it

[00:15] Christopher David: next video. I'd like to see a status update right now as I hit send first of all

[00:22] Christopher David: that's not even clearing out the text box, but like I showed off in the last video at the end

[00:27] Christopher David: when JGBT does like a long process where it's doing multiple things, they generate a

[00:32] Christopher David: individual, it could be a little status update that kind of changes. Parts finger thing, I'm

[00:37] Christopher David: consulting this. We have that going on in the background as we do this as it kind of goes through the

[00:43] Christopher David: different steps of the agent, extracting the URL, scraping the content, passing it to the

[00:48] Christopher David: LM and I want to see that progress on the screen and then let me kind of inspect inside it

[00:55] Christopher David: okay. So live wire. Generally when you install live wire or some of the quick start,

[01:06] Christopher David: it prompts you to do either inertia or live wire. There's the two main kind of supported sub frameworks

[01:13] Christopher David: of live wire. I'm going to use inertia at the beginning of this series because I thought I wanted

[01:17] Christopher David: to build an React and inertia sort of great glue between live wire and react. And live wire is sort

[01:24] Christopher David: of that except for the more server-centric, maybe a little bit closer to LeraVel and LeraVel

[01:32] Christopher David: blade. And like I said at the end of the last video, as I was kind of being a little frustrated,

[01:39] Christopher David: trying to get Alpine working with HTML, trying to like loop through, like having Alpine render a bunch

[01:50] Christopher David: of different components, but then like I couldn't put an HTML's form inside of it because

[01:54] Christopher David: something about the JavaScript was conflicting. And it's like I could, I could get the work if I were

[01:58] Christopher David: to like dive into the code and like bang enough. But live wire was designed to work with LeraVel

[02:06] Christopher David: and it was designed to work with Alpine and live wire and Alpine were written by the same dude

[02:11] Christopher David: Caleb. So it all works beautifully together. So we're going to give this a try. And I've also got

[02:17] Christopher David: a bunch of chatbot code written in live wire, so that makes that easy. So this is kind of like a way of

[02:24] Christopher David: of staying close to the sort of like HTML's pilling that I've had, like I love the HTML's way of doing

[02:30] Christopher David: things. And live wire is essentially that pattern, but working really well with LeraVel models and such.

[02:37] Christopher David: So this is I guess the old site and this is the new, okay, so live wire, the most productive way

[02:46] Christopher David: to build your next web app. Powerful dynamic front end, you eyes without leaving PPP, PPP, PPP,

[02:52] Christopher David: PPP, PPP agents. Oh my gosh, okay, PHP, start here, okay.

[03:00] Christopher David: Do do do do. Live wire's mission is to build on the efficiency and joy of building web apps with

[03:07] Christopher David: LeraVel and push it to the box. Any part of web development that could be made easier, we have

[03:11] Christopher David: tried to make a form table charge image of loads that is living.

[03:42] Christopher David: Make sure AppHine isn't already installed. For example, if you install the LeraVel

[03:47] Christopher David: breeze, blade with Alpine starter kit, you will need to remove Alpine. Okay, let's get to know

[03:51] Christopher David: because I had in recent videos installed this in a separate app and kind of copypaste it

[03:58] Christopher David: about to the Alpine stuff into the current app. So that I think we'll do is we'll create a fresh

[04:03] Christopher David: application using the live wire boiler plate for JetStream or what I want to just do this.

[04:34] Christopher David: Well, let's start with this quick start.

[04:43] Christopher David: So let's open a new branch, let's close this.

[04:55] Christopher David: All right, so we got a fresh branch called live wire.

[05:01] Christopher David: All right, first we will remove Alpine. It comes bundled with live wire. So

[05:31] Christopher David: let's do composer require live wire live wire.

[05:51] Christopher David: Okay, create a live wire component. Live wire provides a convenient artisan command to generate new

[05:58] Christopher David: components quickly. Run the following command to make a new counter component. So we'll just follow this.

[06:08] Christopher David: Component created class app live wire counter. Congratulations, you've created your first live

[06:15] Christopher David: work. And I think if we do that again, do pass it'll also generate as a test.

[06:27] Christopher David: Oh yeah.

[06:34] Christopher David: Well, we have the folder.

[06:36] Christopher David: Let me just try this counter to. Yeah, there we go. Test feature live wire counter to test.

[06:51] Christopher David: Nice. All right, Lee.

[07:06] Christopher David: This clean up myself here. Okay, so I think now let's call that a P2R to send make live wire

[07:29] Christopher David: counter. Any of the tests are too nice. Okay, let's push this up.

[07:41] Christopher David: Writing the class open app live wire counter.

[07:48] Christopher David: All right, live wire counter.

[07:53] Christopher David: I wonder why that red squiggles complaining. I still haven't fully set up my like in line error handling

[08:05] Christopher David: error messages. Okay, replace its contents with the following.

[08:12] Christopher David: So by default, it is renders a view called live wire.comter.

[08:16] Christopher David: And let's do that.

[08:23] Christopher David: All right, so we've got count.

[08:28] Christopher David: Incoming decrement render at live wire counter.

[08:33] Christopher David: Public count to class a public property named count in initial value of one.

[08:38] Christopher David: Incoming declares a public method named increment that increments the count property each time it's called.

[08:42] Christopher David: Public method like this can be triggered from the browser in a variety of ways, including when the user

[08:46] Christopher David: clicks a button. Render declares a render method that returns a blade view.

[08:51] Christopher David: This blade view will contain the HTML template for our component.

[08:55] Christopher David: Writing the view.

[08:58] Christopher David: Open counter blade.

[09:06] Christopher David: Of curiosity if I do that and then that's yeah.

[09:11] Christopher David: Okay.

[09:14] Christopher David: This code will display the value of the count property and two buttons that increment and

[09:18] Christopher David: decrement the count property respectively. Live our components must have a single root element.

[09:24] Christopher David: In order for live wire to work components must have just one single element as its root.

[09:30] Christopher David: Right, minute have it div.

[09:33] Christopher David: Okay.

[09:36] Christopher David: And register a route for the component of the routes slash web.

[09:49] Christopher David: Oops.

[09:58] Christopher David: App live wire counter.

[10:07] Christopher David: All right, let's try out.

[10:10] Christopher David: Invalid route action.

[10:18] Christopher David: Invalid route action.

[10:22] Christopher David: Invalid route action. What?

[10:28] Christopher David: Oh.

[10:30] Christopher David: Why is my way to have a capital letter here? Who did that? Copilot?

[10:38] Christopher David: Okay. Let's try and account it.

[10:43] Christopher David: Oh live wire page can put it layout view.

[10:45] Christopher David: Found the puns layouts app.

[10:50] Christopher David: Before you can visit counter in the browser we need an HTML layout for our component to render

[10:55] Christopher David: inside. By default live wire will automatically look for a layout file named resources use components

[11:00] Christopher David: layouts.app.blade.pashmim. You may create this file if it doesn't already exist by running the following command.

[11:15] Christopher David: Okay.

[11:32] Christopher David: Let's take a look at it.

[11:38] Christopher David: No.

[11:45] Christopher David: This.

[11:57] Christopher David: Oh, the counter component will be rendered in place of the slot variable in the template above.

[12:02] Christopher David: You may have noticed there is no JavaScript or CSS assets provided by live wire.

[12:06] Christopher David: That is because live wire 3 and above automatically injects any front end assets it needs.

[12:12] Christopher David: That's nice. Okay. Test it out with our component class and templates in place. Our component is ready to test.

[12:18] Christopher David: Visit slash counter in your browser and you should see a number displayed on the string.

[12:22] Christopher David: The screen with two buttons to increment and decrement the number.

[12:27] Christopher David: After clicking one of the buttons you will notice that the count updates in real time without page reloading.

[12:33] Christopher David: This is the magic of live wire. Dynamic front end applications written entirely in PHP.

[12:38] Christopher David: We've barely scratched the surface of what live wire is capable of.

[12:41] Christopher David: Keep reading the documentation to see everything live wire has on it.

[12:44] Christopher David: Okay. So, oh, there it is.

[12:53] Christopher David: Yep. It's slick.

[13:00] Christopher David: And let's take a look at the.

[13:02] Christopher David: Yeah, make some little post-request.

[13:16] Christopher David: And then if you do things where you just need kind of client side manipulation and then only occasionally passing to the server to like minimize

[13:24] Christopher David: server round trips that's where you use this in conjunction with Alpine.

[13:29] Christopher David: Okay. Great. So, a lot of words great. There's a bunch of good screencasts here. I was

[13:36] Christopher David: looking through some of this earlier. They got this by that how it works with Alpine and it works well with testing.

[13:42] Christopher David: They got this navigate thing that will like let you navigate around without doing full page reload.

[13:48] Christopher David: They always want this and.

[13:53] Christopher David: Cool. So, I'll just leave that there for this video and in the next video we will convert our

[13:58] Christopher David: chat components and such to live wire. See ya.