从零到一MCP集成：让模型实现从“想法”到“实践”的跃迁

Node.js (推荐 v18 或更高版本)

适用macos版本

下载并安装 nvm：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

代替重启

shell. "$HOME/.nvm/nvm.sh"

下载并安装 Node.js：nvm install 24

验证 Node.js 版本：

node -v # Should print "v24.12.0".

验证 npm 版本：

npm -v # Should print "11.6.2".

基本配置流程

步骤 1: 安装 MCP 服务器

复制代码

# 使用 npm 全局安装
npm install -g @modelcontextprotocol/server-<plugin-name>

# 或使用 npx 运行（无需全局安装）
npx @modelcontextprotocol/server-<plugin-name>

步骤 2: 配置 Claude Desktop

找到 Claude Desktop 配置文件：

macOS : ~/Library/Application Support/Claude/claude_desktop_config.json
Windows : %APPDATA%\Claude\claude_desktop_config.json
Linux : ~/.config/Claude/claude_desktop_config.json

基本配置结构：

复制代码

{
  "mcpServers": {
    "server-name": {
      "command": "node",
      "args": ["/path/to/server/index.js"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}

步骤 3: 重启客户端

配置完成后，重启 Claude Desktop 或其他 MCP 客户端以加载新配置。

1. Chrome DevTools MCP

功能介绍

Chrome DevTools MCP 允许 AI 助手通过 Chrome DevTools Protocol 与浏览器交互，实现自动化测试、页面调试和数据提取。

主要功能

页面导航和截图
DOM 元素查询和操作
JavaScript 执行
网络请求监控
Console 日志访问

安装步骤

1. 安装 Chrome DevTools MCP 服务器

复制代码

npm install -g @modelcontextprotocol/server-chrome-devtools

2. 通过AI工具配置Claude Desktop

TRAE的AI工具配置如图

Cursor工具配置如图，把链接复制进去即可

3. 配置 Claude Desktop

编辑 claude_desktop_config.json：

复制代码

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

4. 启动 Chrome（调试模式）

复制代码

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

# Linux
google-chrome --remote-debugging-port=9222

使用示例

这里给大家演示如何通过 AI 自动查询当前 iPhone 15 的实时价格 。需要说明的是，这只是 MCP 能力的一个基础示例。借助 MCP，AI 还可以直接获取并分析当前网页的数据，甚至进行调试和交互。不同类型的 MCP 插件在使用方式上基本一致，学习成本非常低。对该能力感兴趣的读者不妨自行尝试，相信会有更多发现。

常用工具

navigate: 导航到指定 URL
screenshot: 截取页面截图
evaluate: 执行 JavaScript 代码
querySelector: 查询 DOM 元素
getConsole: 获取控制台日志

2. Neon MCP

功能介绍

Neon MCP 提供与 Neon Serverless Postgres 数据库的集成，允许 AI 助手执行数据库查询和管理操作。

主要功能

执行 SQL 查询
数据库架构查询
表和索引管理
数据库性能监控

安装步骤

1. 获取 Neon API 密钥

访问 Neon Console
登录或注册账号
进入 Account Settings → API Keys
创建新的 API Key

2. 安装 Neon MCP 服务器

复制代码

npm install -g @modelcontextprotocol/server-neon

3. 配置 Claude Desktop

复制代码

{
  "mcpServers": {
    "neon": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-neon"
      ],
      "env": {
        "NEON_API_KEY": "your-neon-api-key",
        "DATABASE_URL": "postgresql://user:password@host/database"
      }
    }
  }
}

使用示例

复制代码

"查询 users 表中的所有记录"
"创建一个名为 products 的新表"
"显示数据库架构"
"执行查询: SELECT * FROM orders WHERE status = 'pending'"

常用工具

query: 执行 SQL 查询
listTables: 列出所有表
describeTable: 描述表结构
createBranch: 创建数据库分支

3. Supabase MCP

功能介绍

Supabase MCP 提供与 Supabase 平台的集成，支持数据库操作、认证、存储和实时订阅。

主要功能

数据库 CRUD 操作
用户认证管理
文件存储操作
实时数据订阅
Edge Functions 调用

安装步骤

1. 获取 Supabase 凭证

访问 Supabase Dashboard
选择或创建项目
进入 Settings → API
复制 Project URL 和 anon/service_role key

2. 安装 Supabase MCP 服务器

复制代码

npm install -g @modelcontextprotocol/server-supabase

3. 配置 Claude Desktop

复制代码

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-supabase"
      ],
      "env": {
        "SUPABASE_URL": "https://your-project.supabase.co",
        "SUPABASE_KEY": "your-anon-or-service-role-key"
      }
    }
  }
}

