Servidor MCP de AI Vision

Un servidor de Protocolo de Contexto de Modelo (MCP) que proporciona capacidades de análisis visual impulsadas por IA para Claude y otros asistentes de IA compatibles con MCP.

Características

URL de captura de pantalla : captura capturas de pantalla de cualquier sitio web proporcionando una URL
Análisis visual : analice elementos de la interfaz de usuario, diseños y contenido en capturas de pantalla
Operaciones de archivo : Lea y modifique archivos con precisión específica de línea
Generación de informes : cree informes completos de análisis de UI/UX
Sesión de depuración : mantener el contexto en múltiples pasos de análisis

Instalación

# 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

Uso

Iniciando el servidor

npm start

Configuración

Agregue el servidor a su configuración de MCP:

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

Herramientas disponibles

URL de captura de pantalla

Tome una captura de pantalla de una URL usando un navegador web.

Parámetros:

url (cadena, obligatoria): URL para capturar una captura de pantalla (por ejemplo, http://localhost:4999 , https://google.com )
fullPage (booleano, opcional): Si se captura la página completa o solo la ventana gráfica. Predeterminado: falso
waitForSelector (cadena, opcional): selector CSS que se debe esperar antes de tomar una captura de pantalla
waitTime (número, opcional): Tiempo de espera en milisegundos antes de tomar la captura de pantalla. Predeterminado: 1000

analizar_pantalla

Analice una captura de pantalla con visión de IA.

Parámetros: Ninguno (usa la captura de pantalla más reciente)

leer_archivo

Leer el contenido de un archivo entre números de línea especificados.

Parámetros:

path (cadena): Ruta al archivo
startLine (número): Número de línea de inicio (indexado en 1)
endLine (número): Número de línea final (indexado en 1)

modificar_archivo

Modificar el contenido de un archivo entre números de línea especificados.

Parámetros:

path (cadena): Ruta al archivo
startLine (número): Número de línea de inicio a reemplazar (indexado a 1)
endLine (número): Número de línea final a reemplazar (indexado a 1)
content (cadena): Nuevo contenido para reemplazar las líneas especificadas

generar_informe

Genere un informe de análisis de UI/UX completo.

Parámetros:

testUrl (cadena): URL de la aplicación que se está probando
appName (cadena, opcional): nombre de la aplicación que se está analizando
date (cadena, opcional): Fecha del análisis (AAAA-MM-DD)
observations (objeto): Observaciones estructuradas como componentes, estado de datos, interacciones, etc.

Ejemplo de flujo de trabajo

Tome una captura de pantalla de un sitio web:
screenshot_url(url: "https://example.com")
Analiza la captura de pantalla:
analyze_screen()
Generar un informe basado en el análisis:
generate_report(testUrl: "https://example.com", observations: {...})

Requisitos

Node.js 14+
Dramaturgo para la automatización del navegador
Clave API de Gemini para el análisis de visión con IA

Licencia

Instituto Tecnológico de Massachusetts (MIT)

AI Vision MCP Server

Integrations