截图一-MCP服务器

Name: 截图一-MCP服务器
Author: mrgoonie

作者：mrgoonie2 星标更新：2025-10-27

安装使用来源：spider==github.com

项目介绍

技术文档摘要

ScreenshotOne.com - MCP 服务器

该项目提供了一个模型上下文协议（MCP）服务器，该服务器连接AI助手到ScreenshotOne.com API以捕获网站的截图。

GitHub
NPM

可用功能

捕获任何URL的截图
渲染HTML内容并截取屏幕
自定义视口大小和设备模拟
捕获全页截图
使用CSS选择器选择特定元素
多种输出格式（PNG、JPEG、WebP、PDF）
阻止广告、跟踪器和cookie横幅
注入自定义CSS和JavaScript
控制等待行为和时间

ScreenshotOne.com

网站
演示
API 文档
在此处创建您的API密钥：这里

支持的传输方式

["stdio"]传输 - 默认用于CLI使用的传输方式
["流式HTTP"]传输 - 适用于基于web的客户端
- 实现认证（使用Bearer <token>的"Authorization"头）
~~"sse"传输~~ (已弃用)
编写测试

如何使用

CLI

# 捕获一个URL的截图
npm run dev:cli -- take-screenshot --url "https://example.com" --access-key "your-access-key"

# 使用自定义视口捕获截图
npm run dev:cli -- take-screenshot --url "https://example.com" --viewport-width 1920 --viewport-height 1080

# 捕获全页截图
npm run dev:cli -- take-screenshot --url "https://example.com" --full-page

# 将截图保存到文件
npm run dev:cli -- take-screenshot --url "https://example.com" --output screenshot.png

# 阻止广告和跟踪器
npm run dev:cli -- take-screenshot --url "https://example.com" --block-ads --block-trackers --block-cookie-banners

# ----------------------------------------------
# 将截图上传到Cloudflare
# 记得设置环境变量
# > 查看示例在".env.example"文件中
# ----------------------------------------------

# 捕获截图并上传到Cloudflare
npm run dev:cli -- take-screenshot --url https://example.com --upload

# 使用自定义文件名捕获截图
npm run dev:cli -- take-screenshot --url https://example.com --upload --upload-filename my-screenshot

# 启用上传调试捕获截图
npm run dev:cli -- take-screenshot --url https://example.com --upload --upload-debug

MCP 设置

对于本地配置使用stdio传输：

{
  "mcpServers": {
    "screenshotone": {
      "command": "node",
      "args": ["/path/to/screenshotone-mcp-server/dist/index.js"],
      "transportType": "stdio"
    }
  }
}

对于远程HTTP配置：

{
  "mcpServers": {
    "screenshotone": {
      "type": "http",
      "url": "http://localhost:8080/mcp"
    }
  }
}

HTTP传输的环境变量：

您可以使用这些环境变量来配置HTTP服务器：

MCP_HTTP_HOST：绑定的主机（默认：127.0.0.1）
MCP_HTTP_PORT：监听的端口（默认：8080）
MCP_HTTP_PATH：端点路径（默认：/mcp）

源代码概述

什么是MCP？

模型上下文协议（MCP）是一个开放标准，允许AI系统安全且有上下文地连接到外部工具和数据源。

此样板实现了MCP规范，具有清晰分层的架构，可以扩展以构建任何API或数据源的自定义MCP服务器。

为什么使用这个样板？

生产就绪架构：遵循已发布的MCP服务器所用的相同模式，命令行界面、工具、控制器和服务之间有明确的分离。
类型安全性：使用TypeScript构建，提高了开发者体验、代码质量和可维护性。
工作示例：包括一个完整的IP查找工具，展示了从命令行接口到API集成的完整模式。
测试框架：包含单元测试和命令行接口集成测试的测试基础设施，包括覆盖率报告。
开发工具：包括ESLint、Prettier、TypeScript和其他预配置的质量工具，用于MCP服务器开发。