使用示例

复制代码

"从 users 表中获取所有用户"
"插入新记录到 posts 表"
"上传文件到 storage bucket"
"列出所有认证用户"
"调用 Edge Function: hello-world"

常用工具

select: 查询数据
insert: 插入数据
update: 更新数据
delete: 删除数据
uploadFile: 上传文件
listUsers: 列出用户

4. Figma MCP

功能介绍

Figma MCP 允许 AI 助手访问和操作 Figma 设计文件，提取设计信息和资源。

主要功能

获取文件和页面信息
提取设计组件
导出图像资源
读取设计规范
访问样式和变量

安装步骤

1. 获取 Figma Access Token

访问 Figma Settings
滚动到 Personal Access Tokens 部分
点击 Generate new token
输入描述并复制 token

2. 安装 Figma MCP 服务器

复制代码

npm install -g @modelcontextprotocol/server-figma

3. 配置 Claude Desktop

复制代码

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-access-token"
      }
    }
  }
}

使用示例

复制代码

"获取文件 FILE_KEY 的所有页面"
"提取组件 'Button' 的设计规范"
"导出节点 NODE_ID 为 PNG 图像"
"列出文件中的所有颜色样式"

常用工具

getFile: 获取文件信息
getFileNodes: 获取特定节点
getImage: 导出图像
getComments: 获取评论
getTeamStyles: 获取团队样式

获取 File Key

从 Figma URL 中提取：

复制代码

https://www.figma.com/file/FILE_KEY/File-Name
                            ^^^^^^^^

5. Context7 MCP

功能介绍

Context7 MCP 提供智能上下文管理和检索功能，帮助 AI 助手更好地理解和利用项目上下文。

主要功能

代码库索引和搜索
语义相似度检索
上下文感知建议
项目结构分析

安装步骤

1. 安装 Context7 MCP 服务器

复制代码

npm install -g @context7/mcp-server

2. 配置 Claude Desktop

复制代码

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": [
        "-y",
        "@context7/mcp-server"
      ],
      "env": {
        "CONTEXT7_API_KEY": "your-context7-api-key",
        "PROJECT_PATH": "/path/to/your/project"
      }
    }
  }
}

3. 初始化项目索引

复制代码

# 在项目目录中运行
npx @context7/mcp-server init

使用示例

复制代码

"搜索与用户认证相关的代码"
"分析项目结构"
"查找类似的代码片段"
"提供关于 API 路由的上下文"

6. Ref MCP

功能介绍

Ref MCP 提供参考文档和 API 文档的快速访问，支持多种编程语言和框架。

主要功能

API 文档查询
代码示例检索
最佳实践建议
框架文档访问

安装步骤

1. 安装 Ref MCP 服务器

复制代码

npm install -g @modelcontextprotocol/server-ref

2. 配置 Claude Desktop

复制代码

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

使用示例

复制代码

"查找 React useState 的文档"
"显示 Python asyncio 的示例"
"解释 TypeScript 泛型"
"提供 Express.js 路由的最佳实践"

7. Replicate MCP

功能介绍

Replicate MCP 允许 AI 助手运行机器学习模型，包括图像生成、文本处理、音频合成等。

主要功能

运行 AI 模型
图像生成和编辑
文本到图像转换
模型版本管理
预测结果获取

安装步骤

1. 获取 Replicate API Token

访问 Replicate
注册并登录
进入 Account Settings → API Tokens
创建或复制 API Token

2. 安装 Replicate MCP 服务器

复制代码

npm install -g @modelcontextprotocol/server-replicate

3. 配置 Claude Desktop

复制代码

{
  "mcpServers": {
    "replicate": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-replicate"
      ],
      "env": {
        "REPLICATE_API_TOKEN": "your-replicate-api-token"
      }
    }
  }
}

使用示例

复制代码

