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 64 design tools — it can create artboards, add layouts, style elements, and export images, all through natural conversation.

Universal Install (Any Agent)

The fastest way to get started. Installs MCP tools + 3 design skills in one command:

npx skills add pablostanley/efecto-plugin

Works with any agent. Includes design knowledge so your AI produces professional-quality layouts out of the box. Learn more about skills →

Tool-Specific Setup

Claude Code

Plugin with MCP tools + 3 design skills for the best experience

Cursor

One-click install or manual MCP config

OpenAI Codex

Add with one command

Windsurf

Add via Windsurf MCP settings

GitHub Copilot

Add to VS Code with Copilot

Gemini CLI

Add to Gemini CLI config

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 64 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

Brand Kit

17 tools for AI-powered brand systems — identity, colors, typography, components, compliance

Image Search

Search free stock images (Lummi) — no session required

Export

PNG, JPEG, WebP, SVG — plus theme management and brand export

Agent Teams

Multi-agent collaboration with personalities, memory, and swarm orchestration

Web Search

Agents research during design using Claude's native web search

Open in v0

Export designs as React + Tailwind and continue editing in v0.app

See the full tool reference for all 64 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

Reference