---
description: "Cursor 3.7 MCP optimization: browser Design Mode, canvases, Figma, Cloudflare tools, MCP Apps structured content, and direct action patterns."
alwaysApply: false
---

# Cursor 3.7 MCP Optimization

Current through **Cursor 3.7** (Jun 2026). Direct guidance for Cursor's MCP and integrated surfaces. Use the right tool for each job.

## Browser Tools (cursor-ide-browser)

**Always do before any interaction:**
```
1. browser_tabs with action: "list" -> check current tabs/URLs
2. browser_snapshot -> get current page structure and refs
```

**Interaction pattern:**
```
1. Identify the target ref from snapshot (use exact ref, not coordinates)
2. For clicks: prefer snapshot refs over mouse_xy coordinates
3. For forms: use browser_fill for existing content, browser_type to append
4. After ANY action that changes page: take fresh snapshot
```

**Coordinate clicks ONLY when:**
- A fresh screenshot confirms the exact visual target
- No snapshot ref is available
- The target is visually verifiable (button, link)

**Never do:**
- Click without a fresh snapshot first
- Reuse old screenshot coordinates
- Assume page state without verification

## Browser Design Mode (Cursor 3.7)

Design Mode is a **user-driven** overlay in the integrated browser — agents do not invoke it as a tool. When the user selects elements there, treat those selections as ground truth for UI edits (same discipline as `multimodal-grounded`):

- **Multi-select:** two or more elements selected together carry code, layout, and visual relationships — use them for parity edits, deduplication, or batch component tweaks.
- **Voice input:** transcribed voice instructions are user intent; honor them even if the agent is mid-run.
- **Agent path unchanged:** still snapshot → ref-based interaction for automation; Design Mode complements, not replaces, the MCP browser flow.

## Canvas (Cursor 3.7)

Canvases are live React artifacts beside the chat — dashboards, reports, analyses, internal tools. Load the `canvas` skill before creating or editing `.canvas.tsx` files.

**When to use a canvas:**
- Structured MCP or tabular deliverables where the data *is* the output (prefer canvas over markdown tables)
- Interactive reports the user may share or iterate on (context usage breakdowns, audits, timelines)

**3.7 canvas features:**
- **Design Mode in canvases** — user can select and annotate UI elements directly; treat annotations like browser Design Mode selections.
- **Context usage report** — interactive token breakdown (prompt, tools, rules, skills); useful for compression decisions on M3 long-context work.
- **Embedded prompt buttons** — canvases can run follow-up prompts; keep button text bounded and explicit.
- **Full-screen share** — shared canvases open in the browser for presentation; not a substitute for app UI verification.

## Figma Tools (plugin-figma-figma)

**Design-to-code workflow:**
```
1. Call get_design_context with fileKey and nodeId
2. Adapt output to project's existing stack/components
3. Do NOT use raw Figma output as final code
```

**URL parsing:**
- `figma.com/design/:fileKey/:fileName?node-id=:nodeId` -> convert "-" to ":" in nodeId
- `figma.com/board/:fileKey/:fileName` -> FigJam, use get_figjam
- `figma.com/make/:makeFileKey/:makeFileName` -> use makeFileKey

**When designer provides screenshots:**
- Use get_screenshot for visual verification
- Translate Figma design tokens to project's token system
- Never copy exact Figma hex values without checking project palette
- For M3 multimodal parity, the design screenshot is the contract — cite the file path in the report

## Cloudflare Tools

**Load these skills before Cloudflare work:**
- `cloudflare/SKILL.md` — comprehensive platform guidance
- `wrangler/SKILL.md` — CLI usage and best practices
- `workers-best-practices/SKILL.md` — production Worker patterns

**Before deploying:**
```
1. Read wrangler skill for correct syntax
2. Verify secrets/bindings in wrangler.jsonc
3. Run wrangler dev locally first
```

**MCP auth:** If a Cloudflare MCP server has `mcp_auth`, call it before using tools.

## MCP Apps Structured Content

Since Cursor 3, **MCP Apps structured content** lets tools return richer structured outputs (typed objects, lists, tables) instead of prose blobs.

- When a tool returns structured content, **prefer the structured form** over reconstructing from prose.
- Surface the structured result faithfully in the report — do not paraphrase the shape.
- A few plugin families (Vercel, Linear, Cloudflare) already return structured outputs of this kind; check the descriptor before assuming a tool returns plain text.
- If the runtime supports it, render tabular or nested results as a canvas or table, not as a markdown dump.

## MCP General Rules

```
1. Read the tool schema BEFORE calling unfamiliar MCP tools
2. Use exact parameter names from the schema
3. If tool unavailable, say so and use next best exposed path
4. Do not infer hidden parameters or old API versions
5. If the tool returns structured content, use the structured form rather than the prose form
```

## Marketplace plugins

Plugins installed from the [Cursor Marketplace](https://cursor.com/marketplace) extend agents with MCPs, skills, and related capabilities. Treat them like any other MCP surface: **inventory** what the session exposes, **read descriptors/schemas** before first use, then call the smallest valid tool — same as in `tool-discovery.mdc`.

**Rollout caveat (Cursor 3.7):** third-party plugin imports now **default to off for Enterprises** when unset, while preserving explicit Admin overrides. If you are working in an Enterprise workspace, confirm the plugin import policy with the Admin before relying on a marketplace plugin.

## Capability Mapping Checklist

Before acting, confirm:
- [ ] Direct native tool exists for this action
- [ ] MCP tool exists with current schema (and structured-content support if relevant)
- [ ] Browser interaction confirmed via snapshot
- [ ] Fallback path identified if primary fails