给Windsurf装上眼睛：六步让AI看懂网页截图

Windsurf的Cascade AI能读你项目里的每个文件，能跑终端命令，但它有个盲区——看不到渲染出来的网页长什么样。你让它检查页面布局问题，它只能靠猜。 Model Context Protocol（MCP）把这个短板补上了。接上Rendex MCP服务器，Cascade就多了一个能自己调用的工具：给它一个URL，它自己截图，然后基于截图内容回答你的问题。整个过程不需要你手动截图、上传、再粘贴。 这套配置大概需要十分钟，前提是你已经装好了Windsurf和Node.js。下面直接上步骤。 第一步：拿API Key 去rendex.dev/login登录，打开控制台复制你的key。它以 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 换成你实际的key，保存文件。 第四步：重启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跟控制台里的key是否完全一致，包括rdx_前缀。 如果Cascade超时，让它加上 blockResourceTypes: ["media", "font"] 参数，或者用 waitUntil: "domcontentloaded" ，截图会快很多。 这套配置还能怎么用 Rendex的MCP文档里还有托管OAuth服务器的配置方法和完整工具schema。同样的配置也适用于Cursor——把配置写进 .cursor/mcp.json 就行。如果你只是想先测几个URL看看效果，他们还有个免费截图工具，不用接Cascade也能用。 免费key直接去拿，每月100次够你折腾一阵子了。 特别