docs

Integrations

Efecto for Cursor

Add Efecto to Cursor with one click or by editing a config file. Your AI agent gets 46 design tools to create layouts, pages, and graphics directly in the browser.

One-Click Install

Install Efecto in Cursor — this link opens Cursor and adds the MCP server automatically.

Manual Setup

Add this to .cursor/mcp.json in your project (or ~/.cursor/mcp.json for all projects):

.cursor/mcp.json
{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}
Alternative: add via Cursor Settings UI
  1. Open Cursor Settings (Cmd+, on Mac, Ctrl+, on Windows)
  2. Go to MCP in the sidebar
  3. Click + Add new MCP server
  4. Paste the config above

Verify It Works

Restart Cursor after adding the config, then try a prompt like:

Design a landing page for my SaaS product in Efecto
Create an Instagram carousel about design tips in Efecto
Make a pitch deck for my startup in Efecto

Reference