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

更新日期: 2025-08-24阅读: 402标签: mcp

你想让 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://fly63.com/article/detial/12898

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!