🙌 MCP Servers: Give Your AI Hands To Work With Notion & Figma

Have you ever asked an AI like Claude or ChatGPT to do something and got a common answer like, "Sorry, I can't connect to the internet," or "I don't know about the files on your computer"? This is like having a very talented chef who is locked in the kitchen. They can only cook with the food they already have inside.

This is where the Model Context Protocol (MCP) can help. Think of MCP as a team of smart "helpers." These helpers can go outside the kitchen (the AI model), get fresh ingredients (data from the web), special tools (APIs from other software), and even new recipes (information from your files), and bring them back to the chef. This allows your AI chef to create much better and more useful "dishes" for you.

This article will explain in a simple way what MCP is, why it's important, and show you how to use 11 popular MCP servers. These servers will help your AI do more things, like manage your code, find information on the web, or even help with your design work.

What Is MCP And Why Is It Useful?

MCP is a standard set of rules that helps AI models talk to and work with outside tools, APIs, and data in a safe and simple way. Since it was introduced by Anthropic in late 2024, many developers have started using MCP.

Why is MCP a good idea?

• Standard Rules: It creates one common language. Instead of every tool needing a different way to connect to an AI, they all use the same MCP rules. This makes everything cleaner and easier to manage.

• Works with Any AI: MCP doesn't care which AI model you use. It works with Claude, Gemini, or any other AI that supports it. They can all connect to the same tools.

• Easy to Add More Tools: You can run many MCP servers on the same computer. This means you can give your AI the power to use GitHub, Notion, and a web browser all at the same time.

• You Can Make Your Own: Anyone can create an MCP server for their own tool. This opens up many possibilities, allowing AI to work with a company's private systems or special APIs.

How To Get Started With MCP Servers

To use MCP servers, you need a "client" program that supports them. These are the apps where you talk to the AI. Two of the most popular clients today are:

• Cursor: A code editor made for programming with AI. It has AI features built-in and supports MCP.

• Claude Desktop: The official desktop app from Anthropic, which lets you chat with Claude and connect to tools using MCP.

Setting up an MCP server usually means you need to edit a settings file. In Cursor, this file is called mcp.json. In Claude Desktop, it's claude_desktop_config.json. You will add a small piece of code to this file to tell the app about the MCP server you want to use.

Let's look at what a piece of MCP setup code looks like:

{
  "mcpServers": {
    "your_server_name": {
      "command": "program_to_run",
      "args": ["instruction_1", "instruction_2"],
      "env": {
        "SECRET_VARIABLE": "your_secret_key"
      }
    }
  }
}

• your_server_name: This is a name you choose to remember the server, like "github" or "notion."

• command: The name of the program on your computer that will start the server (for example: npx, docker, node).

• args: A list of extra instructions for the command.

• env: This is for secret information, like API keys or special passwords.

Now, let's look at 11 specific MCP servers you can try today.

11 Useful MCP Servers For Developers

1. GitHub MCP Server

What it is: GitHub is a website every programmer uses. It's a place to save your code, manage projects, and work with others. The GitHub MCP server lets your AI work directly with your code repositories, issues (tasks), and pull requests.

How to use it in Cursor:

To connect, you need a Personal Access Token (PAT) from GitHub. A PAT is like a special password for apps. You can create one in your GitHub account under Settings > Developer settings > Personal access tokens.

Paste the code below into your mcp.json file:

{
  "mcpServers": {
    "github": {
      "url": "https://api.githubcopilot.com/mcp/",
      "headers": {
        "Authorization": "Bearer YOUR_GITHUB_PAT"
      }
    }
  }
}

Remember to replace YOUR_GITHUB_PAT with your real token.

Example Prompts:

• Prompt 1: Create a new issue.

  • You tell the AI: "Create a new issue in the 'my-awesome-app' repository with the title 'Add user authentication' and the description 'Implement login and registration pages using Passport.js'. Assign this issue to me."

  • What the AI does in the background: The AI uses the MCP server to send a request to the GitHub API. It creates a new issue in the correct repository with the exact title, description, and person assigned, just like you asked.

  • Result: A new issue will appear in your repository, and you didn't have to leave your code editor.

