MCP File Preview Server

Servidor de Pré-visualização de Arquivos MCP

Um servidor Model Context Protocol (MCP) que fornece capacidades de pré-visualização e análise de arquivos HTML. Este servidor permite capturar capturas de tela de página inteira de arquivos HTML locais e analisar sua estrutura.

Recursos

• Pré-visualização de Arquivos: Capture capturas de tela de página inteira de arquivos HTML com estilização CSS adequada
• Análise de Conteúdo: Analise a estrutura HTML (cabeçalhos, parágrafos, imagens, links)
• Suporte a Arquivos Locais: Lide com caminhos de arquivos locais e recursos
• Gerenciamento de Capturas de Tela: Salve capturas de tela em um diretório dedicado

Instalação

1. Clone o repositório:

git clone https://github.com/your-username/mcp-file-preview.git
cd mcp-file-preview

2. Instale as dependências:

npm install

3. Compile o projeto:

npm run build

Configuração

Adicione o servidor às configurações MCP do seu Claude ou Cline:

Aplicativo de Desktop Claude

Adicione a ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "file-preview": {
      "command": "node",
      "args": ["/path/to/mcp-file-preview/build/index.js"]
    }
  }
}

Extensão Cline VSCode

Adicione às configurações MCP do VSCode:

{
  "mcpServers": {
    "file-preview": {
      "command": "node",
      "args": ["/path/to/mcp-file-preview/build/index.js"]
    }
  }
}

Uso

O servidor fornece duas ferramentas principais:

preview_file

Captura uma captura de tela e retorna o conteúdo HTML:

<use_mcp_tool>
<server_name>file-preview</server_name>
<tool_name>preview_file</tool_name>
<arguments>
{
  "filePath": "/path/to/file.html",
  "width": 1024,  // optional
  "height": 768   // optional
}
</arguments>
</use_mcp_tool>

As capturas de tela são salvas no diretório screenshots/ na pasta do projeto.

analyze_content

Analisa a estrutura HTML:

<use_mcp_tool>
<server_name>file-preview</server_name>
<tool_name>analyze_content</tool_name>
<arguments>
{
  "filePath": "/path/to/file.html"
}
</arguments>
</use_mcp_tool>

Retorna contagens de:

• Cabeçalhos
• Parágrafos
• Imagens
• Links

Desenvolvimento

1. Instale as dependências:

npm install @modelcontextprotocol/sdk puppeteer typescript @types/node @types/puppeteer

2. Faça alterações em src/
3. Compile:

npm run build

4. Teste localmente:

npm run dev

Detalhes de Implementação

O servidor usa a classe Server do SDK MCP com inicialização adequada:

this.server = new Server(
  // Metadata object
  {
    name: 'file-preview-server',
    version: '0.1.0'
  },
  // Options object with capabilities
  {
    capabilities: {
      tools: {
        preview_file: {
          description: 'Preview local HTML file and capture screenshot',
          inputSchema: {
            // ... schema definition
          }
        }
      }
    }
  }
);

Pontos-chave:

• O construtor do Server recebe objetos separados de metadados e opções
• As ferramentas são declaradas em capabilities.tools
• Cada ferramenta precisa de uma descrição e inputSchema
• As capturas de tela são salvas em um diretório local screenshots/

Depuração

1. Use o MCP Inspector:

npx @modelcontextprotocol/inspector

2. Conecte-se com:

   • Tipo de Transporte: STDIO
   • Comando: node
   • Argumentos: /path/to/build/index.js

3. Verifique os logs do Claude OS se as ferramentas não aparecerem no menu suspenso

Contribuição

Por favor, leia CONTRIBUTING.md para detalhes sobre nosso código de conduta e o processo para enviar pull requests.

Licença

Este projeto é licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.