极客前沿

AI 截图工具 MCP 入门:5 分钟在 Cursor 中装好

2026-07-16 01:31
DEV Tutorial
查看原文

零基础学会在 Cursor 编辑器中安装 MCP 截图工具,让 AI 能看见网页,帮你调试布局、检查图片。

准备环境:你需要什么?

在开始之前,请确保你的电脑上已经安装了 Node.js(一个让 JavaScript 在电脑上运行的环境)。如果没有,可以到 nodejs.org 下载 LTS 版本并安装。另外,你需要一个 Cursor 编辑器(一个 AI 编程工具),以及一个 Rendex 账号(用来获取 API 密钥)。

Tutorial Image

安装步骤:一步步来

  1. 获取 API 密钥:访问 rendex.dev/login 并登录,在控制台复制你的密钥(以 rdx_ 开头)。注意:这个密钥要保密,不要上传到代码仓库。
  2. 创建配置文件:在你的项目根目录下,新建文件夹 .cursor,并在里面创建文件 mcp.json。如果项目根目录没有 .gitignore 文件,也创建一个;如果有,把 .cursor/mcp.json 加进去,防止密钥被提交。
  3. 写入配置内容:用文本编辑器打开 mcp.json,粘贴以下 JSON 代码(注意替换 YOUR_API_KEY 为你的真实密钥):
    {
    "mcpServers": {
    "rendex": {
    "command": "npx",
    "args": ["-y", "@copperline/rendex-mcp"],
    "env": {
    "RENDEX_API_KEY": "YOUR_API_KEY"
    }
    }
    }
    }
  4. 重启 Cursor:完全关闭并重新打开 Cursor,这样它才会读取新的配置。

验证是否成功

打开 Cursor,点击右下角的 MCP 图标(或通过设置找到 MCP 面板)。如果看到 rendex 服务器显示绿色状态,并且下方列出了 rendex_screenshot 工具,就说明安装成功了!如果显示红色,请检查 JSON 格式是否正确(比如有没有漏掉逗号或括号)。

Tutorial Image

下一步可以做什么

现在你可以用自然语言让 Cursor 截图了。例如,输入“截图 https://example.com 并告诉我顶部导航栏的颜色”,AI 就会自动调用工具,返回图片并分析。你可以指定格式(PNG、JPEG、WebP、PDF)、是否截取全页、是否去除广告等。如果遇到问题,先确认 Node.js 已正确安装,并尝试在终端运行 npx -y @copperline/rendex-mcp 来预下载包。每月有 100 次免费截图额度,足够日常使用。

内容来源

DEV Tutorial

发布时间

2026-07-16 01:31

返回 AI技术