MCP 本质上是为 AI 大模型提供调用外部工具的能力,MCP Server 就是这个能力的具体实现——你可以通过它,把你已有的 API、脚本、服务包装成 AI 能理解和调用的 MCP 工具。
我们就以获取图片为例来创建一个 MCP Server,让 AI 根据自然语言来获取图片网站上的图片,比如 Pixabay 图片网站,它就提供了 API 可以让外界来搜索图片

本次开发使用windows环境

1.安装 Node 环境

node --version
npm --version

2.开发MCP Server准备工作,在一个文件夹下面创建pixabay目录

mkdir pixabay
cd pixabay

在这里插入图片描述

3.初始化一个新的npm项目

npm init -y

4.安装相关依赖

npm install @modelcontextprotocol/sdk zod
npm install -D @types/node typescript

5.创建主要目录和空文件index.ts

mkdir src
mkdir src 2> nul || echo "" > src\index.ts

6.更新 package.json 文件

{
  "name": "pixabay",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc",
    "postbuild": "node scripts/set-permissions.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@modelcontextprotocol/sdk": "^1.11.0",
    "zod": "^3.24.4"
  },
  "devDependencies": {
    "@types/node": "^22.15.14",
    "typescript": "^5.8.3"
  },
  "type": "module",
  "bin": {
    "pixabay": "./build/index.js"
  },
  "files": [
    "build"
  ]
}

7.在根目录下生成script目录,创建set-permissions.js文件,内容如下

import fs from 'fs';
import path from 'path';

const filePath = path.join(process.cwd(), 'build', 'index.js');

try {
  // Windows 不需要权限设置,仅打印信息
  if (process.platform === 'win32') {
    console.log('Windows system detected. Skipping chmod.');
  } else {
    fs.chmodSync(filePath, 0o755); // 等同于 chmod 755
    console.log('Permissions set to 755 for build/index.js');
  }
} catch (err) {
  console.error('Error setting permissions:', err);
}

8.根目录创建 tsconfig.json 文件,内容如下

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "Node16",
    "moduleResolution": "Node16",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
"include": ["src/**/*"],
"exclude": ["node_modules"]
}

9.在项目 index.ts 文件中添加 MCP Server,内容如下

// MCP - NODE SDK
import { McpServer } from"@modelcontextprotocol/sdk/server/mcp.js";

// 导入 StdioServerTransport 类,用于处理服务器的输入输出通信
import { StdioServerTransport } from"@modelcontextprotocol/sdk/server/stdio.js";

// 导入用于验证输入参数的库
import { z } from"zod";

// Pixabay API URL
const baseUrl = "https://pixabay.com/api/";

/**
 * 定义了 MCP Server 实例。
 */
const server = new McpServer({
    name: "pixabay",
    version: "1.0.0",
    capabilities: {
        resources: {},
        tools: {},
    },
});

/**
 * 定义了一个名为 "pixabay-image-search" 的工具。
 * 该工具接受一个查询字符串和一个图像类型作为输入参数,
 * 并返回一个包含图像信息的 JSON 字符串。
 */
server.tool(
    'pixabay-image-search',
    {
        query: z.string(),
        type: z.string()
    },
    async ({ query, type = 'all' }) => {
        try {
            // 检查是否设置了 PIXABAY_KEY 环境变量
            if (!process.env.PIXABAY_KEY) {
                console.error("PIXABAY_KEY environment variable is not set");
                process.exit(1);
            }
            console.log("PIXABAY_KEY", process.env.PIXABAY_KEY);

            // 构建 Pixabay API 请求 URL
            const requestUrl = `${baseUrl}?key=${process.env.PIXABAY_KEY}&q=${query}&image_type=${type}&per_page=3`;

            // 发送请求并获取响应
            const response = await fetch(requestUrl);

            //  检查响应状态
            const json = await response.json();

            // 返回响应结果
            return {
                content: [{
                    type: 'text',
                    text: JSON.stringify({
                        images: json.hits || [],
                        total_results: json.total,
                        query,
                    }, null, 2)
                }]
            }
        } catch (e) {
            return {
                content: [{
                    type: 'text',
                    text: `Error: ${e instanceof Error ? e.message : 'Unknown error'}`
                }],
                isError: true
            };
        }
    }
)

/**
 * 启动服务器并建立与传输层的连接。
 * 该函数创建一个标准输入输出的服务器传输实例,
 * 并使用该实例将服务器连接到传输层。
 */
async function startServer() {
    // 创建一个标准输入输出的服务器传输实例,用于处理服务器的输入输出通信
    const transport = new StdioServerTransport();

    // 等待服务器通过指定的传输实例建立连接
    await server.connect(transport);
}

// 启动服务器
startServer();

10.整体目录结构如下

在这里插入图片描述

11.命令进行构建

npm run build

在这里插入图片描述

12.启动调试参考命令

npx @modelcontextprotocol/inspector node build/index.js

在这里插入图片描述

13.MCP Server启动成功
在这里插入图片描述

14.MCP Server启动成功
因为支持MCP协议的官方客户端Claude App对中国区禁用,由于Cline是开源免费的,本次学习继续使用Cline工具进行调用如上图片搜索MCP Server
在这里插入图片描述
15.在VS CODE 中配置当前图片搜索MCP Server
在这里插入图片描述

{
  "mcpServers": {
    "weather-mcp": {
      "autoApprove": [],
      "disabled": true,
      "timeout": 60,
      "command": "node",
      "args": [
        "C:\\ai\\weather-mcp-server\\weather-server.js"
      ],
      "env": {},
      "transportType": "stdio"
    },
    "image-mcp": {
      "autoApprove": [],
      "disabled": false,
      "timeout": 60,
      "command": "node",
      "args": [
        "C:\\ai\\mcp\\pixabay\\build\\index.js"
      ],
      "env": {},
      "transportType": "stdio"
    }
  }
}

在这里插入图片描述

注意这里args一定要配置正确的MCP Server开发的node.js的本地路径

在这里插入图片描述
16.服务配置成功,下面开始调用MCP Server进行图片搜索

测试:输入“来一张猫咪图片”
在这里插入图片描述
选择act执行,MCP Server生成了图片image的地址

在这里插入图片描述
点击地址https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg进行访问
在这里插入图片描述

Logo

火山引擎开发者社区是火山引擎打造的AI技术生态平台,聚焦Agent与大模型开发,提供豆包系列模型(图像/视频/视觉)、智能分析与会话工具,并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长,新用户可领50万Tokens权益,助力构建智能应用。

更多推荐