CodeCraft - Visual AI Coding Assistant

A free alternative to Stagewise that provides direct integration with Cursor AI for visual element selection and AI-powered coding assistance.

Features

• 🎯 Visual Element Selection: Click on any element in your web application to select it
• 🤖 Direct Cursor AI Integration: Send selected elements and instructions directly to Cursor AI chat
• 🚀 No Manual Copy-Paste: Seamless workflow without manual intervention
• 💰 Completely Free: No subscriptions or usage limits

How It Works

1. Install CodeCraft: Run npx visual-codecraft@latest in your project root
2. Install Extension: Install this extension in Cursor AI
3. Select Elements: Click on elements in your proxied application (localhost:3100)
4. Send to AI: Click "Send to Cursor AI" to automatically send instructions to Cursor AI chat

Installation

Step 1: Install CodeCraft Server

npx visual-codecraft@latest

Step 2: Install This Extension

1. Open Cursor AI
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "CodeCraft"
4. Click Install

Usage

1. Start your development server (e.g., npm start on port 3000)
2. Run npx visual-codecraft@latest in your project root
3. Open the proxied URL (usually http://localhost:3100)
4. Click on any element to select it
5. Enter your instruction
6. Click "Send to Cursor AI"

Requirements

• Cursor AI
• Node.js 16+
• A running development server

Support

• GitHub: https://github.com/visual-codecraft/codecraft-extension
• Issues: https://github.com/visual-codecraft/codecraft-extension/issues

License

MIT License - see LICENSE file for details.