docs
Efecto MCP

MCP

Add Efecto to Any AI Tool

Efecto uses the Model Context Protocol (MCP) to connect to AI tools. Once connected, your AI agent can create designs directly in your browser — layouts, pages, graphics, and more.

What is MCP?

MCP is an open standard that lets AI tools connect to external services. When you add Efecto as an MCP server, your AI agent gets 44 design tools — it can create artboards, add layouts, style elements, and export images, all through natural conversation.

Claude Code

Claude Code has the deepest integration — MCP tools plus design skills that teach Claude best practices for web design, social media, and graphic design.

Plugin (recommended)

The plugin includes MCP tools plus 3 design skills for better results. See the dedicated Claude Code setup guide for full instructions.

Quick install (MCP only, no skills)
npx @efectoapp/mcp install

This adds Efecto as an MCP server to your Claude Code config. Restart Claude Code after installing.

Cursor

Add Efecto as an MCP server in Cursor's settings.

  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 below
MCP config
{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

Windsurf

Add Efecto via Windsurf's MCP settings.

  1. Open Windsurf Settings
  2. Go to AI → MCP
  3. Add a new server with the config below
MCP config
{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

GitHub Copilot

Add Efecto to GitHub Copilot in VS Code.

  1. Open VS Code Settings (JSON)
  2. Add the MCP config under mcp.servers
.vscode/settings.json
// .vscode/settings.json
{
  "mcp": {
    "servers": {
      "efecto": {
        "command": "npx",
        "args": ["-y", "@efectoapp/mcp"]
      }
    }
  }
}

Gemini CLI

Add Efecto to Gemini CLI's MCP configuration.

~/.gemini/settings.json
// ~/.gemini/settings.json
{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

Other MCP-Compatible Tools

Any tool that supports MCP can use Efecto. Add this to your tool's MCP configuration:

MCP config
{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

This standard MCP config works with Kiro, OpenCode, and most MCP-compatible clients. Some tools (like VS Code-based editors) use a different format — check your tool's docs for the exact config location and schema.

Verify It Works

After installing and restarting your AI tool, 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

Your agent should open Efecto in your browser and start building the design in real-time.

What You Get

The MCP server gives your AI agent 44 design tools:

Create

Artboards, sections with JSX/Tailwind, text, images, groups

Modify

Update any node, apply Tailwind classes, batch edits, fill colors

Organize

Move, duplicate, align, distribute, group, reorder elements

Export

PNG, JPEG, WebP, or SVG — plus theme management

See the full tool reference for all 44 tools with parameters and examples.

What You Can Make

Web Pages

Landing pages, dashboards, pricing tables, responsive layouts

Social Media

Instagram carousels, YouTube thumbnails, TikTok covers, LinkedIn posts

Presentations

Pitch decks, keynote slides, conference talks

Graphics

Event posters, email headers, OG images, blog heroes

Tips

  • Be specific: "Design a pricing page with 3 tiers" works better than "make a page"
  • Iterate: "Make the heading bigger" or "Change the background to dark"
  • Multiple artboards: "Create desktop and mobile versions" for responsive designs
  • No API key: Sessions are free — no account or key required

Troubleshooting

Browser doesn't open or connect

Copy the session URL from your agent's output and paste it into your browser manually. Make sure Google Chrome is installed.

"command not found: npx"

Node.js isn't installed. Download it from nodejs.org, then restart your terminal.

Agent doesn't know about Efecto

Restart your AI tool after adding the MCP config. Most tools need a restart to pick up new servers.

MCP server not starting

Run npx -y @efectoapp/mcp in your terminal to check for errors. The server should print a startup message.

Uninstall instructions

Delete the efecto entry from your MCP config file and restart your tool. For Claude Code, you can also run:

npx @efectoapp/mcp uninstall

Reference