aieye 1.2.0 → 1.3.0

package/README.md

@@ -1,35 +1,35 @@
-# @visioncraft/mcp-server
+# aieye
 
-MCP (Model Context Protocol) server for VisionCraft. Exposes browser automation and inspection tools to AI agents like Claude.
+MCP (Model Context Protocol) server for AI Eye. Exposes browser automation and inspection tools to AI agents like Claude.
 
 ## Features
 
 The MCP server provides 13 tools for AI-driven visual development:
 
 ### 🔍 Inspection Tools
-- **visioncraft_inspect_element** - Get detailed element information with source mapping
-- **visioncraft_get_source** - Get source file location for any element
-- **visioncraft_get_structure** - Get page DOM structure with source mapping
-- **visioncraft_find_elements** - Find elements by text, role, or CSS selector
+- **aieye_inspect_element** - Get detailed element information with source mapping
+- **aieye_get_source** - Get source file location for any element
+- **aieye_get_structure** - Get page DOM structure with source mapping
+- **aieye_find_elements** - Find elements by text, role, or CSS selector
 
 ### 🎯 Interaction Tools
-- **visioncraft_click** - Click elements
-- **visioncraft_type** - Type text into inputs
-- **visioncraft_scroll** - Scroll the page
+- **aieye_click** - Click elements
+- **aieye_type** - Type text into inputs
+- **aieye_scroll** - Scroll the page
 
 ### 📸 Debugging Tools
-- **visioncraft_screenshot** - Capture page screenshots
-- **visioncraft_get_console_logs** - Retrieve console logs
-- **visioncraft_clear_console_logs** - Clear captured logs
-- **visioncraft_get_hmr_status** - Check HMR status
+- **aieye_screenshot** - Capture page screenshots
+- **aieye_get_console_logs** - Retrieve console logs
+- **aieye_clear_console_logs** - Clear captured logs
+- **aieye_get_hmr_status** - Check HMR status
 
 ### 🌐 Navigation Tools
-- **visioncraft_navigate** - Navigate to URLs
-- **visioncraft_get_current_url** - Get current page URL
+- **aieye_navigate** - Navigate to URLs
+- **aieye_get_current_url** - Get current page URL
 
 ## Installation
 
-The MCP server is automatically built as part of the VisionCraft workspace:
+The MCP server is automatically built as part of the AI Eye workspace:
 
 ```bash
 # Build all packages
@@ -49,7 +49,7 @@ Add to your Claude Desktop config at `~/Library/Application Support/Claude/claud
 ```json
 {
   "mcpServers": {
-    "visioncraft": {
+    "aieye": {
       "command": "node",
       "args": ["/Users/yourname/path/to/vscode-eye/packages/mcp-server/dist/index.js"]
     }
@@ -57,7 +57,7 @@ Add to your Claude Desktop config at `~/Library/Application Support/Claude/claud
 }
 ```
 
-**Important**: Replace `/Users/yourname/path/to/vscode-eye` with the actual path to your VisionCraft project.
+**Important**: Replace `/Users/yourname/path/to/vscode-eye` with the actual path to your AI Eye project.
 
 ### Starting the Preview
 
@@ -77,30 +77,30 @@ Once configured, you can ask Claude to interact with your UI:
 **Example prompts:**
 
 1. **"Take a screenshot of the current page"**
-   - Claude will call `visioncraft_screenshot`
+   - Claude will call `aieye_screenshot`
    - Returns base64-encoded image
 
 2. **"What button elements are on the page?"**
-   - Claude will call `visioncraft_find_elements` with query "button"
+   - Claude will call `aieye_find_elements` with query "button"
    - Returns array of buttons with selectors and source locations
 
 3. **"Click the increment button"**
-   - Claude will call `visioncraft_find_elements` to find button
-   - Then `visioncraft_click` to click it
+   - Claude will call `aieye_find_elements` to find button
+   - Then `aieye_click` to click it
 
 4. **"Where is the h1 element defined in the source code?"**
-   - Claude will call `visioncraft_get_source` with selector "h1"
+   - Claude will call `aieye_get_source` with selector "h1"
    - Returns file path, line, and column
 
 5. **"Show me the page structure"**
-   - Claude will call `visioncraft_get_structure`
+   - Claude will call `aieye_get_structure`
    - Returns DOM tree with source mapping
 
 ## How It Works
 
 1. **STDIO Transport**: MCP server communicates with Claude via standard input/output
 2. **Playwright Connection**: Connects to browser using Playwright
-3. **Bridge API**: Calls `window.__VISIONCRAFT__` APIs injected by Vite plugin
+3. **Bridge API**: Calls `window.__AIEYE__` APIs injected by Vite plugin
 4. **Source Mapping**: All elements include source file locations
 
 ## Architecture
@@ -111,7 +111,7 @@ Claude Desktop
 MCP Server
     ↕ (Playwright/CDP)
 Browser (Chromium)
-    ↕ (window.__VISIONCRAFT__)
+    ↕ (window.__AIEYE__)
 Your React App
 ```
 
