Image Tools MCP

Image Tools MCP

Um serviço Model Context Protocol (MCP) para obter dimensões de imagens e comprimir imagens, com suporte para fontes via URL e arquivos locais.

Documentação em chinês

Recursos

• Obter dimensões de imagens a partir de URLs
• Obter dimensões de imagens de arquivos locais
• Comprimir imagens de URLs usando a API TinyPNG
• Comprimir imagens locais usando a API TinyPNG
• Converter imagens para diferentes formatos (webp, jpeg/jpg, png)
• Retorna largura, altura, tipo, tipo MIME e informações de compressão

Exemplos de Resultados

baixar da URL do Figma e comprimir

Uso

Usando como um Serviço MCP

Este serviço fornece cinco funções de ferramenta:

1. get_image_size - Obter dimensões de imagens remotas
2. get_local_image_size - Obter dimensões de imagens locais
3. compress_image_from_url - Comprimir imagens remotas usando a API TinyPNG
4. compress_local_image - Comprimir imagens locais usando a API TinyPNG
5. figma - Buscar links de imagens da API do Figma e comprimi-los usando a API TinyPNG

Integração com Clientes

Para usar este serviço MCP, você precisa se conectar a ele a partir de um cliente MCP. Aqui estão exemplos de como integrar com diferentes clientes:

Uso

{
  "mcpServers": {
    "image-tools": {
      "command": "npx",
      "args": ["image-tools-mcp"],
      "env": {
        "TINIFY_API_KEY": "<YOUR_TINIFY_API_KEY>",
        "FIGMA_API_TOKEN": "<YOUR_FIGMA_API_TOKEN>"
      }
    }
  }
}

Usando com a Biblioteca de Cliente MCP

import { McpClient } from "@modelcontextprotocol/client";

// Initialize the client
const client = new McpClient({
  transport: "stdio" // or other transport options
});

// Connect to the server
await client.connect();

// Get image dimensions from URL
const urlResult = await client.callTool("get_image_size", {
  options: {
    imageUrl: "https://example.com/image.jpg"
  }
});
console.log(JSON.parse(urlResult.content[0].text));
// Output: { width: 800, height: 600, type: "jpg", mime: "image/jpeg" }

// Get image dimensions from local file
const localResult = await client.callTool("get_local_image_size", {
  options: {
    imagePath: "D:/path/to/image.png"
  }
});
console.log(JSON.parse(localResult.content[0].text));
// Output: { width: 1024, height: 768, type: "png", mime: "image/png", path: "D:/path/to/image.png" }

// Compress image from URL
const compressUrlResult = await client.callTool("compress_image_from_url", {
  options: {
    imageUrl: "https://example.com/image.jpg",
    outputFormat: "webp" // Optional: convert to webp, jpeg/jpg, or png
  }
});
console.log(JSON.parse(compressUrlResult.content[0].text));
// Output: { originalSize: 102400, compressedSize: 51200, compressionRatio: "50.00%", tempFilePath: "/tmp/compressed_1615456789.webp", format: "webp" }

// Compress local image
const compressLocalResult = await client.callTool("compress_local_image", {
  options: {
    imagePath: "D:/path/to/image.png",
    outputPath: "D:/path/to/compressed.webp", // Optional
    outputFormat: "image/webp" // Optional: convert to image/webp, image/jpeg, or image/png
  }
});
console.log(JSON.parse(compressLocalResult.content[0].text));
// Output: { originalSize: 102400, compressedSize: 51200, compressionRatio: "50.00%", outputPath: "D:/path/to/compressed.webp", format: "webp" }

// Fetch image links from Figma API

const figmaResult = await client.callTool("figma", {
  options: {
    figmaUrl: "https://www.figma.com/file/XXXXXXX"
  }
});
console.log(JSON.parse(figmaResult.content[0].text));
// Output: { imageLinks: ["https://example.com/image1.jpg", "https://example.com/image2.jpg"] }

### Tool Schemas

#### get_image_size

```typescript
{
  options: {
    imageUrl: string // URL of the image to retrieve dimensions for
  }
}

get_local_image_size

{
  options: {
    imagePath: string; // Absolute path to the local image file
  }
}

compress_image_from_url

{
  options: {
    imageUrl: string // URL of the image to compress
    outputFormat?: "image/webp" | "image/jpeg" | "image/jpg" | "image/png" // Optional output format
  }
}

compress_local_image

{
  options: {
    imagePath: string // Absolute path to the local image file
    outputPath?: string // Optional absolute path for the compressed output image
    outputFormat?: "image/webp" | "image/jpeg" | "image/jpg" | "image/png" // Optional output format
  }
}

figma

{
  options: {
    figmaUrl: string; // URL of the Figma file to fetch image links from
  }
}

Registro de Alterações

• 2025-05-12: Atualizada a API do Figma para suportar parâmetros adicionais, incluindo escala de imagem 2x.

Implementação Técnica

Este projeto é construído com as seguintes bibliotecas:

• probe-image-size - Para detecção de dimensões de imagens
• tinify - Para compressão de imagens via API TinyPNG
• figma-api - Para buscar links de imagens da API do Figma

Variáveis de Ambiente

• TINIFY_API_KEY - Necessária para a funcionalidade de compressão de imagens. Obtenha sua chave de API em TinyPNG
  • Quando não fornecida, as ferramentas de compressão (compress_image_from_url e compress_local_image) não serão registradas
• FIGMA_API_TOKEN - Necessária para buscar links de imagens da API do Figma. Obtenha seu token de API em Figma
  • Quando não fornecida, a ferramenta Figma (figma) não será registrada

Nota: As ferramentas básicas de dimensões de imagens (get_image_size e get_local_image_size) estão sempre disponíveis, independentemente das chaves de API.

Licença

MIT