Samihalawa MCP Server Ai Vision

🚀 AI Vision MCP Server

An MCP (Model Context Protocol) server offering AI-driven visual analysis capabilities, supporting Claude and other MCP-compatible AI assistants.

✨ Features

• Screenshot URL: Capture a snapshot of any website by providing a URL.
• Visual Analysis: Analyze UI elements, layouts, and content in the snapshot.
• File Operations: Read and modify files precisely by line.
• Report Generation: Generate comprehensive UI/UX analysis reports.
• Debugging Sessions: Maintain context across multiple analysis steps.

📦 Installation

# Clone the repository
git clone https://github.com/samihalawa/mcp-server-ai-vision.git
cd mcp-server-ai-vision

# Install dependencies
npm install

# Build the server
npm run build

💻 Usage Examples

Basic Usage

Start the Server

npm start

Configuration

Add the server to your MCP configuration:

{
  "servers": {
    "ai-vision": {
      "command": "/path/to/node",
      "args": ["/path/to/mcp-server-ai-vision/build/index.js"],
      "enabled": true,
      "port": 3005,
      "environment": {
        "NODE_PATH": "/path/to/node_modules",
        "PATH": "/usr/local/bin:/usr/bin:/bin",
        "GEMINI_API_KEY": "your-gemini-api-key"
      }
    }
  }
}

Advanced Usage

Available Tools

screenshot_url

Capture a snapshot of a specified URL using a web browser.

Parameters:

• url (string, required): The URL to capture a snapshot of (e.g., http://localhost:4999, https://google.com).
• fullPage (boolean, optional): Whether to capture the full page or just the viewport. Default: false.
• waitForSelector (string, optional): The CSS selector to wait for before capturing the snapshot.
• waitTime (number, optional): The time to wait in milliseconds. Default: 1000.

analyze_screen

Analyze the snapshot using AI vision.

Parameters: None (uses the latest snapshot).

read_file

Read the content of a file from a specified line number range.

Parameters:

• path (string): The file path.
• startLine (number): The starting line number (1-indexed).
• endLine (number): The ending line number (1-indexed).

modify_file

Modify the content in a specified line number range.

Parameters:

• path (string): The file path.
• startLine (number): The starting line number to replace (1-indexed).
• endLine (number): The ending line number to replace (1-indexed).
• content (string): The new content to replace with.

generate_report

Generate a comprehensive UI/UX analysis report based on the analysis results.

Parameters:

• testUrl (string): The URL of the application to test.
• appName (string, optional): The name of the application being analyzed.
• date (string, optional): The analysis date (YYYY-MM-DD).
• observations (object): Structured observations by component, data state, interaction, etc.

Example Workflow

1. Capture a snapshot of a website:

   screenshot_url(url: "https://example.com")
   

2. Analyze the snapshot:

   analyze_screen()
   

3. Generate a report based on the analysis:

   generate_report(testUrl: "https://example.com", observations: {...})
   

🔧 Technical Details

Requirements

• Node.js version 14 or higher.
• Playwright for browser automation.
• A Gemini API key for AI vision analysis.

📄 License

MIT