As you said, as Reginald said, yeah, I've been to a couple of these before.
I didn't come to last month's meeting and that's because I was away on vacation and that kind of leads me into why I'm here tonight and how I'm here tonight because I was on vacation.
I went away to Aix-en-Provence in south of France with my wife And we found that we were in the town of Aix-en-Provence, and we were kind of wondering what to do once we'd landed there.
And we were saying, we want to see some things, but we don't want to go on a tour. We don't want to do anything too heavy. But we want some guidance on where to go around, see some good things.
in the town. And so my wife Googled up a few things. She spent a little bit of time looking some things up. And then she ended up finding a tour or some places to go to, which we started to do, which was quite interesting.
But there's lots of places that some were good, some were really not our kind of thing. And there's just heaps of stuff to read on the phone. It was just too tiring to read all that stuff on the phone.
So I said, this should be audio. This should be read out. And it should be much easier to consume.
And it should be personalized. And so walking around the town there in Aix-en-Provence, the idea of making a personalized tour guide came to life.
And he's called Guido. He's your personal tour guide powered by AI who takes you on your own tour built for you for the things that you like and you're interested in. And we'll take you around and comment you and give you the speech as you go around.
So that was the idea when we were on vacation last, well, four weeks ago, three weeks ago.
I came back and I was fooling around, doing some prompts, searching up some stuff, and I stumbled on the Google AI Studio and started to use it and found that I'd started to do vibe coding without even really realizing it. It's something that I had in mind that I wanted to do. but I hadn't crossed the barrier to getting into it and here this got me over the barrier and within one afternoon I'd built the very first prototype of the thing working and within two days the next one and now three weeks later I've built a lot of other stuff on and a lot of stuff as well on a back end to be a lot more robust and solid
And frankly, I'm astounded at how good it's been and how easy it is to use and how far you can get, how you can go from inspiration to application in such a short space of time.
So I thought then it'd be an interesting thing for this community to share with the community and also to get some ideas and feedback from the community. So that's kind of the backstory of the thing.
So let's get into the vibe coding.
I just wanted to say, what's vibe coding and what it's not? A lot of people, when they talk about vibe coding, they put up this tweet by Andrej Karpathy, who's one of the big names in AI. Very, very nice.
And I think, really, I see vibe coding as it's hands off. It's working with an AI to build an application by instructing the AI. Your hands off, the AI is doing the coding, you're doing the directing of what it's going to do.
Don't confuse it with AI coding assistance, which is where a lot of people and a lot of developers are using AI, where they're getting an AI to write specific little pieces of code or to correct pieces of code. The vibe coding is much more about building features rather than code it's about building concepts rather than little bits of code so it's you know coding assistant you need to be a coder or a developer vibe coding you don't so I'm not a developer but I know how to code and I know what architecture is I know how IT systems operate and so on and all that is really really useful and helpful in working in that vibe coding way of work.
And it's very much about having the vision, instructing the machine, following the machine in what it's doing, correcting it, and then pivoting it and orienting it to what you want it to create. And the vibe part of it comes because it's very much a flow like experience as well. 1It's very iterative, you become creative, you add pieces on and you really get into that creative flow with the machine doing the work.
So it's like virtually running a development team who are turning things around super quickly, rather than having a developer helper. So that's how I've seen it.
What I've been doing then, what setup have I been using? This is what people often ask is what tools? So I already mentioned, so the main thing I've been using is Google AI Studio.
as the as the main development platform i've also used a bit of a vs studio together with amazon q so that's another one of the ai helper products we can talk about that and they use a bit of chat gpt on the side as well sometimes for checking things or helping these guys out when they get stuck it sometimes pays to have a second opinion Run some stuff also on AWS, so a lot of the stuff that runs on the backend is all functions running on AWS that I've built here and put into there.
And then a critical component of vibe coding is this thing here, this guy here, Whisperflow. This is a speech-to-text. So this is a trick that I've got to thank MindStone for. So I picked this up on some of the MindStone seminars that I've seen already. So Josh, the CEO of MindStone, is a big pusher of the speech to text. And I started to use it.
This one is WhisperFlow. It works on Windows, which not all of them do. And I found it an absolute game changer.
It's not just... speech-to-text capture like you might have on your phone with Google, but it also has an AI layer behind it as well, so it cuts out all the ums and errs, it corrects little mistakes that you make as well, so that's super helpful, and it makes a bit more sense out of, and a bit more, yeah, adds sense and a bit of context to what you're instructing it, so it makes it much, much more fluid. For people that can think whilst they're speaking, rather than think whilst they're writing, it's a fantastic tool.
So that's a QR to get it. That's a bit of unashamed promotion there. That's my referral code there. So if you use that one, you get a free month, I get a free month of WhisperFlow. And once you've had a month of it, you probably won't go back again. I almost now have become too lazy to type. I think I should speech it into there.
So once you're in the setup of the vibe coding, what does it look like? We'll see this for real. I think it's the better thing.
There's a chat assistant here. This is where you're going to tell it what to do. Here's the code being built, and you can explore that. And then here's your application preview. So it's very immediate.
It's very, you know, it's a very... useful and convenient setup because you really have this flow through it here from inspiration to application there there is a bit of a delay and it is a bit slow but you know it's there it's you're not shuffling between tools all the time you're really seeing what you get
So let's try it out. Because I know these things are, you know, you like demos. Reginald said you like demos, you like interactive stuff. So let's give that a go. And let me bring that in.
All right. Where are we? OK, so we've gone into AI Studio here.
And I thought what we'd do is we'll build a little app. from scratch, we'll just vibe the app in. Now, I've not done this before live, so I don't know how well it's going to work. But I've got an app in mind to make.
If I was going to be ambitious here, I would ask you guys for an idea or for something, and we'll try and do it. But we can do that. If we want to do it afterwards, we can do that.
But I thought, well, let's try and make a Google Translate app. Let's try and make a translator.
Okay, so I thought what we could do is make a translator and translate app we have, you know, get some input button, bit of AI on the back, translate it, display the output. So it's, you know, a useful app, yet not too complicated, but you know, not so simple either. There's a few things going on there. So let's go.
So I'm going to put it in. I'll dictate it in. And then we'll see what it does. So a lot of stuff is all about the instruction and how you instruct it in.
So I want you to build a translator app. It's going to be a web app. And what we're going to have is we're going to have a box for input. And in this box, we're going to put some text.
Then under the box, we'll have a button saying Translate. And then when you push the Translate button, that activates a LLM to translate the text into French. When that's done, I want that displayed underneath as the next part of the window.
Oh, we didn't go into the right place, did we? All right, so this is, get rid of that as well. Of course, I wasn't actually even in the application, was I, when we did that? No, sorry, here we go. So we've got to get into the build part here, but I wasn't even in the, I wasn't in here, in the active thing.
But what's good with this whisper flow, let's see, I'll just bring it back. Okay, the transcript history is on my other screen, but that's okay. Okay, so we've got all this instruction, just natural language. Okay, off we go.
Now, a whole bunch of stuff is going on. This is where you've got to be patient. So this is like one of the takeaways. One of my lessons learned of vibe coding is you've got to be patient.
So set yourself up somewhere nice. Set yourself up somewhere chill. You have some other things to do. So you're going to spend some time waiting while it does stuff.
which is kind of OK. It's a bit frustrating because you're in the flow. You're thinking of things. And all the time, you're waiting for it to start doing stuff to produce what you said last.
Is it the same logic as if you had developers Like you hire a developer and you ask him what to do and it takes even more time. That's frustrating to you. This is frustrating to me because it can take two minutes. Yeah, absolutely.
Ten or a hundredfold. So this is fast by any metrics. Yeah, absolutely.
But I find I have ideas. So one of my takeaways is you need a notepad on the side for banging in my next idea or for audioing in my next idea. But let's see.
Let's go up. One of the other... Okay, I was done. Well, you know, we're done. We've got our first bit of app. So let's try it out. Anyone have anything they want to translate?
Hello, good evening, and welcome to the huge crowd here at MindStone this evening. So in not a lot of time, we've already built a working prototype of our French translator, of our Google Translate, which I thought was pretty impressive. Actually, I was blown away when I saw that, first of all.
And here we see, here we got all the code that's in there, that's used. So we can browse through here, see all the code that's generated. And there's actually quite a lot of code in there generated. What I find most interesting, there's the stuff on the left, is the conversation.
that it's had because it will tell you what it's been doing. So here, this is the bit then that you've got to monitor and watch. This is good.
But you want to go a bit further with this, you're going to get stuck because you have no idea what's going on. So here, you've got to come back and read about what it's been doing. And it will walk you through what it's doing. So you're constructing the interface. We've got a skeleton UI. That stuff. Then next, develop some translation logic.
OK, and then it tells you where it is. I'm using the Google Gen AI library to generate the content, and so on. Building some structure. This is about how the app is constructed, and so on. Mapping it together.
And on and on and on it goes. So it can be quite verbose. There's quite a lot going on. And that all happens. very quickly under the hood. And you get a nice output of what's been created and what's changed.
So that's our start. But what's the cool thing about the vibe coding then is, all right, now, let's get in the flow.
And then let's, let's take this further. And this works. This works well.
So, you know, French is great. But you know, anybody here speak any other languages? so we got any other language speakers here sorry yeah you'd speak polish polish Russian I'll take Spanish tagalog tagalog okay fantastic so all right
So I'd like you to add a drop-down chooser above the translate button and this is going to be a language picker to pick a language and in that I want you to put the following list of languages. It's Polish, Russian, Tagalog and Spanish. And then this picks a language. And then this I want you to use as the destination language that the text is translated into.
So we'll see how it handles these kind of things. Let's get the mouse back here. So here it's spending some time thinking. So again, off you go and do something else whilst it does that.
So here I think sort of learning point number two is watch what it, you know, you need to watch what it's doing to see what it's changing and where so you kind of keep track of what's happening to your application. So as your application gets bigger, you want to know what's been changed and what's been going on. So you've got to keep an eye on it. You've got to keep an eye on it and you've got to keep it honest as well.
So I found he doesn't always do as he's told. Sometimes he does the wrong thing. Sometimes he does too much. And sometimes he doesn't do what he said. So I've had to go back sometimes and say, are you sure you did that?
Check. And he said, oh, yes, you're quite right. I didn't do it. I'll try again.
Here he appears to have done what we've asked for. So what have we got? We've got Spanish, Tagalog, Russian, and Polish. So let's go Tagalog. That'll be good.
What should we ask to translate? Anything in particular? I'm stuck for inspirational, lost for words here. Anything you like.
It's a beautiful, warm evening here in Geneva. Perfect for going to the beach or to the lake. And also good for going to a meet-up.
Just to see if it... How's the Tagalog look? It's pretty good. It's decent.
So we can just carry on like this. It's pretty functional. And if you're building a prototype for something, it's a fantastic way of doing it.
of like secret management or are you somehow trapped into the Google ecosystem? How hard is it to extract the app out of this website and ship it? Excellent question.
There's a download button. And you can download, well actually let me say, So you've got three questions in that. Number one, secret management.
The secrets are not managed here. The secrets are exposed. This is a front end app. So all the stuff is in the front end, and the secrets are in the front end.
Now, I had this problem with, we'll see this with Guido in a moment. I had this problem, so I then moved some of the stuff to a back end. for the AI part. I run on the back end and keep the secrets there.
So I've got them managed. But I built that with the vibe code. So I said, here's this part of the... AI part that you do here for the translation, I want you to write an Amazon Lambda function to do this, and it pumped me back the code, and off I go. So secrets management, yeah, no good.
Second question was? How to ship. How to ship, yeah.
So ship is, the way that I've found so far is you ship the, you can extract all these files here, download, and then you can ship them on from there. And then you can deploy it into where you want to deploy. That's a little area where I'm a bit stuck, actually.
So if anybody here has got some experience there, it sounds like maybe they do, maybe we can talk afterwards about how to do that to industrialize that process. But you can ship this and make it. You can also ship this little rocket thing up here.
You can deploy that to Cloud Run, to Google Cloud Run. It will ship it in a Google Cloud Run environment for you. Is there another question in there?
I've not found how to, but I'd like to. So yes, you can sync it with GitHub by download and then paste it into a repository. And then off you go, you're synced. So that's what I've done. Again, I'm not a developer.
There's probably a smarter or better way to do it. Perfect.
OK. That's good. We'll do that.
Is there another question, or? We're good. All right.
I just wanted to do one more fun thing, actually, with this as well. Where are we?
Because we've built an app, but it's a little bit ugly. So let's change the look and feel of it. Has anyone got a favorite football team? I'm looking for someone's favorite football team that's got some interesting colors.
Colors? Yeah. You just asked me. Oh, yeah, Real Madrid, yeah, that's who I would choose, but that's just, like, white. So, like, a pink one and an orange one.
What about, like, asking a really different side, a really different side, like, for example, Rachel, who speaks at us, this kind of thing, would it be able to handle it? We'll try it. Let's try it. But what do you mean?
So this is going to be my next learning point about it. I think you need to be quite clear and precise in your instruction to it. So you should vibe and go with the flow of, hey, let's build or create something. But when you give it instructions, Like a human developer, right?
So you say to your human developer, I want it retro and pixel art. What are you going to get back? Well, from five developers, you're going to get back five different things, almost certainly. If you can be at least a little bit more precise or more clear, then I think we'll get a good result.
So that would be what? What I'm saying is like... that has like unique style and it was kind of retro so in that sense I would like like a website that is teams on purpose retro based on like nerdy website from the early 2000s So can you adapt the style of the look and feel of the interface to mimic a style of nerdy retro websites from the early 2000s?
So that for style. And then for colors, I'd like you to apply the color scheme of Real Madrid Football Club. And if you can, use the colors from their Away strip. I've no idea if that's going to work, but let's see. I mean, the football club thing is, rather than tell it I want it in purple and blue and black, is that I want it to go off and do some more work and do some thinking to find what the color scheme is and then apply it. So we're asking it to do two or three jobs in one here.
Let's see what we come back with for the retro stuff. This is where you've got to keep a close eye on what it's doing. So navy, gold, and white. So I guess that's the colors of Real. It's about finding that balance. We're finding the color palette.
Fonts that fit the retrospective. So Courier, New, and Lucida. Something about the borders. Okay. That's actually not bad at all, isn't it? Welcome to 2001. Yeah. Yeah, but you've got the button. It's all square, black and white.
I'm not sure if you've got the... Well, that purple actually is the Real Madrid... That's the Real Madrid-ish away strip. Deep purple. Yeah. This is like light version. Yeah.
very good okay so yeah anything more to do in demo playing around you can carry on playing around with this for ages and we need to move on but that really gives the feel yeah you can go from inspiration ideas to things super super quick so when I was a consultant working for big companies we'd sometimes be doing these pitches or doing proof of concepts for companies and we wanted to like conceive on a drawing board we conceived you know what was the app going to look like or what's the experience going to look like and we'd sketch it out we spent ages doing sketching and then we had to find people who would then build a wireframe and then we had to find people that might make a clickable prototype And we spent ages doing that. And we spent a fortune doing that. Clients thought it was amazing because they could see their thing. But it cost us a huge amount of money to do so. Now, you can do it immediately, faster than you can draw it out almost, faster than you can instruct somebody to go away and do it.
You've got it. So for prototyping, absolutely incredible as a thing. And then the flexibility is amazing as well. So we'd do it, we'd build the e-banking prototype demo for UBS and it'd be red and then like we go pitch it to another client the next week and we'd have to it would be a huge problem to change just the color into the colors of that bank now super simple so let's go back to the thing so
I summarized a few lessons learned, so I'll try to bring them as we're going along. The speech-to-text really, really helps big time, I find, because you can just focus on what your idea is. You're not slowed down by typing stuff.
Be clear and precise in what you ask for. You're going to get more clear and precise stuff on the way out.
Here I did examples of change component by component one at a time. I tried it by giving it a whole pile of instructions and it got confused and it ended up getting things wrong and going the wrong way. So go step by step. Watch what it's doing and be patient.
Drawbacks that... You don't really know what the logic is that's applied. You don't know what the algorithms are that are applied straight away. So you need to look at the code. If you're concerned about that, you need to look at the code and check what's going on under the hood.
This one here, code bloat. It likes to write. It likes to write a lot. So you end up, you see it pumping out code like crazy. It's not like a human. It doesn't care how much it writes. The other good side about that is it doesn't care how many times you ask it to change things as well. So flip side of that. But you end up with quite a lot of code where it's written something and written it something over the top and over the top and over the top. It can probably become a bit unmanageable, a bit difficult to understand.
So it's not the code which is written by a person with a couple of years of experience. It's mostly correct, but it's not the most concise . Yeah, I think that's absolutely fair. That's absolutely right. I don't know if that's a good or a bad thing. If it's written like it's a beginner, it's at least understandable, but it might not be efficient or it might not be... Which is where you get to this, is it production quality? Most people say, you know, it's not production quality.
But then here's my next hack, right? Is here, you get the AI to explain where it is or isn't production quality. All right, so I used the AI on my thing to say, and this is about the secrets, I said, okay, play the role now of a auditor and a technical architect, and you tell me where have you got problems with security, where have you got problems with efficiency, where is it not robust? And then you interact with the AI and say, okay, now give me some, propose me some solutions for dealing with this. So I've told it, give me three solutions to deal with, say, the secrets and pros and cons of each. And then I make a choice and say, okay, now go and put in implement number two or implement number three. And I found that a very effective way of going forward.
So you don't need to be the coder. You don't need to write the code, but you are retaining control of the architecture. You're retaining control of what it's doing and how it's doing, and you're getting your results quick.
And the last thing just on this here is, you know, that's the AI generated picture of the vibe of vibe coding. That's actually my vibe of vibe coding. Chill in the garden on the terrace, but focused on doing it. It's very chill. So that's the vibe coding.
Now I'll just show you quickly Guido, which is the app that I built, which is how I got into this and why we got into that, why we did that. So as I said before, Guido, then it's like having your best friend, who's a local in the town where you're going to visit, having him show you around and take you around for the day. He knows the town. He knows where all the good places are in the town. He knows you. He knows what you like and what you're into. So he's able to build you a personalized route based on what you're interested in. He'll take you to the cool, off-the-beaten track places away from the crowds, places that line up with special interests, things that you care about.
It gives it all back to you in an all-in-one package. So you've got your itinerary, you've got some maps, you've got commentary in audio every step that you go to. It's in your language. And it's also coming across in your style, different style if you're a teenager or if you're a pensioner. And the commentary is interesting, or I believe is interesting at least. It's about stories and anecdotes, things that give you a feel for the place rather than just the blah, blah, blah, blah, blah that you get from the guidebook.
So the idea is you spend your time on holiday. Don't spend your time on holiday searching, scrolling, clicking, and reading stuff. Just go with Guido.
So how to use it, there's a QR there. So anyone who's interested, who's got a phone with them, go ahead and QR there. And there you get to Guido. Basically, you just go in, put some of your inputs there, where you are, how long you want to spend, what you're interested in.
Then this is the AI bit and why it's relevant for here. Then we go off to the AI to generate the route. generate the commentaries as well, so that's all personalised in that package. Then that comes back to the front and displays that for you with the route, where you're going to go, and then the commentaries with audios as you go down and through. And then things at the bottom for feedback and sharing.
So I'll let you scan that and then I'll move on. And I'll do one as well. So we've got it on the screen to see. And this will be an interesting test because I haven't tested it en masse with various or several peoples before.
Sorry? It works for Lyon. Works for? Lyon. Lyon. Yes.
Yeah, I was going to say, put in, you know, Yeah? Put in your hometown, put in some place that you know, some place that you'd like to go to. Yeah, well, so with the power of AI, right? So it's harnessing the power of AI.
So it's, yeah, it's deep research. So the official title says deep research. Going off to the internet to find a whole bunch of sources about AI. about the place and the interests and things that you put in. And then from those sources, then it compiles the information, the trip and the itinerary.
But you control the sources. It's not that you don't know where it came from. No, I don't control it. Yeah. No, it's, no, no, no. The AI is choosing where to go look.
Have you used perplexity? So it's that kind of thing, right? It's Gemini. It's Gemini Flash or Gemini Pro behind. So doing deep research. Yeah. Yep. Right.
Well, there's other ways to do that, which we can talk about, I guess afterwards, because we want to move on for everybody else. But yeah, there's ways to do that. Should I go through one on the screen? Or has everybody done one? Anybody? Anybody want to see? Should we do one? Anybody got a place that they No? Yeah? Fine, let's carry on then.
So that's Guido. Let's try it out. Good. All right. So yeah, so that's Guido. So that's what I built in a few weeks, putting together all those different pieces. He still needs to be trained quite a bit, Guido. He doesn't always do exactly what he's told to do.
He's stopped speaking foreign languages in the last few days, which is an interesting learning point as well. Something has happened with the prompt or the way the model is working over time that has stopped or modified the way that it responds to the input. So that's interesting to see and observe.
But I think the takeaway that I have from this is it's amazing how quickly you can move to create something and create something that is 3 quarters useful or 3 quarters usable. Or that's certainly 100% useful in 3 quarters production or 3 quarters quality. So I'd just ask you to try it, share it, give feedback. If you've used it, give feedback. Honestly about you know what you like don't like what works or what hasn't worked. There's a bunch of stuff I know that doesn't work be interesting if you find other things that don't doesn't work put in your email with the feedback and then I can update you as well when It's fixed and when it really does work and when and when we roll Guido out to To the real world and to real to real travelers Roll out
that version we're trying, or would you then use it as sort of like your prototype and then actually code it, or have it coded? Would you use it as such? I would try and use it as such.
Not the version that you tried, because there's at least five things or ten things that I would want to fix in that. Yeah, no, obviously. But that's my question. What would be your next step? How would you roll it out, basically?
From a technical point of view, you need to get it out of the Google environment and properly host it. So personally, I need to master that process of going from source to distributing the website. But maybe somebody here can help me with that. That'd be cool. So that's one thing.
And then I think the second thing would be to audit and check all the stuff it's written or built in the front end to check that's sufficiently robust and hack-proof and so on. And then I would say that's enough to trial it.
No, no, definitely. That's why I use specifically the word prototype is that to show what it could be and it's quite impressive as an output.
I mean, honestly, it's just that what I put in the hand of users who don't have the backstory that, for example, we had here, sort of like as a kind of frame expectations. Yeah. That's what I'm curious about. Oh, I see. In a real environment or in a live environment.
Yeah, well, you need to give that backstory and that context around it, right? It's quite interesting. Because you understand how to frame the questions, and also what happens after, what are the pitfalls, starting from efficiency, that maybe it's not ready for production, simply because front-end is not ready, and also security.
It's because the expectations, it's a little bit like it's the expectations from the user Sometimes, as we see the process of it, from the idea to how it becomes real, and the output, sure, yes, there is the whole journey, and that's really cool, the journey that it suggests and stuff, but when you take it as a final product, the expectation, then you're like, okay, but then there's certain things I can expect from a web app, but then if I'm on an app, like an actual app that's on the store or that I set up on my computer, on my phone, then my expectations shift slightly.
You know what I mean? Like on basic things, basic UX, basic UI things, where you're like, oh, interesting, OK. Well, I would expect this to be a little bit more, and everyone's different. So that's where I got, that's why I love the concept, but I'm always curious as to how far you can put a potential business around it.
Yeah. Yeah, yeah. So I'm curious of that as well. And I think you can get pretty far, actually. I think you can get pretty, pretty far.
Because what you can do now is you can use the AI to play the role of the code auditor. You can use the AI. In fact, I don't even need to know what all the roles are. I said the AI.
As a software company releasing software for production, what are the types of checks that are needed? And what is inside those checks and what do they look for? And you can go down to whatever level of detail you want. And then you take that and then turn it around and say, okay, now go check this stuff for all of these things. Now what do I need to fix?
But I would say in that sense, then the translator was more impressive. In that sense, as if it's like it's as a web app, as a standalone, it did what it's supposed to do. It added complexity with the other languages. That was actually much more like that distance. I could see it much more than something that is so bespoke, even in terms of how people would use it and the expectations in that field. And also then people paying for it or not. I would see it much more for what you've shown with the example you made, actually. But that's perfect.
You say what? Like vibe coding is more useful for... No, no, no. It's not a comment to it. It's not a vibe coding. It's more of which application could be rolled out of such almost as is and people would be like, okay, this is a final product. You know what I mean? Mm-hmm. It's more of the...
Yeah, I mean, the translator is obviously not a final product. Well, if the translator is a final product, you know, it took, like, no time to build as a final product. So that also changes the game quite a bit.
All right. Thank you so much, Luis. But, yeah, so thank you very much. Yeah. Thank you very much. Appreciate it. A lot of work put into it. Enjoyed it.