drio
Open app

AI Vision MCP Server

Source

A Model Context Protocol server for AI vision analysis using Gemini Vision API

Catalog onlyCatalog onlySTDIO

Overview

AI Vision Debug MCP Server is a Model Context Protocol (MCP) server designed for AI vision analysis, specifically for analyzing UI screenshots using the Gemini Vision API.

To use the server, ensure you have a test screenshot saved at ~/Downloads/test_screenshot.png, build the server using npm run build, and run the test script with node test_tool.js.

  • Analyzes UI screenshots with AI vision capabilities. - Provides tools for reading, modifying files, and generating UI/UX analysis reports. - Simplified response format for easier parsing and handling of special characters.
  1. Analyzing user interface designs for usability improvements.
  2. Generating comprehensive reports on UI/UX elements.
  3. Debugging and enhancing visual components in applications.

Add to your AI client

Use these steps to connect AI Vision MCP Server in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "mcp-server-ai-vision-samihalawa": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-ai-vision-samihalawa"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "mcp-server-ai-vision-samihalawa": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-ai-vision-samihalawa"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "mcp-server-ai-vision-samihalawa": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-ai-vision-samihalawa"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "mcp-server-ai-vision-samihalawa": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-ai-vision-samihalawa"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-server-ai-vision-samihalawa": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-ai-vision-samihalawa"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "mcp-server-ai-vision-samihalawa": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-ai-vision-samihalawa"
      ]
    }
  }
}

FAQ

What is the purpose of the AI Vision Debug MCP Server?

It is designed to analyze UI screenshots and provide insights using AI vision capabilities.

What dependencies are required to run the server?

The server requires Node.js, TypeScript, axios for API requests, and @modelcontextprotocol/sdk for MCP implementation.

How do I configure the Gemini API key?

The API key is configured in the `index.ts` file of the server.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":1941,"uuid":"283db76d-8a4e-46de-8b12-a5c1e0be68a5","name":"mcp-server-ai-vision","title":"AI Vision MCP Server","description":"A Model Context Protocol server for AI vision analysis using Gemini Vision API","avatar_url":"https://avatars.githubusercontent.com/u/3243470?v=4","created_at":"2025-03-05T07:26:51.815Z","updated_at":"2025-03-12T10:21:44.084Z","status":"created","author_name":"samihalawa","author_avatar_url":"https://avatars.githubusercontent.com/u/3243470?v=4","tags":"[]","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/samihalawa/mcp-server-ai-vision","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":"{\"star\":\"0\",\"license\":\"\",\"language\":\"JavaScript\",\"is_official\":false,\"latest_commit_time\":\"2025-03-09 18:06:00\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools