手把手教你从零搭建 MCP 服务器:实现 AI 调用外部图片搜索工具

摘要:你想让 AI 不仅能回答问题,还能帮你执行具体任务吗?比如,直接通过对话让 AI 搜索并返回图片?MCP(Model Context Protocol)正是实现这一目标的关键技术,而 MCP Server 则是具体实现这一能力的桥梁。

你想让 AI 不仅能回答问题,还能帮你执行具体任务吗?比如,直接通过对话让 AI 搜索并返回图片?MCP(Model Context Protocol)正是实现这一目标的关键技术,而 MCP Server 则是具体实现这一能力的桥梁。

MCP 的作用是让 AI 大模型能够安全、可控地调用外部工具和服务。我们可以把自己已有的 API、脚本或服务包装成一个 MCP 工具,AI 就能理解并使用它们。本文将以构建一个 Pixabay 图片搜索 MCP 服务器为例,带你一步步实现属于自己的工具服务器。

在开始之前,你需要准备以下几样:

  • 一个 Pixabay 账户(用于获取免费 API Key)

  • 安装好 Node.js 和 npm

  • 代码编辑器(如 VS Code)


安装 Node.js 环境

如果你还没有安装 Node.js,请访问 nodejs.org 下载安装包。安装完成后,打开终端,输入以下命令检查是否安装成功:

node --version
npm --version

如果显示了版本号,就说明安装成功。


创建 MCP 服务器项目

首先创建一个项目目录,进入并初始化 npm 项目:

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

接着安装必要的依赖包:

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

创建源代码目录和入口文件:

mkdir src
touch src/index.ts

然后,我们需要配置 package.json 文件。请将其更新为以下内容:

{
  "name": "pixabay-mcp-server",
  "version": "1.0.0",
  "type": "module",
  "bin": {
    "pixabay-mcp": "./build/index.js"
  },
  "scripts": {
    "build": "tsc && chmod 755 build/index.js"
  },
  "files": [
    "build"
  ]
}

在项目根目录下创建 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"]
}


编写 MCP 服务器代码

现在我们来编写核心代码。打开 src/index.ts,写入以下内容:

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

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

const server = new McpServer({
  name: "pixabay",
  version: "1.0.0"
});

server.tool(
  "pixabay-image-search",
  {
    query: z.string().describe("搜索图片的关键词"),
    imageType: z.enum(["all", "photo", "illustration", "vector"]).default("all")
  },
  async ({ query, imageType }) => {
    const apiKey = process.env.PIXABAY_KEY;
    if (!apiKey) {
      throw new Error("请设置 PIXABAY_KEY 环境变量");
    }

    const url = `${baseUrl}?key=${apiKey}&q=${encodeURIComponent(query)}&image_type=${imageType}&per_page=5`;

    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`请求失败: ${response.status}`);
    }

    const data = await response.json();
    return {
      content: [
        {
          type: "text",
          text: JSON.stringify(
            {
              images: data.hits,
              total: data.total,
              query: query
            },
            null,
            2
          )
        }
      ]
    };
  }
);

async function startServer() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
}

startServer();

这段代码做了以下几件事:

  • 引入必要的依赖模块

  • 创建 MCP 服务器实例

  • 定义了一个图片搜索工具,接收查询关键词和图片类型参数

  • 调用 Pixabay API 获取图片数据

  • 返回格式化后的结果


构建项目

现在我们可以构建项目了:

npm run build

构建完成后,会在 build 目录下生成 index.js 文件。


调试 MCP 服务器

官方提供了 MCP Inspector 工具帮助我们调试服务器。首先安装 Inspector:

sudo npm install -g @modelcontextprotocol/inspector

然后使用以下命令启动调试:

PIXABAY_KEY=你的API密钥 npx @modelcontextprotocol/inspector node build/index.js

在浏览器中打开 http://127.0.0.1:6274/,你会看到一个调试界面。在这里你可以测试工具是否正常工作。


在 Claude Desktop 中使用

若想在 Claude Desktop 中使用这个 MCP 服务器,需要编辑 Claude 的配置文件。文件位置通常在:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

  • Windows: %APPDATA%\Claude\claude_desktop_config.json

在配置文件中添加:

{
  "mcpServers": {
    "pixabay": {
      "command": "node",
      "args": ["/绝对路径/pixabay-mcp-server/build/index.js"],
      "env": {
        "PIXABAY_KEY": "你的API密钥"
      }
    }
  }
}

重启 Claude 后,你就可以直接让 Claude 帮你搜索图片了。


在 VS Code 中使用

在 VS Code 中,需要安装 Continue 或 ROO CODE 插件。然后在设置中添加 MCP 服务器配置,内容与 Claude 配置类似。

配置完成后,你就可以在 VS Code 中直接通过 AI 助手使用图片搜索功能了。


发布到 npm

如果你希望分享这个工具,可以发布到 npm。首先登录 npm:

npm login

然后更新 package.json 中的信息,最后发布:

npm publish


扩展思路

这个示例展示了如何集成图片搜索 API,你可以用相同的方法集成其他服务,比如:

  • 天气预报 API

  • 数据库查询工具

  • 企业内部系统

  • 电商平台商品搜索

MCP 技术的真正价值在于让 AI 能够安全、可控地使用现有系统和数据,而无需重新训练模型。


总结

本文带你完整实现了一个 MCP 服务器,从环境搭建、代码编写、调试到实际应用。你学会了:

  • MCP 服务器的基本结构和工作原理

  • 如何包装现有 API 为 AI 可用的工具

  • 调试和测试 MCP 服务器的方法

  • 如何集成到常用 AI 工具中

MCP 技术仍处于早期阶段,但现在正是学习和尝试的好时机。试着将你的业务能力或常用工具包装成 MCP 工具,让 AI 真正成为你的得力助手。

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_12898