So I'm gonna show you how to get two of my favorite MCP set up. And the two are ref dot tools and the other one's called Exa AI. And the reason why I like ref dot tools compared to every other MCP that you could use to search for documentation is
context rot. So that's when the LLMs start getting really dumb as soon as they try to help you out with information. And if you don't know, whenever you're using a language model, there's a cutoff date for all the data that they have trained so far. And so that's why I choose these two different MCP servers because they're the most efficient. If you've ever used any other MCP server,
all of a sudden, you're gonna start slamming in a whole bunch of tokens from documentation. I used to do that before. I used to use up almost a 100 k tokens just feeding in tons of documentation for the new AI SDK,
my authentication,
my database provider, all these extra rules. But the LLMs actually operate the best when they have
just the right information
for just the right specific task.
And so in comes ref dot tools.
So this actually provides the actual context that's needed for these agents.
And the way that it works is it'll grab public documentation
and any private documentation that you also give it as well. PDFs, GitHub repos, any other sites. It will create them and indexes and actually make them available in Cloud Code,
in Droid,
in Codex,
in Cursor, and those are the four that we're gonna go ahead and cover today as far as trying to get this installed for us to make it work. A lot of times when you're doing tool calling, what ends up happening is that
there's gonna be multiple requests and multiple steps that happen along the way.
And ref dot tools is kinda made for this agentic search so it doesn't kill your context window. So this combined with the other one called XAI,
this actually has a really high quality fast search for specifically coding tasks.
And if you combine these two together, you're gonna be
cooking. And I have shipped features
starting in plan mode using these two MCP servers to help gather the right context. And by the time it's writing the code, it's almost like as if I hired several developers to read the documentation
and and implement the code for us. How do we go ahead and configure them? So in ref dot tools, they actually make it really easy for you. All you do is just go ahead and once you've already created an account,
uh, you just go to MCP and in Cloud Code, all we're gonna do is install it via command line. So this API key here is what you're gonna actually put into this command. So once you hit copy, we're gonna open the terminal now.
And then I'm just gonna go ahead and just paste this in here. Now it says added the MCP server with ref and has a local config headers of this. And so this means that the actual API keys here, and I think it's gonna be able to do that. So now if I run Claude
and I run slash m c p, it's gonna try to connect. Now we actually have the ref dot tools actually connected for us. And we have to like quit an existing session like we did and try to log in again.
And so you'll see it available once you do cloud mcps, uh, space list. So because it's in my root user,
it's gonna be available to any new project I start. So don't be afraid if you add this in, you don't have to keep adding this into every project. You just have to add it in once and once you add it in here, you're pretty much good to go. By the way, if you notice, we actually have the API key currently in the MCP server.
You typically don't wanna check those types of things into your project as code because that's gonna be available to everyone. So if you have the repo that's public,
anyone who clones that can use your specific key and eat up all your credits as an FYI. So the next one we wanna go ahead and get configured is called exa. The command they give us is claud m c p add exa and the same with our API key. So what we're gonna go ahead and do is hit copy here. Then I'm gonna go back to cloud code in the terminal here. And what we wanna do is go ahead and place this thing called here, this is your API key.
And so in this section here, what we do is just gonna go ahead and delete.
And then I'm gonna grab the API key from the following API dashboard. If you've not generated a key, you can go into here and create a new key. So we can create one called,
Claude
code
YOLOBRO.
And let's go ahead and create the key. And then I'm gonna go ahead and copy this one. And then I'm gonna go into my terminal now.
And then I'm just gonna go ahead and paste that key there. I'm just gonna go ahead and hit enter. It's gonna go ahead. It's now added the MCP server with the following command to the local config. And so now it's actually the file that's modified is in my local folder here. So you may notice that it could take a while for it to connect, and you can always just do Claude
MCP
list.
And that'll basically show you
what's actually
currently active and available as far as MCP servers. So Haiku has just come out. It's the 4.5 model supposed to act really fast. And why don't we just try using the the latest model for a task that I'm trying to do? And in this case, we're basically just gonna ask the model to see if you can use the latest tailwind before and search through our code base. My code base isn't
really fully utilizing the power of tailwind before.
And I want you to take a look at my code
at all the different places because I think I have a lot of stuff that I've hard coded in
for tail and v three and I need it to be all unified. So we're taking advantage of the new tail and v four system.
I want you to use ref and use exit MCPs first to read through the documentation to understand how this type of system works,
as well as reading through all the different parts of my code to understand the current design system.
And we should be using Tailwind v four along with chat c n. So right now we're basically having Claude code look through my entire app. And if you don't know what my app currently does, it's called anime leak. It allows you to upload an image, any real image of the real world. And you'll actually start to see like basically
anime
start leaking into the photo, which is kind of fun. So you can see me right here with my sandwich got replaced with this nice hand drawn kind of really whimsical type of thing. So in here you can kind of see all the different generations I've had, and then it lets you like share them with friends and so forth. In my original
actual design, everything was in light mode. And since I forked this project from my friend Mickey,
who currently works over at Convex,
it was in this specific color theme. So the landing page as you can see is kinda a little bit more dark theme and it has these different types of things that are going on. And we wanna have more of like a consistency for design hierarchy and everything here. So right now, Cloud Code is actually searching through and it's gonna try to understand the code base fully. Now it's researching Tailwind Design Systems.
And I don't know if it's actually fully utilizing the MCP's here. So now it's actually saying, yes, I want to use these different tools now to use the ref documentation. So the query is gonna do is Tailwind v four CSS variables design tokens customization,
and yes,
and don't ask again for this MCP. And the reason why I'm thinking Haiku is the right thing for this type of task is one, it's a lot cheaper. And for this type of task, I don't need a lot of intelligence. I just need a lot of work to be done. And so by handing this off to an agentic model like this, it's it's gonna be able to gather a lot of research
in one side of it, but also look through the code and and look for specific patterns of things which is what I want to do. And then the utilizing of these MCP's will keep the documentation very light, but grab enough information that it needs to know to do this type of pattern matching which is gonna be really awesome here. So so while that's going, what I'm gonna go ahead and do is pull this up in cursor and kinda show you how I configured those there. We're gonna go to this little gear here and they have actually dedicated tools and MCPs.
If you scroll down, these are all the MCP servers I have connected. You can just hit add custom MCP server and this is a JSON file that actually has everything configured here. And what you wanna go ahead and do is you'll go to the the website where it says use ref
they're gonna give you this exact thing to paste into cursor. Add the cursor in one click. And if we go into here, it's actually gonna say, do you want to install the MCP servers?
And you see ref mentioned here with the following URL and the API key. So this already has the API baked
in and you hit install.
Once you hit install, it's gonna actually show up just like it does here. Pretty simple. It's really nice. So we're gonna basically do the same thing with Exa. If we go back to Exa,
and we go to
the dashboard,
and we go to Exa MCP. So the values that we wanna grab is gonna be this one here. See Exa,
and then has this little bracket here and this bracket here. This is really really important because at the higher level which is MCP servers,
that's your collection of all of your MCP servers. So we just get this value just like that. And you see that there's an additional thing that's added to my specific MCP server which is this thing here. It's the Exa API key equals
and this is the part where you wanna grab that API key from Exa and then put it into this last section here. And so when you open your project, you just make sure to toggle on and this is green and that means you're pretty much good to go. And I'm gonna give the agent the same type of task to use the same MCP service as well. I'm just gonna copy this exact
actual prompt and put this inside the cursor, so that we can kinda see them both kinda cook right here. So so now, what we can do as well is we can put the agent into plan mode. So what happens in plan mode is no code gets written, but then we'll have all this analysis done and we'll have MCP's be able to be utilized inside of cursor.
And so cursor is gonna do all the work for us, which is really nice. If I do command e, this is gonna pop up a dedicated
specific window for our agents,
so that we can do this type of planning. Now, we get a straight up dedicated window
to watch the agent really work. And to me, this is like a really nice way to work as you can kinda see it's a little more spread out. And as we are gonna start modifying files or working with anything in the code base, we have what I feel like is a much more elegant view,
all self contained in in one type of thing. So to get to this agent window, you have to hit command e. You And may have to enable it in the settings as well. So as you can kinda see it's narrowing down the scope as it discovers information to make sure that everything is the latest information is up to date. And so this is a lot more efficient than web search after web search after web search. Sometimes they'll run a parallel tool call to do a lot of web search and then you'll start to flood
the context window and a lot of times these, you know, agents will have to start pruning information.
And sometimes you can have really relevant information pruned out. And that's why I prefer these two MCP's. One of my favorite things about cursor is how fast it is at gathering contacts and information throughout my file system.
Because if we go back to Cloud Code right now, while it's still running in the terminal, it is still running all these different tasks. We're still on the research side and you can see all the different tool calls it's been doing to get all the relevant information that it needs for this task.
And it takes a little while, right? So it's now auditing current code base for our code values, create a comprehensive design token system and global dot CSS. But this is actually kind of already giving us a plan here. So I have a comprehensive understand. Let me update the to do list and create a detailed implementation plan. So it actually created a plan for us without me actually asking for it, which is really nice. Right? So this is my current state. My global CSS is already using Tailwind v four correctly. However, there are opportunities to expand and unify the system. But as you vibe code stuff, the agents are gonna prefer what's in their training set, so they're gonna dump in a bunch of v three
type of systems, but here's the gaps to address. So there's like missing semantic tokens, means hard coded values are scattered,
magic numbers and components,
and all this kind of stuff that we probably don't want. So there's a couple phases that it wants to do here. So it's like a unified design system starts here.
Uh, phase two to extract the component tokens,
and then three is to fix the hard code values.
And then four is to create a tailwind config for advanced customization, which is gonna be really nice. So now, it's asking me, would you like me to proceed with implementing this plan? I recommend we start with phase one. I should be able to look at slash context.
And we're gonna get a visualization right now of how our context is being used. So as of now, with these tool calls, can kinda see
it only used like less than a thousand tokens for all these different tool calls, which is amazing. So our MCP servers and tool calls only use a total of 2,800
tokens, which is only 1.4%
of the context window. And you can see the value in just these two mcps alone on a refactoring task which requires touching a lot of files, reading them in,
and, you know, doing this type of comparison work. I'm super impressed with this type of system and I found extremely good consistency combining the two. And let's just go ahead and check and see what's cursor is doing. I mean, cursor probably finished way earlier and you can see the token efficiency in cursor. He used 98,000 tokens. So one of the cool things about cursor's plan mode, which is what we didn't really compare here in Cloud Code, is the fact that it's now asking me a couple more questions. Like, should we handle semantic scope of brand colors and then the cream background? But the last thing we wanna go ahead and get set up here is getting this set up
probably in codecs and also getting this set up in a fact, a droid factory.
So for codecs, we're just gonna go ahead and go to what the instructions say for codecs. So in use ref here,
they have like any MCP's clients. You can say find your NCP client for use ref, and we can say codecs here, and they'll say codecs CLI. So in codecs CLI, they give us the actual documentation reference here. And so for here, it says codecs is configured in a config dot toml. So if I go to terminal,
and I just open up any tab,
codecs m c p
list.
And we can see I currently have playwright installed. So I don't currently have the x o one installed. What I can do is I usually just copy this here
and then go back to my terminal.
You can even do this in cursor. It's probably just easier to just open up the terminal in cursor. So just in here, just type in cursor,
cursor and then hit this.
And this is actually gonna take us exactly to where this specific file is in our file system. So this one says to enable ref, update your TOML to include this. We're just gonna copy this. We're gonna go back in the cursor. We're gonna paste.
And we still need to put our API key here from the use ref. So since we already had it configured in cursor, what I'm gonna go ahead and do is just scroll down to where it says tools MCP here on the side. And then I'm gonna go to ref and hit this little pencil. And so the pencil will already have ref listed with our API key. I'm gonna copy this API key and then in here in versus config dot toml where we're at, I'm just gonna go ahead and
just delete this here
and then paste it in here.
I'm gonna go ahead and hit save and then now we should have it currently saved. So if I type in codecs MCP
list, we should now be able to see that the MCP server is currently configured in here. So use
ref MCP
to look up the
latest on tailwind v four and see if there are any gaps in my
implementation.
Okay. So we're just gonna hit enter.
And so now it's gonna go ahead and send that task off and kinda do some research using the OpenAI Codex version. It's actually you can see here ref dot ref research documentation.
This is actually now using the MCP that's built in. And so we're gonna do the same thing for Exa, and then we're gonna go back into here where it says Exa MCP.
And then in here, we're gonna just type in like codecs. I'm gonna copy this URL since this already works inside of cursor. We're just gonna do the same thing and make it work inside of the config dot toml or codecs. And what I'm gonna go ahead and do is just paste this key right into here. So this is exactly the same key we had inside of cursor.
And you can kinda see with that little question mark, that's a little parameter that we're gonna be passing in that shows the x API key. I'm gonna open up a new terminal window and say codecs MCP list.
And now we should be able to see the exa MCP
currently listed and status is enabled. If I paste this in,
and then I should be able to get some more prompts or something back saying, hey, want to use this MCP and I just should be able to give us some approval. So for the factory droid, if you're using droid as an agent, what you wanna go ahead and do is kinda do something similar. I'm gonna show you real quick. So it's called cursor and then tld
slash dot factory,
and it's gonna be under slash m c p json. So when I do that, what what's gonna happen now is now we have this specific thing opened up inside of cursor. This allows us to actually edit the file and save it all in one place, which is really really nice. So all you have to do is get your configuration from cursor.
And if you were getting it from cursor, all you do is go in here, hit tools MCP,
go into this section, and all you have to do is literally copy this from this blue ref to here to this including this little blue line in that. And then you go back over here where it says MCP factory JSON right up there.
And then you just paste it right in there and you hit save. Once you have these two MCP servers,
I think what's gonna happen for your AI coding is that it's significantly gonna get better. But you actually have to call them specifically saying use ref MCP
and then use exa MCP or use exa code for MCP.
And so the other pro tip that I wanna give you before we kinda close out the video is the fact that you want to make sure that you use them in plan mode. So in any type of planning mode, you can usually hit shift tab once or twice. You'll see that all of these agents have like a spec mode, a planning mode of some sort. Make sure you use those specific keywords so that it gathers up all that specific context you want before you start writing code. This is at first getting started. If you want to learn a little bit more, I do have a couple more spots that are open for my one three three seven intensive. And so that's the elite if you don't understand what that means.
And I can sit down with you for thirty minutes for five days in a row, and we're gonna try to get either MCP server set up, your documentation workflow set up, maybe something that's kinda stopping you from getting the results that you want. And I've been doing this type of stuff for several years with AI coding,
but as far as engineering, I used to work at Apple as an engineer and I've been doing it for over a decade. And I have a lot of industry experience shipping software,
having software that affects billions of people every single day. And if you're interested in that, feel free to check out the link in the description obviously. And I wanna leave you with this last thing. This AI coding thing is just starting to take off and we've thrown the first pitch
of many hundreds of pitches to go in this really long baseball game of AI.
And I'm really excited for this era of AI coding because this is now unlocking
a lot more capability. And the models of what we're doing today are just getting off the ground. And these type of tooling like the XMCP and the useRefMCP,
these are gonna be really essential to keep the language model training data, like the intelligence of the models here, and the training data that is currently missing, it's just gonna pull that right in and try to use this type of logic. These tools are really magical now because now they're available twenty four seven and they don't require bugging a senior senior engineer every single day. My name is Ray Fernando, and I'm really excited to be with you. And I'll see you in the next livestream. Peace out, y'all.