Vibe-Coded Plug-Ins

Speaker 0: This week, I was working on a new feature for, for our application. So we have a a product that's Sai, it's an autonomous agent for for managers. So we have a dashboard that you can see, meetings Coding Jun, follow ups, contacts. 1 of the things we recently added was the ability to, Actually, have a Vibe-Coded Plug-Ins. So you can go in here and AI, you know, AI, show me all of the blockers accomplished and remaining for the Phone project launch. Speaker 0: AI I think there's seed data that should, show some information here. So the way this is working is, there's a AI end component, obviously, that, Date in a prompt on the back end. Our, our our our memory Jun, it's got a slightly has access to the same tools that you give the, assistant. His name's Ariso. So you can Select City. Speaker 0: This is a Demonstrates, so you can connect Tools Google and and and Slack Jun, all the same reporting information that the autonomous agent has. So it has an endpoint that takes a JSON schema. So when when AI Live when I just put the prompt in there, it build a Vue component run also, AI a JSON Schema that our props Robb that component. And then those props go Tools endpoint that has an element behind that Jun the structured output and does a few rounds of tool calls, to to separating the the output. So if there's So do you Speaker 1: sorry to interrupt. Speaker 0: Yeah. Speaker 1: So do you have a DSL Speaker 0: that you're taking that Speaker 1: Structured output Jun then it has meaning in your system? Speaker 0: Well, it has access so the we got custom prompt. Yeah. Custom prompt in here. Let me see. That's gonna be I should have a link to it in here. Speaker 1: Go to Jun. Speaker 0: We can we can dive into that. Speaker 1: Jun understand lead you put that in, what was Pun? Speaker 0: Well, I can I can start here and then we can dive into the code more? But, like, there's Sai we're we're sending a post request to to to the endpoint that's called dynamic tiles then, that is that might be the wrong sequence diagram Actually. Which no. It's in here somewhere. Let me No. Speaker 0: It's There we go. For some Presenter got the AI name Route of 10, but I think it's linked I think it's Sai think this is the the source Jun here. Speaker 1: So you're you're turning it into whatever dynamic file Center. Right? Speaker 0: Yeah. So so the contract that gets created is it's a JSON schema, definition that's Street in the database. So AI could store the database, along with the and that's basically so you put the prompt in here in the, the front end. So I'm gonna give it AI you guys have any requests? I mean, there's some information AI can just Yeah. Speaker 0: Like, you know, list all of the meetings I have coming up, this week. That information is actually below here, but, you know, we could okay. Enter that in here. So this is going to be sent to a an element on the back end, and it's gonna respond with, view code and a and a JSON schema. And then it's gonna go through a few Actions, so there's it's it's not showing author right now, but it there's an example of what of what it would show for some upcoming deadlines. Speaker 0: And it's going to use the browser sandbox to test with. So it's gonna it's gonna make the request to fulfill that, like, JSON Schema Control. So it's gonna try to basically like, if it's a list of follow ups or to do items, it's it's gonna generate that, run a sample call, and then it's going to send that to the front Render. And it'll basically use the browser as a sandbox and it's tapping City in an AI. So there it'll pass that into the the component, and it's it's running through a loop to to repair the component until it doesn't Agent it have any errors when it renders a Vue component. Speaker 0: So if it so if the view component, like, throws an error, then it it'll generate that that again. Does that make sense? Did I answer the question? AI Yeah. Okay. Speaker 0: But I I I think that right Cell, AI, a lot of what it's doing I mean, these are are are helpful. And there's also you know, you can go back to, like, here's another example Vue or it'll give you, you know, summary and a and AI and a and a ticket kinda account at the top here. Speaker 1: So the idea would be, like, you can ask the showing, be like, okay. My team has all this stuff this week. What are the expected outcomes? Systematically meetings are, like, successful this week or Searching. Assuming that they Yeah. Speaker 1: Robb filled out the meetings and things like that, you could effectively say, like, send your boss or your manager. Do you know this is everything we expect to do during the week? What's Vue Speaker 0: Yeah. Yeah. If I if I like, I don't have the seed data, but, yeah, you could say LiteRT out, all the decisions that I need to make based on my meeting that's this week. And I haven't populated this dev database with enough seed information Robb for those. There's meeting notes, but, like, it's, there's not a lot of of information in there. Speaker 0: But what it's doing right now is is is it's, like I said, generating that contract, the JSON schema Control, and also separating a Vue component. And it's not gonna show it to you until it's, basically proven to itself that it it it renders without errors. It's City simple check. That was probably the the the main hurdle was was just cloud's pretty good at writing few components, but it has to do it a few times to be reliable. Yeah. Speaker 0: What's your question? Speaker 2: So I, when I'm using writing these visualizations and stuff like that, a tool that I typically use a lot is ES Live secure, I have a particular AI, and it's visual, and I can code, how I'd like that to look, with ES ESLink. Are you doing any, like, linting or anything after the selection to make sure it conforms to a specific AI? Speaker 0: No. There's there's no linting. It's just it's just making sure that it renders not errors. Speaker 2: Would you be interested in that or no? Speaker 0: Absolutely. Yeah. There there's to do this well, there is, like, a you know, like, you could use dependency injection and module federation and, like, micro contention. You could, like, build like, there's a lot of, like, Date like, I think you're right. That's the direction you should go in with this. Speaker 0: I have not even looked at a single few components. I AI the code that's generated because it gets actually stored on it on a Postgres database in a in a cell. I I I think I maybe looked at the code for 1 of those when I was 1st iterating, but in most of the file. Tools like this 1 was challenging. I wonder if it's it doesn't have data for City, so that might be, talk custom issues. Speaker 1: You're generating a throwaway component. Chat will generate a whole new component? Speaker 0: It persists. So it it's lead, so there's nothing in the notes here. Speaker 1: Yes. You're putting in a Robb, and you can add the prompt which edits the components. Speaker 0: Lead. Yes. This is AI the the the example Jun here is a bit more Taylor, but, you know, if if I reload, it's gonna show me the same thing. So Speaker 1: Are all the prompts are all the dynamic, or they're all being generated as or do you have, like, 10 templates of different types of components that you Yeah. AI-generated 1 of these 5 different types of components. Speaker 0: That is the direction I think we'll move towards is, like, these components on here will also be prompts. You could click on them Jun you could flip it around and see kind of the the source behind the the components, and you could rearrange them too. But I think there's a there's a really interesting potential for these hybrid hybrid SaaS that's, like, half AI Coding with dependency injection run then, like, you know, like, you have a lot of flexibility, but yet there's still, like, you know, like, the non Engineer are not routing, like, out running the show. Right? Like, there's been some guardrails set up with ESLint and other kinds of, of tools. Speaker 0: Yeah. If if if you've done Cell of dependency injection, I think that's where I wanna move more towards is, like, having it situated within a more robust, like, dependency injection kind of framework. Because right now Speaker 1: pin this and that would do about create another component. Can it Yeah. Speaker 0: Yeah. Speaker 1: That workflow. Speaker 0: Sai all of these would be flippable and and customizable Robb prompts. Yeah. Okay. Code you want to share? Well, yeah. Speaker 0: I I I mean, we can What is the QR code? The QR code is to submit to speak at the next next 1. But I'll show yeah. We can walk through the, so I have the I mean, it's basically what I what we walk through. So it goes through, you know, a Street of repair steps. Speaker 0: AI think it's Mike it'll go through a total of 6 6 rounds, but it'll take 1 generation Agent it'll try to iterate on the 1 generation 3 AI. If that fails, it it tries to generate run scratch again. And so Real AI 2 from scratch iterations. What do you what does Speaker 2: he consider to fail? Like, how are your criteria? Like, just render? Speaker 0: Or That right now, that it yeah. If it's if if the components an error. So we're yeah. This is like, right now, that's that's the criteria. But and event-json, we would there's Owner criteria that we we we could add, like, there's AI it's not interactive right now, so, like, there's no Date, for this 1st attempt. Speaker 0: It's just static props. So if you try to be Mike, hey, make it so I can check off these items, it's not gonna do that yet. But Cell once we do that, we'll have more robust testing. I'll take 1 more question. Yeah. Speaker 2: So and where is this rendering? Is this, like, Vue like are you using Tecstone or something? AI, how do you know that this is rendered? Are you spinning up a whole browser? Speaker 0: It's Speaker 2: so Speaker 0: it type. It, it happens in AI inside of an iframe. So it happens in so the browser is the the sandbox for, like, for for testing it. And then that browser just has no origin Android, like that's why that's we also don't want the like, someone to, like, Make a component that destroys all other components in the case. Yeah. Speaker 0: Yeah. Yeah. I mean, it's unlikely to 2026, like, cross site scripting kind of, like, vulnerability secure it's it's a talk on selection. But, yeah, it's it's AI right now. So so if it crashes, it's it's trapped inside an iframe. Speaker 1: Render really fun. Speaker 0: Yeah. So, okay. I'll answer lessons afterwards, but thank you. And then next up, we have we have Mike who's gonna talk about the Silent Notetaker, which should be Real cool.