"使用 Stable Diffusion 生成一张猫的图片"
"运行 BLIP 模型分析这张图片"
"使用 Whisper 转录音频文件"
"列出可用的图像生成模型"

常用工具

run: 运行模型
getPrediction: 获取预测结果
listModels: 列出模型
getModel: 获取模型详情

8. Vercel MCP

功能介绍

Vercel MCP 提供与 Vercel 平台的集成，支持部署管理、项目配置和日志查询。

主要功能

项目部署
环境变量管理
域名配置
部署日志查询
项目设置管理

安装步骤

1. 获取 Vercel Token

访问 Vercel Dashboard
进入 Settings → Tokens
创建新的 Token

2. 安装 Vercel MCP 服务器

复制代码

npm install -g @modelcontextprotocol/server-vercel

3. 配置 Claude Desktop

复制代码

{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-vercel"
      ],
      "env": {
        "VERCEL_TOKEN": "your-vercel-token"
      }
    }
  }
}

使用示例

复制代码

"列出所有 Vercel 项目"
"部署最新的代码到生产环境"
"查看项目的环境变量"
"获取最近的部署日志"
"添加自定义域名"

常用工具

listProjects: 列出项目
deploy: 创建部署
getDeployment: 获取部署信息
listEnvVars: 列出环境变量
addDomain: 添加域名

9. EdgeOne Pages MCP

功能介绍

EdgeOne Pages MCP 提供与腾讯云 EdgeOne Pages 的集成，支持边缘计算和静态站点部署。

主要功能

静态站点部署
边缘函数管理
CDN 配置
访问日志分析

安装步骤

1. 获取 EdgeOne 凭证

访问腾讯云 EdgeOne 控制台
创建 API 密钥
复制 SecretId 和 SecretKey

2. 安装 EdgeOne Pages MCP 服务器

复制代码

npm install -g @modelcontextprotocol/server-edgeone-pages

3. 配置 Claude Desktop

复制代码

{
  "mcpServers": {
    "edgeone-pages": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-edgeone-pages"
      ],
      "env": {
        "EDGEONE_SECRET_ID": "your-secret-id",
        "EDGEONE_SECRET_KEY": "your-secret-key"
      }
    }
  }
}

使用示例

复制代码

"部署静态站点到 EdgeOne Pages"
"列出所有边缘函数"
"查看 CDN 缓存状态"
"获取访问统计数据"

10. Cloudflare MCP

功能介绍

Cloudflare MCP 提供与 Cloudflare 服务的集成，包括 Workers、KV、R2 存储等。

主要功能

Workers 部署和管理
KV 存储操作
R2 对象存储
DNS 记录管理
缓存清除

安装步骤

1. 获取 Cloudflare API Token

访问 Cloudflare Dashboard
进入 My Profile → API Tokens
创建 Token（选择合适的权限模板）

2. 安装 Cloudflare MCP 服务器

复制代码

npm install -g @modelcontextprotocol/server-cloudflare

3. 配置 Claude Desktop

复制代码

{
  "mcpServers": {
    "cloudflare": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-cloudflare"
      ],
      "env": {
        "CLOUDFLARE_API_TOKEN": "your-api-token",
        "CLOUDFLARE_ACCOUNT_ID": "your-account-id"
      }
    }
  }
}

使用示例

复制代码

"部署 Worker 脚本"
"从 KV 命名空间读取键值"
"上传文件到 R2 bucket"
"列出所有 DNS 记录"
"清除缓存"

常用工具

deployWorker: 部署 Worker
kvGet: 获取 KV 值
kvPut: 设置 KV 值
r2Upload: 上传到 R2
listDNSRecords: 列出 DNS 记录

11. Github MCP

功能介绍

Github MCP 提供与 GitHub 平台的深度集成，支持仓库管理、Issue 跟踪、PR 操作等。

主要功能

仓库操作（创建、克隆、更新）
Issue 和 PR 管理
代码搜索
Workflow 触发
文件读写

安装步骤

1. 创建 GitHub Personal Access Token

访问 GitHub Settings
点击 Generate new token → Generate new token (classic)
选择所需权限：
- repo (完整仓库访问)
- workflow (工作流管理)
- read:org (读取组织信息)
生成并复制 token

2. 安装 GitHub MCP 服务器

复制代码

npm install -g @modelcontextprotocol/server-github