[github.createIssue]
repo: my-awesome-app
input:
  title: "Add user authentication"
  body: "Implement login and registration pages using Passport.js"
  assignees: [@your-username]
result:
  number: #42
  url: https://github.com/your-username/my-awesome-app/issues/42
  state: open
  created_at: 2025-10-02T10:15:33Z

• Prompt 2: Summarize changes in a Pull Request.

  • You tell the AI: "In the 'project-phoenix' repository, look at Pull Request #42 and summarize the main file changes. Tell me which files were added, changed, and deleted."

  • What the AI does in the background: The MCP server gets the details for Pull Request #42, including the list of changed files. The AI then studies this information and gives you a simple summary.

  • Result: You will get a clear list, for example: "PR #42 added 2 new files (Login.js, Signup.js), changed 3 files (App.css, routes.js, package.json), and deleted no files."

Result: PR #42 added 2 new files (src/auth/sessionManager.ts, tests/auth/sessionManager.test.ts), 
changed 3 files (src/routes/userRoutes.ts, src/controllers/authController.ts, package.json), 
and deleted 1 file (src/utils/legacyAuth.js).

Why it's worth it:

• Stay focused on your work: You can create pull requests, manage issues, and review code without switching between your editor and your browser.

• Automate boring tasks: Let the AI do repetitive jobs like assigning reviewers or updating project status.

• Smart code analysis: Get helpful information from your project's history or ask the AI to explain a piece of old, confusing code.

2. BrightData MCP Server

What it is: BrightData is a service that helps you get public data from the web. Simply put, it helps you "scrape" data from websites easily and correctly. With this MCP server, your AI can get the latest information from the internet instead of only using its old knowledge.

How to use it in Claude Desktop:

You need to sign up for a BrightData account and get an API token.

Open your claude_desktop_config.json file and add this code:

{
  "mcpServers": {
    "Bright Data": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.brightdata.com/mcp?token=YOUR_API_TOKEN_HERE"
      ]
    }
  }
}

Replace YOUR_API_TOKEN_HERE with your token.

Example Prompts:

• Prompt 1: Get financial information.

  • You tell the AI: "Use BrightData to visit Yahoo Finance and tell me the current stock price and market cap for Apple (AAPL)."

  • Result: The AI will answer with the most current information, like: "The current stock price for Apple (AAPL) is $175.50 and its market cap is $2.85 trillion."

Result: The current stock price for Apple (AAPL) is $175.50 and its market cap is $2.85 trillion.

• Prompt 2: Compare product prices.

  • You tell the AI: "Find the price of the 'Samsung Galaxy S25 Ultra' phone on three major online shopping sites and list them for me to compare."

  • Result: You will get a clear comparison table: "Here is the price for the Samsung Galaxy S25 Ultra: [Site A] - $1,299, [Site B] - $1,349, [Site C] - $1,279 (on sale)."

Result: Here is the price for the Samsung Galaxy S25 Ultra: 
[Amazon] - $1,299, 
[BestBuy] - $1,349, 
[Walmart] - $1,279 (on sale).

Why it's worth it:

• Real-time market data: Automatically track competitor prices or industry trends.

• Ethical data scraping: Handle difficult websites and anti-bot systems without worrying about breaking rules.

• Scale easily: Collect data from thousands of pages without managing complex computer systems yourself.

3. GibsonAI MCP Server

What it is: GibsonAI is a platform that helps you quickly design, launch, and manage serverless SQL databa_ses. "Serverless" just means you don't have to worry about managing the servers yourself. Their MCP server brings all this power right into your code editor. It gives the AI full context about your database, so the AI can write correct code that is ready to use.

How to use it in Cursor:

What you need first:

1. Create a GibsonAI account.

   

2. Install uv (a Python package tool).

   

Add this code to your mcp.json file:

{
  "mcpServers": {
    "gibson": {
      "command": "uvx",
      "args": ["--from", "gibson-cli@latest", "gibson", "mcp", "run"]
    }
  }
}

