Your AI Assistant Instructor: The epicshop mcp server
Kent C. Dodds
When you're going through a self-paced workshop, it'd be really nice if you had
somebody right next to you helping you understand things and answering your
questions as you go. That's exactly what
the Model Context Protocol (MCP) Server for the Epic Workshop
app enables. It allows you to take the AI assistant that you already have and
give it the context it needs to help you work through the workshop experience.
Setting up the MCP server in your editor is straightforward. In Cursor, you'll
find the MCP settings in the Cursor settings. Here's how to configure it:
The MCP server combines the power of AI with the structured learning environment
of the Epic Workshop. It's like having a knowledgeable mentor right next to you,
ready to:
Answer your questions
Guide you through exercises
Help you understand concepts
Test your knowledge
Compare your work with solutions
The AI has access to all the workshop materials, including your current
progress, making it uniquely positioned to provide relevant and contextual help.
The Epic Workshop MCP Server
transforms your self-paced learning experience by providing AI-powered
assistance that understands your workshop context. Whether you're working in
Cursor, VSCode, or other supported editors, you can now have a knowledgeable
guide right there with you, helping you understand and master the material.
Give it a try in your preferred editor, and let the AI help you go deeper into
your learning journey!
Share
When you're going through a self-paced workshop, it'd be really nice if you had somebody right next to you helping you understand things and answering your questions as you go. And that is why I built the Model Context Protocol Server, the MCP server for the Epic Workshop app, because it allows you to take the AI assistant that you already have and give it the context that it needs to be able to help you work through the workshop experience. I want to show you what this looks like right now and how to get it set up in your editor because this is a really critical piece of really understanding whatever it is you're learning in one of the Epic Workshop experiences. So let's take a look at how it looks in Cursor. You would do very similar things in other editors, but in Cursor we have the MCP settings in the Cursor settings.
Here I can add a custom MCP. I'm just going to paste this in, so we're going to call the server Epic Shop, that's what it's called, and then our command is npx args the dash y is just to auto-confirm that you want to install this and then this is the package that we're going to install. This will run locally on your machine and it has access to all of the things that you have access to as you work through the workshop. That includes the instructions of each workshop exercise, the diff of each exercise as well, it's like the diff between your current work in progress and each step of each exercise and also even the transcripts of the videos for all of the workshops that you're going through as a self-paced experience. And so by running it locally like this, it is accessing whatever you have access to.
So if you have purchased access to the videos, then it will have those as well. And so we'll save this, close that JSON file, and it'll just take a moment for this to get started. It might take a little bit because it is doing a whole NPM and it's installed behind the scenes and sometimes it does fail the first time I've noticed the says client closed. Just hit the little refresh icon here and it should start up a lot faster the next time because it should be cached now. And so you'll see a list of tools here in the future.
Hopefully, Cursor and other editors will support prompts and sampling and roots and a bunch of other really nice features, resources, that will have added support here. But because those aren't supported right now, a number of these things are just all included as tools. And so feel free to look through all of that if you want to, but you could take it a little bit further by just opening up a chat and saying, what can you do with the tools in the Epic Shop MCP server? And let's make sure that is spelled correctly, reduce the confusion. And so now it has the context of all the tools and the descriptions and everything.
And so it can tell us, hey, I can navigate and get context on the workshop. I can manage your playground for you. I can give you the difference between different steps or even your playground. I can give you quizzing practice and guide you and explain things to you. So, let's start with this first one.
Can you give me an outline of what's covered in this workshop, please? And here it's going to ask us if it can run the getWorkshopContext tool, and giving that approval, it's going to get all of the context for all the exercise steps and here it says okay you can we talk about data fetching and then dynamic promises optimistic UI suspense for images responsive UI and optimization so those are the exercises very cool you could of course run the workshop and pull it up and actually use the workshop app. But it's kind of cool that we have access to all of this here and that the AI can get that context from this MCP tool. So let's take this a little bit further. If you recall here, it has playground management.
So, what if we wanted to start working on responsive UI or suspense for images or optimistic UI? So, let's say, let's go to exercise three. Can you set my playground for exercise three? And here it's going to ask us if it can use the set playground tool. You can take a look at that.
It specifies the workshop directory, exercise number, step problem and the type. And so we're going to set our playground to that spot, and now if we take a look at our playground, come over here to Playground, and go to our Read Me, then we'll see, yep, we're on Optimistic UI. And let's say, Let's move on to the next step. Because it knows what step we're currently on, it can tell us, OK, so you were on step number one before. Now you're going to go on to step number two.
And we're still going to set it to the problem because that's where we start, is always at the problem and you work your way toward the solution. And that updates our playground. So that's pretty cool. You could, again, use the UI to do all of this, but it's kind of nice to use natural language right in your editor, which I think is pretty cool. Could you explain to me what we're supposed to do in this step and why?
And here, now it's going to get exercise context. So it's going to get all of the context for this entire exercise, not just this step, but it knows what step we're on. And so it can tell us, hey, you're supposed to use the useFormStatus hook, which is what we're talking about in this exercise. So that's pretty cool. And in addition to that, I can say maybe I've worked on it a little bit.
In fact, here, let's do a tiny bit of work here. I'm just looking for right here. Let's create a create button component. And do that, here we go. So we'll save that.
We haven't finished the exercise yet, and we can say, can you tell me my progress on this exercise? What do I have left to do? Now it's going to get the diff for our current progress. With that diff, you can actually take a look at that. It shows the resulting diff.
And it can tell me, oh, OK, so you've already created the button component and you used the useFormStatus. So you still have to, oh, it says that your diff is complete. It says that we're done. We are not actually quite done. So maybe we still need a little bit of work on this.
But hopefully, you get the idea that this can help supplement what you have access to in the actual workshop app. So let's take things a little bit further here and say, maybe I finished this exercise, but I'm not totally sure I understand everything. And so we can say, can you help me understand what the use form status hook is for. And it can then explain that. And if I have any questions about any of its output, I can ask those things.
Because again, it has all of the context from the instructions to the code to the the video transcripts themselves and So everything that you would need or the AI would need to help you understand this stuff and taking it even further Let's say all right. I think I understand it. Could you quiz me on this exercise? And now it can actually retrieve the quiz instructions, which is basically a prompt that I have written to have it give you quiz questions for you to answer, and it will make sure that you understand this material. So let's say, okay, what's the main purpose of the useOptimistic hook in React?
Why can't you use state? And I can say, I'm actually not totally sure. Can you help me understand the answer to this question? Or you could, of course, answer the question and it will correct your understanding. Why not just use state?
Why not use optimist? Or what does use optimistic do? And yeah, let's say, let's go ahead and move on to the next question. And it has been instructed to ask you progressive questions to help you understand this material. So what does useFormStatusHook provide, and why is it important as a child of the form element?
And so here I can say, the form element is effectively a context provider for the state of the form, and use form status provides that state of the form. So you can render a reasonable UI for the user as the form is being interacted with. So let's see what it says about my answer. Hopefully I got it right. Excellent answer, all right, you're right.
Great, next question, here it is. Imagine you want to show, and so on and so forth. So those are some of the things, let's make sure I covered everything because I don't want to forget to mention stuff. So coming back up here, we've covered guidance and explanations, we covered quizzing, we covered the diff. You can actually also ask it to give you a difference between one step and another.
So if Kelly, the coworker, made some changes and you're like, whoa, whoa, hold on. What changed between exercise two, step two, solution and exercise three, step one, problem? Like there were some changes between these last two pieces and it can describe what those changes were for you, which is pretty cool. Also setting the playground to any step and exercise and giving context on the whole workshop as a whole. I think this is a really awesome way to go a little bit deeper into the Epic Workshop experience.
And I hope that you give it a try in whatever editor you're using. You can, in fact, use this MCP server in Cloud as well as Raycast. I've tried that too. And so wherever you are, you can just ask, hey, what about this thing in that workshop? And it can take the context that I have created myself in creating all these instructions for you and use that to help you go deeper on your level of understanding.
And of course, the model itself has been trained on a lot of this material as well. It has all the React docs or whatever documentation as well, which is really also quite helpful. So it's just like having somebody right next to you helping you work through this workshop experience. And I hope it really helps you as you're learning this stuff so that you can just assimilate or accumulate all of these skills and build some really awesome things. So I hope you enjoy the Epic Workshop MCP Server.
Kent C. Dodds