MCPStudio

AI-powered design improvement for React/Next.js + Tailwind CSS projects.

MCPStudio works as an MCP (Model Context Protocol) server that connects to your IDE's AI assistant, giving it the ability to analyze and redesign your UI components.

Quick Setup

1. Get your token

Sign up at mcpstudio.design and copy your API token from the dashboard.

2. Configure your IDE

Cursor — .cursor/mcp.json:

{
  "mcpServers": {
    "mcpstudio": {
      "command": "npx",
      "args": ["-y", "mcpstudio@latest"],
      "env": { "MCPSTUDIO_TOKEN": "your-token-here" }
    }
  }
}

Claude Desktop — ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "mcpstudio": {
      "command": "npx",
      "args": ["-y", "mcpstudio@latest"],
      "env": { "MCPSTUDIO_TOKEN": "your-token-here" }
    }
  }
}

Claude Code:

claude mcp add mcpstudio -- npx -y mcpstudio@latest
# Then set MCPSTUDIO_TOKEN in your environment

VS Code (Copilot) — .vscode/mcp.json:

{
  "mcpServers": {
    "mcpstudio": {
      "command": "npx",
      "args": ["-y", "mcpstudio@latest"],
      "env": { "MCPSTUDIO_TOKEN": "your-token-here" }
    }
  }
}

Windsurf (supports HTTP directly) — ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "mcpstudio": {
      "serverUrl": "https://mcp.mcpstudio.design/mcp",
      "headers": { "x-mcpstudio-token": "your-token-here" }
    }
  }
}

3. Use it

Ask your AI assistant:

"Use MCPStudio to analyze the design quality of my current page"

Available Tools

| Tool | Description | |------|-------------| | mcpstudio_redesign | AI-powered design improvement | | mcpstudio_analyze | Design quality scoring (0-100) | | mcpstudio_credits | Check credit balance | | mcpstudio_diff | Generate before/after diff | | mcpstudio_instagram | Generate social media posts | | mcpstudio_dashboard | Open visual configurator |

Environment Variables

| Variable | Required | Description | |----------|----------|-------------| | MCPSTUDIO_TOKEN | Yes | Your API token from mcpstudio.design/dashboard | | MCPSTUDIO_URL | No | Override server URL (default: https://mcp.mcpstudio.design) |

How it works

This package acts as a lightweight stdio→HTTP bridge. When your IDE starts it via npx, it:

1. Connects to the remote MCPStudio server
2. Discovers available tools
3. Exposes them via stdio (the universal MCP transport)
4. Proxies all tool calls to the remote server

No heavy dependencies. No local AI models. Just a thin bridge.

Requirements

• Node.js 18+
• A MCPStudio account with credits

Links

• Website
• Setup Guide
• Dashboard

License

MIT