Example Prompts:

• Prompt 1: Design a database.

  • You tell the AI: "Design a database for a simple blog. I need a 'users' table (with id, username, email, password_hash), a 'posts' table (with id, title, content, author_id, created_at), and a 'comments' table (with id, content, post_id, user_id, created_at). Create the correct foreign key relationships."

  • Result: GibsonAI will create the database, and the AI will let you know, maybe even showing you the SQL code it generated.

-- Simple Blog Schema

-- 1) Users
CREATE TABLE users (
  id            BIGINT GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
  username      VARCHAR(50)  NOT NULL UNIQUE,
  email         VARCHAR(255) NOT NULL UNIQUE,
  password_hash VARCHAR(255) NOT NULL,
  created_at    TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
);

-- 2) Posts
CREATE TABLE posts (
  id         BIGINT GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
  title      VARCHAR(200) NOT NULL,
  content    TEXT         NOT NULL,
  author_id  BIGINT       NOT NULL,
  created_at TIMESTAMP    NOT NULL DEFAULT CURRENT_TIMESTAMP,
  CONSTRAINT fk_posts_author
    FOREIGN KEY (author_id) REFERENCES users(id)
    ON UPDATE CASCADE
    ON DELETE CASCADE
);

-- 3) Comments
CREATE TABLE comments (
  id         BIGINT GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
  content    TEXT      NOT NULL,
  post_id    BIGINT    NOT NULL,
  user_id    BIGINT    NOT NULL,
  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  CONSTRAINT fk_comments_post
    FOREIGN KEY (post_id) REFERENCES posts(id)
    ON UPDATE CASCADE
    ON DELETE CASCADE,
  CONSTRAINT fk_comments_user
    FOREIGN KEY (user_id) REFERENCES users(id)
    ON UPDATE CASCADE
    ON DELETE CASCADE
);

-- Helpful indexes for lookups/joins
CREATE INDEX idx_posts_author_id   ON posts(author_id);
CREATE INDEX idx_comments_post_id  ON comments(post_id);
CREATE INDEX idx_comments_user_id  ON comments(user_id);

• Prompt 2: Write and launch an API endpoint.

  • You tell the AI: "Write an API endpoint using Express.js to get all posts by a specific user from the blog database we just created. Then, deploy this database."

  • Result: You will get the complete Express.js code and a connection URL for your newly launched database.

// server.js
import express from "express";
import pkg from "pg";
const { Pool } = pkg;

const app = express();

// Use DATABASE_URL from env, e.g.:
// postgres://blog_user:[email protected]:5432/blog_db
const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  // optional in many managed providers:
  ssl: process.env.PGSSL === "true" ? { rejectUnauthorized: false } : false,
});

// GET /users/:id/posts  → all posts by a specific user
app.get("/users/:id/posts", async (req, res) => {
  const userId = Number(req.params.id);
  if (!Number.isInteger(userId) || userId <= 0) {
    return res.status(400).json({ error: "Invalid user id" });
  }

  try {
    const { rows } = await pool.query(
      `
      SELECT p.id, p.title, p.content, p.author_id, p.created_at
      FROM posts p
      WHERE p.author_id = $1
      ORDER BY p.created_at DESC
      `,
      [userId]
    );

    return res.json({
      user_id: userId,
      count: rows.length,
      posts: rows,
    });
  } catch (err) {
    console.error("Error fetching posts:", err);
    return res.status(500).json({ error: "Internal server error" });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`API running on port ${PORT}`);
});

Why it's worth it:

• Manage your database from your IDE: Design tables, write queries, and handle data changes without leaving your editor.

• Context-aware code: The AI understands your real database structure and writes code that works with it, not just generic code.

• Serverless made simple: You can focus on building features while the AI takes care of database management.

4. Notion MCP Server

What it is: Notion is an all-in-one workspace where you can take notes, manage projects, create databases, and more. The official Notion MCP server lets AI assistants work with the Notion API, helping you automate your workspace.