3. 配置 Claude Desktop

复制代码

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_TOKEN": "your-github-token"
      }
    }
  }
}

使用示例

复制代码

"列出我的所有仓库"
"创建新的 Issue"
"搜索包含 'authentication' 的代码"
"获取 PR #123 的详情"
"创建新分支"
"读取 README.md 文件"

常用工具

listRepos: 列出仓库
createIssue: 创建 Issue
searchCode: 搜索代码
createPR: 创建 Pull Request
getFile: 获取文件内容
createBranch: 创建分支

12. Stripe MCP

功能介绍

Stripe MCP 提供与 Stripe 支付平台的集成，支持支付处理、订阅管理和财务数据查询。

主要功能

创建支付意图
管理客户信息
订阅管理
发票操作
退款处理
产品和价格管理

安装步骤

1. 获取 Stripe API Key

访问 Stripe Dashboard
进入 Developers → API keys
复制 Secret key（测试或生产环境）

2. 安装 Stripe MCP 服务器

复制代码

npm install -g @modelcontextprotocol/server-stripe

3. 配置 Claude Desktop

复制代码

{
  "mcpServers": {
    "stripe": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-stripe"
      ],
      "env": {
        "STRIPE_API_KEY": "sk_test_your_stripe_secret_key"
      }
    }
  }
}

使用示例

复制代码

"创建一个 100 美元的支付意图"
"列出所有活跃订阅"
"查询客户 ID 为 cus_xxx 的信息"
"创建新产品"
"处理退款"

常用工具

createPaymentIntent: 创建支付意图
listCustomers: 列出客户
createSubscription: 创建订阅
createInvoice: 创建发票
createRefund: 创建退款
listProducts: 列出产品

13. ShadCN MCP

功能介绍

ShadCN MCP 提供 shadcn/ui 组件库的集成，帮助快速生成和配置 UI 组件。

主要功能

组件代码生成
主题配置
组件文档查询
样式定制
依赖管理

安装步骤

1. 安装 ShadCN MCP 服务器

复制代码

npm install -g @modelcontextprotocol/server-shadcn

2. 配置 Claude Desktop

复制代码

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-shadcn"
      ],
      "env": {
        "PROJECT_PATH": "/path/to/your/project"
      }
    }
  }
}

3. 初始化项目（如果尚未初始化）

复制代码

npx shadcn-ui@latest init

使用示例

复制代码

"添加 Button 组件"
"生成 Card 组件代码"
"配置暗色主题"
"列出所有可用组件"
"显示 Dialog 组件的使用示例"

常用工具

addComponent: 添加组件
listComponents: 列出组件
getComponentCode: 获取组件代码
configureTheme: 配置主题

14. Semgrep MCP

功能介绍

Semgrep MCP 提供代码静态分析功能，帮助发现安全漏洞、代码质量问题和最佳实践违规。

主要功能

代码安全扫描
自定义规则执行
漏洞检测
代码质量分析
合规性检查

安装步骤

1. 安装 Semgrep

复制代码

# macOS
brew install semgrep

# Linux/Windows (使用 pip)
pip install semgrep

2. 获取 Semgrep Token（可选，用于 Semgrep Cloud）

访问 Semgrep Cloud
注册并登录
创建 API Token

3. 安装 Semgrep MCP 服务器

复制代码

npm install -g @modelcontextprotocol/server-semgrep

4. 配置 Claude Desktop

复制代码

{
  "mcpServers": {
    "semgrep": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-semgrep"
      ],
      "env": {
        "SEMGREP_APP_TOKEN": "your-semgrep-token",
        "PROJECT_PATH": "/path/to/your/project"
      }
    }
  }
}

使用示例

复制代码

"扫描项目中的安全漏洞"
"运行 OWASP Top 10 规则"
"检查 SQL 注入风险"
"分析代码质量问题"
"执行自定义规则"

常用工具

scan: 扫描代码
listRules: 列出规则
runRule: 运行特定规则
getFindings: 获取发现的问题

15. MCP SDK

功能介绍

MCP SDK 是用于开发自定义 MCP 服务器的软件开发工具包，支持多种编程语言。

支持的语言

TypeScript/JavaScript : @modelcontextprotocol/sdk
Python : mcp
Go : github.com/modelcontextprotocol/mcp-go

