MCP Server Ai Vision

🚀 AI Vision MCP Server

An MCP (Model Context Protocol) server that provides AI vision analysis capabilities, supporting Claude and other MCP-compatible AI assistants.

🚀 Quick Start

The AI Vision MCP Server offers a range of features for web page analysis and file operations. Below is a step-by-step guide to help you quickly get started.

✨ Features

• Screenshot URL: Capture screenshots of any website by providing a URL.
• Visual Analysis: Analyze UI elements, layouts, and content in screenshots.
• File Operations: Read and modify files precisely by line.
• Report Generation: Create 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

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"
      }
    }
  }
}

Available Tools

screenshot_url

Capture a screenshot of a URL using a web browser.

Parameters:

• url (string, required): The URL to capture a screenshot 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 screenshot.
• waitTime (number, optional): The time to wait (in milliseconds). Default: 1000.

analyze_screen

Analyze a screenshot using AI vision.

Parameters: None (uses the latest screenshot).

read_file

Read the content between specified line numbers in a file.

Parameters:

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

modify_file

Modify the content between specified line numbers in a file.

Parameters:

• path (string): The file path.
• startLine (number): The starting line number to replace (1-based).
• endLine (number): The ending line number to replace (1-based).
• content (string): The new content to replace the specified lines.

generate_report

Generate a comprehensive UI/UX analysis report.

Parameters:

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

Example Workflow

1. Capture a screenshot of a website:

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

2. Analyze the screenshot:

analyze_screen()

3. Generate a report based on the analysis:

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

📚 Documentation

Requirements

• Node.js 14+
• Playwright for browser automation
• Gemini API key for AI vision analysis

📄 License

MIT