10x Productivity Hack: Cursor + Dart AI MCP Integration

--- type: transcript date: 2025-04-14 youtube_id: JfK6bkwnlV4 --- # Transcript: 10x Productivity Hack: Cursor + Dart AI MCP Integration In this video, I'm going to show you how you can leverage cursor in combination with a powerful project management tool, Dartai. I'm going to show you a workflow that will improve your productivity, help you stay organized. I'm going to show how you can come up with the different ideas and plan out your app in a typical canban style. And then I'm going to show you how you can integrate with the MCP server and have it automatically move tasks into doing and done, as well as adding particular details into Dart AI. The nice thing with this is you're going to be able to just add tasks on the fly and then whenever you're ready, you can instruct cursor to grab that latest ticket from your to-do and move it through the process. As Andre Carpathi recently mentioned that English is the hottest new programming language. This integration demonstrates how natural language is really transforming development and allowing you to work at higher levels of abstraction. This is an exploration of exactly that. Let's dive in. The first thing I'm going to be showing you cursor in this video, but you very well could use another editor. You could use Klein, you could use Windsorf. Basically, any editor that supports MCP, you'll be able to use within this. There might be slight little differences in terms of implementation, but in large part, you will be able to copy this workflow to whatever agentic IDE that you prefer. What we're going to do is we're going to make a free account on Dart AI. Just a brief overview on Dart. What it allows you to do is you can create different spaces and within each space you can create these things known as Dart boards. If I just demonstrate this here and if I just call this cursor demo for instance within here what we'll have within here is we can create different tasks. Once you've created a board, what you can do is I can go over to new task and within this you can put in as much detail as you'd like. I want to create a beautiful header that's professional looking. I want the title to read developers digest and for it to have three links blog contact as well as GitHub. From there what we can do is if we forward slash or click this task AI button we can use a number of different AI features. We can brainstorm. We can break it into subtasks or we can fill out properties or we can write a description. Based on what I put in the task, it can go ahead and determine different things like the date for if you were explicit about the date, it could plug that in. Alternatively, it can put in things like the priority or the effort level or what have you. From there, just to demonstrate, I can also have it write a particular description. I'm going to go ahead and keep it as the particular task name for now. I'm going to create that task. I can do a similar thing within here. I can say create a footer, create a beautiful landing page, create a blog page, create a contact page. Obviously, you can put in as much detail as you want into each of these. But now, what I want to show you is if we go over to settings and we go over to Claude, what you'll see within here is we have the ability to run this with an MCP protocol. If we click this link to link dart with Claude, what we can do within here is we can go into the installation steps. But one of the main things that we need here is just this configuration here. and we're going to be grabbing our Dart token in just a moment to show you how to set this up. If I command shiftp on Mac, it's going to be a similar command on Windows. I can go over to the cursor settings and I can go over to MCP. If you've used or are using MCP within cursor, you'll see all of your different MCP integrations within here. What we can do is we can go and we can add a new global MCP server. And that's going to be where we copy this configuration. If you already have a list of them, just make sure that you grab the Dart object. just to demonstrate that here I can go and I can just paste the Dart configuration within here. Then what we're going to be doing from here is we're going to go over to settings and within settings we're going to go over to account and then at the bottom we're going to have our authentication token. Once you have your authentication token you can paste it within here and save out this file. Once you've added that refresh it just to make sure that it is all enabled. If it is set up correctly you will have this green dot here. And now within here we can see all of the different tools that are available for this MCP server. So we have get config, list task, create task, update task, so on and so forth. Next, what I'm going to do within here is I'm going to create a file called cursor rules. This is just further context that I can feed to cursor for instructions about how I want it to act. I'm going to say update all actions to the Dart AI via MCP. Make sure to always move task from to-do, doing, and complete. Make sure to update the description as tasks get moved from to-do to doing. and also update the description with what has been done once the task is complete. And then finally, I'm going to say don't create new subtasks on the dart board. This is a set of cursor rules which I'll link within the description if you're interested in trying this out. What I found is giving it a little bit further instructions in terms of how I want to have this workflow occur definitely gave better results. But with that being said, you can absolutely use Dart AI and their MCP integration without having to define cursor rules. Now that it's all set up, just to demonstrate, I can say list all of the tasks that I have within the cursor demo dartboard. Now on our dartboard, we have a series of different tasks that has the context to ask for. The first thing that I'm going to do here is I'm going to create a new project. I'm going to create one next app within the root of our directory. Now we have our starting point of our server. So we have this next.js boiler plate. Now the first task is to create this professionallook header. So what I'm going to say here is let's kick off the header task. I'll go ahead and I'll send that in here. Based on the cursor rules that we indicated is I'll help you start working on the header task. First, let me update the status of the header to doing and add a description to the plan. In our header task, if I click within this, we have that description. Now, that description was generated from cursor. You can see how something like this is potentially very powerful. Within here, what we're going to do is we're going to see first, do we have a header component? What it's going to do here is we're going to go and we're going to create our components directory and it's going to create the header for us. And now that we have the header, if I go over to our page, we'll see that in the footer with the blog contact as well as GitHub. We see now the agent started the server for us. If we go and we take a look at our application, we can see we have the navigation of developers digest blog contact as well as GitHub. Now it's asking, would you like me to make any adjustments to the design or functionality? I'm going to say no. Everything looks perfect. Now, if I go over to our dartboard, we have the done task and within here we have the plan and then we also have what it completed here. We see it created a new header component with modern React practices, implemented responsive design, added developers digest, so on and so forth. So, what I'm going to say here is let's move on to the next feature. Now, in this I didn't indicate for which feature it to work on next. It's going to list out the task. Now, it's asking for which task we want to go ahead and proceed with. We have create footer, blog, contact page as well as the landing page. Now, it's even giving a recommendation. Since we already have the header in place, I would recommend working on the footer next to complete the basic layout structure of the website. Would you like me to proceed with creating the footer? From here, I'm just going to go ahead and say yes. If I go over to the dartboard without clicking everything, we'll see that we have the footer that's within doing. We also have this description of the plan here. And if I go back to cursor, we see that it's writing out this footer component for us. So now we see great I've created a professional footer that's included the following. The footer will now be integrated into the main layout. Let me complete this task within Dart. What it will do is it's going to generate that description that it will append to the plan similar to what we had in the header. You can see how you can plan out an application like this. You could have the Dart AI mobile app on your phone and when you're out and about and thinking about potential different features that you have for your different applications, you can go ahead and log those features. And as soon as you got back to the office or your computer, you can go ahead and plug in those tasks. And the other nice thing with this is it gives you a really good representation of what has happened. Now, if I go back to our application, we have our header. And if I go to the bottom here, we have that footer that's all set up. Now, cursor is asking me, would you like to move on with creating the landing page, the blog page, as well as the contact page next? I'm going to go ahead and say yes. I'll help you create a beautiful landing page. Let's move it to doing and outline the plan. Again, we can go over to doing and we'll see the plan here. Now, the alternative thing that you could do here is you could instruct within your cursor rules to create subtasks. And what you would see it would generate different subtasks for each item and it would work through those tasks. Now, the one thing to know with that is if you are going to be taking the subtask approach, just be mindful about your cursor rules as well as your instructions because what I found is if you had something simple like create a blog page, it might create an overly complicated set of subtasks. If you're very direct in saying don't create subtasks or maybe limit it to create two subtasks or five subtasks, whatever it might be, that could potentially be another approach that you could consider as well. Now, within here, we see that it wrote out this beautiful landing page. If I go back to our application here, now we have the header, we have the landing page, we have this nice hero area, we have featured articles, why choose developers digest, stay updated. So, it basically went through all of the tasks. And a similar thing here is if I go over to Dart, I can see the plan that it took and also everything that it completed. The benefit of this is instead of having to wait for all of your prompts to finish is you can just have all of that context within your dartboard and have it go through step by step the different features that you have within your application. Now, obviously, you can build on things like the cursor rules or what have you and be a lot more specific about your general task, but this is just an overall workflow that I personally find particularly helpful. The other nice thing to call out within Dart is you can replicate Dart boards. Let's say you have a number of different to-dos of common tasks that you take when you build out an application. It could be building out the header, integrating something like Superbase, or so on and so forth. You can have very descriptive prompts in each of your to-dos. And if you want to kick off a new project, you can go and create that new dartboard and have it just work through that process. And you'll have everything organized and tracked within the project management software here. Now, the other thing that's great with Dart is you're going to be able to add in all your teammates as well. Here I see it moved over the blog page here. And here is the blog page. We even have these filters that it set up. Those look all to be working. And then if I go over to that particular task, I can see all of those pieces that were completed. I'm going to go ahead and accept those changes. And now we have, would you like me to move to the contact page? And I'm going to say yes. And now if I go over to our dartboard, we see within doing, we have the plan that it has. And then it's going to work through that plan to implement that on the page. And now we see we've created all of the main tasks in the cursor demo dartboard. We have the header, footer, landing page, blog, as well as the contact page. And now we have the website is now fully functional with consistent professional designs across all pages. So now if I take a quick look at our website, I can go and I can click to read the blog. And if I go over to contact, we have this beautiful contact page that it created for us. Overall, that's pretty much it for this video. I encourage you to check out Dart AI and explore this type of flow. I just wanted to show you how powerful Dart AI in combination with cursor can be for building out projects. It can keep you organized. But otherwise, that's pretty much it for this video. If you found this video useful, please comment, share, and subscribe.