Codictor MCP

Convert screenshots to React + Tailwind code that uses YOUR project's design system.

Features

• Auto-reads tailwind.config.js - Uses your exact colors, fonts, spacing
• Detects existing components - Reuses your Button, Card, etc.
• True responsive code - Mobile-first with proper breakpoints
• Claude Vision powered - High-quality code generation

Installation

npm install -g codictor-mcp

Or install locally:

npm install
npm run build

Setup

Add to your IDE's MCP config:

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "codictor": {
      "command": "codictor-mcp",
      "env": {
        "ANTHROPIC_API_KEY": "sk-ant-your-key-here"
      }
    }
  }
}

Claude Code

claude mcp add codictor codictor-mcp -e ANTHROPIC_API_KEY=sk-ant-your-key-here

Usage

In Cursor or Claude Code:

Convert this screenshot to code: /path/to/screenshot.png

Or:

Analyze my design system

Tools

screenshot_to_code

Converts a screenshot to React + Tailwind code.

• image_path (required): Path to screenshot
• project_path (optional): Project root directory

analyze_design_system

Shows what design tokens and components will be used.

• project_path (optional): Project root directory

Environment Variables

The server supports these environment variables:

• ANTHROPIC_API_KEY - Your Anthropic API key
• AI_INTEGRATIONS_ANTHROPIC_API_KEY - Replit AI Integrations key (preferred on Replit)
• AI_INTEGRATIONS_ANTHROPIC_BASE_URL - Replit AI Integrations base URL

How It Works

1. Reads your tailwind.config.js to understand your design tokens
2. Scans common component directories to find existing components
3. Sends the screenshot to Claude Vision with your design context
4. Returns production-ready React + Tailwind code using YOUR design system

License

MIT