在Windsurf中，Cascade AI可以读取项目文件并执行终端命令，但它无法识别网页的实际呈现效果。当需要检查页面布局时，它只能进行猜测。Model Context Protocol（MCP）解决了这个问题。通过连接Rendex MCP服务器，Cascade获得了一个新工具：只需提供一个网址，它即可自动截图并根据截图内容回复相关问题。整个过程无需手动操作截图、上传或粘贴。这一配置大约需时十分钟，前提是你已经安装了Windsurf和Node.js。以下为具体步骤。

第一步：获取API密钥 前往rendex.dev/login登录并在控制台复制你的API密钥，格式以rdx_开头。免费版每月提供100次渲染，无需绑定信用卡。

第二步：访问MCP服务器设置 在Windsurf中点击状态栏的齿轮图标，选择MCP Servers，这会打开mcp_config.json文件，Cascade在启动时会读取该配置文件。 球友会

第三步：添加Rendex服务器 将以下配置段添加到mcp_config.json中：{"mcpServers": {"rendex": {"command": "npx","args": ["-y", "@copperline/rendex-mcp"],"env": {"RENDEX_API_KEY": "rdx_your_key_here"}}}}。请将rdx_your_key_here替换为你的实际密钥，保存文件。

第四步：重启Cascade 在MCP Servers面板中点击Restart Cascade，或者直接关闭并重新启动Windsurf。

第五步：确认工具有效性 在Cascade聊天窗口输入：What MCP tools do you have? 如果配置成功，它将列出rendex_screenshot。 球友会

第六步：开始进行截图 直接输入指令即可。例如：“截图https://rendex.dev，描述一下hero区域”或“把https://example.com/checkout截成整页PNG，检查布局问题”。Cascade会调用rendex_screenshot获取渲染后的页面，并根据所见内容做出回应。

常见问题排查 如果rendex_screenshot没有出现，先在终端中运行npx @copperline/rendex-mcp --version确认Node.js是否安装成功。如果遇到认证错误，请检查mcp_config.json中的RENDEX_API_KEY与控制台密钥是否完全一致，包括rdx_前缀。如果Cascade超时，可以加入blockResourceTypes: ["media", "font"]参数，或使用waitUntil: "domcontentloaded"，这会加快截图速度。

该配置的其他应用 Rendex的MCP文档中还包含了托管OAuth服务器的配置方法及完整工具schema。同样的配置也适用于Cursor，只需将配置写入.cursor/mcp.json。如果你只想测试几个URL的效果，还有一个免费的截图工具，无需连接Cascade也能使用。免费密钥可以直接获取，每月100次足以进行多次尝试。 球友会