开始使用

先决条件

Node.js (>=18.x)：下载
Git：用于版本控制

第一步：克隆并安装

# 克隆仓库
git clone https://github.com/mrgoonie/screenshotone-mcp-server.git
cd screenshotone-mcp-server

# 安装依赖
npm install

第二步：运行开发服务器

启动带有热重载和MCP检查器的开发模式服务器（默认使用stdio传输）：

npm run dev:server

或者使用流式HTTP传输：

npm run dev:server:http

这将启动MCP服务器，并在http://localhost:5173启用MCP检查器。

⚙️ 代理服务器正在监听端口6277 🔍 MCP检查器已在http://127.0.0.1:6274运行

当使用HTTP传输时，默认情况下服务器将在http://127.0.0.1:8080/mcp可用。

第三步：测试截图工具

使用CLI进行截图：

# 基本截图
npm run dev:cli -- take-screenshot --url "https://example.com" --access-key "your-access-key"

# 高级选项
npm run dev:cli -- take-screenshot --url "https://example.com" --format png --viewport-width 1920 --viewport-height 1080 --full-page --output screenshot.png

架构

此样板遵循一种干净的分层架构模式，分离关注点并促进可维护性。

项目结构

src/
├── cli/              # 命令行接口
├── controllers/      # 业务逻辑
├── resources/        # MCP资源：从您的服务器向LLMs暴露数据和内容
├── services/         # 外部API交互
├── tools/            # MCP工具定义
├── types/            # 类型定义
├── utils/            # 共享工具
└── index.ts          # 入口点

层次和职责

CLI 层（`src/cli/*.cli.ts`）

目的：定义命令行接口，解析参数并调用控制器
命名：文件应命名为<feature>.cli.ts
测试：CLI集成测试在<feature>.cli.test.ts

工具层（`src/tools/*.tool.ts`）

目的：定义具有模式和描述的MCP工具，供AI助手使用
命名：文件应命名为<feature>.tool.ts，类型在<feature>.types.ts
模式：每个工具应使用zod进行参数验证

控制器层（`src/controllers/*.controller.ts`）

目的：实现业务逻辑，处理错误并格式化响应
命名：文件应命名为<feature>.controller.ts
模式：应返回标准化的ControllerResponse对象

服务层（`src/services/*.service.ts`）

目的：与外部API或数据源交互
命名：文件应命名为<feature>.service.ts
模式：纯API交互，逻辑最少

工具层（`src/utils/*.util.ts`）

目的：在整个应用程序中提供共享功能
关键工具：
- logger.util.ts：结构化日志记录
- error.util.ts：错误处理和标准化
- formatter.util.ts：Markdown格式化助手

开发指南

开发脚本

# 在开发模式下启动服务器（热重载及检查器）
npm run dev:server

# 在开发模式下运行CLI
npm run dev:cli -- [command] [args]

# 构建项目
npm run build

# 在生产模式下启动服务器
npm run start:server

# 在生产模式下运行CLI
npm run start:cli -- [command] [args]

测试

# 运行所有测试
npm test

# 运行特定测试
npm test -- src/path/to/test.ts

# 生成测试覆盖率报告
npm run test:coverage

代码质量

# 检查代码
npm run lint

# 使用Prettier格式化代码
npm run format

# 检查类型
npm run typecheck

构建自定义工具

按照以下步骤将您自己的工具添加到服务器：

1. 定义服务层

在src/services/中创建一个新的服务以与您的外部API交互：

// src/services/example.service.ts
import { Logger } from '../utils/logger.util.js';

const logger = Logger.forContext('services/example.service.ts');

export async function getData(param: string): Promise<any> {
	logger.debug('获取数据', { param });
	// API交互代码在此处
	return { result: '示例数据' };
}

2. 创建控制器

在src/controllers/中添加一个控制器以处理业务逻辑：

