Hey everyone, this article demonstrates a tool that works not just in Cursor, but also with Wind, Surf, and Klein in VS Code. The tool is an MCP server. If you’re not familiar with MCP servers, don’t worry; that will be explained later in this article.
Generating Components with a Single Prompt
Right now, here is a prompt that will generate a component for a features tab. This is just an example landing page created for this article, and this article will show you how you can speed up front-end development by integrating this MCP server into your workflow.
Let’s go ahead and run the prompt.
This prompt instructs the tool to create a react component with the Dark theme, specifies other details, and ensures that the entire section is made into a component and implemented into the landing page.
Now you can see that the MCP tool is calling the component Builder, which is one of the tools available within this MCP server. Let’s go ahead and run it to see what it generates.
It looks like the tool has created a component, and now it’s checking the project structure before proceeding with the implementation. The component is currently being generated and placed into a typescript file.
This is the implementation right here. You can see that it was changed exactly according to what was specified in the prompt.
// The generated component code would appear here.
// It features a cool grain effect with lighting on the cards.
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CheckCircle } from "lucide-react";
const features = [
{
title: "AI-Powered Code Generation",
description: "Generate components and logic with natural language.",
},
{
title: "Intelligent Debugging",
description: "Find and fix bugs faster with AI-assisted debugging.",
},
{
title: "Seamless Collaboration",
description: "Work with your team in a shared, AI-native environment.",
},
];
export const FeaturesSection = () => {
return (
<section className="w-full py-12 md:py-24 lg:py-32 bg-gray-950 text-white relative overflow-hidden">
<div className="container px-4 md:px-6">
<div className="flex flex-col items-center justify-center space-y-4 text-center">
<div className="space-y-2">
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
Supercharge Your Workflow
</h2>
<p className="max-w-[900px] text-gray-400 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
Our AI-native code editor is designed to help you write better
code, faster.
</p>
</div>
</div>
<div className="mx-auto grid max-w-5xl items-start gap-8 sm:grid-cols-2 md:gap-12 lg:grid-cols-3 lg:gap-16 mt-12">
{features.map((feature) => (
<Card
key={feature.title}
className="bg-gray-900/50 border-gray-800/50 backdrop-blur-sm transition-all hover:bg-gray-800/60 hover:scale-105"
>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<CheckCircle className="w-5 h-5 text-green-400" />
{feature.title}
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-gray-400">{feature.description}</p>
</CardContent>
</Card>
))}
</div>
</div>
<div className="absolute inset-0 -z-10 bg-[radial-gradient(40%_120%_at_50%_0%,#3b82f620_0%,#0000_100%)]" />
</section>
);
};
The resulting component features a cool grain effect with the lighting on the cards, which looks amazing. This is how you can quickly implement full components into your project with just a single prompt. The MCP tool makes the call, generates the component, and then Cursor implements it automatically. It’s pretty cool.
What is an MCP Server?
MCP Service is like a USBC cable for AI models; it lets them easily connect and share info. In simple terms, it’s a standardized system that lets different models exchange context data, so they all work with the same up-to-date information.
Installation
For the installation, the instructions can be found in the tool’s GitHub repository. The installation instructions are available for different IDEs. What is likable about this MCP server is that they’ve provided installation instructions for all the IDEs that currently support MCP implementations, such as Cursor, Wind, Surf, and even VS Code with Klein.
You’ll notice that all of these follow the same basic process. They all require just one environment variable, which is the API key from 21st.dev or Magic UI. Just go ahead and search for Magic UI, and you’ll come across their signup page. After signing up, you’ll see their dashboard. To find your API key, navigate to the API docs and key section. You’ll see your API key right there. Just copy this API key, paste it into the command, and it will start accepting requests and working for you. It’s pretty simple.
There’s nothing particularly complex about installing this MCP server.
Note on Windows: If you’re wondering what you would need to do this on Windows, then unfortunately MCPs don’t really work on Windows as I’ve heard, but you can use the WSL installation process, which is really easy. Just install WSL, and you can use the MCP servers with that.
Available Tools
Here are the tools that this MCP server offers:
- Magic Component Builder: This tool essentially builds an entire component for you. It works like v0 inside Cursor. You just describe what you want, including the design and details, and it implements it directly in your application.
- Logo Search: A pretty cool tool. You can quickly ask it to generate logos or any images, and it will return either SVGs or the actual code for those images. Cursor can then take that code and apply it wherever you need in your project.
- Component Inspiration Tool: I didn’t find it particularly useful because if you ask for any component, it just gives you the code without any preview, so not really that helpful. A simple alternative that works much better will be shown instead.
Note on Pricing: UI Inspirations and SVG logo searches are unlimited, but unfortunately, UI generation with this MCP server is paid. You’ll need to upgrade to a higher plan if you want more than five generations per month, which is pretty disappointing. But there are alternatives that were mentioned earlier, and those will be shown as well if you don’t want to upgrade.
The SVG Logo Search tool is still really useful. Let me show you what I mean.
This is a carousel that was implemented earlier. The icons in it were not fetched manually; Cursor handled their implementation. There are some discrepancies, and the icons are really small. This is because the component was generated by Cursor, and honestly, Cursor-made components aren’t that special, unlike the one with cool animations and effects because it took inspiration from a UI Library.
However, the icon import feature was really impressive. For example, when asked to add logos, it automatically called the Logo Search tool from the MCP server, queried the logos, and generated the JSX for them, which was then implemented.
// Example JSX for logos generated by the Logo Search tool
<div className="flex items-center justify-center gap-4">
<img src="logo1.svg" alt="Logo 1" className="h-8 w-8" />
<img src="logo2.svg" alt="Logo 2" className="h-8 w-8" />
<img src="logo3.svg" alt="Logo 3" className="h-8 w-8" />
</div>
This feature is seriously useful, and even if you don’t want to generate components using this tool, you should at least be using this feature.
A Better Alternative
Now, the alternative is to simply go to 21st.dev and choose from their collection of UI elements. They have a really good selection. Also, the global search feature is pretty cool. Whenever you type something like “card,” it not only searches within 21st.dev but also across various UI libraries like Shadcn and others that have been added. Plus, you get previews right there, so you can just select and add them easily.
To make the process even quicker, just copy the installation command they provide, open Cursor, and give it the command. Also, specify that it’s a UI component, tell it to install it, and define where you want it to be implemented. It’s really easy, and Cursor does it almost instantly because you’re directly specifying the install command and placement. Within seconds, you’ll have whatever UI design or element you choose seamlessly integrated into your project.
And that’s how you can speed up front-end development using the MCP server.