Back to MCPStudio
Tutorial

How to Use MCPStudio

Set up AI-powered design improvement in your IDE in under 2 minutes. Works with Claude Code, Cursor, and Windsurf.

Loading animation...
1

Create Your Free Account

Sign up at mcpstudio.design/signup. You'll get 1 free redesign credit immediately — no credit card required.

After signing up, you'll be redirected to your dashboard where you can see your API token and credits.

2

Copy Your API Token

On your dashboard, you'll see your unique API token. Click the copy button next to it. This token authenticates your IDE with MCPStudio's AI design engine.

Keep this token private — it's tied to your account and credits.

3

Configure Your IDE

Select your IDE below and paste the configuration into the appropriate file. Replace YOUR_TOKEN_HERE with the token you just copied.

~/.codeium/windsurf/mcp_config.json

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

Restart and Ask Your AI

Restart your IDE to load the MCP server. Then simply ask your AI assistant in natural language:

>_
Use MCPStudio to redesign my landing pageFull landing page improvement
>_
Use MCPStudio to analyze my dashboard designGet a design score and issues list
>_
Use MCPStudio to redesign src/app/page.tsx at creativity 0.8Target a specific file with high creativity

What Happens Behind the Scenes

1. Your AI assistant reads your React/Next.js + Tailwind CSS files

2. It sends the file contents to MCPStudio's AI design engine via MCP

3. Our Gemini-powered analyzer identifies design issues and generates Tailwind patches

4. Your IDE receives the patches and applies them — you review the diff before accepting

FAQ

Start Designing for Free

1 free redesign on signup · No credit card required

HomeBlogConfigure