AI 截图工具 MCP 入门:5 分钟在 Cursor 中装好
零基础学会在 Cursor 编辑器中安装 MCP 截图工具,让 AI 能看见网页,帮你调试布局、检查图片。
准备环境:你需要什么?
在开始之前,请确保你的电脑上已经安装了 Node.js(一个让 JavaScript 在电脑上运行的环境)。如果没有,可以到 nodejs.org 下载 LTS 版本并安装。另外,你需要一个 Cursor 编辑器(一个 AI 编程工具),以及一个 Rendex 账号(用来获取 API 密钥)。
安装步骤:一步步来
- 获取 API 密钥:访问 rendex.dev/login 并登录,在控制台复制你的密钥(以
rdx_开头)。注意:这个密钥要保密,不要上传到代码仓库。 - 创建配置文件:在你的项目根目录下,新建文件夹
.cursor,并在里面创建文件mcp.json。如果项目根目录没有.gitignore文件,也创建一个;如果有,把.cursor/mcp.json加进去,防止密钥被提交。 - 写入配置内容:用文本编辑器打开
mcp.json,粘贴以下 JSON 代码(注意替换YOUR_API_KEY为你的真实密钥):{
"mcpServers": {
"rendex": {
"command": "npx",
"args": ["-y", "@copperline/rendex-mcp"],
"env": {
"RENDEX_API_KEY": "YOUR_API_KEY"
}
}
}
} - 重启 Cursor:完全关闭并重新打开 Cursor,这样它才会读取新的配置。
验证是否成功
打开 Cursor,点击右下角的 MCP 图标(或通过设置找到 MCP 面板)。如果看到 rendex 服务器显示绿色状态,并且下方列出了 rendex_screenshot 工具,就说明安装成功了!如果显示红色,请检查 JSON 格式是否正确(比如有没有漏掉逗号或括号)。
下一步可以做什么
现在你可以用自然语言让 Cursor 截图了。例如,输入“截图 https://example.com 并告诉我顶部导航栏的颜色”,AI 就会自动调用工具,返回图片并分析。你可以指定格式(PNG、JPEG、WebP、PDF)、是否截取全页、是否去除广告等。如果遇到问题,先确认 Node.js 已正确安装,并尝试在终端运行 npx -y @copperline/rendex-mcp 来预下载包。每月有 100 次免费截图额度,足够日常使用。
内容来源
DEV Tutorial
发布时间
2026-07-16 01:31