// src/controllers/example.controller.ts
import { Logger } from '../utils/logger.util.js';
import * as exampleService from '../services/example.service.js';
import { formatMarkdown } from '../utils/formatter.util.js';
import { handleControllerError } from '../utils/error-handler.util.js';
import { ControllerResponse } from '../types/common.types.js';

const logger = Logger.forContext('controllers/example.controller.ts');

export interface GetDataOptions {
	param?: string;
}

export async function getData(
	options: GetDataOptions = {},
): Promise<ControllerResponse> {
	try {
		logger.debug('使用选项获取数据', options);

		const data = await exampleService.getData(options.param || '默认值');

		const content = formatMarkdown(data);

		return { content };
	} catch (error) {
		throw handleControllerError(error, {
			entityType: '示例数据',
			操作: 'getData',
			来源: 'controllers/example.controller.ts',
		});
	}
}

3. 实现MCP工具

在src/tools/中创建一个工具定义：

// src/tools/example.tool.ts
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { z } from 'zod';
import { Logger } from '../utils/logger.util.js';
import { formatErrorForMcpTool } from '../utils/error.util.js';
import * as exampleController from '../controllers/example.controller.js';

const logger = Logger.forContext('tools/example.tool.ts');

const GetDataArgs = z.object({
	param: z.string().optional().describe('可选参数'),
});

type GetDataArgsType = z.infer<typeof GetDataArgs>;

async function handleGetData(args: GetDataArgsType) {
	try {
		logger.debug('工具get_data被调用', args);

		const result = await exampleController.getData({
			param: args.param,
		});

		return {
			content: [{ type: 'text' as const, text: result.content }],
		};
	} catch (error) {
		logger.error('工具get_data失败', error);
		return formatErrorForMcpTool(error);
	}
}

export function register(server: McpServer) {
	server.tool(
		'get_data',
		`从示例API获取数据，可选使用\`param\`。
使用此工具获取示例数据。返回格式化的Markdown数据.`,
		GetDataArgs.shape,
		handleGetData,
	);
}

4. 添加CLI支持

在src/cli/中创建一个CLI命令：

// src/cli/example.cli.ts
import { program } from 'commander';
import { Logger } from '../utils/logger.util.js';
import * as exampleController from '../controllers/example.controller.js';
import { handleCliError } from '../utils/error-handler.util.js';

const logger = Logger.forContext('cli/example.cli.ts');

program
	.command('get-data')
	.description('获取示例数据')
	.option('--param <value>', '可选参数')
	.action(async (options) => {
		try {
			logger.debug('CLI get-data被调用', options);

			const result = await exampleController.getData({
				param: options.param,
			});

			console.log(result.content);
		} catch (error) {
			handleCliError(error);
		}
	});

5. 注册组件

更新入口点以注册新的组件：

// 在src/cli/index.ts中
import '../cli/example.cli.js';

// 在src/index.ts（对于工具）
import exampleTool from './tools/example.tool.js';
// 然后在registerTools函数中：
exampleTool.register(server);

调试工具

MCP检查器

访问可视化的MCP检查器以测试您的工具并查看请求/响应详情：

运行npm run dev:server
在浏览器中打开http://localhost:5173
在UI中直接测试您的工具并查看日志

服务器日志

为开发启用调试日志：

# 设置环境变量
DEBUG=true npm run dev:server

# 或在~/.mcp/configs.json中配置

发布您的MCP服务器

准备发布您的自定义MCP服务器时：

更新package.json中的详细信息
更新README.md中的工具文档
构建项目：npm run build
测试生产构建：npm run start:server
发布到npm：npm publish

许可证

ISC许可证

{
	"screenshotone": {
		"environments": {
			"DEBUG": "true",
			"SCREENSHOTONE_ACCESS_KEY": "值"
		}
	}
}

注意：为了兼容性，如果未找到screenshotone键，服务器还将识别完整包名（screenshotone-mcp-server）或无范围包名（screenshotone-mcp-server）下的配置。然而，建议新配置使用短的screenshotone键。