How to use it in Cursor:

Step 1: Create a Notion Integration

1. Go to Notion Integrations.

   

2. Click New Integration.

   

3. Give it the permissions it needs (Read, Write, Update) for the pages you want the AI to access.

Step 2: Set up MCP

Paste this code into your mcp.json file:

{
  "mcpServers": {
    "notionApi": {
      "command": "npx",
      "args": ["-y", "@notionhq/notion-mcp-server"],
      "env": {
        "NOTION_TOKEN": "secret_****"
      }
    }
  }
}

Replace secret_**** with your real Internal Integration Secret.

Example Prompts:

• Prompt 1: Create a meeting report.

  • You tell the AI: "Create a new page in my 'Meetings' database in Notion. The title should be 'Weekly Sync - Oct 02, 2025'. Add these properties: Date is today, Attendees are 'Alice, Bob, Charlie'. In the page content, create a heading 'Topics Discussed' and a to-do list for 'Action Items'."

  • Result: A perfectly structured meeting page will instantly appear in your Notion.

• Prompt 2: Find and summarize information.

  • You tell the AI: "Search my entire Notion workspace for documents about the 'Q4 Redesign Project' and summarize the main decisions that were made in 5 bullet points."

  • Result: You will get a quick summary of the project's main decisions without having to read through many documents yourself.

Result: Here’s a quick summary of the main decisions for the Q4 Redesign Project:
- Adopt a new color palette with darker theme accents to improve accessibility.
- Consolidate navigation into a single top bar instead of side + top split.
- Migrate marketing site to Next.js for faster load times and SEO benefits.
- Delay mobile app redesign until Q1 2026 to prioritize web experience.
- Approve budget for external UX consultant to audit the final prototype.

Why it's worth it:

• Organize everything automatically: Let the AI create templates, organize notes, and manage your knowledge base.

• Smooth workflow: Connect your existing Notion setup with smart tools for sorting and summarizing.

• Easy content creation: Generate structured documents with the right formatting and tags.

5. Docker Hub MCP Server

What it is: Docker is a tool that puts applications into "containers," which are like little boxes that can run anywhere. Docker Hub is a library of these container images. The MCP server made by Docker lets AIs work with your containers, images, and other technical tasks (often called DevOps).

How to use it in Cursor:

You will need a Personal Access Token from Docker Hub.

Paste this code into your mcp.json file:

{
  "mcpServers": {
    "dockerhub": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-e",
        "HUB_PAT_TOKEN",
        "mcp/dockerhub@sha256:b3a124cc092a2eb24b3cad69d9ea0f157581762d993d599533b1802740b2c262",
        "--transport=stdio",
        "--username={{dockerhub.username}}"
      ],
      "env": {
        "HUB_PAT_TOKEN": "your_hub_pat_token"
      }
    }
  }
}

Replace your_hub_pat_token with your token.

Example Prompts:

• Prompt 1: Find a Docker image.

  • You tell the AI: "Search Docker Hub for the official 'Node.js' images. List the 3 most popular tags for the latest LTS version."

  • Result: The AI will reply: "Found the official Node.js images. The three most popular tags for the latest LTS version are: lts, lts-alpine, and lts-slim."

Result: Found the official Node.js images. The three most popular tags for the latest LTS version are: lts, lts-alpine, and lts-slim.

• Prompt 2: Run a container.

  • You tell the AI: "Run a new Nginx container named 'my-web-server', connect port 8080 on my computer to port 80 in the container, and run it in the background."

  • Result: An Nginx container will start running on your system, and you can see the Nginx welcome page by going to http://localhost:8080 in your browser.

Result: An Nginx container named 'my-web-server' is now running in the background. 
Port 8080 on your computer is mapped to port 80 in the container. 
You can view the Nginx welcome page by visiting http://localhost:8080 in your browser.

Why it's worth it:

• Smart DevOps automation: Find problems, improve performance, and manage deployments with help from AI.

• No need to memorize commands: Just describe what you want, and the AI will handle the complex Docker commands for you.

