Get Started with EpicAI Workshops
Let's take a tour of the Epic Workshop App so you can have the best experience possible!
Learn more at /get-started.
Welcome to Epic AI. My name is Kent C. Dodds, and I'm going to show you what you can expect for this thing that you just bought. So this is the Getting Started Guide. If you go to epicai.pro.com.
That's a hyphen between those two. Then this page could get updated from the time that I record this video. So I recommend that you pull that up as well if you haven't already looked through it. The available workshops will change. There are a couple that we're actually actively adding as I'm recording this video for the available workshops and the cohort that's going on right now.
This is where you're going to see the stuff that you have access to. You can find links to the material right here. Also the deployed version of the applications. You can't actually do anything in these. You should be able to watch videos and stuff in here, but yeah, this isn't the full experience.
You want to do it locally. But it can be useful to reference that if you need to. And then the setup instructions are linked right here as well. And we'll do that here in just a second. I'll take you through that experience.
This video is actually where you're watching this, perhaps. This is an old video, and we're going to be replacing the one I'm recording right now with this. So I'm going to take you through the setup instructions, so I'm going to skip over this stuff. I'll show you the Workshop structure and running the Workshop. I'm going to talk about how everything works.
We'll go through the first lesson together so that you get an idea of what that experience is like. We'll talk about the file list, setting the playground, playground's really important, troubleshooting, you'll want to take a look at this if you're having trouble with the editor opening or the right editor opening from the Workshop app and the emoji key. We've got a couple of characters that we're following through. The ones you'll see most are Peter the product manager, Kelly the coworker, and Cody the koala. You'll occasionally also see Olivia the owl, Dominic the document, these others, Marty the money bag.
But yeah, these emoji are spread throughout the workshop experience so you can laser in on the particular topic. So Peter's going to tell you the use cases and the user experience, and that's the reason we do any of this. Cody is going to say, hey, this is where you're supposed to be working. So these emojis just make it easier for your eye to see what you're actually trying to accomplish. Okay.
So let's set up. We're going to actually do the advanced features workshop here. Actually, you know what? It just occurred to me, my account doesn't have access to that one. So we'll do the beginners instead.
Okay, so the MCP Fundamentals Workshop. First, you want to star this if you're signed in. I'm not signed in, so I'm not going to star it, but star the repo, and then come down to the setup section. Make sure you read, go through the pre-workshop resources and everything, read the system requirements, make sure you have all of those set up, and then you can copy this. And I'm going to open up my terminal, and I'm going to go to my desktop.
Typically I'd put this in like a code directory or something like that, wherever you put your code, but I'll just stick it in my desktop. And we're going to paste that. This is going to clone the repository. Here, let's actually big screen this thing. This is going to clone the repository, and then it's going to CD into that repository and then run the setup script.
The setup script is first going to validate that you have the right version of Node, Git, and NPM installed. And if you don't, then you're going to get an error. And then it's going to run an installation for the project of all the dependencies. We also have a post install in lots of these workshops to install the workshop app itself. So you have the workshop material that you're going to be working on, and we've got dependencies for those, but then there's also the workshop app, which lives in the Epic Shop directory, and so we install dependencies for those.
Once that's done, each workshop has custom setup that depends on each one of those, so we're going to run that custom setup, and what this one did is it warms up the cache, just so that your app is as fast as possible. It generates some diffs, so you can see the diffs really fast. That also is part of the cache warming. And this workshop also runs some seed scripts for the database so that you have some data in your databases. So that's the seating.
And then we also set up the first problem app as the playground. Then it runs any validation, and workshop setup is complete. So now I'm going to open this up in my editor, which is VS Code. I recommend VS Code or Cursor or some other editor that has some AI assistant that's really really useful and in this day and age you definitely want to be using an AI assistant for your stuff. So let me just fix my editor settings here.
There we go. Okay, so that way you can all see it really, really well. So let's pop open the terminal here and we're going to run npm start. This is going to start the workshop app. You've got a couple of options of things that you can do here.
Typically, you're just going to want to say, open the workshop app. Occasionally, if you keep an eye on this output, you'll see a notice that there has been an update. And if that happens, then you can just hit the U key and that will auto update your version of the Workshop app. Sometimes that doesn't work depending on your system. And so In that case, you can say Q and then you can run NPX.
Here, we can run this right here. NPX prefix update, and that will perform the update with the server not running. It should be a little bit safer as well. Okay, so let's start up again. You also notice you have a Cody kudos.
If you hit C, then Cody will say something nice for you. It's kind of fun. Okay, great. So you can also restart the workshop app. I find this to be useful sometimes if I've started up a bunch of Projects or things within the workshop app.
I want to stop them all at once or something You hit the R key and that will restart your workshop app. Okay, so I'm gonna hit the O key This is what you're going to be doing most of the time, is opening the Workshop app. Sometimes the first time it opens up takes a second because we're doing a lot of stuff behind the scenes to make the whole experience fast. After this, the experience should be very fast. Okay, so the workshop is all here.
All of the material is in here. You can look at the exercises, look at the instructions, and you can even follow some of these instructions and everything. But you'll notice we get this big banner at the top that says, welcome to Epic AI Pro workshop app, and join Epic AI Pro and log in. So we need to authenticate our workshop app. We are not logged in currently.
So I'm going to click on log in. This will take us to the log in screen. And we need to authenticate our device. Typically, when you're logging into an app or something, you're going to log in with the browser, but we actually authenticate your entire device. So, you can open this in any browser and that will be authenticated.
There's a lot of stuff going on behind the scenes. So, here we have a verification code. This is a security measure. So you just look at ODSKUNK21. You don't have to copy it or anything.
Once you retrieve that, then you can say verify auth code. They'll open up in a new tab and you get the ODSKUNK21. Great. Confirm device and device activation successful. So now we come back here and we are now logged in.
You can verify that by looking at your little profile picture right there. We can go to your account and here we've got, my account is logged in with me plus Cody at kensydance.com. You can also connect to discord in here, manage your account. This will take you over to your profile on Epic AI. Whoops, here we go.
And you can also manage your preferences. So if you prefer a certain video resolution, you never want it to drop below 4K. Like I just want 4K all the time. Or I've got like a pretty slow network connection. We're gonna make sure it never goes above 1080.
So you can control that. You can increase the font size if you need a little bit of assistance in that way. You can also control whether or not you show up in this list of people who are actively working in the workshop. So if you opt out of presence features, then your face goes away. I would like you to keep it on though, because I think it's fun and it just makes us feel less lonely.
So then you can also enable saving the playground. I can describe that later. And I'm gonna actually uncheck that as well. I'll talk about that one later too. So let's get started over here on this homepage.
You're gonna have some description in here, you'll have a video, you can set this. I already had some preferences set, So I set it to 3x, but you can change it. I can talk fast sometimes, so you might set it to 0.75. But yeah, so change it to whatever you feel most comfortable with. You can watch these, you have the transcripts as well that you can read through that.
And in fact, you can even search. So here, a little bit, so a little bit, and Command F will actually find. So you can actually search through the transcript even if it's not expanded, which That's kind of handy. I'll show you better ways to do that here in a second. But yeah, you read through all of these instructions and then come here to the first exercise.
Now you notice I actually have some blue lines here. That's actually measuring my progress through this workshop because I've already gone through some of these exercises. So you can go through these yourself and click on Start Learning and then navigate in this way. Or you can at any time click this little icon. This will continue to the next lesson.
If you expand this, that says continue the next lesson. So I'm gonna click on that, and it looks like I finished reading through the resources instructions, and I checked that off right here, and so now I can continue on to this exercise. So, couple of things going on with each exercise that you go into. Right now we are in what is called an exercise step. So, this is considered an exercise, this whole thing right here, and then these are individual steps of the exercise.
So in the first step, we're going to be looking at the problem, and then there's the solution. There are two parts to each exercise step. It's a problem-solution pair. So you watch the video to get an understanding of what's going on, and you read the instructions and then you work on it. But wait, you don't want to do what you might think is the more natural thing to do.
This workshop app does a lot for you. So let me show you how a lot of people sometimes think this is supposed to work. So they'll go to, oh, okay, exercises. That's where I'm going to go. And I'm in exercise three, resources.
And I guess I want to work on the problem. And I'll come over here and, okay, well, it's resources. I guess that's where I'm going to work. Okay, good. I found the instructions.
This is not how you work in the Workshop app. That's a lot of navigating and nonsense that you have to deal with. You don't wanna have to do that. So instead, the Workshop app will actually manage a playground for you. This playground directory is where you're going to be spending all of your time, and you don't have to troll through the exercises directory at all.
So what that means is that on each exercise step, as you go through this, you're gonna get this little thing flashing in your face. And in fact, actually, let me go back here. What if I decide, no, I do want to change this. What, coming over here, we're going to get this warning, change is detected in the exercises directory. And you can come over here to learn more and get an idea of how everything that I've just told you works.
And so then I'm going to say, no, I understand. Or no, don't check that. You don't under or you do understand, but you want to be warned if you make this mistake. So we're going to come back here. We'll save that again.
And now that banner goes away. So if you ever change anything in the exercises directory you should see that banner. Don't, that means that you're doing something wrong. So instead what you do is you say hey I want to set my playground up for this exercise step And so we'll click on set to playground and that will update our playground. So if I come over here and I'm going to say let's go to the sources directory and I'm going to open this up.
This is set up for the first exercise but I'm working on exercise 3 step 1. So I'll click on set to playground and that's going to update my Playground. I come over here and it's completely different. I have new instructions, and I can follow those instructions through here and work through those. Now, with all of that set, I want to actually see the results of the stuff that I'm working on.
And the Workshop app effectively allows you to just say, start an app, and it will run the dev script for your playground. So if we look at the package.json, we'll see we have a dev script right here. The particulars of how all of this works is not really important. You can dive into it if you want to. In this case, that dev script is right here and it's doing a bunch of proxying of servers and stuff automatically for you.
You don't need to worry about that because the workshop app is just going to make it work for you. And so what that does when it is finally finished is it in the Epic AI MCP workshops, it opens up the MCP inspector. This is a third party software we're using it as a dependency to facilitate our learning experience. I recommend you either scrunch this over or you pop this open in a new tab because you want the real estate for that. We can connect to our server and now we can list our tools, we could do whatever else and each exercise I'm going to show you what you're supposed to do with the inspector.
So I'm not going to dive into that here. So that's how you start that up. Sometimes you might need to restart And you might pull up your output right here and find, oh yeah, there's like some sort of error going on in here. So there are a couple things that you could do. You can press the R key like we did earlier to restart the entire workshop app, or if it's just the inspector that you need to add or restart or like you change some code in your playground or something then you can stop the app and start it again and that will effectively restart the app and You can see the output right in here.
We exited and then we hit start again and so it's starting the inspector. And here we are, now we've got the inspector again. Pro tip, if you hold down the option key, then that will turn this button into a restart out button and so that will do stop and then start for you So you don't have to do that manually, which is kind of nice. So this is pretty much where you're going to be working through most of the time. If I were to work on this myself as like an exercise, and In fact, the way that I work on it when I'm showing you in these videos is I typically will have the editor open just to the playground.
And so what I will typically do is I'll open up with code, playground, and I'll open it up here. And now I don't have any of this extra stuff around like Epic Shop or the exercises or anything. I'm just focused on the Playground right here. And That is quite nice because it allows me to do command P and I can search for tools and I just get one tools right there. If I'm in here and I say tools, I got all the exercise tools.
So I typically recommend opening up the playground in its own editor. Now we can go even further and say, okay, so I'm isolated to just this exercise step, but what changes in this exercise step? There are a whole bunch of files that aren't relevant to what we're doing. So I can click the files button down here and that will allow me to open the relevant files. I can open all of the files and the workshop app will actually open each one of them.
And so now here, both of the workshops, or both of the files that we're going to be working in. And then inside of here, I'll have the instructions and I can follow those instructions. I make changes to it. And then I'm going to connect. As I make changes, I might, yeah, we have errors sometimes that we might need to reconnect or something.
And That is the full experience. You have your isolated playground instance of your editor. You have the files that you can click on in here to open the relevant files and help you as you're working through all of this material. So you watch the video, you scroll through this, you open up the relevant files, you make some changes, you start the playground. Let's say that you've worked through a bunch of stuff and everything's broken.
You're like, I can't even remember what it, what was it this like before I even started working? That's what the problem tab is for. So this is what this exercise step looked like before you started making your changes. I don't expect that you'll actually use this very often, but it's there if you need it. How did this behave before I made any changes?
That's what the problem tab is for. The solution tab is, what is this supposed to look like when I'm done? And so you start up that app and you can say, okay, here's the way that my version of this works. Let me compare that to the way the solution works and make sure that like, hey, it's not working for me. Let me make sure that it actually does work in the solution and we can run the tool and boom success.
Okay is mine doing that? Let me make sure whatever and so that is what the problem solution tabs are for You also have the test tab and this allows you to run tests. Not all workshops are going to have tests for every exercise. Some things are really, really difficult to test. You're welcome to make contributions if you can find a good way to test things.
But if that test tab appears, it's because there are tests for this exercise step. And so this will run the test against your solution, your work in progress, and you'll have Alfred the alert in here letting you know when you're missing stuff. And you can see all of that. Okay, we've got one test that failed, two tests that passed, and you can work through things until you get all of these tests passing. So that is the test tab.
And then you also have the diff tab. So if you get totally stuck and you're like, I am positive, I'm doing exactly what he says, but it's still not working. The tests are not passing, my playground's not doing what the solution is doing. I don't know what to do here. The diff tab is there to help you.
And so If you get stuck, you can pull up the diff tab and it will take a diff of your work in progress with the solution. And you can even change these and say like, what is this, what is the whole diff? Like maybe I made some changes I want to see, what is the difference between the problem and solution here? And that can be quite helpful. So if you get totally stuck, then that is what I would suggest is to go over here to the diff tab and you can take a look at the difference between your work in progress and the solution.
And then here we have the chat tab. And this is just loading up everything from the Discord and showing you what people are chatting about. You can click on this to open that in a new tab or in the browser, or you can click on the Discord icon and that will open this question up right in the Discord app, which of course is always going to check for updates. That's like its MO. That's how it works.
It's kind of, there you go. And boom, there it is. Ta-da. So that is the chat tab. That can be quite useful and if you get stuck on anything that can be helpful.
As you're working through this, if you have the MCP or the the workshop MCP server installed then you can actually ask it questions so you can say How am I doing on my progress with the current exercise? And It will use the Epic Workshop MCP server to analyze your work in progress. So it's going to take a diff of your current exercise progress. It actually effectively is just grabbing this right here and then feeding that to the LLM and then the LLM can decide or can kind of instruct you and guide you through that. So then the other another cool thing that you can do with the MCP server is could you quiz me on exercise three, please?
And it will get the information that it needs to about exercise three that includes the transcripts and the instructions and everything. And then it also gets instructions on how to quiz you properly. And it will just ask you questions about the current exercise to validate your understanding of what you are supposed to learn in this exercise. So I do recommend that you install the MCP server for the Epic Workshop app. I'll show you really quickly how I installed that in VS Code, but it's going to be different for every editor and stuff.
But, yeah, if we go to MCP list servers, and let's go to Epic Shop and show configuration. It's a standard IOS server. You use NPX with the command flag of Y, and then it's Epic Web Workshop MCP at latest. So however you do that in your editor, that's how you get the MCP server installed. And then the MCP server can do a whole bunch of stuff.
It can even log you in and update your progress and all of that stuff. Pretty cool stuff. And it knows how to quiz you on stuff, which is also quite nice. So those are some things that you can use to kind of get you unstuck as you're working through the material. You use the playground to verify your version of things behavior.
You use the solution to compare what you're doing to the solution. Use the test to verify things are working. If the test fails, that doesn't necessarily mean that your implementation is wrong. It could, but it could mean any number of other things. The test is not entirely complete or something like that as well.
There are a lot of different ways to do the same thing. The Diff tab, if you get totally stuck, chat if you need to talk with another person, and the MCP server if you just want to talk with an AI and ask it questions. And you can even say, I'm actually not sure about this, could you explain that to me? And the AI has all the context it needs to be able to answer any questions that you have about the exercises as well. So that is quite helpful.
Okay, great. So let's see, I think we've covered most things. Let me just double check that we're not missing anything. Yeah, we've got the setup script, we talked about that, talked about the structure, talked about running the workshop app. Oh yeah, so you finish the exercise, you're happy with it, you go to the next.
And once you get to the solution page, you can watch my solution is basically just me walking through the same thing that you just did. And then when you finish with that, you go mark as complete. You can also just literally just click on this over and over again and it will continue to take you to the right place. If you're in the right place already, it will just flash this and it will even focus it so you can then use the space bar or hit enter and it will mark it as complete. Then you hit next with that and it'll just take you to the next thing that you have not yet completed.
So you got a couple options for your navigation here. You can use this navigation and you see your progress right there. You can use this to continue to the next lesson. You'll notice actually if you're on the problem, or here, let's back it up. So this is the next one I need to do.
I hit continue to next lesson, it'll take me to the problem. If I'm already there, continue to next lesson, it'll take me to the solution. And then I click here and it says, oh, this is where you're supposed to be. You're supposed to finish this one, and then we mark that as complete. So the solutions are the only ones that actually have that option because you have the problem and the solution.
They are a pair. Okay, sweet. So you'll notice when we got to this step, Set to Playground showed up again. And so we gotta click that again. Now the reason that you have to click it every time is because we don't want to erase your work in progress, even if you're just navigating around.
Like I don't want to automatically do it for you because you could lose your work in progress. If you're like, wait, what did we do over there? And you lose your stuff. And so you have to manually click on set to playground every time. So we click set to playground and now this all gets updated and that's awesome.
But one thing that some people are really concerned about is maybe they do have some work in progress and they're ready to move on to the next one, but they want to save that work in progress. And so that's what that option was. If we come back over here to our settings, We can go to manage your preferences, enable saving playground, we'll update that. Then coming back here, if I hit set to playground, then it first saves my current work in progress in a saved playgrounds directory. In here then, I can look at all of the playgrounds that have been saved and review those till the end of time.
So every single time I save the playground, it'll stick the playground into there and I can just see what I was doing at that point in time. I should probably add saved playgrounds to the gitignore so you don't have to worry about that. But anyway, that is, yeah, that's that option. I personally don't like that. I still don't understand why people ask me to add that.
But enough people asked that I am going to add. Another thing that people have asked that I'm not going to add is some of these links that you have, for example, this MCP spec resources, this is going to open in your current tab. And some people don't like that. You can hit the back button, it will restore your scroll position and stuff, so I'm not sure. But some people might know that you can right click and say open in new tab, but that's super annoying, right?
So another thing you can do is you can middle click or if you're on a trackpad like me, you do three fingers. Whoops, three fingers. No, maybe not three fingers. Oh, oh, I must've turned that off. But you can middle click on some mouses and then you can also command click, and that will open up in a new tab.
You can shift click, that'll open a new window. So, couple of handy tips for you there. Yeah, I'm not gonna change this to open it to a new tab. If it does for you, then I guess I finally caved. But this one, when you see the arrow, it actually will open in a new tab.
In this case, it makes a lot of sense. This is the EpicAI website. You can go through the videos on here as well. I don't recommend it. Just do it all here in the integrated experience.
It's a much better experience altogether. OK, great. I think that covers just about everything. Let me talk about the troubleshooting thing. So as you noticed in here, when you go Files, you can click on this.
It will open up in my editor and it's like that's pretty cool and in fact it even opens up right where the comments are so you shouldn't ever have to hunt around for that stuff usually unless it's a really big file and there are a bunch of these. But the trick here is how do I know which editor to open? You can dive into the source code because this workshop app is open source. But basically, I have a big list of all the different editors and where they are located on the file system. And I just go through them and say, is this one running?
Is this one running? Is this one running? The first one that is running, that is actively running, it's going to open up. And so if you have both cursor and VS Code open, I think cursor comes first. So it says, oh, you're in cursor, great.
Let me open up in cursor. So that's how it works. If you want to, you just make sure you're only running one editor. But if you still can't get it to work for some reason, then you do have a workaround. And that is to set the Epic Shop Editor environment variable in your .env.
So if you come over here to the root of the repository, add a .env file, and stick Epic Shop Editor, then you just update the path to the editor, and it will open. So here, for me, I can actually have cursor in my path. So if I save that, I will need to restart the workshop app because it reads that at startup time. But with that restarted now, It should open in cursor instead. So I click on this and opening up, opening up, and boom, here's cursor.
So you can control like very specifically which editor it opens up in by using the Epic Shop Editor feature. And I'm going to delete that because I'm happy with the way that it selects things. OK, great. Let's see if there's anything else yet. We talked about everything else.
So I hope that helps you get a pretty good understanding of what the flow is for working through the Workshop app as a part of Epic AI and all of the other Epic apps, all the Epic React, Epic Web. And I appreciate that you took the time to watch this video. Inevitably, some people see that this video is kind of long and they just skip it. But it's important for you to understand this so that you can be as effective as possible with using this workshop app. I hope that you really love the stuff that you learn here.
Thank you so much for joining me.