draw-it-mcp/bin/draw-it-mcp.js

🎨 A beautiful drawing app with Cursor & Claude Code MCP integration. Draw, save, and let AI analyze your artwork!

#!/usr/bin/env node

import { spawn } from 'child_process';
import { createServer } from 'http';
import path from 'path';
import { fileURLToPath } from 'url';
import fs from 'fs';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const projectRoot = path.resolve(__dirname, '..');

// Read version from package.json
const packageJsonPath = path.join(projectRoot, 'package.json');
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
const version = packageJson.version;

// ASCII Art Banner
const banner = `
╭─────────────────────────────────────────────────────────────╮
│  Draw-it-MCP - MCP-Powered Drawing Assistant for AI Coding  │
│                                      v${version.padEnd(6)}                │
│  Features:                                                  │
│  • Beautiful canvas drawing interface                       │ 
│  • Save & load your artwork                                 │
│  • Cursor & Claude Code MCP integration                     │
│  • Dark/Light theme support                                 │
│                                                             │
╰─────────────────────────────────────────────────────────────╯
`;

console.log('\x1b[36m%s\x1b[0m', banner);

// Find available port
async function findAvailablePort(startPort = 3001) {
  return new Promise((resolve) => {
    const server = createServer();
    server.listen(startPort, () => {
      const port = server.address().port;
      server.close(() => {
        resolve(port);
      });
    });
    server.on('error', () => {
      resolve(findAvailablePort(startPort + 1));
    });
  });
}

// Check if this is first run
function isFirstRun() {
  const flagFile = path.join(projectRoot, '.first-run');
  if (!fs.existsSync(flagFile)) {
    fs.writeFileSync(flagFile, Date.now().toString());
    return true;
  }
  return false;
}

// Handle update command
if (process.argv.includes('update')) {
  console.log('🔄 Updating Draw-it-MCP...\n');
  
  const updateProcess = spawn('npm', ['update', '-g', 'draw-it-mcp'], {
    stdio: 'inherit',
    shell: true
  });
  
  updateProcess.on('close', (code) => {
    if (code === 0) {
      console.log('\n✅ Update completed successfully!');
      console.log('🎉 Draw-it-MCP is now up to date.');
    } else {
      console.log('\n❌ Update failed. Trying alternative method...');
      console.log('🔄 Running: npm install -g draw-it-mcp@latest\n');
      
      const installProcess = spawn('npm', ['install', '-g', 'draw-it-mcp@latest'], {
        stdio: 'inherit', 
        shell: true
      });
      
      installProcess.on('close', (installCode) => {
        if (installCode === 0) {
          console.log('\n✅ Installation completed successfully!');
          console.log('🎉 Draw-it-MCP has been updated to the latest version.');
        } else {
          console.log('\n❌ Automatic update failed. Please run manually:');
          console.log('   npm install -g draw-it-mcp@latest');
        }
        process.exit(installCode);
      });
    }
  });
  
  process.exit(0); // Don't proceed to main()
}

// Handle MCP server execution
if (process.argv.includes('mcp:server')) {
  // When called as "draw-it-mcp mcp:server", run the MCP server directly
  const mcpPath = path.resolve(__dirname, '..', 'src', 'mcp', 'drawing-mcp-server.js');
  spawn('node', [mcpPath], { stdio: 'inherit' });
  process.exit(0);
}

// Show MCP configuration for Cursor & Claude Code
function showMCPConfiguration() {
  console.log('\n📋 MCP Configuration for Cursor & Claude Code');
  console.log('='.repeat(50));
  console.log('Copy and paste one of these configurations:\n');
  
  // Get installation paths
  const globalNodeModulesPath = path.dirname(path.dirname(__dirname));
  const mcpServerPath = path.join(projectRoot, 'src', 'mcp', 'drawing-mcp-server.js');
  
  console.log('🔧 Option 1: Using NPX (Recommended)');
  console.log('```json');
  console.log(JSON.stringify({
    mcpServers: {
      "draw-it-mcp": {
        command: "npx",
        args: ["-y", "draw-it-mcp", "mcp:server"]
      }
    }
  }, null, 2));
  console.log('```\n');
  
  console.log('🔧 Option 2: Using absolute path');
  console.log('```json');
  console.log(JSON.stringify({
    mcpServers: {
      "draw-it-mcp": {
        command: "node",
        args: [mcpServerPath]
      }
    }
  }, null, 2));
  console.log('```\n');
  
  console.log('💡 Setup Instructions:');
  console.log('1. Copy one of the JSON configurations above');
  console.log('2. In Cursor: Open Settings → Extensions → MCP Settings');
  console.log('3. In Claude Code: Use command palette → "Claude Code: Edit MCP Settings"');
  console.log('4. Paste the configuration into your MCP settings');
  console.log('5. Restart Cursor/Claude Code');
  console.log('6. Start drawing and use MCP tools to analyze your artwork!\n');
}