TypeScript SDK 使用

1. 创建新项目

复制代码

mkdir my-mcp-server
cd my-mcp-server
npm init -y

2. 安装 SDK

复制代码

npm install @modelcontextprotocol/sdk

3. 创建服务器代码

创建 index.ts:

复制代码

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import {
  CallToolRequestSchema,
  ListToolsRequestSchema,
} from "@modelcontextprotocol/sdk/types.js";

// 创建服务器实例
const server = new Server(
  {
    name: "my-custom-server",
    version: "1.0.0",
  },
  {
    capabilities: {
      tools: {},
    },
  }
);

// 注册工具列表处理器
server.setRequestHandler(ListToolsRequestSchema, async () => {
  return {
    tools: [
      {
        name: "hello",
        description: "Say hello",
        inputSchema: {
          type: "object",
          properties: {
            name: {
              type: "string",
              description: "Name to greet",
            },
          },
          required: ["name"],
        },
      },
    ],
  };
});

// 注册工具调用处理器
server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === "hello") {
    const name = request.params.arguments?.name as string;
    return {
      content: [
        {
          type: "text",
          text: `Hello, ${name}!`,
        },
      ],
    };
  }
  throw new Error(`Unknown tool: ${request.params.name}`);
});

// 启动服务器
async function main() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("MCP Server running on stdio");
}

main().catch((error) => {
  console.error("Server error:", error);
  process.exit(1);
});

4. 编译和运行

复制代码

# 安装 TypeScript
npm install -D typescript @types/node

# 编译
npx tsc index.ts

# 运行
node index.js

5. 配置到 Claude Desktop

复制代码

{
  "mcpServers": {
    "my-custom-server": {
      "command": "node",
      "args": ["/path/to/my-mcp-server/index.js"]
    }
  }
}

Python SDK 使用

1. 安装 SDK

复制代码

pip install mcp

2. 创建服务器代码

创建 server.py:

复制代码

from mcp.server import Server
from mcp.server.stdio import stdio_server
from mcp.types import Tool, TextContent

# 创建服务器实例
app = Server("my-python-server")

@app.list_tools()
async def list_tools() -> list[Tool]:
    return [
        Tool(
            name="greet",
            description="Greet someone",
            inputSchema={
                "type": "object",
                "properties": {
                    "name": {
                        "type": "string",
                        "description": "Name to greet"
                    }
                },
                "required": ["name"]
            }
        )
    ]

@app.call_tool()
async def call_tool(name: str, arguments: dict) -> list[TextContent]:
    if name == "greet":
        person_name = arguments.get("name", "World")
        return [TextContent(
            type="text",
            text=f"Hello, {person_name}!"
        )]
    raise ValueError(f"Unknown tool: {name}")

# 运行服务器
if __name__ == "__main__":
    import asyncio
    asyncio.run(stdio_server(app))

3. 配置到 Claude Desktop

复制代码

{
  "mcpServers": {
    "my-python-server": {
      "command": "python",
      "args": ["/path/to/server.py"]
    }
  }
}

核心概念

1. 资源 (Resources)

提供数据源访问：

复制代码

server.setRequestHandler(ListResourcesRequestSchema, async () => {
  return {
    resources: [
      {
        uri: "file:///data.json",
        name: "Data File",
        mimeType: "application/json",
      },
    ],
  };
});

2. 工具 (Tools)

提供可执行操作：

复制代码

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  // 执行工具逻辑
  return { content: [{ type: "text", text: "Result" }] };
});

3. 提示 (Prompts)

提供预定义提示模板：

复制代码

server.setRequestHandler(ListPromptsRequestSchema, async () => {
  return {
    prompts: [
      {
        name: "code-review",
        description: "Review code for issues",
        arguments: [
          {
            name: "code",
            description: "Code to review",
            required: true,
          },
        ],
      },
    ],
  };
});

调试技巧

1. 启用日志

复制代码

import { Server } from "@modelcontextprotocol/sdk/server/index.js";

const server = new Server(
  { name: "my-server", version: "1.0.0" },
  { capabilities: { tools: {} } }
);

// 添加日志
server.onerror = (error) => console.error("[MCP Error]", error);

2. 使用 MCP Inspector

复制代码

npm install -g @modelcontextprotocol/inspector