@@ -144,7 +144,7 @@ The server will wait for STDIO input in MCP format.
 
 ## Tool Reference
 
-### visioncraft_screenshot
+### aieye_screenshot
 
 Capture a screenshot of the current page.
 
@@ -154,7 +154,7 @@ Capture a screenshot of the current page.
 
 **Returns:** Base64-encoded image data
 
-### visioncraft_inspect_element
+### aieye_inspect_element
 
 Inspect an element and get detailed information.
 
@@ -174,7 +174,7 @@ Inspect an element and get detailed information.
 }
 ```
 
-### visioncraft_get_source
+### aieye_get_source
 
 Get source location for an element.
 
@@ -190,7 +190,7 @@ Get source location for an element.
 }
 ```
 
-### visioncraft_click
+### aieye_click
 
 Click an element.
 
@@ -204,7 +204,7 @@ Click an element.
 }
 ```
 
-### visioncraft_type
+### aieye_type
 
 Type text into an input element.
 
@@ -219,7 +219,7 @@ Type text into an input element.
 }
 ```
 
-### visioncraft_find_elements
+### aieye_find_elements
 
 Find elements by text, role, or CSS selector.
 
@@ -229,7 +229,7 @@ Find elements by text, role, or CSS selector.
 
 **Returns:** Array of matching elements with selectors and source locations
 
-### visioncraft_get_structure
+### aieye_get_structure
 
 Get page DOM structure.
 
@@ -238,7 +238,7 @@ Get page DOM structure.
 
 **Returns:** Tree structure with source mapping
 
-### visioncraft_get_console_logs
+### aieye_get_console_logs
 
 Retrieve captured console logs.
 
@@ -271,7 +271,7 @@ Retrieve captured console logs.
 
 ### Overview
 
-This MCP server is **your primary interface** to VisionCraft. As an AI agent, you communicate with this server through the Model Context Protocol (MCP) to interact with the user's browser and application.
+This MCP server is **your primary interface** to AI Eye. As an AI agent, you communicate with this server through the Model Context Protocol (MCP) to interact with the user's browser and application.
 
 **You have access to 14 tools** (see list at top of this README) that allow you to:
 - See the UI (screenshots)