// Main function
async function main() {
  try {
    console.log('🚀 Starting Draw-it-MCP...\n');
    
    // Check if we're in development or installed via npm
    const isDev = fs.existsSync(path.join(projectRoot, 'package-lock.json'));
    const nodeModulesExists = fs.existsSync(path.join(projectRoot, 'node_modules'));
    
    if (!nodeModulesExists) {
      console.log('📦 Installing dependencies... This may take a moment.');
      const npmInstall = spawn('npm', ['install'], {
        cwd: projectRoot,
        stdio: 'inherit',
        shell: true
      });
      
      await new Promise((resolve, reject) => {
        npmInstall.on('close', (code) => {
          if (code === 0) {
            resolve();
          } else {
            reject(new Error(`npm install failed with code ${code}`));
          }
        });
      });
    }

    // Find available port
    const port = await findAvailablePort(3001);
    console.log(`🌟 Found available port: ${port}`);
    
    // Always build on first run or if build doesn't exist
    const buildDir = path.join(projectRoot, '.next');
    if (!fs.existsSync(buildDir) || isFirstRun()) {
      console.log('🏗️  Building application for the first time...');
      const buildProcess = spawn('npx', ['next', 'build'], {
        cwd: projectRoot,
        stdio: 'inherit',
        shell: true
      });
      
      await new Promise((resolve, reject) => {
        buildProcess.on('close', (code) => {
          if (code === 0) {
            console.log('✅ Build completed successfully!');
            resolve();
          } else {
            reject(new Error(`Build failed with code ${code}`));
          }
        });
      });
    }

    // Start the application
    console.log('🎨 Launching Draw-it-MCP...\n');
    
    const serverProcess = spawn('npx', ['next', 'start', '-p', port.toString()], {
      cwd: projectRoot,
      stdio: 'inherit',
      shell: true,
      env: { ...process.env, PORT: port.toString() }
    });

    // Show success message
    setTimeout(() => {
      console.log('\n' + '='.repeat(60));
      console.log('🎉 Draw-it-MCP is running!');
      console.log(`🌐 Open: \x1b[32mhttp://localhost:${port}\x1b[0m`);
      console.log('');
      console.log('💡 Quick Tips:');
      console.log('  • Click colors to change brush color');
      console.log('  • Use different brush sizes for varied strokes');
      console.log('  • Save your drawings for later');
      console.log('  • Toggle dark/light theme');
      console.log('');
      console.log('🤖 Cursor & Claude Code Integration:');
      console.log('  • MCP server available for AI analysis');
      console.log('  • See MCP configuration below');
      console.log('');
      console.log('⏹️  Press Ctrl+C to stop');
      console.log('='.repeat(60) + '\n');
      
      // Show MCP configuration for Cursor & Claude Code
      showMCPConfiguration();
      
      // Open browser if first run
      if (isFirstRun()) {
        setTimeout(async () => {
          try {
            const open = await import('open');
            await open.default(`http://localhost:${port}`);
            console.log('🌐 Browser opened automatically!');
          } catch (error) {
            console.log('💡 Please open your browser and navigate to the URL above');
          }
        }, 2000);
      }
    }, 2000);

    // Handle graceful shutdown
    process.on('SIGINT', () => {
      console.log('\n🛑 Shutting down Draw-it-MCP...');
      serverProcess.kill('SIGINT');
      setTimeout(() => {
        console.log('👋 Thanks for using Draw-it-MCP!');
        process.exit(0);
      }, 1000);
    });

    // Handle server process exit
    serverProcess.on('close', (code) => {
      if (code !== 0) {
        console.error(`\n❌ Server process exited with code ${code}`);
        console.log('💡 Try running again or check for port conflicts');
      }
      process.exit(code);
    });

  } catch (error) {
    console.error('\n❌ Error starting Draw-it-MCP:');
    console.error(error.message);
    console.log('\n💡 Troubleshooting:');
    console.log('  • Make sure Node.js 18+ is installed');
    console.log('  • Check if port 3001 is available');
    console.log('  • Try running: npm install');
    console.log('  • If build fails, try: npx create-next-app@latest --typescript');
    console.log('  • For MCP setup: https://github.com/Pandoll-AI/draw-it-mcp#ai-powered-art-analysis-optional');
    process.exit(1);
  }
}

// Run the application
main().catch(console.error);