• Consistent development setups: Easily start and manage your development environments.

6. Browserbase MCP Server

What it is: Browserbase is a service that lets you control web browsers in the cloud. When you use it with an MCP server, it gives your AI the ability to use a web browser like a person: visiting websites, filling out forms, clicking buttons, and doing other automated tasks.

Why it's worth it:

• Handle complex web tasks: Fill out forms, use dynamic websites, and get around the limits of normal data scraping.

• Smart testing automation: It can adapt to website design changes and test how a user would really use the site.

• Get rid of repetitive jobs: Automate booking appointments, checking information, and other browser-based work.

7. Context7 MCP Server

What it is: Are you tired of AI giving you old code examples or making up APIs that don't exist? Context7 fixes this problem. When you use this MCP server, the AI gets up-to-date documentation and working code for the exact version of the library you are using, straight from the source.

How to use it in Cursor:

{
  "mcpServers": {
    "context7": {
      "url": "https://mcp.context7.com/mcp"
    }
  }
}

Example Prompts:

• Prompt 1: Use a new library feature.

  • You tell the AI: "I am using React 19 and want to use the new 'use' hook. Write a simple component that gets data from an API and shows it, using the 'use' hook. Use Context7 to make sure the code is correct."

  • Result: You will get a React component that uses the newest and most correct code, instead of an older solution using useEffect and useState.

// React 19 with the `use` hook
import React, { use } from "react";

// Async function to fetch data
async function fetchData() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  if (!res.ok) throw new Error("Failed to fetch");
  return res.json();
}

function Post() {
  // Directly use the promise with `use`
  const post = use(fetchData());

  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.body}</p>
    </div>
  );
}

export default Post;

• Prompt 2: Write middleware for a framework.

  • You tell the AI: "Write a middleware for Next.js 14 that checks a user's permission based on a cookie named 'auth_token'. If it's not valid, redirect them to the '/login' page. Use Context7."

  • Result: You will get a piece of middleware code that follows the best practices for the current Next.js version, saving you time from fixing bugs.

// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

// Example: Replace this with real validation logic (JWT verify, DB check, etc.)
function validateToken(token: string | undefined): boolean {
  if (!token) return false;
  // Insert your validation logic here
  return token === "valid_token_example";
}

export function middleware(request: NextRequest) {
  const token = request.cookies.get("auth_token")?.value;

  const isValid = validateToken(token);

  if (!isValid) {
    const loginUrl = new URL("/login", request.url);
    return NextResponse.redirect(loginUrl);
  }

  return NextResponse.next();
}

// Apply middleware only to protected routes
export const config = {
  matcher: ["/dashboard/:path*", "/admin/:path*"], // adjust as needed
};

Why it's worth it:

• Code that actually works: Get current API versions and modern methods, not old ones that no longer work.

• Stay up-to-date automatically: The AI uses the latest docs and examples for new features.

• Less time fixing bugs: Spend more time building and less time fixing AI-generated code.

8. Figma MCP Server

What it is: Figma is a top tool for designing user interfaces (UI) and user experiences (UX). The Figma MCP server lets your AI "read" your design files, get components, and understand layouts. This is very useful for turning a design into working code.

How to use it in Cursor:

You will need an API key from Figma.

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Replace YOUR-KEY with your Figma API key.

Example Prompts:

• Prompt 1: Turn a component into code.

  • You tell the AI: "In my 'Design System' Figma file, find the component named 'PrimaryButton'. Get its color, font, padding, and border radius information, and then write the React code for this component using Styled-Components."

  • Result: You will get a complete React component file that looks exactly like the design in Figma.

// PrimaryButton.jsx
import React from "react";
import styled from "styled-components";

// These values are pulled from the Figma component
const PrimaryButton = styled.button`
  background-color: #1a73e8;   /* Example color from Figma */
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease-in-out;

  &:hover {
    background-color: #1669c1; /* Slightly darker hover */
  }

  &:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
  }
`;

