Transcription
Welcome back to day four of vibe coding an app to $10,000 a month. Today we are at $0 in revenue, but we are making a lot of progress in the app build. So uh for those of you guys who are just joining us, we are essentially designing a course knowledgebased platform which allows us to scrape Loom videos, upload them to a vector uh knowledgebased database and then use AI to retrieve information and help people find course videos, content uh and the section of the video they need to be watching uh to help basically train people on how to use our software platform.
Now, we're going to be using CodeSpring to plan out this entire thing. And if you would like to follow along, don't forget you can go back and watch day two and day three. There's an entire playlist on YouTube. And if you would like to grab 50,000 free credits when you buy a pro account on Codepring, you can go ahead and click the link down below in the description. If you use that, then you can grab yourself 50,000 free credits. Uh it is a one-time link. I will be updating it as we go, as they get taken. So, there are a limited number of invite links. So, once you click that link, you will be the first person to grab it and get 50,000 bonus credits. I update them once a day. So, if you don't get them quickly, somebody else will get there first.
Uh now what I do want to do is I want to show you guys uh essentially what we've planned so far. So what we have here um and actually I just started syncing the codebase um from cursor directly over to codepring. Uh and what you can see here is we now have the upto-date um database and requirement docs for what we planned in our previous video. So you can see basically uh here we have the database requirement dock which explains how our database kind of goes together. We've also synced some extra information on uh how we actually built the API for example.
So now uh what we're going to do is we're going to continue planning out our next features uh and by updating or synchronizing our requirement docs. The reason we've done this is we actually designed the uh backend knowledgebased platform here. The way that we would actually chunk the transcript and then actually save them to our vector database was initially designed just using very very basic um let me just mute code. uh very very basic actions. Um the problem with these actions is if we have a lot of people trying to use uh knowledgebased indexing uh all at the same time then the app will basically crash or it won't work or if something breaks it won't work. So we actually designed in the code a brand new uh job system which basically creates indexing jobs and then it will work through those jobs and if they fail it will try and retry up to three times to make sure that data has been uh saved.
So, for example, if you come into the course builder, uh, let me just run the app. That would probably help. Uh, if we come into the course builder um, and we upload, let's say, 10 videos into the course builder, then codepring u, not codepring, this new app should theoretically then, um, transcribe them and then chunk them and then save them into the vector knowledgeb uh, database. So, um, you can see here we have we've got 17 features and what I'm trying to figure out as the next step. So when we actually come into the knowledge base, I want to start doing uh querying and making sure that works. Now we probably have to do some work in making sure this knowledgebased indexing uh system is bulletproof. But for now uh let's we'll probably try and start to stress test it.
So what I'm going to do is we're going to come to Loom and we're going to create a new video. Um we're just going to grab, for example, uh this video here, which is uh let me just grab that. Copy that link. And we're going to come over to our app that we've planned. We're going to come to course builder, come into course, and we're going to call this um I don't know, lesson 4. And at the moment, we only have the loom loom scraping working. So, we're going to click on add lesson. And what we should see is it processes. It should find the transcript and then save the transcript. Uh and then it should create us a new knowledgebased job. And then hopefully, there you go, the new job has been created. did and if we come into the embeddings we should start to see some more embeddings appear just like that that has now been stacked up and saved in the database. So if we come back to the knowledge base here we can come into the module uh and see lesson 4 and what it should have done is run in the background we can actually come into cursor uh and see looks like there were no errors uh and what it should do is it should show us the chunks that it's created. So there's 10 different chunks for the entire transcript of this video. Um, but we need to make sure that it is actually um chunking everything and it's doing it correctly. So let's just come to this video here. If we come to the transcript, if we scroll all the way down to the bottom, you can see here. Cool. Uh the last word are successfully synced to and then the last words down here. So it looks like it's chunked everything correctly.
So now what I want to do is come to codepring. Uh we're going to actually just save a checkpoint and we're going to do um synced Oops. Codebase um indexing changes. And then here we're going to say uh we're now up to date with the code base for running indexing and um chunking uh as jobs. And we're going to save that checkpoint, which basically means now if anything goes wrong, we can always roll back to a previous version. Uh and then we're going to come back to the chat here and we're just going to start planning out the next feature. So you can see here we've got the course page and embeddible search player. We have two choices. One, we need to figure out how to actually design a course page. So in here in the course builder, I think we're going to add a separate tab, which is obviously this is the content. Uh I think we need to have like a designer and deploying area. The theory being is every time we add one of these uh it will add it to the knowledge base in general under folders but everything in that folder everything in this course will be indexed for the chatbot for this specific course. Um and thinking that's probably the best way of doing it. Um, but then what we probably want to do is also have like a cuz this is the other thing right is in codepring I'm trying to figure out how we design this because we have multiple courses for beginner, intermediate and advanced and we'll have like a course page. So is that multiple courses or are they multiple modules in which case I think we call them multiple courses and then we can have multiple modules for one course. So it could be code springs development course has beginner, intermediate and advanced. The problem is then it becomes difficult to I don't know because if we come into here right we come into codepr lessons and we come into uh I don't know advanced right this is a course this is the advanced course and then obviously we have modules for each of those and then we have lessons um and what I want to make sure is here um I think we just add all the courses and so this is not necessarily course builder we want to have course builder and we deploy. So we can actually design a course platform area where you can have one platform that can show one course or we can show multiple courses is probably the way to do it. Um, so maybe what we do is we change this from course builder I don't know what we can do we're going to ask codepring to help us figure this out.
So uh the problem that I have at the moment is we have designed a feature called course builder and we essentially can create multiple courses. Um the naming of this might be a bit wrong because I also want to have a view um in our app which is kind of like a deployment area where we can build essentially build a course but a course might have like the embedible course that we have might have multiple courses within it. So for our platform, we have a course on how to use our features. We have a course on how to build multiple apps. So our embedded course for our app, there might be multiple courses within it. Do we add this into the course builder section? Uh and then maybe we have course builder which is like the there's a tab for us to sort of mock up the UI and select which courses are going to be in the the course. Um, but there needs to be it's hierarchal like there's something above course builder. What should we call it? uh and I want to sort of design that feature which is essentially where we design the embedible page and we could have like five embeddible pages with different selections of different courses because we also have the course page and embedible search player here which is essentially what we're doing um because you can also see we have the course page and embedible search player uh and also the course builder which I've added to your context. The course page and embedible search player is the public course view that we're talking about here that we're creating that's going to have the semantic search and is an embedible widget, but we want to be able to select which courses go into it. Um, where do we want this in our UI? Do we want it within the I think within the course builder, but I'm not sure what to call it. And basically what we'll probably do is we'll redesign the name of this feature here. So that's what we're going to work on. But I don't I think we'll come to the course builder and then it can be okay here's all of your courses. You can create courses and then you have the you can then select deploy. Maybe it's like click click click and then deploy uh something like that. But we'll see what it comes up with.
To solve this cleanly introduce a layer above course builder recommended hierarchy and names course. This could be your atomic content modules and lessons. We can have collections could be that would work to be fair. Curated sets of courses with order embeds deployable public pages suggest naming the top level feature embeds and collections deployments publishing.
Okay, so at the moment inside our app we have the course builder section. I think when we come into the course builder when I see that it makes me think of okay we're going to build the embedible widgets. Um but then also we within that um so we could have in the course builder page we could have embeddible widgets and then we could also have add your courses and then essentially when you want to create an embeddible widget it could have like a you click on it and it's like a preview of what that widget looks like and then you can just tick off the courses that we have in our database uh to show up in that embedible widget. What do you think? And so this is where coding is quite useful because we could what we could do is we could just rush in right and we could start building this but we may find that actually we don't want to design it in the way that we had initially designed it. We want to move things around and change things a little bit. Just going to collapse these things uh just to keep things a little bit more organized. Um and it then means you then have to go back and change a lot of the code and refix things. Uh and in this case this allows us to scaffold it out and design it a little bit better.
So it says your idea is solid. Keep everything under course builder with two clear sections. So embedible widgets and courses. So this is a create preview widgets area. Yep. Uh I think that's good way of doing it. Few refinements to make it scale and stay intuitive. Rename agile courses to courses to avoid confusion. Optional collection step if you expect lots of widgets and many courses. Add a collection subtab.
Um okay. Okay. So I think what we're going to do is we're going to edit the course page plus embedible search player uh feature. uh the notes that we have for that. If we haven't got any, I want to add some uh that kind of explain what we're discussing here, but we're going to add it as a tab into the um forward slashboard/courses courses part of our app, which is currently where we can create new courses. Uh I don't want it to be like embeddible um widgets or embeddible course page. And then uh obviously we have the course builder where we can create all of our courses. Um, and then obviously when we're in the tab with all of our courses, we can there can be like a selection on the maybe like a tick box we can tick tick tick and then there's a little toolbar that pops up at the bottom uh inside the dashboard forward/courses at the bottom like a floating sort of pop-up thing where we can then do create embeddible widget and then it basically adds all of those courses to that one embeddible widget. uh and then what what will happen is that embeddible widget needs to understand which courses are attached to it and then because those courses have obviously here uh multiple videos in them. So the way the way the database works is a course right this is the course will have modules that will have um lessons that have videos and the videos that are stored in our database here have video transcripts and then we have our knowledge base embedding um which obviously has the video ID. So when we create the courses and the searchable stuff, it will basically use all of the IDs for the video IDs that are part of those courses. That may not be the best way of doing it, but we'll talk with Code Spring and see if it can figure out the best way of doing it. Um, so what it's doing at the moment, I think, is it's figuring out this embedible widgets tab. Uh, so let's just auto lay this out and see where it's added that embedible widgets. Um, okay. So it's adding it to the course page. Um, cool.
The next thing I want to figure out here as well before we start designing the UI and updating the course builder sort of tab in our app is obviously because I have multiple courses um that I select to be in that embedible widget that we're going to deploy to sort of embed on our website. Um the way that the knowledgebased database works if you actually look at the requirement docs for it which I'll tag for the vector um PG vector on superbase um like a course obviously has um videos which have video transcripts. The KB_bed um I think is basically storing all of the videos and we have a video ID. What I want to make sure is the search functionality that we'll build later for the embedded course page will only be able to search across the courses that are in that have been created as part of that. So only the vector embeddings for those courses that are part of the embedible widget will be searchable. [snorts] And what CodeSpring is doing here is it's figuring out the connections for all of these features and then it's just taking notes on all of them. And once we have all of these notes, we'll create requirement docs and then we'll create canban tasks on how to actually you know create these features um which shouldn't be too difficult to do. And then hopefully we'll then give it to cursor and cursor can then read all the information. Uh and for complex tasks what I like to do is create a plan in here give it to cursor put cursor onto plan mode and get it to read our current plan with um our you know codebase and then plan out the best moving steps moving forward.
Okay. So I captured your requirements. So we have embedded search scoping to selected courses with concrete API SQL plan for PG vector queries.
Okay. So I want you to create me a front-end product requirement doc for this. Um making sure that we add these this tab to the course builder part of our app which is already in dashboard/courses. What we can do to speed this up a little bit is I think this one the course builder we can always add the course builder product requirement dock to it as well. Uh firepro UIUX. Uh no it's not that one. We're making this easier to find. Don't worry. Dashboard analytics course builder. So we can add here. So we have already have a front end product requirement dock on how that works. So I can add that to context and I can say here I've already added to context the front end requirement dock for the course builder page so you can see what that looks like already. Uh I'll also add the backend requirement dock as well. U and also the database product requirement do so you can see how we're storing the courses in the database. Uh and actually you know what I'm also going to give you the database requirement dock for PG vector. Um, so when you create the front end and backend requirement dock for the uh embeddible widgets feature, um, I want to make sure that we take all of these things into consideration. Um, I also just gave it some context on the design. What I want to do is basically we have like a a view, right? And [snorts] actually what we can do is we can come into here and I probably should have done this beforehand, but you know, it is what it is. Um, we're going to probably design it so we can actually wireframe out in codepring. Um, so we're going to say, okay, well, this is our our current course builder section, which looks like this. There's going to be a tab. So, it'll be um obviously this is the sidebar right on the left hand side, which we currently have uh which is oops, put that here, which is this sidebar here. And then we have the course builder section. I want to have like a tab like this where we can select and we can swap between embeddible widgets or the actual course builder. So let's say for example we are on the embedible widgets right now. Um on the left hand side we're going to have hopefully this sort of view. Um and we'll make this like uh no background and this is going to be like a navigation bar. Right. And the navigation bar is going to have for example it could be oops we could call this like course one and then we could have course two for example but you can expand them. There'll be drop downs and then in here as it sort of expands we'll make this like there and this would be for example module one and we'd have module and then underneath them right we have lesson one lesson two lesson three right and then on the right hand side what I want is like this is the deploy areas is the preview um where we can actually preview what the course looks like which is going to be essentially course name. There's going to be some sort of search bar here which is going to allow you to search for any information that you want. So, search and then we want to have like our featured courses which are going to be like squares kind of like this. And actually, we probably want to organize this a little bit more. We'll have for example uh sections within um I've done this wrong because actually what's going to happen is this navigation bar will be within this thing here. Um so we'll actually have so look like this and then on the left hand side here we'll probably have like some options. This will be like a builder section. And obviously, let's just, you know, for now, we'll make um this be a little bit shorter. Actually, I'm just going to delete that for now. We don't want a sidebar just to make things confusing. Um, so, we'll make this thing here, which is essentially going to be the designer. Something like that, right? So, this is the preview, and this is where you can select courses. Um, and you can do uh I don't know like branding or something. And then basically you can kind of design what you want your course to look like. And then maybe here this is essentially a list of all the courses kind of like this. So you can search for a course or you can just sort of scroll through. This will be a scrollable list with kind of like a little tick box thing. So like these are this one's obviously you know oops selected and then obviously the selected courses that you have will then obviously show up on the right hand side and then maybe some stuff where you can obviously change um which courses are featured courses but essentially the left navigation that I'm working on right now will be like the view uh to build up those sections. Uh, and because we're designing this in code spring, we're just going to click on this and save. Um, this basically will mean that um the front end requirement do that we generate in a second. Uh, which we'll do this. So, let's do it manually is going to use um it's going to use that wireframe. Uh, okay. So, front end UI auto layer that out. Once that's done, we'll create the back end and then um we'll create a database design one, but I don't think we'll really need it because we've already got the database stuff created. We may need to have uh some database changes but we will ask orchestrator to build the database one for us actually because it may need to use existing database tables that we have or it may need to redesign or add some new ones to have essentially store well you'll need to definitely store the embedded courses backend features um so this is this is the old mockup wireframe that I created but actually I We'll probably do it with the latest one. So, I can actually remove that one now. We don't need that. We've updated it. Um, delete. Don't worry, that delete button isn't working. Auto layout. And now add this to context. We're going to say, I want you to design me now the database product requirement doc. taking into consideration the fact that we already have a whole load of database tables created in the course builder feature and also the way the knowledge base has been created by looking at the knowledge base um product requirement do which I've also attached um we don't want to create like loads of duplicate tables in our database but we probably need to um store our you know um embedded courses or our deployed courses or something uh I don't know if I like the name embedded courses um but it could uh knowledge bases. Let's call them knowledge bases actually rather than embedded courses. So that way um what we'll have in here is like course builder. We'll have knowledge base. This is like all of the knowledge and then in here we'll have these are your deployed knowledge bases basically. And then we can always adjust the wording later on I think but that's probably fine for now.
So we have the front end, the database and the backend requirement doc generated for the embeddible widgets page. Uh we're going to come over to cursor going to come to here and we're going to say uh I want you to pull from the codepring mcp. We have created a new front end database and backend product requirement doc. Um for the feature that we've labeled course page plus embeddible search player. Um, and essentially what we're doing is inside the dashboard/course builder page, uh, dashboard/courses, we're going to create like a tab in there that allows us to see the first tab is going to essentially be the, um, course preview, um, like the embedible widget, which I think we should call them like their the users. It's not necessarily their knowledge bases because we have the knowledge base part of the app, but it's going to be an area where they can essentially uh select the courses and then they can go ahead and they can start uh previewing what that the courses are in knowledge base view. Um I want you to pull the requirement docs. I want you to start building thum those features. Also guys, what I forgot to do was save my mind maps. adding autosave. But um essentially I now have to rebuild the view of what I want this area to look like. Um but we're just going to do a quick one here. So it's going to be courses and then we're going to have uh some sort of search bar in here. Search. And then obviously I'll put the featured courses down here. And then we'll give this image to the AI and tell it to start building. Um, but what I want is on the left hand side the ability to kind of let's put that there. Put that there and put these like up here. But I want this area to be like an area where you can select and you can design specific features um for the app. Um, so you can have obviously uh screenshot this. Oh no, we want to have a tab as well. Um, so I'll put that across here. And then we'll put the tab in. And I'll make it like orange as well because I think at the moment orange is the color that we're going for and do that. Cool. And maybe like that. And then we'll give this screenshot to uh cursor and tell it to build it. So save and close. just come to cursor. Um you can also see I've given you a screenshot which is an image like wireframe of what I want this feature to kind of look like. Um the orange tab section will be like you can tab between the traditional course builder that we've got where it is right now and then the knowledge base area where you can build their um embedible knowledge bases for example or maybe call them like knowledge training areas or something like that. Uh on the left hand side of this image, you'll see there's like a navigation bar. It says select courses. So it'll have a list of all of the courses that they've created. They can then select them. Uh and then they can adjust other settings like maybe branding um and give the name of give it um a name for their knowledge base and their course. Uh and they can see that update in real time on the right hand side. Um so those like four rectangles are going to be like featured courses. They can select which ones on the left hand side of the navigation thing are the featured courses. Um, and actually um then you know they can save it and they can also there need to be a view where they can actually see all of their generated knowledge bases as well. Again, all of this is going to be inside the dashboard courses. But more information is explained with inside the requirement docks on how to build it because we also have the database because when we're selecting the courses, I want to make sure that we are building um reading the correct databases because when we select the courses, um the knowledge base that they'll be able to embed will only be trained on the courses that they've selected. So only the vector embeddings from those ones will be in there. Uh what I'm also going to do is let's just uh put this on plan mode. I'm going to say read the code spring MCP before planning and then we'll send that through. So cursor is reading um our requirement docs. It's saying should we call it training hubs, knowledge hubs? I think knowledge hubs is quite good. Oops. uh knowledge hubs for the embedible widget. Should the public facing page be a search only interface search bar that returns relevant chunks a full course listing plus search combo? So it's going to be course cards plus search bar sidebar currently has a separate knowledge base link going to the dashboard knowledge base. Should that stay as is um or should we remove it? We're going to keep it. This is a problem with having the same name so we're going to keep both. Uh and then continue.
Okay. Okay, so it looks like it has now completed that task. Uh, and we're just going to see what it's done. So, you can see here you got the courses and knowledge base hubs, which I think is pretty decent. You build your courses, then you create a knowledgebased hubs. So, create your first hub. Uh, and you can see here the list of courses. So, we're going to call this test hub. And then like that, create a hub. And then what we want to do is we want to come into here. And you can see it's created a new table. Uh, widgets, widget courses, video transcripts, pinning modules. So, widgets presumably it's okay. I think we'll probably change these because they're called widgets and widget courses and obviously these are called hubs. Uh, and obviously we got some errors here. So, we'll send this back through and let's do some debugging.
Okay, so I've updated them to knowledgebased hubs and then obviously the courses that are attached to those hubs. Um, I don't know why we need the courses though because it's just the hub ID and the course ID. So, we can probably actually update the courses section here. Um, so we'll have a look at that. Um, but for now, we can come into here, we can see if we come to knowledgebased hubs on knowledge hubs, we have our knowledge hub. And then what I want to be able to do is be able to click on it and then obviously view what the knowledge hub looks like. Um, so I'm just going to do a little bit of work now on just updating and fixing some of these bugs and some of these little issues. Uh, what we're trying to build here is pretty complicated realistically. As you can see, we are running into some issues. Um, so what I'm going to do is realistically, um, I think the best plan, let's just collapse all of this uh, auto layout. Um, I think the best plan is just to sort of consolidate where we're at at the moment or what we're trying to build. Um, because we probably should have broken this up a little bit more, the course page and embedible indexing, embedible search player. Um, but I think what I'm going to do is I'm gonna say um I want you to read the product requirement docs from Codespring because uh it looks like we've created some tables really in our database that we may not need. We've got knowledgebased hub um_courses like KB_Hub courses um which has just got the hub ID and the course ID. Whereas I think the best thing to do is just update the courses table to include the hub ID because obviously the course ID is from there rather than have yet another table in the database. Also um when I actually come into the um knowledge base um hub um you can see some of the bugs from above it's not actually showing me the preview of what I want the knowledgebased hub to look like which is obviously based on this screenshot that I've given you. Um, so when I'm actually inside the knowledge base that I've created, um, I want it to look like, uh, sorry, inside the knowledgeb hub that I've created, I want it to look like this screenshot, um, where I can then obviously see the select courses, so I can edit the number of courses that are in there and then obviously the preview. Um, for now, we don't need to worry about like the actual embeddible um, section of this. Um, let's just start building uh, just the UI. Um, and actually, let's come back. Let's discard those changes. So, we got the front end product requirement doc. So, I want you to use the front end product requirement doc and um for for the uh course page plus embedible search player from code. There we go. So, what we're doing really is because what we're trying to build is a very complicated feature within codes. I've basically done a lot of planning to make sure that we understand how these features kind of all go together. Uh, and look at all of this knowledge and context on how everything is interconnected and linked that cursor doesn't have access to unless we give it to through the MCP. Um, what I'm hoping is it can now go through and figure out okay actually these are the problems that we have and then you know here's how we can fix it. And obviously what we're trying to create is okay you have a knowledgebased hub that's trained on various courses. we can then select and change which courses are in it. But equally, you know, we don't need to have multiple sections to the database because there are existing tables already in there. Um, and then we can go ahead and make those changes and then recsynchronize them back again. It looks like it's figured it out. So, it says it's um, good. I've got the PRDs now. Let me plan and execute the changes. Simplify the database. Remove the knowledgebased hub courses and join the hub ID to the courses table. Fix vendor chunks error, which is obviously just some some error that we have. and then rebuild the uh hub editor UI to actually match our wireframe. Um, so I've I've attached the wireframe here just because I think cursor does a better job because the way that codepring figures out is uh codepring will look at our wireframe and then it will basically create us front end product requirement doc based on this wireframe and what we've said here. But you know it'll look at this and create like a a prompt on what it wants to look like. But if you give the image to cursor as well, it will also do a pretty good job. So that's done. I'm just going to come into here. We're going to check what we've got in our schema. Um, so we've got courses schema, knowledgebased hub schema. So it's removed the schema for the knowledgebased hub courses, which is great. Um, and it looks like it's done it in here as well. So we've got the knowledgebased hubs. And then in here, what we should see is the knowledge base uh ID, I think, hub ID, rather. There we go. There's the hub ID. Knowledgebased hubs. Cool. So, I'm going to delete this knowledgebased hub now. And then, uh, what we'll probably do is come on to the terminal. Uh, and we're going to kill the terminal and we're going to run it again. And what we'll do is we'll test it out again. And this is just a a bit bybit process um of building and adjusting these features. So once this is done, we'll then reync it to Codepring. Uh, and then I mean obviously like the Code Spring plans aren't going to be perfect every time, but you can see how much further we're moving by having a proper planning tool and also just somewhere to keep all of our requirement docs in one place uh with like all the integrations and how they're all linked together. Uh, so you can see here we've started building obviously we've got the the area where we can create our courses. We also have our knowledge hubs. So come to knowledge hub. We're going to create our first hub and we'll attach the lessons to that. We're going to create the hub. Hub has now been created. So we can see down here on the left hand side we have the ability to select various hubs to put in it. If I click on it. Okay. So we need to work on this UI and user experience here. So let's come into this and we're going to give it that and we're going to say what I want to do is I want to work on the uh knowledge hubs section. So, we're able to create a hub. Um, which is perfectly fine. Like, I'm I'm loving the way that that's been created. And we're able to obviously test from uh from that. We can obviously select, you know, and view the hubs inside our database. So, it's saving that correctly uh inside our database. The only problem that I have at the moment is the UI and the design. So, we've created the knowledge hub in the database. Um, and then on the courses that we have, it's added the hub ID to the course, which is perfect. Um, the problem is obviously the UI and design. So you can see on the left hand side it says select courses. It's not showing that the course has been selected. Um, and we should obviously be able to search courses. I want the the rather than it just being like a little selection. I want it to be able to be like a nicer design for the cards for the hubs. And obviously the ones that are selected should show as selected. On the right hand side you can see what the UI looks like for the knowledgebased hub. Um, and actually I've got um another screenshot of what I kind of want to emulate for the knowledgebased hub. Um, and that is really going to be um Hyros. So we're going to screenshot this. Obviously my face is in this but that's fine. So in the knowledgeb hub um which is this folder here I'll tag the folder Okay, haven't told before. Okay, so obviously uh what we want in our app is essentially on the left hand side. This is obviously the the hub preview really the design of what we want it to kind of look like which is kind of a preview of the area um the design of the actual knowledge base. I want it to be um like a a name of the hub and then obviously a search bar so we can search for it like in the image. We have then the um featured courses and then on the left hand side I want there to be kind of like a navigation bar which shows us all of the courses that are in there and then you can click on it and then it shows like a dropown of the modules. You can click on the modules you show a dropown of all the lessons inside that knowledgebased hub. Um then in the outside of the sort of the preview on the left hand side we where it says select courses. Essentially this is going to be like a canvas builder right where we can edit things. So we can change the name of it. We can change the branding um and do various sort of updates and settings. Uh because realistically what we want here is to have like a much sort of clearer description. So what it's created really is this like rough design so far. this. And obviously you can see here this square, we've only added in one. And we've al got the search bar here. Um, and obviously this little tab is uh this little tab here. Um, but that's I think that's probably fine because then we come in and we have like this whole hub builder which I think is better. But we'll see what happens with the AI. Just figuring out a better design for this one. I'm using Opus 4.6 which I haven't yet tested for UI. Uh 4.5 is very good. So we'll see how 4.6 fares. Okay, this is like the updated UI. Um I'm trying to find which file. Uh I think this is the hub preview. Um I want to work on the hub preview. Um at the moment, what you can see is the screenshot is what you've kind of created for the hub preview. Um, but what I want it to look like is the second screenshot. So, can we work on that? Um, and also what you've done on the left hand side. So, you've got courses and settings, which kind of, you know, looks all right. Um, but the problem I have is the courses section is just like it's massively empty and there's not a lot of stuff in there. Like if we've only got three or four courses, there's a lot of empty sort of wasted space, which I think we can probably do something with um to help us sort of design what courses go in there. And also it could be um I think maybe the hub preview. [clears throat] I don't know. Maybe in the settings. I don't know. Let's figure something out. To be honest with you, I don't really know what the best thing to do. My plan was to put the settings underneath it, but we'll see. Um, these are other things which we need to plan at some point, but we haven't planned them. But you can see things are starting to take shape, right? We have the ability to so dashboard here, we'll be able to track usage and those sorts of things. Course builder, we're going to go ahead and obviously create multiple courses. We can then now actually add content to our courses. that will then automatically be added to our knowledge base. Uh and then from the knowledge base obviously when we come into the course builder we can obviously have the knowledge hubs. Uh but then this you know we want to start testing out the AI chat and everything. So I think what for what we'll do for the AI chat is um I want to have because this is the next thing right is do we have the ability to create well you can create a knowledge hub but you can also create a chatbot but if I think we'll have if we have them separate or we have them together I think we have them together so knowledge hub we're in here and then we can have settings to turn on to create a chatbot the problem is we can make if we make it too complicated with AI chat bots then it could be too many like too much customized settings. Um because also there are starting to look a little bit nicer. The problem is right is when we're starting to plan out settings and these sorts of things with AI chat bots is you want the ability to customize and tailor the AI responses. If the AI responses are incorrect, you can fix them. There's a whole load of stuff we need to do for that. I think it should just be an AI powered hub to start off with where people can get the information that they need uh and they can search through the documentation and find the videos that they need uh rather than showing you know an AI chat in here for now. So let's just let this do its new designing and then what I want to do is I want to make sure the course is sharp and then we can see the modules and then what we'll probably do is we'll start planning out. Say we probably do it now is in the course page in embedible search player. Let's add this to contest table. Let's start a new chat. Summarize and continue. So course page here. So we've built the course page and embedible search player. I want you to re actually tell you what we'll synchronize from here and then we'll rename it. Okay. back first hub. Okay. So, it's yeah, whatever. So, it's added it like that. And then obviously we can come in here. We can see the module and then we can see the lessons from the module. Click on this. So, we need to be able to create the better design for this. Um, looks much better. Um, what I want to do though is when I open the hub, because I've when I created the hub, it's already got the course ID of what courses are attached to it. Um, so I want those to automatically be selected uh in the course list. Also in the course list, there's a tab there's a card and it says not indexed for those courses, but I think that's incorrect because the courses are actually indexed. Uh, so I want to make sure that that card is grabbing correctly. I think What we got for the indexing knowledge base? So this will be actions. So hub actions, knowledgebased indexing actions. And then we'll have knowledge base actions. Um I think they probably do. Also, when we're inside the hub, I don't like the way the preview is kind of like attached the way it is where it's kind of floating. I want it just to be the full the full size of its parent container. Uh and also I can't seem to click inside or write in the knowledge hub like actually search or test anything. Um and when I sort of have the hub or I you know select a course or a lesson, I can't click around inside the knowledge um the knowledge hub. So I know we've got knowledge hubs and we've got the widget cards widget editor and the various widgets. I think we should probably organize the components for the actual knowledge hub into a subfolder um versus the um sort of hub editor stuff. So we
have the hub view where we that's obviously like the embedded view which we'll create as like a public thing later on. But for now we want to separate that up so it's easier to keep organized.
One thing I will say is as I've sort of got better at developing with AI and building multiple products is this idea of keeping things organized, right? Is designing the app in a way that is simple, scalable yet organized. And part of that comes down to how you organize your file structure. And that's why we're going to have a knowledgebased hubs which is a view.
And when you're building with AI, especially if you're designing with Codepring first and then you give it to the AI to code doesn't just mean right, you know, you can switch your brain off because CodeSpring will do a lot of stuff with figuring out how the file structure should work, how things should go together, taking your knowledge, like look at all of this, all of this knowledge that we've added to all of these individual features. If we hadn't added this here before we created the requirement docs, these would be thousands and thousands of prompts that we're sending to the AI to build up these individual features. But instead, what we've done is we've kind of rambled our way through it. We've described roughly what we want. Codering takes these plans and then builds out proper development plans based on all of this.
The problem is, you know, you kind of need to figure out what files is it creating and why is it creating things because that way you can debug things and especially with cursor, it's getting pretty good now with being able to find the correct files that it needs. But equally, you know, if you know what files do what, then you can give it the correct uh direction and the correct push.
There, that's a little bit better. I want to fix this little stretch out at the bottom. Um, but if we come back to the dashboard for a second and then come into the course builder and knowledge hubs. So, it's now remembering this this indexing seems to be pulling in correctly. Uh, if we drop down here, we can see obviously each of the lessons. We need to obviously create the view where we can click in and go ahead and obviously find uh and look at the specific lessons and build out the knowledge hub. Um and there's some other UI bits and pieces which means we probably should have a search bar here and a search bar here. Um auto capitalization, you know, that sort of stuff. Uh and what I probably want to do at some point is have a button where you can click to automatically generate AI, you know, with AI like descriptions or titles based on the context uh that's in the knowledge base. But we'll see. Uh, excuse me for yawning. Um, okay. Review. Just going to keep all of that.
Uh, now we're gonna say great, this looks a lot better. Uh, the only problem is now also in the knowledgebased hub. Um, if I click on the featured course, right? Or if I click on the lessons, um, like if I'm on the sidebar and I click on the the course and it opens up the dropown to see the module and I click on the module, it won't take me into the module view. There is no module view or lesson view for the um knowledge base hub uh like the preview. So it's adding in a proper module and lesson view. The only problem is I kind of wanted to break it up into separate components. And what we'll do again once we've done all of this is we'll reync to codepring. Now we're going to add in some tools inside codepring which will basically enable you to okay well you know synchronize from here into here and then codepring can analyze your code and figure out you know where are the problems what things do you need to fix are there you know is there like missing code or is there an issue with the code is there bloated code that sort of stuff uh can you split these into separate components let's just come into the app and see what's done okay so we've gone into the the lesson view and then obviously we've got so the module view.
So okay so we click on this and it takes us into the course. So what's happening right now is I go from the homepage and I click on the course it takes me into a course view and then obviously the modules and then the lessons. Um that's not quite right. I don't want that to happen. I want it to go directly from clicking on the course whether it's from the sidebar or the module to the module view. Um, so the you know it should show me all of the modules that are available and then obviously all of the lessons. Also we have the course ID from the database and because we have the course ID from the database we have the videos um as well and we know kind of like how that whole thing goes together. Again if you want you can read the codepring um MCP and read the product requirement docs on how the course page builder works and then you can figure out you know how the database works. Um, I'll tag the files for you, but basically, you know, the video player should show the videos that we have the video URLs because it's um a lot of them, I think, just Loom videos. Um, so you want to use those, which is um source ref, I think, in the videos table.
Okay, cool. So, it's pulling in the correct data now. So don't forget from the previous lessons so previous days we created obviously the course builder right so I can come in I can build a course and then in here I have the modules I have the transcripts the looms you can see them all in here um and then when I come into the uh knowledge hub then I can come into here I can view the lessons and then obviously I can see the same lessons that are within it um and I can obviously swap through the lessons which I think looks pretty good I'm pretty happy with that for now. I think that'll probably do just in terms of like basic UI. The way I like to design things is we build the UI first and then we can sort of iterate and design from that. Um, so what I'm curious about is if we create a new course, we'll call this course two for example and then we'll just put a description. Uh, this is to test out having two courses. Okay. Uh, create a course. Add a module. module one a lesson and we'll just copy this link here that can be our lesson and we'll call Loom video call this uh lesson one add a lesson so that should process and that should then transcribe and then what we should see is in the knowledge base um knowledge base indexing jobs that's done the embeddings we should see this increase so that's on 31 Um and then uh where we at? Transcript ready. Yeah, I assume it did that quite quickly. And then obviously I guess we got course one, course two, knowledge hub come into here. We can see course two is here. So we can click on course two and then save. And then if I refresh, course two is there. come into that. We can see there's one module, there's one lesson. If we click the drop down, then there's obviously a lesson in there that's showing the correct lesson. So, the hub is pulling together the the correct information. Um, I'm pretty happy with that now.
So, what I'm going to do is I'm going to say, uh, first of all, let's come into settings. Just I'm going to turn the code spring MCP off a bit. We're going to say, okay, what I want you to do now is uh synchronize the product requirement docs for this feature. So, we've got a front end, a database, and a backend product requirement dock for the uh knowledge hub uh which is called the uh course page and embedded search player feature inside codepring. I want you to write a note in uh there on sort of some of the changes that we've done and the requirement docs. I want you to update them to explain some of the database changes, how the actions work in terms of pulling data, how the knowledgebased hub works and obviously how those um tables work in the database for the knowledgebased hubs. Um and obviously uh how it then has access to or then the courses are linked to the knowledgebased hubs because later on we're going to start designing uh the search querying. So we can actually have an AI language model that can actually query those embedded chunks um inside our database from knowledgebased embeddings. Um so I want you to update the requirement docs inside codepring for this feature and we're going to send that through. Let's turn the codepring mcp back on. And that should now work.
Cool. So we're now syncing um by the looks of it. Right. What it's done is it's gone ahead and it's gone to bring MTP to-do list fetch PRDs has the PRDs for front end, back end, and database. And now it's going to sync all of that stuff up. The only thing is I think we're going to need to sync it to some of the other ones as well because it's got the knowledge base UI um which is front and back end knowledge bases here. So I'm just going to make sure that it's doing the correct one actually. So I just want to make sure that you're updating the correct product requirement dock. So the front end product requirement dock is going to be for course page plus embedible search player. Uh and then the database PRD knowledge bases which is embedible deployments. And then the backend PRD is obviously feature overview public course pages and embedible. So it's for the embedible course page um which we've now renamed as the knowledgebased um hub. What you're not doing is updating the requirement docs for the knowledgebased indexing feature. Send that through.
Okay. So the changes have now been synchronized with the planning tool. So what I'm going to do now is I'm going to have a look at what we've got. Uh we've got left the image library update. Uh we've got one click article generation to do AI course outline generator SOPs. This is a whole load of other features. So, I think what I'm going to do, I want to now design um an update for the um can you redesign or reabel the course page plus embedible search player feature? What we're going to call this is the knowledge hub. Um because essentially we've redesigned it inside the app to be the knowledge hub. And I want you to also take some notes on uh how to actually create the uh querying. You know what? I'm just going to build that and then we can synchronize. I think it makes more sense.
So what I want to do now is I want to add basic um vector search querying to the knowledge base hub. So, at the moment, like if I search in it, it's literally just um like I can search and I can type something, but it's not actually doing a vector search. So, essentially what we're going to create is in the search dogs is almost like um an AI chatbot, right? When I send a message, it sends it to the AI, it gets the embeddings for it, and then what it will do is actually um chunk it. Not chunk it but actually then query the vector database do a semantic search and then bring back and tell us okay I want this to then describe okay which lesson is it we need to watch um this is a hard feature to build let's you know we're going to use co for this okay so what we're going to do now is inside this course page an embeddible search player uh can just rename it to knowledge hub for me and make sure the references to The linked notes are also u known as knowledge um base hub.
Okay. So let's just brainstorm for a second because this is where things can break is what we're going to do is basically when we search this it's going to send off to an AI it's going to just quick do some vector um search through basease and then from the metadata. So if we actually come into the knowledge base embeddings we have the video unique ID um and we also have the text. Now, at the moment, the text doesn't actually have the timestamps, which is a little bit annoying. Um, but we can fix that. I'll do that later on. But for now, what I want it to do is I want it to say, okay, from the metadata, which video ID is it? And from the video ID, we can figure out, you know, where is it in the course? Um, so did you mean knowledge base hub? Yes, knowledge base hub. Is it knowledge base or is it knowledge hub? This knowledge base hub. Um, and then what it should do is it should then come up with the drop down and say here's the lesson that you want to find. So it could say, you know, you could ask it a question like how do I integrate spring and lovable? Hit enter. And then you can see here 44% match. So this is is it actually maybe it's already doing it. Okay, let's figure that out in a second because then what it should do is we want it to actually have a um there we go. Let's change it to the knowledge hub. Um we want it to actually find okay based on this this is the most relevant video for you to watch. Um and at later date we want it to say okay well based on this these are the chunks that are important to you here's an AI summary and also here's a response of what you should what you should watch so essentially what we have is you can watch the lessons but also we need like a view which is like a learning view which has the video and then it has like an AI nice summary um of what to do I think is probably the best way of doing this.
Okay, now what I want to do is start planning out the um sort of search functionality. So I think we probably create a new feature or we add this to the knowledge hub. Uh, let's add it to the knowledge hub as a note. But inside the knowledge hub, we need like a view which is when I because at the moment we have a course view where we can search and we can see the courses, we can see the lessons. But what we also want is a like an FAQ answerable view or like a learning view. So if I search for something in the search bar, what I want it to do is basically I can it'll take my message. It will then send it off to the embeddings model. Get the embeddings for it. It will then query on vector search, find out through similarity search which chunk of information has correct information, send that back to the AI and an AI model will give me a quick summary of what the information is that I need and it can then look across, you know, if there's multiple chunks that have the correct information, it can give me a summary, but it can also have like a list of here's the recommended videos to watch um that it can show me and we want a UI for this because at the moment we search um there's like a there's a view that we can see and I want the view to have okay here's the top video and it'll tell cuz in the embeddings we have the metadata of the video ID and obviously the text. So then we want to have like a this is probably the most relevant video for you to watch. Um and then it can have like sources underneath it. These are the the lessons that are used for the sources and then you can click on the sources and then see the lessons maybe. Um, so I want to design that out and what I want you to do is use the context 7 MCP to read the superbase documentation on how their PG vector works for querying. This will be where Code Spring comes into its own because right now we're kind of brainstorming. It's like how do we build some of these features and what's the best way to build them and design them and then it will look at our current setup and hopefully it tell us this is good, this is bad, fix this, don't do that sort of thing. Um, always allow. Let's just approve that.
Right. So, added a new note under the knowledge hub. Let's see what it's created for us here. Um, so have a new note FAQ learning view pulled superbase PG vector guidance from context 7 and included in extension index query patterns. Want me to have a DB migration note? No. Um, I guess I want to make sure that this is a good user experience as well because at the moment they can just they can look at the courses and watch the videos which is fine but the search bar is going to be like um a semantic search retrieval and also a brief summary AI summary. So I can ask a question. I want it to be able to give me a straightaway here's a bullet point ding ding ding step-by-step plan of how to do your thing based on the knowledge. And then underneath it maybe the other things we need to show are the most recommended video to watch. Um and then also at the moment we don't have the timestamps from the transcript saved in our chunks or in our transcript. But if we had the transcript um timestamps we would obviously then show them which specific section of the video they need to watch. But the other thing is like there could be I don't know three videos that answer the same question at different parts of the video. So I wanted to have like ideally this is what we recommend is the video to watch. And then you know underneath it these are the other sources or maybe it says okay here's your step-by-step plan. Here are the sources and tag the sources to each step. So we know okay well it said this based on this source. Maybe that's the way to do it. and then it's like um almost like it's got um referencing throughout the text. Then we can click on one of those references and then it opens a slide out draw with the actual video and then um that's maybe the best way of doing it. Actually, I like that idea because that way, right, imagine we're in here, how do I integrate code spring to cursor? I could send this through uh and then it could say here like here's a fivestep plan on how to actually integrate it and then it has like um a reference within it. I could click on the reference slide out drawer comes out and it has the video to watch with and then we could have like bullet points underneath the video maybe. Um, and then what we could do is later on we could have a button on this which is like knowledge base or chat and if I send the message then it'll do the same thing in the chat. Um, but it would obviously then allow me to ask follow-up questions in the chat which could be cool. So, great thing in UX to capture the full answer.
Let's see what it's done. Let's just auto layout. Uh, and I like to have everything collapsed for now because then I can see which ones are the new notes that it's taken. Um, but also, um, did it add any more notes? I swear I saw it add another note somewhere. Yeah, of course. outline generator. Okay, I think it's added a new feature. Let's just see what it says. Also, what I've said is basically this uh we will probably add some sort of chat based thing in the future. And if we're going to add some sort of chatbased thing um I want to make sure that what we've planned here for the retrieval um using semantic search is going to be expandable so we can use the same actions for that without having to sort of rebuild it multiple times over.
Okay. Okay. So, what we're going to do quickly is we're going to come into here and we're just going to say I've given you access to the latest files uh description of what we're trying to build here. Uh also you have the front end and the backend requirement dock for this feature um of what's currently in the codebase. I want you to use the context of that to regenerate the requirement docs front end and back end based on um the plans and notes that we've taken to then design out this querying um functionality. And we're going to get that sent off. Um, and then it's going to redesign these. Uh, to be honest with you guys, I think I'm going to end this here. Um, I might get started building this. I'm finding it quite hard to build and also record everything, but I might get started designing, um, and read building this querying stuff. Um, I also need to make some dinner as well cuz it's 7:00. But, uh, I will obviously be back and I will share what else I work on once I get back or if I continue working on this. Um, but yeah, I mean just by using this I'm learning a lot about our platform and updates and things we need to improve. If you guys have any other ideas of what you would like us to do to improve it, then please do let us know.
Okay, so it is now uh the next morning. I did a little bit of work last night, so I'm going to walk you through what I did. Um it got to like 8:00 and I sort of ran out of energy to keep filming. Um but basically we took the design of um all of the the information that we'd come up with this idea of this knowledgebased retrieval. So we can ask questions but it shows up in the knowledge hub which is obviously not a chatbot. So the idea is we can send a message inside our uh knowledge hub. We can just send a message and then it will be able to answer us a question. It'll have some sort of FAQ section page um inside here. Uh and basically that's what I did is I then regenerated these requirement docs for the front end and the back end and then just synced them with uh here using codepring. We also pushed an update last night which makes the Codepring MCP a lot more stable. Um we're also working on more stability improvements um and some orchestrator updates and improvements as well which we'll see over the next few videos. Um but basically you can see here it just pulled those in then it planned out the update and the design um and then it was just basically just some UI tweaks and then I just pushed it to GitHub. So I'll show you kind of what this does and then we'll round off um day four I think we're on.
Uh, so here we have obviously got the knowledge base. So what I did actually did is I came into the course builder um and I actually added in uh oops that's the knowledge hub. I came into the course builder and I actually added in some new updates. So I've created new two new courses for the feature tutorials and I did this. So if we come into here for example day four part five right we can actually take a URL for a specific video copy it and when we come into our app and let's say we create a new lesson uh it defaults to loom but it will actually autofill the title um which is quite cool because what I was doing is I wanted to see how well does this actually work by training it on uh the training courses that we have inside codepring so basically taking all of our training courses and training material that we have for like our in-depth videos and Lovable and all of those other bits and pieces and putting them inside the app. So, I actually did that and you can see it's created all of these. Uh, this video here um yesterday when I did it didn't actually have the transcript generated by Loom. Um, so I Yeah, so it says it's still being processed but has not been generated. So, we need to have um, you know, a way of a better way of showing that up because it shows up here as no transcript. I built a rescan functionality. So, if there is a transcript, it will do it. And then obviously the ability to add a transcript. We don't have anything like that. What I think I might do is add a transcript. And then in here we can do like an MP4 um transcript conversion or something. So people can go ahead, they can download their video, upload it, and then it will uh transcribe it. But for now, not going to bother with that.
I want to show you um obviously in the knowledge base, we now have the two folders. And then obviously we have the modules and all of the lessons for each of those. So we have quite a few chunks have been set up for each of them. So if we come to this one, we have 15 chunks because it's quite a long video. But if we come to the course builder and the knowledge hub and we come to this one, uh, and we just ask for example, how do I integrate the code spring MCP with cursor? What it's going to do is it's going to create this little AI answering page. So it's basically what it's doing is searching and querying the database uh and getting those chunks and you can see here uh I've created it so it has like references. First set up the code springing mcp by pulling in your project data. Next ensure that your codepring account is secure and only accessible by cursor. I need to do some work on the system prompts. Three then generate your API key by navigating to the MCP tool. Uh and you can see here if we click on this it takes us to the video that it thinks is useful. So how to generate and connect any software. So in here, uh, let me just see if I'm muted. If we actually play this specific video, we have a guide on this and it explains how to actually, you know, take us and how to actually um create an MCP tool and integrate it. So it's found the correct specific video for basically what we're trying to do. So after getting the um API key, paste the command in your preferred software, finally verify the cursor can access any data. And then again here, set up the cursor MCP. It takes us to a video that explains how to set up the cursor MCP. So, uh, it's done a pretty good job of it. The only thing I would like it to do at some point is the transcripts to have the timestamps. So, when it does this, it would take us to the section of the video and auto play. So, we don't have to watch the whole video. Um, and I'm going to get it to give bullet point summaries for each of these as well. Um, and then basically from there, we can reync it. We can also see a suggested video. So, it knows, okay, we're trying to integrate cursor with MC um, codepring with cursor. This is the suggested video. Two-way MCP for cursor. If I go for example um I don't know what lessons I've actually got in here. Uh, so you can see build an app in Lovable. So I could be like um how do I connect Lovable to Codering. I actually don't know if this search bar here works. I haven't tried this bit yet. I don't like the fact that it auto writes that bit out. First go to the API key section in Codepring. Create a new API key named Lovable. Next, copy and save the API securely. Then in Lovable, navigate to the integration sections and ensure that Cospring MCP is set up. Finally, you can start building your app in Lovable. And again, Co-Wing V2, build an app in Lovable. Uh, and you know, if we click on one of these, for example, it's going to take us to a specific video building an app on Lovable. I haven't actually added any videos for Here we go. How to connect Codespring and Lovable. So, it then finds a specific video that walks you through how to connect Codepring with Lovable, which makes things really, really easy and helpful for people to find. So, I think basically what I've got here is proof of concept. This is a very very useful little tool that we've just created. Uh, we're only on day four. Um, moving forward there's some updates and optimizations I want to do. Um, so what I'm probably going to do now is have a look through here and figure out okay what's the next thing to work on uh and it's going to be advance sort of enhancements to our excuse me enhancements to our existing codebase um to make it sort of more powerful. I've also updated the UI a little bit for these lessons to make it a little bit nicer. We have the lesson area and I think maybe what we want to do is work on the system prompt so when it gives us a response it's better but also I want to have a summary like a thing we can generate an AI summary that shows up underneath that makes it a little bit like bullet points easier for people to understand what to do. Um, so it knows okay this is kind of what the video is about and then here's a summary on how to do it. Uh, the other thing which I think would be really useful is caching right? So if I say for example how to connect codes to cursor every time I do this we have to regenerate the embeddings reququery the database and then get the AI to generate a response. I think we should have a way where it like stores that response. The other thing is at a certain point we're probably going to want to need some way of just like allowing somebody to edit this. So if I've created it, this is obviously in the admin panel in this view. We want to have okay in the admin panel view a way of editing these responses and then saving it to cache which then means in the public view when we publish it then other people will be able to oops publish when we embed it which I don't think we've actually created the embedding system yet. Then uh it won't have the thing to edit it but it will always use the cache responses but it will then be quicker and cheaper for us to run. Um, so that's kind of where we got up to so far. I think we can also change the color. So we could come to I don't know like red for example and we can obviously change these here to red. So that's quite cool. We've got some basic customizations. Maybe we want to have the way where we actually um I also try to add it. So if I have that lower case, it also shows up here always as uppercase um which I think is just a bit cleaner. But at some point we'll have so you can add your own logo, some other bits and pieces. But we're really starting to progress through this quite quickly. I'm pretty impressed. Um, obviously if you guys would like to grab access to uh Codepring and build along with us, there is a link down below in the description. If you copy this invite link, you create an account for Cospring and buy the premium plan, which is $350 for a full year. Um, comes out to about £20 per month, $20 per month, uh, then you will get an additional 50,000 free credits. So, for context, when you're on the premium plan, you have 10,000 credits per month. But if you buy with the link down below, you'll get an extra 50,000 just for free just by using this invite code. And also, don't forget, if you're building and you're creating things uh with Codepring, if you create your own videos and you post your own videos on YouTube, and you create your own invite links, then you can share it. Invite other people, invite your friends, business partners, or anybody else to start using Codespring. And you can give them your invite link, and you will get 50,000 credits for referring them, and they will also get 50,000 credits for using your referral link. So uh definitely worth doing if you are interested in using codepring. The link is down below. Obviously I'll be back with day five and I will show you some of the other updates and invol enhancements that we work on.