WEBVTT 00:00:00.000 --> 00:00:14.000 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 00:00:14.400 --> 00:00:34.000 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, 00:00:34.160 --> 00:00:45.565 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, 00:00:45.645 --> 00:00:46.845 my authentication, 00:00:46.845 --> 00:00:53.325 my database provider, all these extra rules. But the LLMs actually operate the best when they have 00:00:53.805 --> 00:00:55.405 just the right information 00:00:55.405 --> 00:00:57.245 for just the right specific task. 00:00:57.650 --> 00:01:00.050 And so in comes ref dot tools. 00:01:00.610 --> 00:01:05.250 So this actually provides the actual context that's needed for these agents. 00:01:05.570 --> 00:01:08.610 And the way that it works is it'll grab public documentation 00:01:08.850 --> 00:01:18.445 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, 00:01:18.605 --> 00:01:19.485 in Droid, 00:01:19.885 --> 00:01:21.325 in Codex, 00:01:21.565 --> 00:01:30.590 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 00:01:30.910 --> 00:01:34.430 there's gonna be multiple requests and multiple steps that happen along the way. 00:01:34.750 --> 00:01:43.035 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, 00:01:43.995 --> 00:01:49.435 this actually has a really high quality fast search for specifically coding tasks. 00:01:49.675 --> 00:01:52.555 And if you combine these two together, you're gonna be 00:01:53.340 --> 00:01:55.500 cooking. And I have shipped features 00:01:55.900 --> 00:02:05.900 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 00:02:05.985 --> 00:02:14.865 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, 00:02:15.265 --> 00:02:26.440 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. 00:02:27.400 --> 00:02:40.455 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 00:02:42.775 --> 00:02:52.730 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. 00:02:52.970 --> 00:02:58.970 And so you'll see it available once you do cloud mcps, uh, space list. So because it's in my root user, 00:02:59.210 --> 00:03:13.365 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. 00:03:14.000 --> 00:03:22.880 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, 00:03:23.120 --> 00:03:45.080 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. 00:03:45.240 --> 00:03:48.760 And so in this section here, what we do is just gonna go ahead and delete. 00:03:49.000 --> 00:03:57.455 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, 00:03:57.775 --> 00:03:58.655 Claude 00:04:00.575 --> 00:04:01.215 code 00:04:01.615 --> 00:04:02.415 YOLOBRO. 00:04:03.790 --> 00:04:09.710 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. 00:04:09.950 --> 00:04:28.145 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 00:04:28.305 --> 00:04:29.105 MCP 00:04:29.665 --> 00:04:30.305 list. 00:04:31.425 --> 00:04:33.105 And that'll basically show you 00:04:33.890 --> 00:04:34.930 what's actually 00:04:35.490 --> 00:04:54.505 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 00:04:54.665 --> 00:04:58.105 really fully utilizing the power of tailwind before. 00:04:58.105 --> 00:05:01.145 And I want you to take a look at my code 00:05:01.545 --> 00:05:05.465 at all the different places because I think I have a lot of stuff that I've hard coded in 00:05:06.080 --> 00:05:11.920 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. 00:05:12.400 --> 00:05:19.280 I want you to use ref and use exit MCPs first to read through the documentation to understand how this type of system works, 00:05:20.055 --> 00:05:25.495 as well as reading through all the different parts of my code to understand the current design system. 00:05:26.055 --> 00:05:45.280 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 00:05:45.280 --> 00:05:46.080 anime 00:05:46.080 --> 00:06:01.225 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 00:06:01.750 --> 00:06:08.070 actual design, everything was in light mode. And since I forked this project from my friend Mickey, 00:06:08.070 --> 00:06:09.990 who currently works over at Convex, 00:06:10.390 --> 00:06:29.085 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. 00:06:30.440 --> 00:06:43.640 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, 00:06:43.640 --> 00:06:44.120 and yes, 00:06:44.865 --> 00:07:02.250 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 00:07:02.410 --> 00:07:26.295 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. 00:07:26.770 --> 00:07:39.810 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 00:07:40.135 --> 00:07:49.415 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? 00:07:49.575 --> 00:07:55.880 And you see ref mentioned here with the following URL and the API key. So this already has the API baked 00:07:55.880 --> 00:07:57.240 in and you hit install. 00:07:57.320 --> 00:08:04.920 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, 00:08:05.985 --> 00:08:07.185 and we go to 00:08:07.665 --> 00:08:08.785 the dashboard, 00:08:08.865 --> 00:08:15.345 and we go to Exa MCP. So the values that we wanna grab is gonna be this one here. See Exa, 00:08:15.345 --> 00:08:22.080 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, 00:08:22.240 --> 00:08:35.825 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 00:08:35.905 --> 00:08:53.000 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 00:08:53.400 --> 00:09:10.755 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. 00:09:11.075 --> 00:09:18.200 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 00:09:18.280 --> 00:09:20.840 specific window for our agents, 00:09:21.080 --> 00:09:25.240 so that we can do this type of planning. Now, we get a straight up dedicated window 00:09:25.400 --> 00:09:38.855 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, 00:09:39.255 --> 00:10:03.575 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 00:10:03.895 --> 00:10:09.175 the context window and a lot of times these, you know, agents will have to start pruning information. 00:10:09.495 --> 00:10:21.120 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. 00:10:21.440 --> 00:10:34.615 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. 00:10:35.095 --> 00:11:07.245 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 00:11:07.700 --> 00:11:14.500 type of systems, but here's the gaps to address. So there's like missing semantic tokens, means hard coded values are scattered, 00:11:14.740 --> 00:11:16.340 magic numbers and components, 00:11:16.500 --> 00:11:23.865 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. 00:11:24.105 --> 00:11:26.665 Uh, phase two to extract the component tokens, 00:11:26.745 --> 00:11:29.065 and then three is to fix the hard code values. 00:11:29.305 --> 00:11:41.720 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. 00:11:42.520 --> 00:11:50.440 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 00:11:50.975 --> 00:12:00.735 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 00:12:00.895 --> 00:12:02.895 tokens, which is only 1.4% 00:12:02.895 --> 00:12:12.560 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, 00:12:12.960 --> 00:12:43.140 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 00:12:43.715 --> 00:12:47.795 probably in codecs and also getting this set up in a fact, a droid factory. 00:12:48.115 --> 00:12:54.435 So for codecs, we're just gonna go ahead and go to what the instructions say for codecs. So in use ref here, 00:12:54.755 --> 00:13:11.550 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, 00:13:11.870 --> 00:13:13.230 and I just open up any tab, 00:13:14.315 --> 00:13:15.915 codecs m c p 00:13:17.515 --> 00:13:18.315 list. 00:13:19.195 --> 00:13:25.835 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 00:13:26.315 --> 00:13:28.155 and then go back to my terminal. 00:13:30.490 --> 00:13:36.890 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, 00:13:37.850 --> 00:13:39.450 cursor and then hit this. 00:13:40.010 --> 00:13:51.755 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. 00:13:52.075 --> 00:14:14.165 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 00:14:14.405 --> 00:14:15.765 just delete this here 00:14:16.405 --> 00:14:17.765 and then paste it in here. 00:14:18.405 --> 00:14:24.085 I'm gonna go ahead and hit save and then now we should have it currently saved. So if I type in codecs MCP 00:14:24.085 --> 00:14:30.010 list, we should now be able to see that the MCP server is currently configured in here. So use 00:14:30.010 --> 00:14:31.450 ref MCP 00:14:31.690 --> 00:14:33.530 to look up the 00:14:33.770 --> 00:14:39.850 latest on tailwind v four and see if there are any gaps in my 00:14:40.625 --> 00:14:41.665 implementation. 00:14:41.905 --> 00:14:44.065 Okay. So we're just gonna hit enter. 00:14:44.785 --> 00:14:53.265 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. 00:14:53.690 --> 00:15:01.370 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. 00:15:01.690 --> 00:15:17.525 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. 00:15:17.765 --> 00:15:27.110 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. 00:15:27.190 --> 00:15:30.230 And now we should be able to see the exa MCP 00:15:30.710 --> 00:15:33.830 currently listed and status is enabled. If I paste this in, 00:15:35.215 --> 00:15:53.570 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 00:15:54.930 --> 00:15:56.850 slash dot factory, 00:15:57.250 --> 00:16:13.515 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. 00:16:13.755 --> 00:16:17.195 And if you were getting it from cursor, all you do is go in here, hit tools MCP, 00:16:18.040 --> 00:16:29.800 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. 00:16:30.745 --> 00:16:35.865 And then you just paste it right in there and you hit save. Once you have these two MCP servers, 00:16:36.345 --> 00:16:45.305 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 00:16:45.700 --> 00:16:50.020 and then use exa MCP or use exa code for MCP. 00:16:50.020 --> 00:17:25.350 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. 00:17:25.590 --> 00:17:41.500 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, 00:17:41.660 --> 00:17:49.820 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, 00:17:50.460 --> 00:18:04.995 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 00:18:05.155 --> 00:18:09.760 of many hundreds of pitches to go in this really long baseball game of AI. 00:18:10.000 --> 00:18:15.200 And I'm really excited for this era of AI coding because this is now unlocking 00:18:15.200 --> 00:18:25.455 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, 00:18:25.455 --> 00:18:50.523 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.