@@ -287,14 +287,14 @@ You (AI Agent)
 This MCP Server
   ↕ Playwright/CDP
 Browser (Running user's app)
-  ↕ window.__VISIONCRAFT__
-User's Application (with VisionCraft plugin)
+  ↕ window.__AIEYE__
+User's Application (with AI Eye plugin)
 ```
 
 **Key points:**
 1. You don't talk to the browser directly - you talk to this MCP server
 2. This server handles browser automation using Playwright
-3. The browser has VisionCraft bridge injected for source mapping
+3. The browser has AI Eye bridge injected for source mapping
 4. All responses are JSON (tool results)
 
 ### Connection Modes
@@ -314,7 +314,7 @@ The MCP server supports three connection modes:
 3. **CDP-Only (fallback)**
    - No bridge available
    - Limited functionality (screenshots, clicking)
-   - Falls back when VisionCraft plugin not configured
+   - Falls back when AI Eye plugin not configured
 
 ### Tool Usage Patterns
 
@@ -323,13 +323,13 @@ The MCP server supports three connection modes:
 User: "The button looks weird"
 
 You:
-1. visioncraft_screenshot           → See the button
-2. visioncraft_find_elements        → Find button selector
-3. visioncraft_inspect_element      → Get styles & source location
+1. aieye_screenshot           → See the button
+2. aieye_find_elements        → Find button selector
+3. aieye_inspect_element      → Get styles & source location
 4. [Read source file at src/Button.tsx:45]
 5. [Identify CSS issue]
 6. [Fix code]
-7. visioncraft_screenshot           → Verify fix
+7. aieye_screenshot           → Verify fix
 ```
 
 **Pattern 2: Feature Request**
@@ -337,11 +337,11 @@ You:
 User: "Add a dark mode toggle"
 
 You:
-1. visioncraft_screenshot           → See current UI
-2. visioncraft_get_structure        → Understand layout
+1. aieye_screenshot           → See current UI
+2. aieye_get_structure        → Understand layout
 3. [Create new component]
-4. visioncraft_get_console_logs     → Check for errors
-5. visioncraft_screenshot           → Show new feature
+4. aieye_get_console_logs     → Check for errors
+5. aieye_screenshot           → Show new feature
 ```
 
 **Pattern 3: Bug Investigation**
@@ -349,37 +349,37 @@ You:
 User: "Something's broken but I don't know what"
 
 You:
-1. visioncraft_get_console_logs     → Check for errors
-2. visioncraft_screenshot           → See error state
-3. visioncraft_inspect_element      → Find problematic element
-4. visioncraft_get_source           → Get code location
+1. aieye_get_console_logs     → Check for errors
+2. aieye_screenshot           → See error state
+3. aieye_inspect_element      → Find problematic element
+4. aieye_get_source           → Get code location
 5. [Analyze & fix]
-6. visioncraft_get_console_logs     → Verify no errors
+6. aieye_get_console_logs     → Verify no errors
 ```
 
 ### Tool Selection Guide
 
 **For seeing UI:**
-- `visioncraft_screenshot` - Takes ~1-2 seconds, use sparingly
+- `aieye_screenshot` - Takes ~1-2 seconds, use sparingly
 
 **For finding elements:**
-- `visioncraft_find_elements` - Search by text, role, or CSS
+- `aieye_find_elements` - Search by text, role, or CSS
 - Use this when you don't know the exact selector
 
 **For inspecting:**
-- `visioncraft_get_source` - Fast, just returns file location
-- `visioncraft_inspect_element` - Slower, returns everything (styles, attributes, location)
+- `aieye_get_source` - Fast, just returns file location
+- `aieye_inspect_element` - Slower, returns everything (styles, attributes, location)
 - **Tip:** Use `get_source` if you only need the file location
 
 **For interacting:**
-- `visioncraft_click` - Click buttons, links, etc.
-- `visioncraft_type` - Fill forms
-- `visioncraft_scroll` - Access elements below fold
+- `aieye_click` - Click buttons, links, etc.
+- `aieye_type` - Fill forms
+- `aieye_scroll` - Access elements below fold
 
 **For debugging:**
-- `visioncraft_get_console_logs` - Check for errors (use filter: "error")
-- `visioncraft_get_hmr_status` - Check if HMR is working
-- `visioncraft_clear_console_logs` - Clear logs before testing
+- `aieye_get_console_logs` - Check for errors (use filter: "error")
+- `aieye_get_hmr_status` - Check if HMR is working
+- `aieye_clear_console_logs` - Clear logs before testing
 
 ### Common Errors and Solutions
 
@@ -399,7 +399,7 @@ You:
 
 **AI should:**
 1. Take screenshot to see what's actually there
-2. Use `visioncraft_find_elements` with text search:
+2. Use `aieye_find_elements` with text search:
    ```json
    {"query": "Submit", "mode": "text"}
    ```
@@ -408,11 +408,11 @@ You:
 
 **Error:** "Bridge not available"
 
-**What it means:** VisionCraft Vite/Babel plugin not configured
+**What it means:** AI Eye Vite/Babel plugin not configured
 
 **AI should:**
 1. Explain plugin is required for source mapping
-2. Guide user to install: `npm install @visioncraft/vite-plugin --save-dev`
+2. Guide user to install: `npm install @ai-eye/vite-plugin --save-dev`
 3. Guide user to configure vite.config.ts
 4. Tell user to restart dev server
 
@@ -427,18 +427,18 @@ You:
 
 ### Configuration for Users
 
-When setting up VisionCraft with users, guide them to add this to their Claude Desktop config:
+When setting up AI Eye with users, guide them to add this to their Claude Desktop config:
 
 **macOS:**
 ```json
 {
   "mcpServers": {
-    "visioncraft": {
+    "aieye": {
       "command": "node",
-      "args": ["/absolute/path/to/visioncraft/packages/mcp-server/dist/index.js"],
+      "args": ["/absolute/path/to/ai-eye/packages/mcp-server/dist/index.js"],
       "env": {
-        "VISIONCRAFT_URL": "http://localhost:5173",
-        "VISIONCRAFT_MODE": "playwright-launch"
+        "AIEYE_URL": "http://localhost:5173",
+        "AIEYE_MODE": "playwright-launch"
       }
     }
   }
@@ -446,8 +446,8 @@ When setting up VisionCraft with users, guide them to add this to their Claude D
 ```
 
 **Environment variables:**
-- `VISIONCRAFT_URL` - Dev server URL (default: http://localhost:5173)
-- `VISIONCRAFT_MODE` - Connection mode:
+- `AIEYE_URL` - Dev server URL (default: http://localhost:5173)
+- `AIEYE_MODE` - Connection mode:
   - `playwright-launch` (default) - Launch own browser
   - `cdp-connect` - Connect to existing Chrome
   - `cdp-only` - CDP without bridge (fallback)
@@ -455,11 +455,11 @@ When setting up VisionCraft with users, guide them to add this to their Claude D
 ### Best Practices for AI Agents
 
 **DO:**
-- ✅ Always start with `visioncraft_screenshot` to see current state
-- ✅ Use `visioncraft_get_source` for quick source lookups
-- ✅ Check `visioncraft_get_console_logs` after interactions
-- ✅ Clear console logs before testing: `visioncraft_clear_console_logs`
-- ✅ Use `visioncraft_find_elements` to search by description
+- ✅ Always start with `aieye_screenshot` to see current state
+- ✅ Use `aieye_get_source` for quick source lookups
+- ✅ Check `aieye_get_console_logs` after interactions
+- ✅ Clear console logs before testing: `aieye_clear_console_logs`
+- ✅ Use `aieye_find_elements` to search by description
 - ✅ Take before/after screenshots to verify changes
 
 **DON'T:**
@@ -477,37 +477,37 @@ When setting up VisionCraft with users, guide them to add this to their Claude D
 
 ### Verification Checklist
 
-Before telling user "VisionCraft is set up correctly", verify:
+Before telling user "AI Eye is set up correctly", verify:
 
 ```
 □ 1. Dev server is running
      [User confirms or you check with them]
 
 □ 2. Navigate to dev server
-     visioncraft_navigate: "http://localhost:5173"
+     aieye_navigate: "http://localhost:5173"
 
 □ 3. Page loads successfully
-     visioncraft_get_current_url
+     aieye_get_current_url
      Should match the navigate URL
 
 □ 4. Can take screenshot
-     visioncraft_screenshot
+     aieye_screenshot
      Should return image data
 
 □ 5. Bridge is available (source mapping works)
-     visioncraft_inspect_element: "body"
+     aieye_inspect_element: "body"
      Check if sourceFile/sourceLine exist
 
 □ 6. Console logs work
-     visioncraft_get_console_logs
+     aieye_get_console_logs
      Should return array (may be empty)
 
 □ 7. HMR tracking works
-     visioncraft_get_hmr_status
+     aieye_get_hmr_status
      Should show connected: true
 ```
 
-If all checks pass → VisionCraft is fully operational ✅
+If all checks pass → AI Eye is fully operational ✅
 
 ### Debugging MCP Server Issues
 
@@ -519,7 +519,7 @@ When things aren't working:
 
 **Check 2: Can it connect to browser?**
 ```
-visioncraft_get_current_url
+aieye_get_current_url
 ```
 - Success → Connected ✅
 - Error → Not connected ❌
@@ -530,7 +530,7 @@ visioncraft_get_current_url
 
 **Check 4: Is bridge available?**
 ```
-visioncraft_inspect_element: "body"
+aieye_inspect_element: "body"
 ```
 - Has sourceFile → Bridge working ✅
 - No sourceFile → Bridge not available ❌
@@ -541,15 +541,15 @@ visioncraft_inspect_element: "body"
 
 **AI Response:**
 ```
-Let me investigate using VisionCraft:
+Let me investigate using AI Eye:
 
 1. Taking screenshot of current state...
-   [calls visioncraft_screenshot]
+   [calls aieye_screenshot]
 
    I can see a blank page with an error overlay.
 
 2. Checking console for errors...
-   [calls visioncraft_get_console_logs with level: "error"]
+   [calls aieye_get_console_logs with level: "error"]
 
    Found error: "Uncaught TypeError: Cannot read property 'map' of undefined"
    at App.tsx:45
@@ -564,12 +564,12 @@ Let me investigate using VisionCraft:
    {items?.map(...)} or {items && items.map(...)}
 
 5. Verifying fix...
-   [calls visioncraft_get_console_logs again]
+   [calls aieye_get_console_logs again]
 
    No errors! ✅
 
 6. Taking screenshot to confirm...
-   [calls visioncraft_screenshot]
+   [calls aieye_screenshot]
 
    App is now loading correctly!
 ```