MCP Browser Boilerplate

MCP服务器模板

一个用于构建MCP（模型上下文协议）服务器的起始模板，使AI助手能够直接与您的网络浏览器进行交互。借助此服务器，Claude、Cursor或任何其他兼容MCP的助手都可以通过标准化的工具和资源浏览网页、提取内容，并对网页执行操作。

你可以使用这个仓库做什么

• 在浏览器中打开一个网页

• 从您的AI助手处动态搜索网络

• 提取页面文本、标题和元数据

• 与网页内容进行交互（例如，抓取部分数据，跟随链接）

• 作为MCP工具，构建自定义浏览操作

目的

这个模板帮助你快速开始构建：

• 为AI助手定制的工具
• 动态内容资源提供商
• 常见操作的提示模板
• 外部API和服务的集成点

特点/功能

• 简单的“hello-world”工具示例
• 带有适当类型定义的TypeScript支持
• 针对不同MCP客户端的简易安装脚本
• 结构清晰的项目，随时准备进行定制

它是如何运作的

这个MCP服务器模板提供：

1. 使用MCP SDK进行基本服务器设置
2. 示例工具实现
3. 构建和安装脚本
4. 用于开发的TypeScript配置

随附的示例展示了如何创建一个简单的工具，该工具接受一个名称参数并返回问候语。

入门指南/开始使用

# Clone the boilerplate
git clone 
cd mcp-server-boilerplate

# Install dependencies
pnpm install

# Build the project
pnpm run build

# Start the server
pnpm start

安装脚本

这个模板包含了适用于不同MCP客户端的便捷安装脚本：

# For Claude Desktop
pnpm run install-desktop

# For Cursor
pnpm run install-cursor

# For Claude Code
pnpm run install-code

# Generic installation
pnpm run install-server

这些脚本将构建项目并自动更新相应的配置文件。

与Claude桌面版的使用

安装脚本会自动添加配置，但您也可以手动将其添加到您的（配置中） claude_desktop_config.json 文件：

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

然后重启 Claude Desktop 以连接到服务器。

自定义您的服务器

添加工具

工具是AI助手可以调用的功能。以下是基本结构：

server.tool(
  "tool-name",
  "Description of what the tool does",
  {
    // Zod schema for parameters
    param1: z.string().describe("Description of parameter"),
    param2: z.number().optional().describe("Optional parameter"),
  },
  async ({ param1, param2 }) => {
    // Your tool logic here
    return {
      content: [
        {
          type: "text",
          text: "Your response",
        },
      ],
    };
  }
);

添加资源

资源为人工智能提供可访问的动态内容：

server.resource(
  "resource://example/{id}",
  "Description of the resource",
  async (uri) => {
    // Extract parameters from URI
    const id = uri.path.split("/").pop();

    return {
      contents: [
        {
          uri,
          mimeType: "text/plain",
          text: `Content for ${id}`,
        },
      ],
    };
  }
);

添加提示

提示是可重用的模板：

server.prompt(
  "prompt-name",
  "Description of the prompt",
  {
    // Parameters for the prompt
    topic: z.string().describe("The topic to discuss"),
  },
  async ({ topic }) => {
    return {
      description: `A prompt about ${topic}`,
      messages: [
        {
          role: "user",
          content: {
            type: "text",
            text: `Please help me with ${topic}`,
          },
        },
      ],
    };
  }
);

项目结构

├── src/
│   └── index.ts          # Main server implementation
├── scripts/              # Installation and utility scripts
├── dist/                 # Compiled JavaScript (generated)
├── package.json          # Project configuration
├── tsconfig.json         # TypeScript configuration
└── README.md            # This file

发展

1. 进行更改至 src/index.ts
2. 跑 pnpm run build 编译
3. 用（工具/方法）测试您的服务器 pnpm start
4. 使用安装脚本来更新您的MCP客户端配置

下一步行动

1. 更新 package.json 附上您的项目详情
2. 自定义服务器名称和工具 src/index.ts
3. 添加你自己的工具、资源和提示
4. 根据需要与外部API或数据库集成

许可证

麻省理工学院（MIT）