export default function Button({ children, ...props }) {
  return <PrimaryButton {...props}>{children}</PrimaryButton>;
}

• Prompt 2: Create a color palette.

  • You tell the AI: "Scan the 'Brand Guidelines' page in my Figma file and get all the colors used. Create a JavaScript object where the key is the color name (like 'primary-blue') and the value is the hex code."

  • Result: You will get a clean JavaScript object that you can use directly in your project, like: const colors = { 'primary-blue': '#007bff', 'accent-green': '#28a745' };.

const colors = {
  "primary-blue": "#007bff",
  "accent-green": "#28a745",
  "warning-yellow": "#ffc107",
  "danger-red": "#dc3545",
  "neutral-gray": "#6c757d",
  "background-light": "#f8f9fa",
  "text-dark": "#212529"
};

Why it's worth it:

• One-step design to code: Turn Figma designs into accurate code without doing it manually.

• Automate design tasks: Automatically get components, create style guides, and generate design tokens.

• Connect design and development: Easily bridge the gap between the design team and the development team.

9. Reddit MCP Server

What it is: Reddit is a huge online forum with many communities (called subreddits) on every topic you can imagine. This MCP server uses a tool called PRAW to let the AI get, analyze, and work with content on Reddit.

Why it's worth it:

• Understand community trends: The AI can analyze discussions on a subreddit to find popular topics, common user problems, or how people feel about a product.

• Market research: You can ask the AI to find posts where users are looking for solutions to a problem, helping you find new business ideas.

• Content creation: Ask the AI to summarize the top posts of the week from a subreddit related to your industry to get ideas for a newsletter or blog post.

10. Sequential Thinking MCP Server

What it is: This is one of the most popular MCP servers. It gives the AI tools to think in a structured, step-by-step way. It helps your AI think through complex problems one step at a time, which is perfect for tasks that need logical thinking, planning, and problem-solving.

How to use it in Claude Desktop:

Add this code to your claude_desktop_config.json file:

{
  "mcpServers": {
    "sequential-thinking": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-sequential-thinking"
      ]
    }
  }
}

Why it's worth it:

• Break down complex problems: Get clear, step-by-step thinking paths that you can follow and check.

• Help with strategic planning: Create full plans with logical steps and timelines.

• Make better decisions: Get a structured analysis of pros, cons, and risks to help you make smart choices.

11. Discord MCP Server

What it is: Discord is not just for gamers; it's a powerful communication tool for communities and teams. The Discord MCP server allows an AI to read, search, and even post messages in channels, threads, and direct messages.

Why it's worth it:

• Smart community insights: Summarize conversations, track action items, and give context-aware responses across your Discord servers.

• Never lose information: Quickly find important decisions and discussions across all channels and threads.

• Automate your workflow: Automatically notify community members, schedule reminders, and manage project updates without any extra work.

Conclusion

The great thing about MCP servers is their standard approach. Once you learn how to set up one server, you can easily add more to give your AI more abilities. Whether you're building customer service bots, developer assistants, or special AI applications, these servers provide the connection to the outside world that your AI needs to be truly useful.

In short, MCP makes it very simple to plug real-world tools into your AI. You can:

• ✅ Set up your first MCP server quickly.

• ✅ Connect it to your client app and test it right away.

• ✅ Add more servers to give your AI more skills.

• ✅ Build a workflow that you can use again and again.

I hope this article gave you a clear and easy-to-understand overview of MCP. Start by picking one server that solves a problem you have every day, and see what your AI can do!

If you are interested in other topics and how AI is transforming different aspects of our lives or even in making money using AI with more detailed, step-by-step guidance, you can find our other articles here:

• From Zero To A RAG System In 20 Minutes (No Code!)

• N8N Webhooks: Super Simple! Your Low-Code Platform Guide (Get Started!)*

• Automating Google Sheets with n8n AI Agent*

• How to Set Up an AI Automation for Lead Qualification Process: All In Under 1 Minute*

• Revolutionize Your Workflow: Make 1,000 Reels in Minutes with AI Automation!

  *indicates a premium content, if any