# 运行 inspector
mcp-inspector node /path/to/your/server.js

3. 测试服务器

复制代码

# 使用 stdio 测试
echo '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | node server.js

常见问题

1. 配置文件在哪里？

macOS : ~/Library/Application Support/Claude/claude_desktop_config.json
Windows : %APPDATA%\Claude\claude_desktop_config.json
Linux : ~/.config/Claude/claude_desktop_config.json

2. 如何验证 MCP 服务器是否正常运行？

重启 Claude Desktop
查看应用日志（通常在配置文件同目录下的 logs 文件夹）
在对话中询问："列出可用的工具"

3. 环境变量如何设置？

在配置文件的 env 对象中设置：

复制代码

{
  "mcpServers": {
    "server-name": {
      "command": "node",
      "args": ["server.js"],
      "env": {
        "API_KEY": "your-key",
        "DEBUG": "true"
      }
    }
  }
}

4. 如何同时使用多个 MCP 服务器？

在配置文件中添加多个服务器：

复制代码

{
  "mcpServers": {
    "github": { ... },
    "stripe": { ... },
    "neon": { ... }
  }
}

5. 如何更新 MCP 服务器？

复制代码

# 使用 npm
npm update -g @modelcontextprotocol/server-<name>

# 使用 npx（自动使用最新版本）
# 无需手动更新

6. 服务器启动失败怎么办？

检查配置文件 JSON 格式是否正确
验证 API 密钥是否有效
确认 Node.js 版本（推荐 v18+）
查看日志文件获取详细错误信息

7. 如何限制 MCP 服务器的权限？

使用只读 API 密钥
配置最小权限原则
使用环境变量隔离敏感信息

8. 性能优化建议

只启用需要的 MCP 服务器
使用缓存减少 API 调用
定期清理日志文件
监控资源使用情况

9. 安全最佳实践

不要在配置文件中硬编码敏感信息
使用环境变量或密钥管理工具
定期轮换 API 密钥
限制 API 密钥的权限范围
不要将配置文件提交到版本控制系统

10. 如何开发自定义 MCP 服务器？

参考 MCP SDK 部分，使用官方 SDK 开发。

总结

MCP 提供了一个强大的框架，使 AI 助手能够与各种外部服务和工具集成。通过本指南，应该能够轻松驾驭mcp

从零到一MCP集成：让模型实现从“想法”到“实践”的跃迁

推荐的 MCP 组合

MCP 现状市场数量

MCP 简介

核心概念

通用集成步骤

前置要求

代替重启

下载并安装 Node.js：nvm install 24

验证 Node.js 版本：

验证 npm 版本：

基本配置流程

步骤 1: 安装 MCP 服务器

步骤 2: 配置 Claude Desktop

步骤 3: 重启客户端

1. Chrome DevTools MCP

功能介绍

主要功能

安装步骤

1. 安装 Chrome DevTools MCP 服务器

2. 通过AI工具配置Claude Desktop

3. 配置 Claude Desktop

4. 启动 Chrome（调试模式）

使用示例

常用工具

2. Neon MCP

功能介绍

主要功能

安装步骤

1. 获取 Neon API 密钥

2. 安装 Neon MCP 服务器

3. 配置 Claude Desktop

使用示例

常用工具

3. Supabase MCP

功能介绍

主要功能

安装步骤

1. 获取 Supabase 凭证

2. 安装 Supabase MCP 服务器

3. 配置 Claude Desktop

使用示例

常用工具

4. Figma MCP

功能介绍

主要功能

安装步骤

1. 获取 Figma Access Token

2. 安装 Figma MCP 服务器

3. 配置 Claude Desktop

使用示例

常用工具

获取 File Key

5. Context7 MCP

功能介绍

主要功能

安装步骤

1. 安装 Context7 MCP 服务器

2. 配置 Claude Desktop

3. 初始化项目索引

使用示例

6. Ref MCP

功能介绍

主要功能

安装步骤

1. 安装 Ref MCP 服务器

2. 配置 Claude Desktop

使用示例

7. Replicate MCP

功能介绍

主要功能

安装步骤

1. 获取 Replicate API Token

2. 安装 Replicate MCP 服务器

3. 配置 Claude Desktop

使用示例

常用工具

8. Vercel MCP

功能介绍

主要功能